diff --git a/src/app/commands/help.tsx b/src/app/commands/help.tsx new file mode 100644 index 0000000..edc2cbb --- /dev/null +++ b/src/app/commands/help.tsx @@ -0,0 +1,16 @@ +const helpCommand = () => [ +
+ πŸ“– Help Menu: + +

+ πŸ’‘ Pro Tip: Use ↑ and ↓ to navigate through your command history. +

+
, +]; + +export default helpCommand; diff --git a/src/app/commands/selfhosted.tsx b/src/app/commands/selfhosted.tsx new file mode 100644 index 0000000..bbab8fd --- /dev/null +++ b/src/app/commands/selfhosted.tsx @@ -0,0 +1,39 @@ +import dynamic from "next/dynamic"; + +// Self-hosted Services +const SiDocker = dynamic(() => import("react-icons/si").then((mod) => mod.SiDocker), { ssr: false }); +const SiPlex = dynamic(() => import("react-icons/si").then((mod) => mod.SiPlex), { ssr: false }); +const SiProxmox = dynamic(() => import("react-icons/si").then((mod) => mod.SiProxmox), { ssr: false }); +const SiHomeassistant = dynamic(() => import("react-icons/si").then((mod) => mod.SiHomeassistant), { ssr: false }); +const SiPaperlessngx = dynamic(() => import("react-icons/si").then((mod) => mod.SiPaperlessngx), { ssr: false }); + +const selfhostedCommand= (showHeader = true) => [ +
+ {showHeader && ( + βš™οΈ SELF-HOSTED TOOLS + )} +
+ + Proxmox: Virtual machines and containers, all in one place. +
+
+ + Portainer: Orchestrating Docker containers effortlessly. +
+
+ + Plex: Streaming my curated media library. +
+
+ + Home Assistant: Automating everything smart at home. +
+
+ + Paperless-ngx: Turning paper piles into searchable archives. +
+ +
, +]; + +export default selfhostedCommand; diff --git a/src/app/commands/socials.tsx b/src/app/commands/socials.tsx new file mode 100644 index 0000000..7f5026c --- /dev/null +++ b/src/app/commands/socials.tsx @@ -0,0 +1,70 @@ +import dynamic from "next/dynamic"; + +// Dynamically import React Icons with client-side rendering +const FaYoutube = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaYoutube), { ssr: false }); +const FaBluesky = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaBluesky), { ssr: false }); +const FaDiscord = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaDiscord), { ssr: false }); +const FaGithub = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaGithub), { ssr: false }); +const FaReddit = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaReddit), { ssr: false }); + +const socialsCommand = (showHeader = true) => [ +
+ {showHeader && ( + πŸ“‘ Social Links: + )} +
+ + GitHub:{" "} + + Ronniie + +
+
+ + BlueSky:{" "} + + @ronniie.dev + +
+
+ + Discord: ronniie. +
+
+ + YouTube:{" "} + + @Zotechz + +
+
+ + Reddit:{" "} + + u/Zotechz + +
+
, +]; + +export default socialsCommand; diff --git a/src/app/commands/unknown.tsx b/src/app/commands/unknown.tsx new file mode 100644 index 0000000..36c3af3 --- /dev/null +++ b/src/app/commands/unknown.tsx @@ -0,0 +1,10 @@ +const unknownCommand = (input: string) => () => [ +
+ Unknown command: {input} +
, +
+ Type help to see available commands. +
, +]; + +export default unknownCommand; diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index d3161c1..1ae922e 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,22 +1,12 @@ "use client"; import { useState, useRef, useEffect } from "react"; -import dynamic from "next/dynamic"; - +import helpCommand from "../app/commands/help"; +import socialsCommand from "../app/commands/socials"; +import selfhostedCommand from "../app/commands/selfhosted" +import exitCommand from "../app/commands/exit"; +import unknownCommand from "../app/commands/unknown"; // Dynamically import React Icons with client-side rendering -const FaYoutube = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaYoutube), { ssr: false }); -const FaBluesky = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaBluesky), { ssr: false }); -const FaDiscord = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaDiscord), { ssr: false }); -const FaGithub = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaGithub), { ssr: false }); -const FaReddit = dynamic(() => import("react-icons/fa6").then((mod) => mod.FaReddit), { ssr: false }); - -// Self-hosted Services -const SiDocker = dynamic(() => import("react-icons/si").then((mod) => mod.SiDocker), { ssr: false }); -const SiPlex = dynamic(() => import("react-icons/si").then((mod) => mod.SiPlex), { ssr: false }); -const SiProxmox = dynamic(() => import("react-icons/si").then((mod) => mod.SiProxmox), { ssr: false }); -const SiHomeassistant = dynamic(() => import("react-icons/si").then((mod) => mod.SiHomeassistant), { ssr: false }); -const SiPaperlessngx = dynamic(() => import("react-icons/si").then((mod) => mod.SiPaperlessngx), { ssr: false }); - const Terminal: React.FC = () => { const [input, setInput] = useState(""); @@ -30,96 +20,38 @@ const Terminal: React.FC = () => { const handleInput = (e: React.FormEvent) => { e.preventDefault(); - if (input.trim() === "") return; + // If the input is empty, add a blank line and return + if (input.trim() === "") { + setOutput((prev) => [ + ...prev, +
 
