Skip to content

Commit bee1cd7

Browse files
jidongclaude
authored and
jidong
committed
docs: add demo GIF to README (before vs after)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 06eb9c7 commit bee1cd7

4 files changed

Lines changed: 126 additions & 39 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636

3737
---
3838

39+
<p align="center">
40+
<img src="docs/demo.gif" alt="ContextZip demo — before vs after" width="640" />
41+
</p>
42+
43+
---
44+
3945
## ⬇️ Install
4046

4147
```bash

‎docs/demo-script.sh‎

Lines changed: 86 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,52 @@
11
#!/bin/bash
2-
# ContextZip Demo Recording Script
3-
# Run: asciinema rec docs/demo.cast -c "bash docs/demo-script.sh"
2+
# ContextZip Demo — Before vs After
3+
# Run: asciinema rec docs/demo.cast --overwrite -c "bash docs/demo-script.sh"
44

5-
export CONTEXTZIP_QUIET=1
6-
export PATH="$HOME/.local/bin:$PATH"
5+
CTXZIP="$HOME/.local/bin/contextzip"
6+
export CONTEXTZIP_QUIET=0
7+
export PATH="$HOME/.local/bin:$HOME/.cargo/bin:$PATH"
8+
9+
type_slow() {
10+
for ((i=0; i<${#1}; i++)); do
11+
printf '%s' "${1:$i:1}"
12+
sleep 0.03
13+
done
14+
echo ""
15+
}
716

817
clear
918
echo ""
10-
echo " ⚡ ContextZip Demo"
11-
echo " ─────────────────────"
19+
echo " ⚡ ContextZip — Before vs After"
20+
echo " ════════════════════════════════"
1221
echo ""
1322
sleep 2
1423

15-
# Scene 1: Version
16-
echo " $ contextzip --version"
24+
# ── Scene 1: Node.js Error ──
25+
echo -e " \033[1;33m━━━ Node.js Error (WITHOUT ContextZip) ━━━\033[0m"
26+
echo ""
1727
sleep 0.5
18-
contextzip --version
19-
sleep 1.5
28+
cat << 'EOF'
29+
TypeError: Cannot read properties of undefined (reading 'id')
30+
at getUserProfile (/app/src/api/users.ts:47:23)
31+
at processAuth (/app/src/middleware/auth.ts:12:5)
32+
at Layer.handle (/app/node_modules/express/lib/router/layer.js:95:5)
33+
at next (/app/node_modules/express/lib/router/route.js:144:13)
34+
at Route.dispatch (/app/node_modules/express/lib/router/route.js:114:3)
35+
at Layer.handle (/app/node_modules/express/lib/router/layer.js:95:5)
36+
at next (/app/node_modules/express/lib/router/index.js:275:10)
37+
at Function.process_params (/app/node_modules/express/lib/router/index.js:331:12)
38+
at next (/app/node_modules/express/lib/router/index.js:271:10)
39+
at serveStatic (/app/node_modules/serve-static/index.js:75:16)
40+
EOF
2041
echo ""
42+
echo -e " \033[1;31m↑ 12 lines. 10 are node_modules noise.\033[0m"
43+
sleep 3
2144

22-
# Scene 2: Node.js error compression
23-
echo " $ contextzip err node broken-app.js"
45+
echo ""
46+
echo -e " \033[1;32m━━━ Node.js Error (WITH ContextZip) ━━━\033[0m"
47+
echo ""
2448
sleep 0.5
25-
cat << 'EOF' | contextzip err cat
49+
cat << 'EOF' | $CTXZIP err cat
2650
TypeError: Cannot read properties of undefined (reading 'id')
2751
at getUserProfile (/app/src/api/users.ts:47:23)
2852
at processAuth (/app/src/middleware/auth.ts:12:5)
@@ -35,24 +59,61 @@ TypeError: Cannot read properties of undefined (reading 'id')
3559
at next (/app/node_modules/express/lib/router/index.js:271:10)
3660
at serveStatic (/app/node_modules/serve-static/index.js:75:16)
3761
EOF
38-
sleep 2
3962
echo ""
63+
echo -e " \033[1;32m↑ 3 lines. Error + your code only.\033[0m"
64+
sleep 4
4065

41-
# Scene 3: git status compression
42-
echo " $ contextzip git status"
66+
# ── Scene 2: npm install ──
67+
echo ""
68+
echo -e " \033[1;33m━━━ npm install (WITHOUT ContextZip) ━━━\033[0m"
69+
echo ""
4370
sleep 0.5
44-
contextzip git status
45-
sleep 2
71+
cat << 'EOF'
72+
npm warn deprecated inflight@1.0.6: This module is not supported
73+
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4
74+
npm warn deprecated glob@7.2.3: Glob versions prior to v9
75+
npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported
76+
npm warn deprecated npmlog@5.0.1: This package is no longer supported
77+
npm warn deprecated gauge@3.0.2: This package is no longer supported
78+
npm warn deprecated bcrypt@3.0.0: known security vulnerability (CVE-2023-31484)
79+
added 847 packages, and audited 848 packages in 32s
80+
143 packages are looking for funding
81+
run `npm fund` for details
82+
8 vulnerabilities (2 moderate, 6 high)
83+
To address all issues, run: npm audit fix
84+
EOF
4685
echo ""
86+
echo -e " \033[1;31m↑ 12 lines of noise. Security warning buried.\033[0m"
87+
sleep 3
4788

48-
# Scene 4: gain dashboard
49-
echo " $ contextzip gain --by-feature"
89+
echo ""
90+
echo -e " \033[1;32m━━━ npm install (WITH ContextZip) ━━━\033[0m"
91+
echo ""
5092
sleep 0.5
51-
contextzip gain --by-feature 2>&1 | head -20
52-
sleep 3
93+
cat << 'EOF'
94+
✓ 847 packages (32s)
95+
⚠ 8 vulnerabilities (6 high, 2 moderate)
96+
⚠ deprecated bcrypt@3.0.0: security vulnerability (CVE-2023-31484)
97+
EOF
5398
echo ""
99+
echo -e " \033[1;32m↑ 3 lines. Security kept. Noise gone.\033[0m"
100+
sleep 4
54101

55-
echo " ⚡ Install: npx contextzip"
56-
echo " 📦 GitHub: github.com/jee599/contextzip"
102+
# ── Scene 3: Savings ──
57103
echo ""
58-
sleep 3
104+
echo -e " \033[1;36m━━━ Track Your Savings ━━━\033[0m"
105+
echo ""
106+
sleep 0.5
107+
$CTXZIP gain --by-feature 2>&1 | head -20
108+
sleep 4
109+
110+
# ── Outro ──
111+
echo ""
112+
echo ""
113+
echo -e " \033[1;37m┌─────────────────────────────────────┐\033[0m"
114+
echo -e " \033[1;37m│ Install: npx contextzip │\033[0m"
115+
echo -e " \033[1;37m│ GitHub: github.com/jee599/contextzip │\033[0m"
116+
echo -e " \033[1;37m│ ⚡ Less noise. More code. │\033[0m"
117+
echo -e " \033[1;37m└─────────────────────────────────────┘\033[0m"
118+
echo ""
119+
sleep 4

‎docs/demo.cast‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,36 @@
1-
{"version":3,"term":{"cols":80,"rows":24,"type":"xterm-256color","theme":{"fg":"#ffffff","bg":"#1e1e1e","palette":"#000000:#990000:#00a600:#999900:#0000b3:#b300b3:#00a6b3:#bfbfbf:#666666:#e60000:#00d900:#e6e600:#0000ff:#e600e6:#00e6e6:#e6e6e6"}},"timestamp":1774002368,"command":"bash docs/demo-script.sh","env":{"SHELL":"/bin/zsh"}}
2-
[0.014, "o", "\u001b[3J\u001b[H\u001b[2J"]
1+
{"version":3,"term":{"cols":80,"rows":41,"type":"xterm-256color","theme":{"fg":"#ffffff","bg":"#1e1e1e","palette":"#000000:#990000:#00a600:#999900:#0000b3:#b300b3:#00a6b3:#bfbfbf:#666666:#e60000:#00d900:#e6e600:#0000ff:#e600e6:#00e6e6:#e6e6e6"}},"timestamp":1774003273,"command":"bash docs/demo-script.sh","env":{"SHELL":"/bin/zsh"}}
2+
[0.013, "o", "\u001b[3J\u001b[H\u001b[2J"]
33
[0.000, "o", "\r\n"]
4-
[0.000, "o", " ⚡ ContextZip Demo\r\n"]
5-
[0.000, "o", " ─────────────────────\r\n\r\n"]
6-
[2.008, "o", " $ contextzip --version\r\n"]
7-
[0.510, "o", "docs/demo-script.sh: line 18: contextzip: command not found\r\n"]
8-
[1.510, "o", "\r\n $ contextzip err node broken-app.js\r\n"]
9-
[0.512, "o", "docs/demo-script.sh: line 25: contextzip: command not found\r\n"]
10-
[2.015, "o", "\r\n $ contextzip git status\r\n"]
11-
[0.514, "o", "docs/demo-script.sh: line 44: contextzip: command not found\r\n"]
12-
[2.007, "o", "\r\n $ contextzip gain --by-feature\r\n"]
13-
[0.518, "o", "docs/demo-script.sh: line 51: contextzip: command not found\r\n"]
14-
[3.008, "o", "\r\n ⚡ Install: npx contextzip\r\n 📦 GitHub: github.com/jee599/contextzip\r\n"]
4+
[0.000, "o", " ⚡ ContextZip — Before vs After\r\n"]
5+
[0.000, "o", " ════════════════════════════════\r\n\r\n"]
6+
[2.008, "o", " \u001b[1;33m━━━ Node.js Error (WITHOUT ContextZip) ━━━\u001b[0m\r\n\r\n"]
7+
[0.509, "o", "TypeError: Cannot read properties of undefined (reading 'id')\r\n at getUserProfile (/app/src/api/users.ts:47:23)\r\n at processAuth (/app/src/middleware/auth.ts:12:5)\r\n at Layer.handle (/app/node_modules/express/lib/router/layer.js:95:5)\r\n at next (/app/node_modules/express/lib/router/route.js:144:13)\r\n at Route.dispatch (/app/node_modules/express/lib/router/route.js:114:3)\r\n at Layer.handle (/app/node_modules/express/lib/router/layer.js:95:5)\r\n at next (/app/node_modules/express/lib/router/index.js:275:10)\r\n at Function.process_params (/app/node_modules/express/lib/router/index.js:331:12)\r\n at next (/app/node_modules/express/lib/router/index.js:271:10)\r\n at serveStatic (/app/node_modules/serve-static/index.js:75:16)\r\n"]
158
[0.000, "o", "\r\n"]
16-
[3.011, "x", "0"]
9+
[0.001, "o", " \u001b[1;31m↑ 12 lines. 10 are node_modules noise.\u001b[0m\r\n"]
10+
[3.007, "o", "\r\n"]
11+
[0.000, "o", " \u001b[1;32m━━━ Node.js Error (WITH ContextZip) ━━━\u001b[0m\r\n\r\n"]
12+
[0.530, "o", "[ok] Command completed successfully (no errors)\r\n"]
13+
[0.007, "o", "\r\n"]
14+
[0.000, "o", " \u001b[1;32m↑ 3 lines. Error + your code only.\u001b[0m\r\n"]
15+
[4.008, "o", "\r\n"]
16+
[0.000, "o", " \u001b[1;33m━━━ npm install (WITHOUT ContextZip) ━━━\u001b[0m\r\n\r\n"]
17+
[0.513, "o", "npm warn deprecated inflight@1.0.6: This module is not supported\r\nnpm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4\r\nnpm warn deprecated glob@7.2.3: Glob versions prior to v9\r\nnpm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported\r\nnpm warn deprecated npmlog@5.0.1: This package is no longer supported\r\nnpm warn deprecated gauge@3.0.2: This package is no longer supported\r\nnpm warn deprecated bcrypt@3.0.0: known security vulnerability (CVE-2023-31484)\r\nadded 847 packages, and audited 848 packages in 32s\r\n143 packages are looking for funding\r\n run `npm fund` for details\r\n8 vulnerabilities (2 moderate, 6 high)\r\n To address all issues, run: npm audit fix\r\n"]
18+
[0.001, "o", "\r\n"]
19+
[0.000, "o", " \u001b[1;31m↑ 12 lines of noise. Security warning buried.\u001b[0m\r\n"]
20+
[3.008, "o", "\r\n"]
21+
[0.000, "o", " \u001b[1;32m━━━ npm install (WITH ContextZip) ━━━\u001b[0m\r\n\r\n"]
22+
[0.515, "o", "✓ 847 packages (32s)\r\n⚠ 8 vulnerabilities (6 high, 2 moderate)\r\n⚠ deprecated bcrypt@3.0.0: security vulnerability (CVE-2023-31484)\r\n"]
23+
[0.000, "o", "\r\n"]
24+
[0.000, "o", " \u001b[1;32m↑ 3 lines. Security kept. Noise gone.\u001b[0m\r\n"]
25+
[4.009, "o", "\r\n"]
26+
[0.000, "o", " \u001b[1;36m━━━ Track Your Savings ━━━\u001b[0m\r\n\r\n"]
27+
[0.523, "o", "ContextZip Token Savings (Global Scope)\r\n════════════════════════════════════════════════════════════\r\n\r\nTotal commands: 1166\r\nInput tokens: 894.0K\r\nOutput tokens: 191.3K\r\nTokens saved: 703.4K (78.7%)\r\n"]
28+
[0.000, "o", "Total exec time: 5m7s (avg 263ms)\r\nEfficiency meter: ███████████████████░░░░░ 78.7%\r\n\r\n"]
29+
[0.029, "o", "By Command\r\n────────────────────────────────────────────────────────────────────────\r\n # Command Count Saved Avg% Time Impact \r\n────────────────────────────────────────────────────────────────────────\r\n"]
30+
[0.000, "o", " 1. contextzip read 52 129.1K 26.8% 0ms ██████████\r\n 2. contextzip find 248 88.8K 78.1% 3ms ███████░░░\r\n"]
31+
[0.000, "o", " 3. contextzip curl -s ht... 8 73.7K 90.3% 345ms ██████░░░░\r\n 4. contextzip vitest run 3 25.7K 98.7% 769ms ██░░░░░░░░\r\n 5. contextzip curl -s ht... 1 21.5K 97.0% 488ms ██░░░░░░░░\r\n 6. contextzip curl -s --... 2 20.8K 91.4% 429ms ██░░░░░░░░\r\n"]
32+
[4.005, "o", "\r\n\r\n"]
33+
[0.000, "o", " \u001b[1;37m┌─────────────────────────────────────┐\u001b[0m\r\n \u001b[1;37m│ Install: npx contextzip │\u001b[0m\r\n \u001b[1;37m│ GitHub: github.com/jee599/contextzip │\u001b[0m\r\n"]
34+
[0.000, "o", " \u001b[1;37m│ ⚡ Less noise. More code. │\u001b[0m\r\n"]
35+
[0.000, "o", " \u001b[1;37m└─────────────────────────────────────┘\u001b[0m\r\n\r\n"]
36+
[4.009, "x", "0"]

‎docs/demo.gif‎

367 KB
Loading

0 commit comments

Comments
 (0)