Switch to asciinema for showing terminal output

docs/README.md

@@ -67,20 +67,12 @@ start(word_count)
 
 </div>
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="img/help-dark.svg" width="100%">
-  <source media="(prefers-color-scheme: light)" srcset="img/help-light.svg" width="100%">
-  <img src="img/help-light.svg" width="100%">
-</picture>
+<div id="wc-help-cast"></div>
 
 When you invoke `start()`, it will construct an argparser (based on type hints and docstring),
 parse the arguments, and invoke `word_count`.
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="img/out-dark.svg" width="100%">
-  <source media="(prefers-color-scheme: light)" srcset="img/out-light.svg" width="100%">
-  <img src="img/out-light.svg" width="100%">
-</picture>
+<div id="wc-run-cast"></div>
 
 ### Multiple commands
 
@@ -151,11 +143,7 @@ if __name__ == "__main__":
 
 </div>
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="img/calc-help-dark.svg" width="100%">
-  <source media="(prefers-color-scheme: light)" srcset="img/calc-help-light.svg" width="100%">
-  <img src="img/calc-help-light.svg" width="100%">
-</picture>
+<div id="calc-cast"></div>
 
 In the invocation `python calc.py add 1 2 3`, first argument is `add`, which causes the execution
 to dispatch to the `add` command (i.e. `add()` function). The rest of the arguments (`1 2 3`) then
