From f1cc28b28b181874a448e844cda41a7fe52f2eb5 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Tue, 21 Apr 2026 21:08:15 +0700
Subject: [PATCH] chore(demo): mirror author profile README layout in per-theme
 pages

Reshape the generator in demo.yml so each theme's README renders one centred
table matching tiennm99/tiennm99's stats table: singletons two-per-row at the
top, streak spans full width, then four last-year/all-time pair rows under a
shared header. dracula updated manually so reviewers see the result before the
demo workflow regenerates the other 64 themes on merge.
---
 .github/workflows/demo.yml | 65 ++++++++++++++-----------------
 demo/dracula/README.md     | 79 +++++++-------------------------------
 2 files changed, 42 insertions(+), 102 deletions(-)

diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
index ceebceed..9c1b80df 100644
--- a/.github/workflows/demo.yml
+++ b/.github/workflows/demo.yml
@@ -66,52 +66,43 @@ jobs:
             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.
+          # Per-theme page mirrors the author profile README table layout at
+          # tiennm99/tiennm99 — singletons stacked two-per-row, streak spans
+          # the full width, then the four last-year/all-time pairs sit in
+          # consecutive rows under a shared header.
           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'
+            cell() {
+              local name="$1"
+              printf '<td><img src="./%s.svg" alt="%s" /></td>' "$name" "$name"
             }
-            single() {
-              local heading="$1" name="$2"
-              [ -f "$dir/$name.svg" ] || return
-              printf '### %s\n\n![%s](./%s.svg)\n\n' "$heading" "$name" "$name"
+            row_pair() {
+              printf '<tr>'
+              cell "$1"
+              cell "$2"
+              printf '</tr>\n'
+            }
+            row_span() {
+              printf '<tr><td colspan="2" align="center"><img src="./%s.svg" alt="%s" /></td></tr>\n' "$1" "$1"
             }
             {
               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
+              printf 'Rendered for [`%s`](https://github.com/%s). 15 SVGs laid out to ' "$OWNER" "$OWNER"
+              printf 'match the author profile README table.\n\n'
+              printf '<div align="center">\n\n<table>\n'
+              row_pair profile-details    stats
+              row_pair repos-per-language top-starred-repos
+              row_pair contributions-by-year contributions-heatmap
+              row_span streak
+              printf '<tr><th>Last year</th><th>All time</th></tr>\n'
+              row_pair most-commit-language   most-commit-language-all-time
+              row_pair contributions          contributions-all-time
+              row_pair productive-weekday     productive-weekday-all-time
+              row_pair productive-time        productive-time-all-time
+              printf '</table>\n\n</div>\n'
             } > "$out"
           done
 
diff --git a/demo/dracula/README.md b/demo/dracula/README.md
index 6ebb918a..4fac0190 100644
--- a/demo/dracula/README.md
+++ b/demo/dracula/README.md
@@ -2,71 +2,20 @@
 
 [← back to index](../README.md)
 
-Rendered for [`tiennm99`](https://github.com/tiennm99). 15 SVGs below, grouped so the last-year / all-time pairs sit next to each other.
+Rendered for [`tiennm99`](https://github.com/tiennm99). 15 SVGs laid out to match the author profile README table.
 
-## At-a-glance
+<div align="center">
 
-### Profile
-
-![profile-details](./profile-details.svg)
-
-### Stats
-
-![stats](./stats.svg)
-
-### Streak
-
-![streak](./streak.svg)
-
-## Repos
-
-### Top starred
-
-![top-starred-repos](./top-starred-repos.svg)
-
-### Repos per language
-
-![repos-per-language](./repos-per-language.svg)
-
-## Contributions — time series
-
-### Calendar heatmap (last year)
-
-![contributions-heatmap](./contributions-heatmap.svg)
-
-### By year (all time)
-
-![contributions-by-year](./contributions-by-year.svg)
-
-### Monthly shape
-
-<table><tr><th>Last year</th><th>All time</th></tr><tr>
-<td><img src="./contributions.svg" alt="contributions" /></td>
-<td><img src="./contributions-all-time.svg" alt="contributions-all-time" /></td>
-</tr></table>
-
-## When you commit
-
-### By hour of day
-
-<table><tr><th>Last year</th><th>All time</th></tr><tr>
-<td><img src="./productive-time.svg" alt="productive-time" /></td>
-<td><img src="./productive-time-all-time.svg" alt="productive-time-all-time" /></td>
-</tr></table>
-
-### By day of week
-
-<table><tr><th>Last year</th><th>All time</th></tr><tr>
-<td><img src="./productive-weekday.svg" alt="productive-weekday" /></td>
-<td><img src="./productive-weekday-all-time.svg" alt="productive-weekday-all-time" /></td>
-</tr></table>
-
-## What you commit in
-
-### Byte-weighted language share
-
-<table><tr><th>Last year</th><th>All time</th></tr><tr>
-<td><img src="./most-commit-language.svg" alt="most-commit-language" /></td>
-<td><img src="./most-commit-language-all-time.svg" alt="most-commit-language-all-time" /></td>
-</tr></table>
+<table>
+<tr><td><img src="./profile-details.svg" alt="profile-details" /></td><td><img src="./stats.svg" alt="stats" /></td></tr>
+<tr><td><img src="./repos-per-language.svg" alt="repos-per-language" /></td><td><img src="./top-starred-repos.svg" alt="top-starred-repos" /></td></tr>
+<tr><td><img src="./contributions-by-year.svg" alt="contributions-by-year" /></td><td><img src="./contributions-heatmap.svg" alt="contributions-heatmap" /></td></tr>
+<tr><td colspan="2" align="center"><img src="./streak.svg" alt="streak" /></td></tr>
+<tr><th>Last year</th><th>All time</th></tr>
+<tr><td><img src="./most-commit-language.svg" alt="most-commit-language" /></td><td><img src="./most-commit-language-all-time.svg" alt="most-commit-language-all-time" /></td></tr>
+<tr><td><img src="./contributions.svg" alt="contributions" /></td><td><img src="./contributions-all-time.svg" alt="contributions-all-time" /></td></tr>
+<tr><td><img src="./productive-weekday.svg" alt="productive-weekday" /></td><td><img src="./productive-weekday-all-time.svg" alt="productive-weekday-all-time" /></td></tr>
+<tr><td><img src="./productive-time.svg" alt="productive-time" /></td><td><img src="./productive-time-all-time.svg" alt="productive-time-all-time" /></td></tr>
+</table>
 
+</div>