, // Blank line + ]); + setInput(""); // Clear the input field + return; + } - const commands: { [key: string]: JSX.Element[] } = { - help: [ -
- πŸ“– Help Menu: - -

- πŸ’‘ Pro Tip: Use ↑ and ↓ to navigate through your command history. -

-
, - ], - socials: [ -
- πŸ“‘ Social Links: -
- - GitHub:{" "} - - Ronniie - -
- -
- - BlueSky:{" "} - - @ronniie.dev - -
-
- - Discord:{" "} - ronniie. -
- -
- - YouTube:{" "} - - @Zotechz - -
-
- - Reddit:{" "} - - u/Zotechz - -
-
, - ], + const normalizedInput = input.toLowerCase(); + const commands: { [key: string]: () => JSX.Element[] } = { + help: helpCommand, + socials: socialsCommand, + exit: exitCommand, + selfhosted: selfhostedCommand, }; - const commandOutput = commands[input] || [ -
- Unknown command: {input} -
, - ]; + const commandOutput = + commands[normalizedInput] || unknownCommand(normalizedInput); - setOutput((prev) => [...prev,
$ {input}
, ...commandOutput]); + setOutput((prev) => [ + ...prev, +
$ {input}
, + ...commandOutput(), + ]); setHistory((prev) => [...prev, input]); - setHistoryIndex(null); // Reset the history index + setHistoryIndex(null); setInput(""); }; + const handleKeyDown = (e: React.KeyboardEvent) => { if (history.length === 0) return; @@ -152,14 +84,6 @@ const Terminal: React.FC = () => { } }; - const handleClick = () => { - const selection = window.getSelection(); - if (selection && selection.toString()) { - return; - } - inputRef.current?.focus(); - }; - useEffect(() => { terminalEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [output]); @@ -167,7 +91,7 @@ const Terminal: React.FC = () => { return (
inputRef.current?.focus()} >
{output.map((line, index) => ( @@ -176,7 +100,6 @@ const Terminal: React.FC = () => {
))}
-
$ { }; -const MOTD = () => ( - <> -
- {` _____ _ _ _ `} - {`\n | __ \\ (_|_) | | `} - {`\n | |__) |___ _ __ _ __ _ _ ___ __| | _____ __`} - {`\n | _ // _ \\| '_ \\| '_ \\| | |/ _ \\ / _\` |/ _ \\ \\ / /`} - {`\n | | \\ \\ (_) | | | | | | | | | __/| (_| | __/\\ V / `} - {`\n |_| \\_\\___/|_| |_|_| |_|_|_|\\___(_)__,_|\\___| \\_/ `} -
-
- Welcome to Ronnie's Development Terminal! -
+const MOTD = () => { + const socialsOutput = socialsCommand(false); + const selfHostedOutput = selfhostedCommand(false); -
- 🎩 ABOUT THE DEV -

- Hi! I'm Ronnieβ€”a developer passionate about blending code and design. -

-

- This site is my playground for testing and crafting innovative projects. -

-

- When I'm not tinkering here, I'm programming for NullDaily LLC, building - open-source tools to empower creators and developers. -

+ return ( -
- πŸ“‘ SOCIALS -
- - GitHub:{" "} - - Ronniie - -
+ <> +
+ {` _____ _ _ _ `} + {`\n | __ \\ (_|_) | | `} + {`\n | |__) |___ _ __ _ __ _ _ ___ __| | _____ __`} + {`\n | _ // _ \\| '_ \\| '_ \\| | |/ _ \\ / _\` |/ _ \\ \\ / /`} + {`\n | | \\ \\ (_) | | | | | | | | | __/| (_| | __/\\ V / `} + {`\n |_| \\_\\___/|_| |_|_| |_|_|_|\\___(_)__,_|\\___| \\_/ `} +
+
+ Welcome to Ronnie's Development Terminal! +
-
- - BlueSky:{" "} - - @ronniie.dev - -
-
- - Discord:{" "} - ronniie. -
+
+ 🎩 ABOUT THE DEV +

+ Hi! I'm Ronnieβ€”a developer passionate about blending code and design. +

+

+ This site is my playground for testing and crafting innovative projects. +

+

+ When I'm not tinkering here, I'm programming for NullDaily LLC, building + open-source tools to empower creators and developers. +

-
- - YouTube:{" "} - - @Zotechz - -
-
- - Reddit:{" "} - - u/Zotechz - -
+
+ πŸ“‘ SOCIALS +
+ {socialsOutput.map((line, index) => ( +
{line}
+ ))} +
-
- βš™οΈ SELF-HOSTED TOOLS -
- - Proxmox: Virtual machines and containers, all in one place. -
-
- - Portainer: Orchestrating Docker containers effortlessly. -
-
- - Plex: Streaming my curated media library. -
-
- - Home Assistant: Automating everything smart at home. -
-
- - Paperless-ngx: Turning paper piles into searchable archives. -
+
+ βš™οΈ SELF-HOSTED TOOLS +
+ {selfHostedOutput.map((line, index) => ( +
{line}
+ ))} +
-
-

- 🌟 "Code, automate, and create with purpose. This isn't just development; - it's an adventure." 🌟 -

+
+

+ 🌟 "Code, automate, and create with purpose. This isn't just development; + it's an adventure." 🌟 +

-
-
- Type 'help' to see what you can do. Let’s explore together! -
- -); +
+
+ Type 'help' to see what you can do. Let’s explore + together! +
+ + ); +} export default Terminal;