From b2824ad4825e25d0238dc7114261d59bde43e18c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 11 Sep 2026 02:43:27 +0000 Subject: [PATCH] Add theme-aware diagram explaining terminal command anatomy Adds a light/dark SVG pair illustrating the four-stage flow of a terminal command (prompt, command, Enter, output) and how cd loops back to update the next prompt. Inserts a minimal theme-aware reference in the terminal basics side quest right after the prose that introduces prompt/command/output terminology. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../side-quest-01-01-command-anatomy-dark.svg | 77 +++++++++++++++++++ ...side-quest-01-01-command-anatomy-light.svg | 77 +++++++++++++++++++ workshop/side-quest-01-01-terminal-basics.md | 6 ++ 3 files changed, 160 insertions(+) create mode 100644 workshop/images/side-quest-01-01-command-anatomy-dark.svg create mode 100644 workshop/images/side-quest-01-01-command-anatomy-light.svg diff --git a/workshop/images/side-quest-01-01-command-anatomy-dark.svg b/workshop/images/side-quest-01-01-command-anatomy-dark.svg new file mode 100644 index 00000000..2ec4b15d --- /dev/null +++ b/workshop/images/side-quest-01-01-command-anatomy-dark.svg @@ -0,0 +1,77 @@ + + + + Anatomy of a Terminal Command + Left to right: 1. read the prompt, 2. type a command, 3. press Enter, 4. read the output + + + + + 1 + + Prompt + + ~/project $ + Shows your + current directory + + + + + + you type + + + + + 2 + + Command + + pwd + The instruction + you want to run + + + + + + press Enter + + + + + 3 + + Terminal Runs It + + ↵ Enter + The shell executes + your command + + + + + + prints result + + + + + 4 + + Output + + /Users/alice/project + What the terminal + prints back + + + + + + + cd updates the next prompt + + The prompt always reflects your current directory, so navigating with cd changes what you see next. + diff --git a/workshop/images/side-quest-01-01-command-anatomy-light.svg b/workshop/images/side-quest-01-01-command-anatomy-light.svg new file mode 100644 index 00000000..17d16798 --- /dev/null +++ b/workshop/images/side-quest-01-01-command-anatomy-light.svg @@ -0,0 +1,77 @@ + + + + Anatomy of a Terminal Command + Left to right: 1. read the prompt, 2. type a command, 3. press Enter, 4. read the output + + + + + 1 + + Prompt + + ~/project $ + Shows your + current directory + + + + + + you type + + + + + 2 + + Command + + pwd + The instruction + you want to run + + + + + + press Enter + + + + + 3 + + Terminal Runs It + + ↵ Enter + The shell executes + your command + + + + + + prints result + + + + + 4 + + Output + + /Users/alice/project + What the terminal + prints back + + + + + + + cd updates the next prompt + + The prompt always reflects your current directory, so navigating with cd changes what you see next. + diff --git a/workshop/side-quest-01-01-terminal-basics.md b/workshop/side-quest-01-01-terminal-basics.md index fb875c77..da97bdb5 100644 --- a/workshop/side-quest-01-01-terminal-basics.md +++ b/workshop/side-quest-01-01-terminal-basics.md @@ -20,6 +20,12 @@ The **prompt** is a short line of text ending in `$`, `%`, or `>`. When you see it, the terminal is ready for your **command**. Whatever the terminal prints back is the **output**. + + + + Diagram showing the anatomy of a terminal command: prompt, command, Enter, and output, with cd looping back to update the next prompt + + --- ## Practice 1: Confirm your terminal works