the prompt now works properly

bun.lock

@@ -7,7 +7,7 @@
         "@astrojs/react": "^4.2.0",
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.3",
-        "astro": "^5.2.3",
+        "astro": "^5.2.5",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "sass": "^1.83.4",

src/components/react/shell/events.tsx

@@ -11,25 +11,34 @@ const enum Key {
 	Tab       = "Tab"
 }
 
-function DisplayPrompt() {
+function display_prompt() {
 	return <>
 		<Display/>
 		<input className="shell-ps1" type="text" spellCheck={false}/>
 	</>
 }
 
-function Prompt([existingPrompts, setPrompt]: [JSX.Element[], SetStateAction<JSX.Element[]>]) {
+function get_current_prompt(): HTMLInputElement | undefined {
-	const shell_prompts = document.getElementsByClassName("shell-ps1")
+	const shell_input = document.getElementsByClassName("shell-ps1")
-	Array.from(shell_prompts).forEach((shellps1) => {
+	return shell_input[shell_input.length-1] as HTMLInputElement
-		(shellps1 as HTMLInputElement).disabled = true
-	})
-	setPrompt([...existingPrompts, DisplayPrompt()])
 }
 
-function keyboard_stream(terminal_window: HTMLElement, existingPrompts: JSX.Element[], setPrompt: SetStateAction<JSX.Element[]>) {
+function new_prompt([existingPrompts, setPrompt]: [JSX.Element[], SetStateAction<JSX.Element[]>]) {
-	terminal_window.addEventListener("keydown", keyboard_event => {
+	const shell_prompts = document.getElementsByClassName("shell-ps1")
+	Array.from(shell_prompts).forEach(shellps1 => {
+		(shellps1 as HTMLInputElement).disabled = true
+	})
+	setPrompt([...existingPrompts, display_prompt()])
+}
+
+function keyboard_event(terminal: HTMLElement, existingPrompts: JSX.Element[], setPrompt: SetStateAction<JSX.Element[]>) {
+	const terminal_event = (keyboard_event: KeyboardEvent) => {
 		if (keyboard_event.key === Key.Enter) {
-			Prompt([existingPrompts, setPrompt])
+			const current_prompt = get_current_prompt()
+			if (current_prompt) {
+				new_prompt([existingPrompts, setPrompt])
+				terminal.removeEventListener("keydown", terminal_event)
+			}
 		} else if (keyboard_event.key === Key.ArrowUp) {
 
 		} else if (keyboard_event.key === Key.ArrowDown) {
@@ -37,18 +46,11 @@ function keyboard_stream(terminal_window: HTMLElement, existingPrompts: JSX.Elem
 		} else if (keyboard_event.key === Key.Tab) {
 
 		}
-	})
+	}
+	terminal.addEventListener("keydown", terminal_event)
 }
 
-function Events() {
+export {
-	const terminal_window = document.querySelector("main")
+	keyboard_event,
-	if (terminal_window) {
+	display_prompt
-		const [existingPrompts, setPrompt] = useState([DisplayPrompt()])
-
-		keyboard_stream(terminal_window, existingPrompts, setPrompt)
-		return existingPrompts
 }
-	return
-}
-
-export default Events

src/components/react/shell/prompt.tsx

@@ -3,7 +3,11 @@ import { cyan, green } from "./color"
 
 const userAgent = navigator.userAgent
 const browser_name_fallible = userAgent.match(/Firefox.\d+[\d.\d]+|Chrome.\d+[\d.\d]+/gm)?.map(f => f.split("/")[0])
-const browser_name = browser_name_fallible ? browser_name_fallible[0].toLowerCase() : "unknown"
+
+let browser_name = "unknown"
+if (browser_name_fallible) {
+	browser_name = browser_name_fallible[0] === "Firefox" ? "gecko" : "chromium"
+}
 
 function GetWorkingDir() {
 	return working_dir === "user" ? "~" : working_dir

src/components/react/terminal/events.ts

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

src/components/react/terminal/exec.tsx

@@ -1,9 +1,11 @@
-import { TermEvents } from "./events"
+import { useState } from "react"
 import { red } from "../shell/color"
 
-import Events from "../shell/events"
+import { display_prompt, keyboard_event } from "../shell/events"
 
-function Panic(message: string) {
+const terminal_window = document.querySelector("main")
+
+function panic(message: string) {
 	return <>
 		<p>{red("=================================================")}</p>
 		<p>{red("An unexpected JavaScript error occured:")}</p>
@@ -13,9 +15,13 @@ function Panic(message: string) {
 }
 
 export default function Shell() {
-	const existingPrompts = Events()
+	if (terminal_window) {
-	if (existingPrompts) {
+		const [existingPrompts, setPrompt] = useState([display_prompt()])
+		keyboard_event(terminal_window, existingPrompts, setPrompt)
+
 		return existingPrompts.map((ps1, k) => <div className="shell-prompt" key={k}>{ps1}</div>)
 	}
-	return Panic("The <main> element is missing")
+	return panic("The <main> element is missing")
 }
+
+export { panic }

src/layouts/Webpage.astro

@@ -2,11 +2,6 @@
 import Metas from "../components/metas.astro"
 import Header from "../components/header.astro"
 import Footer from "../components/footer.astro"
-
-interface Props {
-	title: string,
-}
-const {title} = Astro.props
 ---
 
 <!doctype html>
@@ -14,10 +9,10 @@ const {title} = Astro.props
 	<head>
 		<Metas/>
 		<link rel="icon" type="image/png" href="/logo.png"/>
-		<title>{`rhpidfyre.io | ${title}`}</title>
+		<title>rhpidfyre.io</title>
 	</head>
 	<body>
-		<Header title={title}/>
+		<Header/>
 		<slot/>
 		<Footer/>
 	</body>

src/pages/index.astro

@@ -4,7 +4,7 @@ import Motd from '../components/terminal/motd.astro';
 import Terminal from '../components/react/terminal/exec';
 ---
 
-<Webpage title="Home">
+<Webpage>
 	<main>
 		<Motd/>
 		<Terminal client:only/>