From 49a62df2368507598ff43f6d2bb77f7a7237eeff Mon Sep 17 00:00:00 2001 From: rhpidfyre Date: Mon, 3 Feb 2025 03:01:06 -0500 Subject: [PATCH] terminal prompt needs to be recyclable --- src/components/react/commands.ts | 21 +++++++++++ src/components/react/fs.ts | 31 +++++++++++----- src/components/react/shell.tsx | 45 ----------------------- src/components/react/shell/color.tsx | 15 ++++++++ src/components/react/shell/prompt.tsx | 10 ++++++ src/components/react/term_events.ts | 10 ++++++ src/components/react/terminal.ts | 10 ------ src/components/react/terminal.tsx | 33 +++++++++++++++++ src/components/terminal.astro | 0 src/components/terminal/motd.astro | 21 +++++++++++ src/layouts/Webpage.astro | 9 ----- src/pages/index.astro | 51 ++++----------------------- src/scss/fonts.scss | 10 ++++++ src/scss/terminal.scss | 29 +++++++++++++++ 14 files changed, 179 insertions(+), 116 deletions(-) create mode 100644 src/components/react/commands.ts delete mode 100644 src/components/react/shell.tsx create mode 100644 src/components/react/shell/color.tsx create mode 100644 src/components/react/shell/prompt.tsx create mode 100644 src/components/react/term_events.ts delete mode 100644 src/components/react/terminal.ts create mode 100644 src/components/react/terminal.tsx delete mode 100644 src/components/terminal.astro create mode 100644 src/components/terminal/motd.astro diff --git a/src/components/react/commands.ts b/src/components/react/commands.ts new file mode 100644 index 0000000..10bdea7 --- /dev/null +++ b/src/components/react/commands.ts @@ -0,0 +1,21 @@ +import { working_dir } from "./fs" + +function ls() { + +} + +function pwd() { + +} + +function cat() { + +} + +const commands = { + ["ls"]: ls, + ["pwd"]: pwd, + ["cat"]: cat, +} + +export { commands } \ No newline at end of file diff --git a/src/components/react/fs.ts b/src/components/react/fs.ts index fead9dc..af41466 100644 --- a/src/components/react/fs.ts +++ b/src/components/react/fs.ts @@ -1,17 +1,32 @@ +let working_dir = "user" + +const enum EntryType { + Directory, + File +} +type File = string +type Entry = { + readonly inner: T, + readonly type: EntryType +} +function Entry(inner: T): Entry { + const type = typeof inner == "object" ? EntryType.Directory : EntryType.File + return { inner: inner, type: type } +} + const user = { - ["about_me"]: {}, - ["services"]: {} + ["about_me.txt"]: Entry(""), + ["services.txt"]: Entry("") } const home = { - ["user"]: user + ["user"]: Entry(user) } const root = { - ["bin"]: {}, - ["home"]: {} + ["bin"]: Entry({}), + ["home"]: Entry(home) } - const fs = { - ["/"]: root + ["/"]: Entry(root) } -export { fs } \ No newline at end of file +export { fs, working_dir } \ No newline at end of file diff --git a/src/components/react/shell.tsx b/src/components/react/shell.tsx deleted file mode 100644 index 6b27fcf..0000000 --- a/src/components/react/shell.tsx +++ /dev/null @@ -1,45 +0,0 @@ -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 = user - const green_dir = {GetWorkingDir()} - return

{cyan_user}@host {green_dir}{"> "}