@@ -182,3 +170,36 @@ Thus, some decisions are done differently:
   See [example](https://github.com/oir/startle/blob/main/examples/search_gh.py).
 
 See all [examples](https://github.com/oir/startle/tree/main/examples).
+
+
+<script>
+AsciinemaPlayer.create('cast/wc-help.cast', document.getElementById('wc-help-cast'), {
+    autoPlay: true,
+    controls: true,
+    rows: 14,
+    terminalFontFamily: "'Fira Mono', monospace",
+    terminalFontSize: "12px",
+    fit: false,
+    theme: "custom-auto",
+});
+AsciinemaPlayer.create('cast/wc-run.cast', document.getElementById('wc-run-cast'), {
+    autoPlay: true,
+    controls: true,
+    rows: 3,
+    terminalFontFamily: "'Fira Mono', monospace",
+    terminalFontSize: "12px",
+    fit: false,
+    theme: "custom-auto",
+});
+AsciinemaPlayer.create('cast/calc.cast', document.getElementById('calc-cast'), {
+    autoPlay: true,
+    controls: true,
+    rows: 27,
+    terminalFontFamily: "'Fira Mono', monospace",
+    terminalFontSize: "12px",
+    fit: false,
+    theme: "custom-auto",
+});
+</script>
+
+

docs/cast/calc.cast

@@ -0,0 +1,90 @@
+{"version": 2, "width": 103, "height": 29, "timestamp": 1737159919, "env": {"SHELL": "/opt/homebrew/bin/fish", "TERM": "xterm-256color"}}
+[0.013869, "o", "\u001b[?1034h❯ "]
+[0.668946, "o", "p"]
+[0.820173, "o", "y"]
+[0.922059, "o", "t"]
+[1.058182, "o", "h"]
+[1.129963, "o", "o"]
+[1.405647, "o", "n"]
+[1.556353, "o", " "]
+[1.735376, "o", "c"]
+[1.889319, "o", "a"]
+[1.991355, "o", "l"]
+[2.150174, "o", "c"]
+[2.300283, "o", "."]
+[2.590856, "o", "p"]
+[2.701208, "o", "y"]
+[2.803898, "o", " "]
+[2.981829, "o", "-"]
+[3.147017, "o", "-"]
+[3.277685, "o", "h"]
+[3.542946, "o", "e"]
+[3.63982, "o", "l"]
+[3.756008, "o", "p"]
+[4.10986, "o", "\r\n"]
+[4.224144, "o", "\r\n\u001b[1;2;4mUsage:\u001b[0m\r\n  calc.py \u001b[34m<\u001b[0m\u001b[1;34mcommand\u001b[0m\u001b[34m>\u001b[0m \u001b[34m<command-specific-args>\u001b[0m\r\n\r\n"]
+[4.224213, "o", "\u001b[1;2;4mCommands:\u001b[0m\r\n"]
+[4.224769, "o", "  \u001b[1;34madd\u001b[0m  \u001b[3mAdd numbers together.          \u001b[0m\r\n  \u001b[1;34msub\u001b[0m  \u001b[3mSubtract a number from another.\u001b[0m\r\n  \u001b[1;34mmul\u001b[0m  \u001b[3mMultiply numbers together.     \u001b[0m\r\n  \u001b[1;34mdiv\u001b[0m  \u001b[3mDivide a number by another.    \u001b[0m\r\n"]
+[4.224919, "o", "\r\n\u001b[2mRun \u001b[0m`calc.py \u001b[34m<\u001b[0m\u001b[1;34mcommand\u001b[0m\u001b[34m>\u001b[0m \u001b[32m--help\u001b[0m`\u001b[2m to see all command-specific options.\u001b[0m\r\n\r\n"]
+[4.230684, "o", "❯ "]
+[6.819316, "o", "p"]
+[6.93983, "o", "y"]
+[7.074518, "o", "t"]
+[7.242047, "o", "h"]
+[7.319583, "o", "o"]
+[7.959526, "o", "n"]
+[8.167734, "o", " "]
+[8.433115, "o", "c"]
+[8.688911, "o", "a"]
+[8.813342, "o", "l"]
+[9.047134, "o", "c"]
+[9.243012, "o", "."]
+[9.622008, "o", "p"]
+[9.758488, "o", "y"]
+[10.045334, "o", " "]
+[10.198048, "o", "a"]
+[10.358129, "o", "d"]
+[10.509182, "o", "d"]
+[10.558721, "o", " "]
+[10.767377, "o", "-"]
+[10.933781, "o", "-"]
+[11.049203, "o", "h"]
+[11.290292, "o", "e"]
+[11.360393, "o", "l"]
+[11.48455, "o", "p"]
+[12.195642, "o", "\r\n"]
+[12.271952, "o", "\r\n"]
+[12.272962, "o", "Add numbers together.\r\n\r\n"]
+[12.273059, "o", "\u001b[1;2;4mUsage:\u001b[0m\r\n"]
+[12.273228, "o", "  calc.py add \u001b[1;32m--ns\u001b[0m \u001b[34m<int> \u001b[0m\u001b[2;34m[<int> ...]\u001b[0m\r\n"]
+[12.273319, "o", "\r\n\u001b[1;2;4mwhere\u001b[0m\r\n"]
+[12.274038, "o", "  \u001b[2m(pos. or opt.)\u001b[0m  \u001b[1;32m-n\u001b[0m\u001b[2;32m|\u001b[0m\u001b[1;32m--ns\u001b[0m \u001b[34m<int> \u001b[0m\u001b[2;34m[<int> ...]\u001b[0m  \u001b[3mThe numbers to add together.\u001b[0m \u001b[33m(required)\u001b[0m\r\n  \u001b[2m(option)\u001b[0m        \u001b[1;2;32m-?\u001b[0m\u001b[2;32m|\u001b[0m\u001b[1;2;32m--help\u001b[0m                  \u001b[2;3mShow this help message and exit.\u001b[0m       \r\n"]
+[12.27408, "o", "\r\n"]
+[12.280194, "o", "❯ "]
+[15.056855, "o", "p"]
+[15.160706, "o", "y"]
+[15.244054, "o", "t"]
+[15.38396, "o", "h"]
+[15.464513, "o", "o"]
+[15.817125, "o", "n"]
+[16.021096, "o", " "]
+[16.27053, "o", "c"]
+[16.433632, "o", "a"]
+[16.534901, "o", "l"]
+[16.781572, "o", "c"]
+[17.053596, "o", "."]
+[17.324615, "o", "p"]
+[17.484654, "o", "y"]
+[17.795883, "o", " "]
+[18.092705, "o", "a"]
+[18.259453, "o", "d"]
+[18.429625, "o", "d"]
+[18.586675, "o", " "]
+[19.072944, "o", "1"]
+[19.144394, "o", " "]
+[19.55845, "o", "2"]
+[19.688759, "o", " "]
+[19.967913, "o", "3"]
+[20.483991, "o", "\r\n"]
+[20.561547, "o", "1 + 2 + 3 = 6\r\n"]
+[20.567676, "o", "❯ "]

docs/cast/wc-help.cast

@@ -0,0 +1,30 @@
+{"version": 2, "width": 103, "height": 14, "timestamp": 1736996570, "env": {"SHELL": "/opt/homebrew/bin/fish", "TERM": "xterm-256color"}}
+[0.008129, "o", "\u001b[?1034h❯ "]
+[0.17932, "o", "p"]
+[0.265351, "o", "y"]
+[0.33662, "o", "t"]
+[0.474164, "o", "h"]
+[0.581413, "o", "o"]
+[1.194577, "o", "n"]
+[1.353635, "o", " "]
+[1.565276, "o", "w"]
+[1.901738, "o", "c"]
+[2.188464, "o", "."]
+[2.468456, "o", "p"]
+[2.611748, "o", "y"]
+[2.734552, "o", " "]
+[2.81756, "o", "-"]
+[2.970298, "o", "-"]
+[3.054137, "o", "h"]
+[3.262264, "o", "e"]
+[3.325159, "o", "l"]
+[3.452032, "o", "p"]
+[3.686244, "o", "\r\n"]
+[3.812158, "o", "\r\n"]
+[3.813147, "o", "Count the number of words or characters in a file.\r\n\r\n"]
+[3.813246, "o", "\u001b[1;2;4mUsage:\u001b[0m\r\n"]
+[3.813548, "o", "  wc.py \u001b[34m<\u001b[0m\u001b[1;34mfname:\u001b[0m\u001b[34mpath>\u001b[0m [\u001b[1;32m--kind\u001b[0m \u001b[34mword\u001b[0m\u001b[2;34m|\u001b[0m\u001b[34mchar\u001b[0m] [\u001b[1;32m--verbose\u001b[0m]\r\n"]
+[3.813641, "o", "\r\n\u001b[1;2;4mwhere\u001b[0m\r\n"]
+[3.814743, "o", "  \u001b[2m(positional)\u001b[0m    \u001b[34m<\u001b[0m\u001b[1;34mfname:\u001b[0m\u001b[34mpath>\u001b[0m         \u001b[3mThe file to count.\u001b[0m \u001b[33m(required)\u001b[0m                        \r\n  \u001b[2m(pos. or opt.)\u001b[0m  \u001b[1;32m-k\u001b[0m\u001b[2;32m|\u001b[0m\u001b[1;32m--kind\u001b[0m \u001b[34mword\u001b[0m\u001b[2;34m|\u001b[0m\u001b[34mchar\u001b[0m  \u001b[3mWhether to count words or characters.\u001b[0m \u001b[32m(default: word)\u001b[0m\r\n  \u001b[2m(option)\u001b[0m        \u001b[1;32m-v\u001b[0m\u001b[2;32m|\u001b[0m\u001b[1;32m--verbose\u001b[0m\u001b[2;32m       \u001b[0m  \u001b[3mWhether to print additional info.\u001b[0m \u001b[32m(flag)\u001b[0m             \r\n  \u001b[2m(option)\u001b[0m        \u001b[1;2;32m-?\u001b[0m\u001b[2;32m|\u001b[0m\u001b[1;2;32m--help\u001b[0m            \u001b[2;3mShow this help message and exit.\u001b[0m                     \r\n"]
+[3.814855, "o", "\r\n"]
+[3.821053, "o", "❯ "]

docs/cast/wc-run.cast

@@ -0,0 +1,41 @@
+{"version": 2, "width": 103, "height": 29, "timestamp": 1737158288, "env": {"SHELL": "/opt/homebrew/bin/fish", "TERM": "xterm-256color"}}
+[0.006827, "o", "\u001b[?1034h❯ "]
+[0.402895, "o", "p"]
+[0.47049, "o", "y"]
+[0.566347, "o", "t"]
+[0.710351, "o", "h"]
+[0.762099, "o", "o"]
+[1.012736, "o", "n"]
+[1.281278, "o", " "]
+[1.432055, "o", "w"]
+[1.658964, "o", "c"]
+[2.041101, "o", "."]
+[2.281543, "o", "p"]
+[2.343391, "o", "y"]
+[2.475455, "o", " "]
+[2.622263, "o", "w"]
+[2.855234, "o", "c"]
+[3.1237, "o", "."]
+[3.348939, "o", "p"]
+[3.470896, "o", "y"]
+[3.653746, "o", " "]
+[3.806175, "o", "-"]
+[4.090511, "o", "k"]
+[4.199073, "o", " "]
+[4.36548, "o", "c"]
+[4.464243, "o", "h"]
+[4.592948, "o", "a"]
+[4.689431, "o", "r"]
+[4.764632, "o", " "]
+[4.943763, "o", "-"]
+[5.099529, "o", "-"]
+[5.191442, "o", "v"]
+[5.38269, "o", "e"]
+[5.46971, "o", "r"]
+[5.713343, "o", "b"]
+[5.765267, "o", "o"]
+[5.933621, "o", "s"]
+[6.000268, "o", "e"]
+[6.253786, "o", "\r\n"]
+[6.397914, "o", "590 chars in wc.py\r\n"]
+[6.403548, "o", "❯ "]

docs/css/asciinema-theme.css

@@ -0,0 +1,47 @@
+.asciinema-player-theme-custom-auto {
+  /* adapted from pencil.vim */
+    --term-color-foreground: #212121;
+    --term-color-background: #f1f1f1;
+
+
+    --term-color-0: #212121; /* black */
+    --term-color-1: #C30771; /* red */
+    --term-color-2: #10A778; /* green */
+    --term-color-3: #A89C14; /* yellow */
+    --term-color-4: #008EC4; /* blue */
+    --term-color-5: #fb007a; /* magenta */
+    --term-color-6: #20A5BA; /* cyan */
+    --term-color-7: #f1f1f1; /* white */
+    --term-color-8: #212121; /* bright black */
+    --term-color-9: #E32791; /* bright red */ 
+    --term-color-10: #10A778; /* bright green */
+    --term-color-11: #A89C14; /* bright yellow */
+    --term-color-12: #008EC4; /* bright blue */
+    --term-color-13: #fb007a; /* bright magenta */
+    --term-color-14: #20A5BA; /* bright cyan */
+    --term-color-15: #f1f1f1; /* bright white */
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /* Firewatch (except background) */
+    .asciinema-player-theme-custom-auto {
+      --term-color-0: #585f6d;
+      --term-color-1: #d95360;
+      --term-color-10: #5ab977;
+      --term-color-11: #dfb563;
+      --term-color-12: #4c89c4;
+      --term-color-13: #d55119;
+      --term-color-14: #44a8b6;
+      --term-color-15: #e6e5ff;
+      --term-color-2: #5ab977;
+      --term-color-3: #dfb563;
+      --term-color-4: #4d89c4;
+      --term-color-5: #d55119;
+      --term-color-6: #44a8b6;
+      --term-color-7: #e6e5ff;
+      --term-color-8: #585f6d;
+      --term-color-9: #d95360;
+      --term-color-background: #1e2027;
+      --term-color-foreground: #9ba2b2;
+    }
+  }