[Feat] finished documentation

Author: mistricky

app/src/commands/cat.rs

@@ -4,6 +4,7 @@ use crate::vfs_data::{find_node, format_path, resolve_path, VfsKind};
 use micro_cli::Parser;
 use shell_parser::integration::{CommandInfo, ExecutableCommand};
 use wasm_bindgen_futures::spawn_local;
+use yew::html;
 
 #[derive(Parser, Debug, Default)]
 #[command(name = "cat", about = "Print file contents")]
@@ -50,7 +51,9 @@ async fn run_cat(cli: CatCommand, ctx: CommandContext) {
     let uri = format!("/data/{}", path.join("/"));
 
     match fetch_text_with_cache(&uri, &cache).await {
-        Ok(text) => ctx.terminal.push_text(text),
+        Ok(text) => ctx.terminal.push_component(html! {
+            <span class="whitespace-break-spaces">{text}</span>
+        }),
         Err(err) => ctx.terminal.push_error(format!("cat: {err}")),
     }
 }

app/src/commands/help.rs

@@ -1,6 +1,7 @@
 use crate::commands::CommandContext;
 use micro_cli::Parser;
 use shell_parser::integration::ExecutableCommand;
+use yew::html;
 
 #[derive(Parser, Debug, Default)]
 #[command(name = "help", about = "Print the given text to the console")]
