javascript time 😮‍💨

src/components/header.astro

@@ -6,7 +6,7 @@ import { Links } from '../ts/links';
 <header>
 	<Button href={Links.Self} display="[rhpidfyre.io]" color="black"/>
 	<section>
-		<Button href={Links.Git} display="REPOS"/>
+		<Button href={Links.Git} display="GIT"/>
 		<Button href={Links.Cloud} display="CLOUD"/>
 		<Button href={Links.Gsm} display="GSM"/>
 	</section>

src/components/react/fs.ts

@@ -0,0 +1,17 @@
+const user = {
+	["about_me"]: {},
+	["services"]: {}
+}
+const home = {
+	["user"]: user
+}
+const root = {
+	["bin"]: {},
+	["home"]: {}
+}
+
+const fs = {
+	["/"]: root
+}
+
+export { fs }

src/components/react/shell.tsx

@@ -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
+}

src/components/react/terminal.ts

@@ -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() }
+		})
+	}
+}

src/layouts/Webpage.astro

@@ -32,6 +32,7 @@ const {title} = Astro.props
 		font-size: 15px;
 		letter-spacing: 2px;
 		cursor: text;
+		text-wrap: nowrap;
 	}
 	:root {
 		color-scheme: dark;

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Webpage from '../layouts/Webpage.astro';
 import { Links } from '../ts/links';
+import Shell from '../components/react/shell';
 ---
 
 <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">=================================================</span></p>
 		</noscript>
+		<Shell client:only/>
 	</main>
 </Webpage>
 
-<style lang="scss">
+<style lang="scss" is:global>
 	@use "../scss/variables";
 
 	@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;
 		height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
 		padding: 5px;
@@ -49,9 +54,19 @@ import { Links } from '../ts/links';
 				font-size: inherit;
 				&:hover { text-decoration: underline; }
 			}
+			span { font-size: inherit }
 		}
 		.return {
 			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>