Compare commits
2 Commits
f5f335ff33
...
390ff9bccf
Author | SHA1 | Date | |
---|---|---|---|
390ff9bccf | |||
f0a9566c24 |
@ -6,7 +6,7 @@ import { Links } from '../ts/links';
|
|||||||
<header>
|
<header>
|
||||||
<Button href={Links.Self} display="[rhpidfyre.io]" color="black"/>
|
<Button href={Links.Self} display="[rhpidfyre.io]" color="black"/>
|
||||||
<section>
|
<section>
|
||||||
<Button href={Links.Git} display="REPOS"/>
|
<Button href={Links.Git} display="GIT"/>
|
||||||
<Button href={Links.Cloud} display="CLOUD"/>
|
<Button href={Links.Cloud} display="CLOUD"/>
|
||||||
<Button href={Links.Gsm} display="GSM"/>
|
<Button href={Links.Gsm} display="GSM"/>
|
||||||
</section>
|
</section>
|
||||||
|
17
src/components/react/fs.ts
Normal file
17
src/components/react/fs.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const user = {
|
||||||
|
["about_me"]: {},
|
||||||
|
["services"]: {}
|
||||||
|
}
|
||||||
|
const home = {
|
||||||
|
["user"]: user
|
||||||
|
}
|
||||||
|
const root = {
|
||||||
|
["bin"]: {},
|
||||||
|
["home"]: {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fs = {
|
||||||
|
["/"]: root
|
||||||
|
}
|
||||||
|
|
||||||
|
export { fs }
|
45
src/components/react/shell.tsx
Normal file
45
src/components/react/shell.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { TermEvents } from "./terminal"
|
||||||
|
|
||||||
|
let working_fs_dir = "user"
|
||||||
|
function GetWorkingDir(): string {
|
||||||
|
if (working_fs_dir === "user") {
|
||||||
|
return "~"
|
||||||
|
}
|
||||||
|
return working_fs_dir
|
||||||
|
}
|
||||||
|
|
||||||
|
function ls() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function Prompt() {
|
||||||
|
const cyan_user = <span className="cyan">user</span>
|
||||||
|
const green_dir = <span className="green">{GetWorkingDir()}</span>
|
||||||
|
return <p>{cyan_user}@host {green_dir}{"> "}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
function ShellEvents() {
|
||||||
|
const shell_input = document.getElementById("shell-input")
|
||||||
|
if (shell_input) {
|
||||||
|
shell_input.addEventListener("keydown", (keyboard_event) => {
|
||||||
|
if (keyboard_event.key === "Enter") {
|
||||||
|
console.log("woah its the enter key")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function ShellPrompt() {
|
||||||
|
return <div className="shell-prompt">
|
||||||
|
<Prompt/>
|
||||||
|
<input id="shell-input" type="text" spellCheck={false}/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Shell() {
|
||||||
|
const shell_prompt = ShellPrompt()
|
||||||
|
TermEvents()
|
||||||
|
ShellEvents()
|
||||||
|
|
||||||
|
return shell_prompt
|
||||||
|
}
|
10
src/components/react/terminal.ts
Normal file
10
src/components/react/terminal.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const terminal_window = document.querySelector("main");
|
||||||
|
|
||||||
|
export function TermEvents() {
|
||||||
|
if (terminal_window) {
|
||||||
|
terminal_window.addEventListener("click", (_event) => {
|
||||||
|
const shell_input = document.getElementById("shell-input")
|
||||||
|
if (shell_input) { shell_input.focus() }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
@ -32,6 +32,7 @@ const {title} = Astro.props
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
|
text-wrap: nowrap;
|
||||||
}
|
}
|
||||||
:root {
|
:root {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
import Webpage from '../layouts/Webpage.astro';
|
import Webpage from '../layouts/Webpage.astro';
|
||||||
import { Links } from '../ts/links';
|
import { Links } from '../ts/links';
|
||||||
|
import Shell from '../components/react/shell';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Webpage title="Home">
|
<Webpage title="Home">
|
||||||
@ -22,19 +23,23 @@ import { Links } from '../ts/links';
|
|||||||
<p><span class="red">But, you will not be limited at exploring my services which you can find by navigating towards the top-right.</span></p>
|
<p><span class="red">But, you will not be limited at exploring my services which you can find by navigating towards the top-right.</span></p>
|
||||||
<p><span class="red">=================================================</span></p>
|
<p><span class="red">=================================================</span></p>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
<Shell client:only/>
|
||||||
</main>
|
</main>
|
||||||
</Webpage>
|
</Webpage>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" is:global>
|
||||||
@use "../scss/variables";
|
@use "../scss/variables";
|
||||||
|
|
||||||
@mixin text-styles {
|
@mixin text-styles {
|
||||||
.red { color: rgb(200,0,0); }
|
.red { color: rgb(200, 0, 0); }
|
||||||
.green { color: rgb(0,200,0); }
|
.green { color: rgb(0, 200, 0); }
|
||||||
.blue { color: rgb(0,0,200); }
|
.blue { color: rgb(0, 0, 200); }
|
||||||
|
.cyan { color: rgb(18,167,148); }
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(main) {
|
.shell-prompt { display: flex; }
|
||||||
|
|
||||||
|
main {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
|
height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
@ -49,9 +54,19 @@ import { Links } from '../ts/links';
|
|||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
&:hover { text-decoration: underline; }
|
&:hover { text-decoration: underline; }
|
||||||
}
|
}
|
||||||
|
span { font-size: inherit }
|
||||||
}
|
}
|
||||||
.return {
|
.return {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
input {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
width: 90%;
|
||||||
|
/* Pester me when this gets undrafted */
|
||||||
|
caret-shape: block;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Reference in New Issue
Block a user