@@ -9,7 +10,9 @@ pub struct HelpCommand;
 impl ExecutableCommand<CommandContext> for HelpCommand {
     fn run(&self, _args: &[String], ctx: &CommandContext) -> Result<(), String> {
         match ctx.terminal.help() {
-            Ok(help_message) => ctx.terminal.push_text(help_message),
+            Ok(help_message) => ctx.terminal.push_component(html! {
+                <span class="whitespace-break-spaces">{help_message}</span>
+            }),
             Err(err) => return Err(format!("Failed to get help message: {}", err)),
         };
 

app/src/components/markdown_renderer/code_block.rs

@@ -56,8 +56,8 @@ pub fn code_block(props: &CodeBlockProps) -> Html {
     };
 
     html! {
-        <pre class="my-4 overflow-x-auto rounded-lg bg-black/60 text-sm text-slate-100">
-            <code class={classes!(lang_class, "block", "font-mono", "leading-6")}>
+        <pre class="my-4 overflow-x-auto no-scrollbar rounded-lg bg-black/60 text-sm text-slate-100 border border-[0.5px] border-border bg-card shadow-[0_20px_60px_-25px_rgba(0,0,0,0.85)] backdrop-blur-xl ring-[0.5px] ring-border px-2 py-4">
+            <code class={classes!(lang_class, "block", "font-mono", "leading-6", "w-fit")}>
                 {
                     if let Some(lines) = &*highlighted_lines {
                         html! {

app/src/components/output_log.rs

@@ -36,8 +36,8 @@ fn render_line(idx: usize, line: &TermLine) -> Html {
     };
 
     html! {
-        <div class="leading-relaxed flex gap-2 w-full" key={idx.to_string()}>
-            <span class={classes!(text_class, "break-words", "whitespace-break-spaces", "w-full")}>{ content }</span>
+        <div class="output-log leading-relaxed flex gap-2 w-full" key={idx.to_string()}>
+            <span class={classes!(text_class, "break-words", "w-full")}>{ content }</span>
         </div>
     }
 }

app/src/components/typewriter.rs

@@ -124,11 +124,10 @@ pub fn typewriter(props: &TypewriterProps) -> Html {
         }
     });
 
-    let class = classes!("whitespace-pre-wrap", props.class.clone());
     let typed_html = Html::from_html_unchecked(AttrValue::from((*rendered_text).clone()));
 
     html! {
-        <span class={class}>
+        <span class={props.class.clone()}>
             { typed_html }
             <span ref={template_ref} style="display: none;" aria-hidden="true">
                 { props.content.clone() }

app/src/styles/global.css

@@ -38,6 +38,10 @@
     @apply text-xl;
     color: #dddddd;
   }
+
+  .output-log p {
+    @apply my-6;
+  }
 }
 
 @keyframes halo-drift {
@@ -63,6 +67,15 @@
   .halo-animate {
     animation: halo-drift 9s ease-in-out infinite;
   }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
 
 @layer components {

app/src/terminal.rs

@@ -6,7 +6,7 @@ use crate::terminal_state::{TerminalAction, TerminalState};
 use crate::types::{OutputKind, TermLine};
 use crate::vfs_data::{load_vfs, VfsNode};
 use gloo_timers::future::TimeoutFuture;
-use shell_parser::{with_cli, CliRunner, ScriptResult, ShellParseError};
+use shell_parser::{with_cli, CliRunner, CommandInvocation, ScriptResult, ShellParseError};
 use std::cell::RefCell;
 use std::ops::Deref;
 use std::rc::{Rc, Weak};
@@ -198,7 +198,23 @@ impl TerminalHandle {
     }
 
     pub fn execute_command(&self, input: &str) {
-        match self.run_script(input) {
+        let outcome = self.run_script(input);
+        self.handle_execution_result(outcome);
+    }
+
+    fn execute_invocations(&self, commands: Vec<CommandInvocation>) {
+        if commands.is_empty() {
+            return;
+        }
+        let result = self.run_parsed(&commands);
+        self.handle_execution_result(result);
+    }
+
+    fn handle_execution_result(
+        &self,
+        outcome: Result<ScriptResult, shell_parser::integration::ShellCliError>,
+    ) {
+        match outcome {
             Ok(ScriptResult::Completed) => {}
             Ok(ScriptResult::Paused {
                 delay_ms,
@@ -211,14 +227,14 @@ impl TerminalHandle {
         }
     }
 
-    fn schedule_resume(&self, delay_ms: u32, remainder: String) {
+    fn schedule_resume(&self, delay_ms: u32, remainder: Vec<CommandInvocation>) {
+        if remainder.is_empty() {
+            return;
+        }
         let terminal = self.clone();
         spawn_local(async move {
             TimeoutFuture::new(delay_ms).await;
-            if remainder.trim().is_empty() {
-                return;
-            }
-            terminal.execute_command(&remainder);
+            terminal.execute_invocations(remainder);
         });
     }
 
@@ -229,6 +245,13 @@ impl TerminalHandle {
         self.runner_else()?.run_script(input)
     }
 
+    fn run_parsed(
+        &self,
+        invocations: &[CommandInvocation],
+    ) -> Result<ScriptResult, shell_parser::integration::ShellCliError> {
+        self.runner_else()?.run_invocations(invocations)
+    }
+
     pub fn to_terminal(&self) -> Option<Terminal> {
         self.runner().map(|runner| Terminal {
             handle: self.clone(),

app/src/vfs.json

@@ -4,16 +4,16 @@
   "kind": "directory",
   "extension": null,
   "size": null,
-  "modified": "2025-12-16T09:50:02.889432225Z",
-  "children_count": 16,
+  "modified": "2025-12-16T11:32:55.863207394Z",
+  "children_count": 18,
   "children": [
     {
       "name": ".shrc",
       "path": ".shrc",
       "kind": "file",
       "extension": null,
-      "size": 119,
-      "modified": "2025-12-16T09:50:02.888989992Z",
+      "size": 400,
+      "modified": "2025-12-16T11:32:55.853454078Z",
       "children_count": null,
       "children": null,
       "title": null,
@@ -38,8 +38,34 @@
       "path": "02_help.md",
       "kind": "file",
       "extension": "md",
-      "size": 676,
-      "modified": "2025-12-16T09:47:15.486857339Z",
+      "size": 1417,
+      "modified": "2025-12-16T10:44:55.065899617Z",
+      "children_count": null,
+      "children": null,
+      "title": null,
+      "description": null,
+      "is_post": false
+    },
+    {
+      "name": "03_design.md",
+      "path": "03_design.md",
+      "kind": "file",
+      "extension": "md",
+      "size": 1304,
+      "modified": "2025-12-16T11:25:01.827224659Z",
+      "children_count": null,
+      "children": null,
+      "title": null,
+      "description": null,
+      "is_post": false
+    },
+    {
+      "name": "04_configuration.md",
+      "path": "04_configuration.md",
+      "kind": "file",
+      "extension": "md",
+      "size": 1087,
+      "modified": "2025-12-16T11:30:32.297212623Z",
       "children_count": null,
       "children": null,
       "title": null,

data/.shrc

@@ -1,6 +1,23 @@
 function echo_with_next_prompt() {
   builtin echo "$@"
+  sleep 1000
   render -t -r 02_help.md
 }
 
 alias echo="echo_with_next_prompt"
+
+function help_with_next_prompt() {
+  builtin help
+  sleep 1000
+  render -t -r 03_design.md
+}
+
+alias help="help_with_next_prompt"
+
+function cat_with_next_prompt() {
+  builtin cat "$@"
+  sleep 1000
+  render -t -r 04_configuration.md
+}
+
+alias cat="cat_with_next_prompt"

data/02_help.md

@@ -2,17 +2,36 @@ You just saw Hello world printed on the screen.
 Feels familiar, doesn’t it?
 
 It may look like a regular shell command, but this command is actually running inside zzhack.
-Every command you type is mapped to an implementation under app/src/commands.
+Every command you type is mapped to an implementation under `app/src/commands`.
 
 If a command implements the ExecutableCommand trait, zzhack knows how to execute it.
-Here’s a simplified version of how echo is implemented:
+Here’s a simplified version of how `echo` is implemented:
 
-xxxxxx
+[app/src/commands/echo.rs](https://github.com/mistricky/zzhack/blob/main/app/src/commands/echo.rs)
+```rust
+#[derive(Parser, Debug, Default)]
+#[command(name = "echo", about = "Print the given text to the console")]
+pub struct EchoCommand {
+    #[arg(positional, help = "Text to echo")]
+    message: Vec<String>,
+}
 
+impl ExecutableCommand<CommandContext> for EchoCommand {
+    fn run(&self, args: &[String], ctx: &CommandContext) -> Result<(), String> {
+        let Some(cli) = parse_cli::<EchoCommand>(args, ctx, self.command_name()) else {
+            return Ok(());
+        };
+        let msg = cli.message.join(" ");
 
-zzhack isn’t trying to be a full shell.
-The parser is intentionally minimal—and that’s a feature, not a limitation.
-For a terminal-style personal website, it’s more than enough.
+        console::log_1(&msg.clone().into());
+        ctx.terminal.push_text(msg);
+        Ok(())
+    }
+}
+```
+
+
+Notice that zzhack isn’t trying to be a full shell, the parser is intentionally minimal—and that’s a feature, not a limitation.but for a terminal-style personal website, it’s more than enough.
 
 Curious what else you can run?