From 43371a386ac40d425b1224a07d979ca5bdbd9ad3 Mon Sep 17 00:00:00 2001
From: Tien Nguyen Minh <tiennm99@outlook.com>
Date: Sun, 19 Apr 2026 10:08:44 +0700
Subject: [PATCH] refactor(demo): split single 975-image README into index +
 per-theme pages (#13)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Loading demo/README.md was unusable — 65 themes × 15 SVGs = 975 images
in one page, and reloading made the tab lag for 10+ seconds. Restructure:

- demo/README.md shrinks to an index: one bullet per theme linking to
  that theme's page. Zero images.
- demo/<theme>/README.md (new) embeds the 15 SVGs for that theme only,
  grouped so the last-year / all-time variants sit side-by-side in HTML
  tables. Readers compare LY vs AT without scrolling back and forth,
  and fetch ~15 images instead of 975.

Per-theme page layout:

  ## At-a-glance       profile · stats · streak  (each full-width)
  ## Repos             top-starred · repos-per-language
  ## Contributions     heatmap · by-year, then
                       monthly shape: LY | AT  (paired)
  ## When you commit   hour-of-day: LY | AT
                       day-of-week: LY | AT
  ## What you commit   language share: LY | AT

pair() and single() bash helpers skip missing SVGs so a future
partial-render doesn't emit dangling <img> tags.
---
 .github/workflows/demo.yml | 87 +++++++++++++++++++++++---------------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
index edfe7842..ceebceed 100644
--- a/.github/workflows/demo.yml
+++ b/.github/workflows/demo.yml
@@ -42,58 +42,79 @@ jobs:
             -tz Asia/Saigon \
             -out demo
 
-      - name: Write demo README
+      - name: Write demo READMEs (index + per-theme)
         env:
           OWNER: ${{ github.repository_owner }}
           REPO: ${{ github.repository }}
         run: |
-          cards=(
-            profile-details
-            repos-per-language
-            most-commit-language
-            stats
-            productive-time
-            productive-weekday
-            contributions
-            contributions-heatmap
-            top-starred-repos
-            streak
-            most-commit-language-all-time
-            productive-time-all-time
-            productive-weekday-all-time
-            contributions-all-time
-            contributions-by-year
-          )
           themes=$(./ghstats -list-themes)
+
+          # Lightweight index so readers don't have to load ~975 images at once.
           {
             echo "# ghstats demo gallery"
             echo
-            echo "Every card in every theme, rendered for [\`$OWNER\`](https://github.com/$OWNER)."
+            echo "Every card rendered for [\`$OWNER\`](https://github.com/$OWNER) in every supported theme. Click a theme to open its gallery page — each page embeds 15 SVGs, so only the theme you're reviewing is fetched."
             echo
             echo "Auto-generated by [\`.github/workflows/demo.yml\`](../.github/workflows/demo.yml) on each push to \`main\`. Do not edit by hand."
             echo
             echo "## Themes"
             echo
-            for theme in $themes; do
-              echo "- [\`$theme\`](#$theme)"
-            done
-            echo
             for theme in $themes; do
               dir="demo/$theme"
               [ -d "$dir" ] || continue
-              echo "## $theme"
-              echo
-              for card in "${cards[@]}"; do
-                svg="$dir/$card.svg"
-                [ -f "$svg" ] || continue
-                echo "![$card](./$theme/$card.svg)"
-              done
-              echo
-              echo "[back to top](#themes)"
-              echo
+              echo "- [\`$theme\`](./$theme/README.md)"
             done
           } > demo/README.md
 
+          # Per-theme page groups singletons at top, then compares last-year
+          # vs all-time variants side-by-side so the reader can eyeball the
+          # evolution of each metric without scrolling.
+          for theme in $themes; do
+            dir="demo/$theme"
+            [ -d "$dir" ] || continue
+            out="$dir/README.md"
+            pair() {
+              local heading="$1" left="$2" right="$3"
+              [ -f "$dir/$left.svg" ] && [ -f "$dir/$right.svg" ] || return
+              printf '### %s\n\n' "$heading"
+              printf '<table><tr><th>Last year</th><th>All time</th></tr><tr>\n'
+              printf '<td><img src="./%s.svg" alt="%s" /></td>\n' "$left" "$left"
+              printf '<td><img src="./%s.svg" alt="%s" /></td>\n' "$right" "$right"
+              printf '</tr></table>\n\n'
+            }
+            single() {
+              local heading="$1" name="$2"
+              [ -f "$dir/$name.svg" ] || return
+              printf '### %s\n\n![%s](./%s.svg)\n\n' "$heading" "$name" "$name"
+            }
+            {
+              printf '# ghstats — %s\n\n' "$theme"
+              printf '[← back to index](../README.md)\n\n'
+              printf 'Rendered for [`%s`](https://github.com/%s). 15 SVGs below, ' "$OWNER" "$OWNER"
+              printf 'grouped so the last-year / all-time pairs sit next to each other.\n\n'
+              printf '## At-a-glance\n\n'
+              single "Profile" profile-details
+              single "Stats"   stats
+              single "Streak"  streak
+
+              printf '## Repos\n\n'
+              single "Top starred"     top-starred-repos
+              single "Repos per language" repos-per-language
+
+              printf '## Contributions — time series\n\n'
+              single "Calendar heatmap (last year)" contributions-heatmap
+              single "By year (all time)"           contributions-by-year
+              pair   "Monthly shape"  contributions            contributions-all-time
+
+              printf '## When you commit\n\n'
+              pair "By hour of day" productive-time    productive-time-all-time
+              pair "By day of week" productive-weekday productive-weekday-all-time
+
+              printf '## What you commit in\n\n'
+              pair "Byte-weighted language share" most-commit-language most-commit-language-all-time
+            } > "$out"
+          done
+
       - name: Commit demo back to main
         run: |
           git config user.name "github-actions[bot]"