-} - -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
- - -
-} - -export default function Shell() { - const shell_prompt = ShellPrompt() - TermEvents() - ShellEvents() - - return shell_prompt -} \ No newline at end of file diff --git a/src/components/react/shell/color.tsx b/src/components/react/shell/color.tsx new file mode 100644 index 0000000..1f779c4 --- /dev/null +++ b/src/components/react/shell/color.tsx @@ -0,0 +1,15 @@ +const red = (s: string) => {s} +const green = (s: string) => {s} +const blue = (s: string) => {s} +const cyan = (s: string) => {s} + +export default function rgb(s: string, Ru8: number, Gu8: number, Bu8: number) { + return {s} +} + +export { + red, + green, + blue, + cyan +} \ No newline at end of file diff --git a/src/components/react/shell/prompt.tsx b/src/components/react/shell/prompt.tsx new file mode 100644 index 0000000..c2a2709 --- /dev/null +++ b/src/components/react/shell/prompt.tsx @@ -0,0 +1,10 @@ +import { working_dir } from "../fs" +import rgb, { cyan, green } from "./color" + +const GetWorkingDir = () => working_dir === "user" ? "~" : working_dir + +export default function Prompt() { + const user = cyan("user") + const dir = green(GetWorkingDir()) + return

{user}@host {dir}{"> "}

+} \ No newline at end of file diff --git a/src/components/react/term_events.ts b/src/components/react/term_events.ts new file mode 100644 index 0000000..324c6cd --- /dev/null +++ b/src/components/react/term_events.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() } + // }) + } +} \ No newline at end of file diff --git a/src/components/react/terminal.ts b/src/components/react/terminal.ts deleted file mode 100644 index 351c920..0000000 --- a/src/components/react/terminal.ts +++ /dev/null @@ -1,10 +0,0 @@ -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() } - }) - } -} \ No newline at end of file diff --git a/src/components/react/terminal.tsx b/src/components/react/terminal.tsx new file mode 100644 index 0000000..065754e --- /dev/null +++ b/src/components/react/terminal.tsx @@ -0,0 +1,33 @@ +import type { JSX } from "react/jsx-dev-runtime" +import { TermEvents } from "./term_events" +import { createRoot } from "react-dom/client" +import { useState } from "react" + +import Prompt from "./shell/prompt" + +const active_shell_prompt = ShellPrompt() + +function ShellEvents() { + const shell_input = document.querySelector("main") + if (shell_input) { + const [prompts, newPrompt] = useState([]) + shell_input.addEventListener("keydown", (keyboard_event) => { + if (keyboard_event.key == "Enter") { + + } + }) + } +} + +function ShellPrompt() { + return
+ + +
+} + +export default function Shell() { + TermEvents() + ShellEvents() + return active_shell_prompt +} \ No newline at end of file diff --git a/src/components/terminal.astro b/src/components/terminal.astro deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/terminal/motd.astro b/src/components/terminal/motd.astro new file mode 100644 index 0000000..3890daa --- /dev/null +++ b/src/components/terminal/motd.astro @@ -0,0 +1,21 @@ +--- +import { Links } from "../../ts/links" +--- + +

Welcome to rhpidfyre.io!

+
+

This is a personal website by rhpidfyre / Brandon.

+

You can find my services here or learn about me.

+
+

You can also contribute or view the source code of my website via the links:

+

{"<"}{Links.RepoGitea}{">."}

+

{"<"}{Links.RepoGithub}{">."}

+
+

You can get started with the command: help

+
+ \ No newline at end of file diff --git a/src/layouts/Webpage.astro b/src/layouts/Webpage.astro index 6a38fce..f5f1629 100644 --- a/src/layouts/Webpage.astro +++ b/src/layouts/Webpage.astro @@ -25,15 +25,7 @@ const {title} = Astro.props diff --git a/src/pages/index.astro b/src/pages/index.astro index d9b9114..1fed8a2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,64 +1,27 @@ --- import Webpage from '../layouts/Webpage.astro'; -import { Links } from '../ts/links'; -import Shell from '../components/react/shell'; +import Motd from '../components/terminal/motd.astro'; +import Terminal from '../components/react/terminal'; ---
-

Welcome to rhpidfyre.io!

-
-

This is a personal website by rhpidfyre / Brandon.

-

You can find my services here or learn about me.

-
-

You can also contribute or view the source code of my website via the links:

-

{"<"}{Links.RepoGitea}{">."}

-

{"<"}{Links.RepoGithub}{">."}

-
-

You can get started with the command: help

-
- - + +