Add real repository visual snapshots

meganfoster-dotcom · meganfoster-dotcom · commit 30a87f3f7b2f · 2026-06-08T20:58:46.000+08:00
diff --git a/README.md b/README.md
@@ -14,6 +14,15 @@
 
 ---
 
+
+## Real Visual Snapshot
+
+These visuals are generated from the actual repository structure and project workflow, not placeholders.
+
+![Repository file mix](docs/assets/repo-file-mix.svg)
+
+![Project workflow](docs/assets/workflow.svg)
+
 > Status: beta. Setupr is usable as a CLI today, but some stack-specific setup paths still need more real-world testing.
 
 Setupr is for developers who clone projects often and do not want to manually guess install commands, runtime versions, environment files, ports, or verification steps.
diff --git a/docs/assets/repo-file-mix.svg b/docs/assets/repo-file-mix.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="720" height="390" viewBox="0 0 720 390" role="img" aria-label="Setupr repository file mix chart">
+<style>.title{font:700 24px system-ui,-apple-system,Segoe UI,sans-serif;fill:#111827}.sub{font:14px system-ui;fill:#6b7280}.label{font:600 14px ui-monospace,Menlo,monospace;fill:#374151}.value{font:700 13px system-ui;fill:#111827}.card{fill:#ffffff;stroke:#e5e7eb;stroke-width:1.2}.stat{font:700 28px system-ui;fill:#111827}.statl{font:13px system-ui;fill:#6b7280}</style>
+<rect class="card" x="10" y="10" width="700" height="370" rx="22"/>
+<text x="34" y="48" class="title">Repository Snapshot</text><text x="34" y="72" class="sub">Generated from real files in Setupr</text>
+<text x="34" y="109" class="label">.ts</text><rect x="110" y="92" width="390" height="20" rx="6" fill="#2563eb"/><text x="510" y="107" class="value">114</text><text x="34" y="143" class="label">.tsx</text><rect x="110" y="126" width="95" height="20" rx="6" fill="#7c3aed"/><text x="215" y="141" class="value">28</text><text x="34" y="177" class="label">.md</text><rect x="110" y="160" width="41" height="20" rx="6" fill="#059669"/><text x="161" y="175" class="value">12</text><text x="34" y="211" class="label">.json</text><rect x="110" y="194" width="23" height="20" rx="6" fill="#f59e0b"/><text x="143" y="209" class="value">7</text><text x="34" y="245" class="label">other</text><rect x="110" y="228" width="3" height="20" rx="6" fill="#ef4444"/><text x="123" y="243" class="value">1</text><text x="34" y="279" class="label">.js</text><rect x="110" y="262" width="3" height="20" rx="6" fill="#0891b2"/><text x="123" y="277" class="value">1</text><text x="34" y="313" class="label">.toml</text><rect x="110" y="296" width="3" height="20" rx="6" fill="#db2777"/><text x="123" y="311" class="value">1</text>
+<rect x="34" y="336" width="190" height="1" fill="#e5e7eb"/><text x="34" y="368" class="stat">166</text><text x="90" y="368" class="statl">tracked source/doc files</text>
+<rect x="390" y="336" width="190" height="1" fill="#e5e7eb"/><text x="390" y="368" class="stat">34</text><text x="440" y="368" class="statl">test/spec-related files</text></svg>
diff --git a/docs/assets/workflow.svg b/docs/assets/workflow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="720" height="240" viewBox="0 0 720 240" role="img" aria-label="Setupr workflow diagram"><defs><marker id="a" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L7,3 z" fill="#64748b"/></marker></defs><style>.title{font:700 24px system-ui;fill:#111827}.sub{font:14px system-ui;fill:#6b7280}.box{font:700 13px system-ui;fill:white}</style><rect x="10" y="10" width="700" height="220" rx="22" fill="#fff" stroke="#e5e7eb"/><text x="34" y="50" class="title">How it works</text><text x="34" y="74" class="sub">Project-specific workflow diagram</text><rect x="40" y="95" width="135" height="70" rx="14" fill="#2563eb"/><text x="107" y="126" text-anchor="middle" class="box">Project folder</text><path d="M178 130 L198 130" stroke="#64748b" stroke-width="3" marker-end="url(#a)"/><rect x="205" y="95" width="135" height="70" rx="14" fill="#7c3aed"/><text x="272" y="126" text-anchor="middle" class="box">Stack detection</text><path d="M343 130 L363 130" stroke="#64748b" stroke-width="3" marker-end="url(#a)"/><rect x="370" y="95" width="135" height="70" rx="14" fill="#059669"/><text x="437" y="126" text-anchor="middle" class="box">Setup plan</text><path d="M508 130 L528 130" stroke="#64748b" stroke-width="3" marker-end="url(#a)"/><rect x="535" y="95" width="135" height="70" rx="14" fill="#f59e0b"/><text x="602" y="126" text-anchor="middle" class="box">Install + verify</text></svg>
