react html parser

soohoonc · May 8, 2024 · 2b0dce1 · 2b0dce1
1 parent 831b3cb
commit 2b0dce1
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 41 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "html-react-parser": "^5.1.10",
     "lucide-react": "^0.263.0",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang='en'>
+    <html lang='en' suppressHydrationWarning>
       <body className={inter.className}>
         <main className={inter.className}>
           <ThemeProvider attribute='class' defaultTheme='system' enableSystem>

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -3,13 +3,14 @@
 import * as React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { type ThemeProviderProps } from 'next-themes/dist/types';
+import parse from 'html-react-parser';
 import { getShell, type Shell } from '@/lib/fs';
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
 type ShellContext = {
-  execute: (command: string) => string | null;
+  execute: (command: string) => React.ReactNode | null;
   prompt: string;
 };
 
@@ -32,6 +33,7 @@ export function useShell() {
 }
 
 export function ShellProvider({ children }: { children: React.ReactNode }) {
+  console.log('Welcome to my website!')
   const [shell, setShell] = React.useState<Shell>(initialShell);
   const [prompt, setPrompt] = React.useState<string>('');
   const execute = (command: string) => {
@@ -40,9 +42,8 @@ export function ShellProvider({ children }: { children: React.ReactNode }) {
       return;
     }
     const result = JSON.parse(shell.run(command));
-    console.log(result)
     setPrompt(`${result.user}@${result.host} ${result.path} $`);
-    return result.result;
+    return parse(result.result) as React.ReactNode | null; 
   }
   React.useEffect(() => {
     async function init() {
@@ -65,7 +66,7 @@ export function ShellProvider({ children }: { children: React.ReactNode }) {
 
 type TerminalState = {
   showWelcome: boolean;
-  setShowWelcome: (showWelcome: boolean) => void;
+  setShowWelcome: React.Dispatch<React.SetStateAction<boolean>>;
   inputs: string[];
   setInputs: (inputs: string[]) => void;
   outputs: Message[];

diff --git a/src/components/terminal-input.tsx b/src/components/terminal-input.tsx
@@ -29,9 +29,10 @@ export const TerminalInput = React.forwardRef(({}, ref) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       const output = execute(input);
-      if (!output) setShowWelcome(false);
-      setInputs(output ? [...inputs, `${prompt} ${input}`] : []);
-      setOutputs(output ? [...outputs, output] : []);
+      const shouldClear = Array.isArray(output) && output.length === 0;
+      setShowWelcome((prev) => prev && !shouldClear);
+      setInputs(!shouldClear ? [...inputs, `${prompt} ${input}`] : []);
+      setOutputs(!shouldClear ? [...outputs, output] : []);
       setInputIndex(inputsLength);
       setInput('');
       setInputText('');

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -70,7 +70,7 @@
   }
 
   .link {
-    color: rgb(129 140 248);
+    color:#10b981
   }
 }
 

diff --git a/src/types/shell.d.ts b/src/types/shell.d.ts
@@ -1 +1 @@
-type Message = React.ReactElement | string;
+type Message = React.ReactNode;
diff --git a/src/wasm/src/shell/exec.rs b/src/wasm/src/shell/exec.rs
@@ -112,12 +112,14 @@ impl Exec {
 
     pub fn execute(&mut self, input: Statement) -> String {
         match &input.command[..] {
+          "" => " ".to_owned(),
+          "github" => "<a href=\"https://github.com/soohoonc/\" target=\"_blank\">github</a>".to_owned(),
           "hello" => Self::hello(),
+          "help" => "<p className=\"text-emerald-500\">\nhelp command\n</p>".to_owned(),
+          "license" => "license command".to_owned(),
           "ls" => Self::ls(self, input.options),
           "pwd" => Self::pwd(),
           "cd" => Self::cd("".into()),
-          "whoami" => "root".to_owned(),
-          "exit" => "Goodbye!".to_owned(),
           "clear" => "".to_owned(),
           "echo" => "echo command".to_owned(),
           "cat" => "cat command".to_owned(),
@@ -127,36 +129,32 @@ impl Exec {
           "rmdir" => "rmdir command".to_owned(),
           "mv" => "mv command".to_owned(),
           "cp" => "cp command".to_owned(),
-          "help" => "help command".to_owned(),
-          "license" => "license command".to_owned(),
-          "alias" => "alias command".to_owned(),
-          "env" => "env command".to_owned(),
-          "grep" => "grep command".to_owned(),
-          "find" => "find command".to_owned(),
-          "export" => "export command".to_owned(),
-          "wc" => "wc command".to_owned(),
-          "nano" => "nano command".to_owned(),
-          "vi" => "vi command".to_owned(),
-          "vim" => "vim command".to_owned(),
-          "emacs" => "emacs command".to_owned(),
-          "sed" => "sed command".to_owned(),
-          "chmod" => "chmod command".to_owned(),
-          "chown" => "chown command".to_owned(),
-          "chgrp" => "chgrp command".to_owned(),
-          "useradd" => "useradd command".to_owned(),
-          "userdel" => "userdel command".to_owned(),
-          "passwd" => "passwd command".to_owned(),
-          "su" => "su command".to_owned(),
-          "sudo" => "sudo command".to_owned(),
-          "ln" => "ln command".to_owned(),
-          "who" => "who command".to_owned(),
-          "whatis" => "whatis command".to_owned(),
-          "whereis" => "whereis command".to_owned(),
-          "top" => "top command".to_owned(),
+          "exit" => "Goodbye!".to_owned(),
+          "whoami" => "root".to_owned(),
           "which" => "which command".to_owned(),
-          "ps" => "ps command".to_owned(),
-          "man" => "man command".to_owned(),
-          "" => " ".to_owned(),
+          // "alias" => "alias command".to_owned(),
+          // "env" => "env command".to_owned(),
+          // "grep" => "grep command".to_owned(),
+          // "find" => "find command".to_owned(),
+          // "export" => "export command".to_owned(),
+          // "wc" => "wc command".to_owned(),
+          // "nano" => "nano command".to_owned(),
+          // "vi" => "vi command".to_owned(),
+          // "vim" => "vim command".to_owned(),
+          // "emacs" => "emacs command".to_owned(),
+          // "sed" => "sed command".to_owned(),
+          // "chmod" => "chmod command".to_owned(),
+          // "chown" => "chown command".to_owned(),
+          // "chgrp" => "chgrp command".to_owned(),
+          // "useradd" => "useradd command".to_owned(),
+          // "userdel" => "userdel command".to_owned(),
+          // "passwd" => "passwd command".to_owned(),
+          // "su" => "su command".to_owned(),
+          // "sudo" => "sudo command".to_owned(),
+          // "ln" => "ln command".to_owned(),
+          // "who" => "who command".to_owned(),
+          // "top" => "top command".to_owned(),
+          // "man" => "man command".to_owned(),
           command => (command.to_owned() + ": command not found").to_owned(),
         }
     }