hd-garden 0.3.13 → 0.4.0

package/app/styles/shell.css

@@ -0,0 +1,438 @@
+
+/* ===== Hedon Garden shell (A2). Tokens shared with the A2 article. ===== */
+:root{
+  --paper:#F8F7F3; --card:#FFFFFF; --ink:#1B1A18; --text:#2D2C29; --soft:#4A4844; --muted:#6E6B64;
+  --rule:#E6E3DC; --rule-strong:#D6D2C9; --well:#F0EEE8; --tint:rgba(27,26,24,.055);
+  --blue:#2C55B4; --blue-tint:#EAF0FC; --blue-line:rgba(44,85,180,.28); --cover:#5E86E0;
+  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
+  --serif:"Source Han Serif SC","Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong","Source Serif 4",Georgia,serif;
+  --fs-display:46px; --fs-h2:26px; --fs-lead:20px; --fs-body:17px; --fs-small:14px; --fs-meta:13px;
+  --r:12px; --r-lg:24px; --shell:1200px; --list:760px; --side:200px;
+  --hdr:64px; --ease:cubic-bezier(.2,.8,.2,1);
+  color-scheme:light;
+}
+html[data-theme="dark"]{
+  --paper:#161513; --card:#1E1D1A; --ink:#EEECE7; --text:#DCD9D2; --soft:#BDB9B0; --muted:#A09B91;
+  --rule:#2F2D29; --rule-strong:#45423C; --well:#22211D; --tint:rgba(238,236,231,.07);
+  --blue:#93B2F4; --blue-tint:rgba(147,178,244,.13); --blue-line:rgba(147,178,244,.35); --cover:#4C72C9;
+  color-scheme:dark;
+}
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
+body{margin:0;background:var(--paper);color:var(--text);font:400 var(--fs-body)/1.75 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+a{color:inherit}
+img,svg{max-width:100%}
+:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
+.sh-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r);text-decoration:none;font-size:var(--fs-small)}
+.sh-skip:focus{top:12px}
+.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.nw{white-space:nowrap}
+.num{font-variant-numeric:tabular-nums}
+
+/* ---------- header ---------- */
+.sh-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s ease}
+.sh-header.is-scrolled{border-bottom-color:var(--rule)}
+.sh-bar{max-width:var(--shell);margin:0 auto;height:var(--hdr);padding:0 32px;display:flex;align-items:center;gap:28px}
+.sh-word{font:600 var(--fs-lead)/1 var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 0}
+.sh-nav{display:flex;gap:4px;margin-left:auto}
+.sh-nav a{font-size:15px;color:var(--soft);text-decoration:none;padding:8px 12px;border-radius:var(--r);transition:color .15s ease,background-color .15s ease}
+.sh-nav a:hover{color:var(--ink);background:var(--tint)}
+.sh-nav a[aria-current="page"],.sh-nav a[aria-current="true"]{color:var(--blue);font-weight:600}
+.sh-tools{display:flex;align-items:center;gap:8px}
+.sh-search{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 12px;border:1px solid var(--rule);background:var(--card);color:var(--muted);border-radius:var(--r);font:400 var(--fs-small)/1 var(--sans);cursor:pointer;appearance:none;transition:border-color .15s ease,color .15s ease}
+.sh-search:hover{border-color:var(--rule-strong);color:var(--soft)}
+.sh-search svg,.sh-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
+.sh-search .lbl{min-width:84px;text-align:left}
+kbd{font:500 12px/1 var(--sans);color:var(--muted);border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;padding:3px 6px;background:var(--paper)}
+.sh-search .kbd-mod{display:inline-block;min-width:2.5em;text-align:end}
+.sh-search .kbd-other{display:none}
+html[data-mod="other"] .sh-search .kbd-mac{display:none}
+html[data-mod="other"] .sh-search .kbd-other{display:inline-block}
+.sh-search-m{color:var(--soft);opacity:1}
+.sh-search-m svg{opacity:1}
+.sh-icon{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--soft);border-radius:var(--r);cursor:pointer;transition:background-color .15s ease,color .15s ease}
+@media (hover:hover){.sh-icon:hover{background:var(--tint);color:var(--ink)}}
+.sh-menu-btn,.sh-search-m{display:none}
+html[data-theme="dark"] .i-moon,html:not([data-theme="dark"]) .i-sun{display:none}
+.sh-menu{display:none}
+
+/* ---------- page frame ---------- */
+.sh-main{max-width:var(--shell);margin:0 auto;padding:0 32px}
+.sh-head{padding:72px 0 36px;max-width:var(--list)}
+.sh-head h1{font:700 var(--fs-display)/1.2 var(--sans);color:var(--ink);margin:0;letter-spacing:0;text-wrap:balance}
+.sh-deck{margin:14px 0 0;font-size:var(--fs-body);color:var(--soft);max-width:36em}
+.sh-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;font-size:var(--fs-small);color:var(--muted);text-decoration:none;padding:4px 0}
+.sh-back:hover{color:var(--blue)}
+.sh-section{margin:72px 0 0}
+.sh-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 8px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
+.sh-sec-head h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:0}
+.sh-more{font-size:15px;color:var(--soft);text-decoration:none;white-space:nowrap;padding:6px 0}
+.sh-more:hover{color:var(--blue)}
+.sh-more::after{content:" →"}
+
+/* ---------- list layout with right rail (mirrors the article's right TOC) ---------- */
+.sh-listgrid{display:grid;grid-template-columns:minmax(0,var(--list)) var(--side);gap:0 72px;align-items:start;justify-content:space-between}
+.sh-rail{position:sticky;top:calc(var(--hdr) + 28px);font-size:var(--fs-small);color:#737069}
+html[data-theme="dark"] .sh-rail{color:var(--muted)}
+.sh-rail h2{font:600 var(--fs-small)/1.4 var(--sans);color:var(--soft);margin:0 0 10px}
+.sh-rail > p{margin:0;line-height:1.7}
+.sh-rail ol{list-style:none;margin:0 0 28px;padding:0}
+.sh-rail li a{display:flex;justify-content:space-between;gap:12px;padding:5px 0;text-decoration:none;color:inherit}
+.sh-rail li a:hover{color:var(--ink)}
+.sh-rail li a[aria-current="true"]{color:var(--blue)}
+.sh-rail li[hidden]{display:none}
+
+/* ---------- filter tabs ---------- */
+.sh-filters{display:flex;flex-wrap:wrap;gap:6px 4px;margin:0 0 8px;padding:0;list-style:none}
+.sh-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--soft);
+  font:400 15px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
+.sh-chip .n{font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
+@media (hover:hover){.sh-chip:hover{background:var(--tint);color:var(--ink)}}
+.sh-chip[aria-current="true"],.sh-chip[aria-pressed="true"]{background:var(--blue-tint);color:var(--blue);font-weight:600}
+.sh-chip[aria-current="true"] .n,.sh-chip[aria-pressed="true"] .n{color:var(--blue)}
+.sh-filters .extra[hidden]{display:none}
+.sh-chip.toggle{color:var(--muted)}
+.sh-chip.toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s ease}
+.sh-chip.toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
+.sh-status{display:flex;align-items:center;gap:12px;min-height:40px;margin:4px 0 0;font-size:var(--fs-small);color:var(--muted)}
+.sh-status > button,.sh-status > a{font:inherit;color:var(--blue);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
+.sh-view{display:inline-flex;margin-left:auto;border:1px solid var(--rule);border-radius:var(--r);padding:2px;background:var(--card)}
+.sh-view button{font:400 13px/1 var(--sans);color:var(--muted);background:none;border:0;border-radius:9px;padding:7px 10px;cursor:pointer;min-height:30px}
+.sh-view button[aria-pressed="true"]{background:var(--well);color:var(--ink);font-weight:600}
+
+/* ---------- post rows ---------- */
+.sh-year{margin:0}
+.sh-year > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px;scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-year > h2 .n{font:400 var(--fs-meta)/1 var(--sans);color:var(--muted)}
+.sh-year[hidden],.sh-row[hidden]{display:none}
+.sh-rows{list-style:none;margin:0;padding:0}
+.sh-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:4px 20px;padding:18px 0 19px;border-bottom:1px solid var(--rule)}
+.sh-row time{grid-row:1;font-size:var(--fs-small);line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
+.sh-row h3{grid-column:2;margin:0;font:600 var(--fs-body)/1.55 var(--sans);color:var(--ink)}
+.sh-row h3 a{text-decoration:none}
+.sh-row h3 a::after{content:"";position:absolute;inset:0}           /* whole row clickable, one link in the a11y tree */
+.sh-row h3 a:focus-visible{outline:none}
+.sh-row:has(h3 a:focus-visible){outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r)}
+.sh-row p{grid-column:2;margin:0;font-size:var(--fs-small);line-height:1.7;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.sh-row .cat{grid-column:3;grid-row:1;position:relative;z-index:1;font-size:var(--fs-meta);line-height:1.7;color:var(--muted);text-decoration:none;padding:2px 0 0;white-space:nowrap}
+.sh-row .cat:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
+.sh-row .pin{font:400 12px/1 var(--sans);color:var(--blue);background:var(--blue-tint);border-radius:6px;padding:3px 6px;margin-left:8px;vertical-align:2px;white-space:nowrap}
+.sh-row .series{font-weight:400;color:var(--muted);font-size:var(--fs-meta);margin-left:8px;white-space:nowrap}
+.sh-row:hover h3 a{color:var(--blue)}
+.sh-row h3 a{transition:color .15s ease}
+.is-compact .sh-row{padding:11px 0 12px}
+.is-compact .sh-row p{display:none}
+.is-compact .sh-row h3{font-weight:500}
+.sh-empty{padding:28px 0;color:var(--muted);font-size:15px}
+
+/* ---------- home ---------- */
+.sh-intro{padding:80px 0 8px;max-width:var(--list)}
+.sh-intro h1{font:700 var(--fs-display)/1.25 var(--sans);color:var(--ink);margin:0;letter-spacing:0;max-width:var(--list);text-wrap:balance}
+.sh-intro p{margin:18px 0 0;font-size:var(--fs-lead);line-height:1.7;color:var(--soft);max-width:32em;text-wrap:balance}
+.sh-intro .links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:15px}
+.sh-intro .links a{color:var(--soft);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:5px;text-decoration-thickness:1px;padding:4px 0}
+.sh-intro .links a:hover{color:var(--blue);text-decoration-color:currentColor}
+.sh-feature{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center;margin:56px 0 0}
+.sh-feature:not(:has(.cover)){grid-template-columns:minmax(0,1fr)}
+.sh-feature .cover{border-radius:var(--r-lg);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
+.sh-feature .cover .cover-art{height:86%;width:auto}
+.sh-feature .kicker{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-small);color:var(--muted);margin:0 0 12px}
+.sh-feature h2{font:700 30px/1.35 var(--sans);color:var(--ink);margin:0;text-wrap:balance}
+.sh-feature h2 a{text-decoration:none}
+.sh-feature h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
+.sh-feature:hover h2 a{color:var(--blue)}
+.sh-feature:has(h2 a:focus-visible){outline:2px solid var(--blue);outline-offset:8px;border-radius:var(--r-lg)}
+.sh-feature h2 a:focus-visible{outline:none}
+.sh-feature p{margin:14px 0 0;font-size:var(--fs-body);color:var(--soft)}
+.sh-feature .tags{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:var(--fs-meta);color:var(--muted)}
+.sh-home-grid{display:grid;grid-template-columns:minmax(0,var(--list)) minmax(0,320px);gap:0 72px;justify-content:space-between;align-items:start}
+.sh-home-grid .sh-row{grid-template-columns:96px minmax(0,1fr) auto}
+.sh-side-list{list-style:none;margin:0;padding:0}
+.sh-side-list li{position:relative;padding:16px 0;border-bottom:1px solid var(--rule)}
+.sh-side-list a{font:600 15px/1.6 var(--sans);color:var(--ink);text-decoration:none}
+.sh-side-list a::after{content:"";position:absolute;inset:0}
+.sh-side-list li:hover a{color:var(--blue)}
+.sh-side-list span{display:block;margin-top:4px;font-size:var(--fs-meta);color:var(--muted)}
+
+/* ---------- column (series) cards ---------- */
+.sh-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
+.sh-col{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:border-color .15s ease}
+.sh-col:hover{border-color:var(--rule-strong)}
+.sh-col .cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--r-lg) - 8px);margin:8px 8px 0;overflow:hidden}
+.sh-col .cover .cover-art{height:84%;width:auto}
+.sh-col .body{padding:18px 22px 22px}
+.sh-col h3{margin:0;font:700 var(--fs-lead)/1.4 var(--sans);color:var(--ink)}
+.sh-col h3 a{text-decoration:none}
+.sh-col h3 a::after{content:"";position:absolute;inset:0}
+.sh-col:hover h3 a{color:var(--blue)}
+.sh-col:has(h3 a:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
+.sh-col h3 a:focus-visible{outline:none}
+.sh-col .count{font-size:var(--fs-meta);color:var(--muted);margin:4px 0 0}
+.sh-col p{margin:10px 0 0;font-size:15px;line-height:1.7;color:var(--soft)}
+
+/* columns page */
+
+/* ---------- tags ---------- */
+.sh-tagcloud{display:flex;flex-wrap:wrap;gap:6px 4px;list-style:none;margin:0;padding:0}
+.sh-tagcloud .sh-chip{border-color:var(--rule);background:var(--card)}
+@media (hover:hover){.sh-tagcloud .sh-chip:hover{border-color:var(--rule-strong);background:var(--card)}}
+.sh-tagcloud .sh-chip[aria-pressed="true"]{background:var(--blue-tint);border-color:var(--blue-line)}
+.sh-once{margin:20px 0 0}
+.sh-once summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;color:var(--soft);padding:8px 0;list-style:none}
+.sh-once summary::-webkit-details-marker{display:none}
+.sh-once summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s ease}
+.sh-once[open] summary svg{transform:rotate(180deg)}
+.sh-once .sh-tagcloud{margin-top:10px}
+.sh-once .sh-chip{min-height:32px;font-size:var(--fs-small)}
+.sh-tagresult{margin-top:40px;scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-tagresult h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:0;padding-bottom:12px;border-bottom:1px solid var(--rule-strong)}
+.sh-tagresult .hint{color:var(--muted);font-size:15px;padding:20px 0}
+
+/* ---------- about ---------- */
+.sh-about{display:grid;grid-template-columns:minmax(0,var(--list)) var(--side);gap:0 72px;justify-content:space-between}
+.sh-prose p{margin:0 0 1.1em}
+.sh-prose h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:56px 0 16px}
+.sh-prose ul{margin:0;padding-left:1.2em}
+.sh-prose li{margin:.35em 0}
+.sh-prose a{color:var(--blue);text-underline-offset:4px;text-decoration-thickness:1px}
+.sh-note{font-size:var(--fs-meta);color:var(--muted);margin-top:12px}
+
+/* ---------- 404 ---------- */
+.sh-404{padding:96px 0 24px;max-width:var(--list)}
+.sh-404 .code{font:400 var(--fs-small)/1 var(--sans);color:var(--muted);margin:0 0 16px}
+.sh-404 form{display:flex;gap:8px;margin-top:28px;max-width:520px}
+.sh-input{flex:1;min-width:0;height:48px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 16px/1 var(--sans)}
+.sh-input::placeholder{color:var(--muted)}
+.sh-btn{height:48px;padding:0 18px;border:0;border-radius:var(--r);background:var(--ink);color:var(--paper);font:600 15px/1 var(--sans);cursor:pointer}
+.sh-btn:hover{background:var(--blue)}
+
+/* ---------- footer ---------- */
+.sh-footer{margin-top:120px;border-top:1px solid var(--rule)}
+.sh-foot{max-width:var(--shell);margin:0 auto;padding:32px 32px 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;font-size:var(--fs-small);color:var(--muted)}
+.sh-foot p{margin:0}
+.sh-foot strong{color:var(--ink);font:600 15px/1 var(--serif);margin-right:12px}
+.sh-foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
+.sh-foot a{color:var(--soft);text-decoration:none;padding:4px 0}
+.sh-foot a:hover{color:var(--blue)}
+.sh-demo{width:100%;font-size:var(--fs-meta);color:var(--muted)}
+.sh-demo a{text-decoration:underline;text-underline-offset:3px}
+
+/* ---------- search palette ---------- */
+.sh-pal{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px}
+.sh-pal[hidden]{display:none}
+.sh-pal-scrim{position:absolute;inset:0;background:rgba(20,19,18,.32);animation:sh-fade .16s ease}
+html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
+.sh-pal-box{position:relative;width:min(640px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
+  box-shadow:0 18px 48px rgba(27,26,24,.18),0 2px 8px rgba(27,26,24,.06);overflow:hidden;animation:sh-pop .18s var(--ease)}
+.sh-pal-top{display:flex;align-items:center;gap:12px;padding:0 12px 0 20px;border-bottom:1px solid var(--rule)}
+.sh-pal-top svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;flex:none}
+.sh-pal-input{flex:1;min-width:0;height:60px;border:0;background:transparent;color:var(--ink);font:400 18px/1 var(--sans);outline:none}
+.sh-pal-input::placeholder{color:var(--muted)}
+.sh-pal-input::-webkit-search-cancel-button{display:none}
+.sh-pal-cancel{display:none;font:400 16px/1 var(--sans);color:var(--blue);background:none;border:0;padding:12px 4px;cursor:pointer}
+.sh-pal-list{overflow-y:auto;overscroll-behavior:contain;padding:8px}
+.sh-pal-group{font:600 var(--fs-meta)/1 var(--sans);color:var(--muted);padding:14px 12px 8px}
+.sh-pal-item{display:block;padding:10px 12px;border-radius:var(--r);text-decoration:none;color:var(--text);scroll-margin:8px}
+.sh-pal-item .t{display:block;font:600 15px/1.5 var(--sans);color:var(--ink)}
+.sh-pal-item .m{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px;font-size:var(--fs-meta);color:var(--muted)}
+.sh-pal-item .x{display:block;margin-top:2px;font-size:var(--fs-meta);line-height:1.6;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sh-pal-item[aria-selected="true"]{background:var(--blue-tint)}
+.sh-pal-item[aria-selected="true"] .t{color:var(--blue)}
+.sh-pal-item mark{background:transparent;color:var(--blue);font-weight:700}
+.sh-pal-empty{padding:28px 12px;color:var(--muted);font-size:15px;text-align:center}
+.sh-pal-foot{display:flex;gap:18px;padding:10px 20px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted);background:var(--paper)}
+.sh-pal-foot span{display:inline-flex;align-items:center;gap:6px}
+@keyframes sh-fade{from{opacity:0}}
+@keyframes sh-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}}
+
+/* ---------- responsive ---------- */
+@media (max-width:1080px){
+  .sh-listgrid,.sh-about{grid-template-columns:minmax(0,1fr)}
+  .sh-rail{display:none}
+  .sh-home-grid{grid-template-columns:minmax(0,1fr)}
+  .sh-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
+}
+@media (max-width:820px){
+  :root,:root[data-theme="light"],:root[data-theme="dark"],html[data-theme="dark"]{--hdr:56px;--fs-display:34px;--fs-h2:22px}
+  .sh-bar{padding:0 12px 0 20px;gap:4px}
+  .sh-nav,.sh-search{display:none}
+  .sh-word{margin-right:auto}
+  .sh-menu-btn,.sh-search-m{display:inline-grid;width:44px;height:44px}
+  .sh-menu{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 20px 20px;
+    opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .18s ease,transform .18s var(--ease),visibility 0s .18s}
+  .sh-menu.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .18s var(--ease)}
+  .sh-menu a{display:flex;align-items:center;min-height:52px;font-size:var(--fs-lead);color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
+  .sh-menu a[aria-current="page"],.sh-menu a[aria-current="true"]{color:var(--blue);font-weight:600}
+  .sh-menu .theme-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:15px;color:var(--soft)}
+  .sh-menu .theme-row button{font:400 15px/1 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:0 14px;min-height:40px;cursor:pointer}
+  .sh-theme{display:none}
+  .sh-main{padding:0 20px}
+  .sh-head{padding:40px 0 24px}
+  .sh-intro{padding:44px 0 0}
+  .sh-intro p{font-size:var(--fs-body)}
+  .sh-feature{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
+  .sh-feature .cover{border-radius:16px}
+  .sh-feature h2{font-size:24px}
+  .sh-section{margin-top:56px}
+  .sh-cols{grid-template-columns:minmax(0,1fr);gap:16px}
+  /* one-line, scrollable filter row on phones */
+  .sh-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 4px;padding:0 20px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent)}
+  .sh-filters::-webkit-scrollbar{display:none}
+  .sh-filters.is-open{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none}
+  .sh-row,.sh-home-grid .sh-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:16px 0 17px}
+  .sh-row time{grid-column:1;grid-row:1;font-size:var(--fs-meta);padding:0}
+  .sh-row .cat{grid-column:2;grid-row:1;padding:0}
+  .sh-row h3,.sh-row p{grid-column:1 / -1}
+  .sh-row h3{font-size:var(--fs-body)}
+  .sh-404{padding:48px 0 0}
+  .sh-footer{margin-top:80px}
+  .sh-foot{padding:24px 20px 40px;flex-direction:column}
+  /* palette becomes a full-screen sheet */
+  .sh-pal{padding:0}
+  .sh-pal-box{width:100%;max-height:none;height:100%;border-radius:0;border:0;animation:none}
+  .sh-pal-top{padding:max(env(safe-area-inset-top),0px) 12px 0 16px}
+  .sh-pal-cancel{display:block}
+  .sh-pal-foot{display:none}
+  .sh-pal-input{font-size:17px;height:56px}
+}
+@media (prefers-reduced-motion:reduce){
+  *,*::before,*::after{animation:none!important;transition:none!important}
+  html{scroll-behavior:auto!important}
+}
+
+/* ===== v2: sub-categories, breadcrumb, 随想 stream, live GitHub ===== */
+.sh-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 14px;font-size:var(--fs-small);color:var(--muted)}
+.sh-crumbs[hidden]{display:none}
+.sh-crumbs a{color:var(--muted);text-decoration:none;padding:4px 0}
+.sh-crumbs a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
+.sh-crumbs .sep{color:var(--muted)}
+.sh-crumbs [aria-current]{color:var(--soft)}
+.sh-subs{display:flex;flex-wrap:wrap;gap:6px 6px;list-style:none;margin:6px 0 4px;padding:12px 0 0;border-top:1px solid var(--rule)}
+.sh-subs[hidden]{display:none}
+.sh-sub{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
+  color:var(--soft);font:400 var(--fs-small)/1 var(--sans);text-decoration:none;white-space:nowrap;transition:border-color .15s ease,color .15s ease}
+.sh-sub .n{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
+@media (hover:hover){.sh-sub:hover{border-color:var(--rule-strong);color:var(--ink)}}
+.sh-sub[aria-current="true"]{border-color:var(--blue-line);background:var(--blue-tint);color:var(--blue);font-weight:600}
+.sh-sub[aria-current="true"] .n{color:var(--blue)}
+.sh-rail li > span.row{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
+
+/* 随想: a narrower stream, full text, media inline, meta at the foot */
+.sh-stream{max-width:620px}
+.sh-notice{margin:0 0 8px;padding:14px 18px;border:1px dashed var(--rule-strong);border-radius:var(--r);font-size:var(--fs-small);line-height:1.7;color:var(--soft)}
+.sh-notice strong{color:var(--ink)}
+.sh-month > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px}
+.sh-month > h2 .n{font:400 var(--fs-meta)/1 var(--sans);color:var(--muted)}
+.sh-note{padding:28px 0 26px;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-note:target{background:linear-gradient(var(--blue-tint),var(--blue-tint)) no-repeat;background-size:100% 100%;box-shadow:-16px 0 0 var(--blue-tint),16px 0 0 var(--blue-tint)}
+.sh-note h3{margin:0 0 6px;font:700 var(--fs-body)/1.55 var(--sans);color:var(--ink)}
+.sh-note-body p{margin:0 0 .7em;font-size:var(--fs-body);line-height:1.8;color:var(--text)}
+.sh-note-body p:last-child{margin-bottom:0}
+.sh-note-imgs{display:grid;gap:6px;margin:16px 0 0;border-radius:var(--r);overflow:hidden}
+.sh-note-imgs img{display:block;width:100%;height:100%;object-fit:cover;background:var(--well)}
+.sh-note-imgs.one img{aspect-ratio:3/2}
+.sh-note-imgs.two{grid-template-columns:1fr 1fr}.sh-note-imgs.two img{aspect-ratio:1/1}
+.sh-note-imgs.three{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
+.sh-note-imgs.three img:first-child{grid-row:1 / 3}
+.sh-note-video{display:block;width:100%;aspect-ratio:16/9;margin:16px 0 0;border-radius:var(--r);background:#000;object-fit:cover}
+.sh-note-audio{margin:16px 0 0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
+.sh-note-audio figcaption{font-size:var(--fs-meta);color:var(--muted);margin:0 0 8px}
+.sh-note-audio audio{display:block;width:100%;height:36px}
+.sh-note-link{display:grid;gap:2px;margin:16px 0 0;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);text-decoration:none;transition:border-color .15s ease}
+@media (hover:hover){.sh-note-link:hover{border-color:var(--rule-strong)}.sh-note-link:hover .t{color:var(--blue)}}
+.sh-note-link .h{font-size:var(--fs-meta);color:var(--muted)}
+.sh-note-link .t{font:600 15px/1.5 var(--sans);color:var(--ink)}
+.sh-note-link .t::after{content:" ↗";color:var(--muted);font-weight:400}
+.sh-note-link .d{font-size:var(--fs-small);line-height:1.6;color:var(--soft)}
+.sh-note footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:14px;font-size:var(--fs-meta);color:var(--muted)}
+.sh-note .when{color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;padding:4px 0}
+.sh-note .when:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
+.sh-note .tag{color:var(--soft)}
+.sh-note .ex{font-size:12px;line-height:1;color:var(--muted);border:1px dashed var(--rule-strong);border-radius:6px;padding:3px 6px}
+html[data-theme="dark"] .sh-note-imgs img,html[data-theme="dark"] .sh-note-video{filter:brightness(.92)}
+
+@media (max-width:820px){
+  .sh-subs{flex-wrap:nowrap;overflow-x:auto;margin:6px -20px 4px;padding:12px 20px 0;scrollbar-width:none}
+  .sh-subs::-webkit-scrollbar{display:none}
+  .sh-note:target{box-shadow:-20px 0 0 var(--blue-tint),20px 0 0 var(--blue-tint)}
+}
+
+
+/* ===== About: GitHub project cards (live) ===== */
+.sh-repos{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
+.sh-repos > li{position:relative;margin:0;display:grid;grid-template-rows:24px 48px 20px;row-gap:6px;padding:16px 18px;
+  border:1px solid var(--rule-strong);border-radius:var(--r);background:transparent;transition:border-color .15s ease}
+.sh-repos h3{margin:0;display:flex;align-items:center;gap:8px;min-width:0;font:600 16px/24px var(--sans)}
+.sh-repos h3 a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
+.sh-repos h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
+.sh-repos h3 a:focus-visible{outline:none}
+.sh-repos > li:has(a:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
+.sh-repos .arr{margin-left:auto;flex:none;color:var(--muted);font-weight:400;font-size:14px;transition:color .15s ease,transform .15s ease}
+.sh-repos .desc{margin:0;font-size:14.5px;line-height:24px;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.sh-repos .desc.none{color:var(--muted)}
+.sh-repos .meta{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--fs-meta);line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
+.sh-repos .meta > span{display:inline-flex;align-items:center;gap:5px}
+.sh-repos .dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--muted));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
+.sh-repos .meta svg{width:14px;height:14px;fill:currentColor}
+.sh-repos .meta time{margin-left:auto}
+@media (hover:hover){
+  .sh-repos > li:not(.sk):hover{border-color:var(--muted)}
+  .sh-repos > li:not(.sk):hover h3 a{color:var(--blue)}
+  .sh-repos > li:not(.sk):hover .arr{color:var(--blue);transform:translate(2px,-2px)}
+}
+/* skeleton card: same box, same rows */
+.sh-repos > li.sk{overflow:hidden;border-color:var(--rule)}
+.sh-repos .sk i{display:block;border-radius:6px;background:var(--well)}
+.sh-repos .sk .a{width:46%;height:14px;margin-top:5px}
+.sh-repos .sk .b{width:94%;height:12px;margin:6px 0}.sh-repos .sk .b + .b{width:62%}
+.sh-repos .sk .c{width:58%;height:11px;margin-top:5px}
+.sh-repos > li.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:sh-shimmer 1.4s infinite}
+html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
+@keyframes sh-shimmer{to{transform:translateX(100%)}}
+@media (max-width:820px){.sh-repos{grid-template-columns:minmax(0,1fr);gap:12px}}
+@media (prefers-reduced-motion:reduce){.sh-repos > li.sk::after{display:none}.sh-repos .arr{transition:none}}
+
+/* ===== 专栏 v4: moderate cover, no numbers, dates, link to category ===== */
+.sh-series{display:grid;grid-template-columns:240px minmax(0,760px);gap:0 40px;padding:36px 0;border-top:1px solid var(--rule)}
+.sh-series:first-of-type{border-top:0;padding-top:8px}
+.sh-series .cover{aspect-ratio:16/9;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;align-self:start}
+.sh-series .cover .cover-art{height:84%;width:auto}
+.sh-series h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:0;scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-series .count{font-size:var(--fs-small);color:var(--muted);margin:6px 0 0}
+.sh-series .desc{font-size:var(--fs-body);line-height:1.7;color:var(--soft);margin:12px 0 0}
+.sh-series ol{margin:18px 0 0;padding:0;list-style:none}
+.sh-series li{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--rule)}
+.sh-series li:last-child{border-bottom:1px solid var(--rule)}
+.sh-series li[hidden]{display:none}
+.sh-series li a{flex:1;min-width:0;padding:11px 0;font-size:15px;line-height:1.6;color:var(--text);text-decoration:none}
+.sh-series li time{flex:none;font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
+@media (hover:hover){.sh-series li a:hover{color:var(--blue)}}
+.sh-series .acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:14px}
+.sh-series .expand{font:400 var(--fs-small)/1 var(--sans);color:var(--soft);background:none;border:1px solid var(--rule);border-radius:var(--r);padding:10px 14px;margin:0;cursor:pointer}
+@media (hover:hover){.sh-series .expand:hover{border-color:var(--rule-strong);color:var(--ink)}}
+.sh-series .tocat{margin-left:auto;font-size:var(--fs-small);color:var(--blue);text-decoration:none;padding:8px 0}
+.sh-series .tocat:hover{text-decoration:underline;text-underline-offset:4px}
+.sh-colnote{margin:12px 0 0;font-size:var(--fs-small);color:var(--soft)}
+.sh-colnote[hidden]{display:none}
+.sh-colnote a{color:var(--blue);text-underline-offset:3px}
+@media (max-width:1080px){.sh-series{grid-template-columns:180px minmax(0,1fr);gap:0 28px}}
+@media (max-width:820px){
+  .sh-series{grid-template-columns:104px minmax(0,1fr);column-gap:16px;padding:28px 0}
+  .sh-series > .body{display:contents}
+  .sh-series .cover{grid-column:1;grid-row:1 / 3;align-self:center;border-radius:10px}
+  .sh-series h2{grid-column:2;grid-row:1;align-self:end;font-size:21px}
+  .sh-series .count{grid-column:2;grid-row:2;align-self:start;margin-top:4px}
+  .sh-series .desc,.sh-series ol,.sh-series .acts{grid-column:1 / -1}
+  .sh-series .desc{font-size:15px;margin-top:14px}
+  .sh-series li{flex-direction:column;align-items:stretch;gap:0;padding:10px 0}
+  .sh-series li a{padding:0}
+  .sh-series li time{margin-top:2px}
+  .sh-series .tocat{margin-left:0}
+}
+
+.sh-row .incol{grid-column:2;justify-self:start;position:relative;z-index:1;margin-top:4px;font-size:var(--fs-meta);line-height:1.6;color:var(--muted);text-decoration:none}
+@media (hover:hover){.sh-row .incol:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}}
+.is-compact .sh-row .incol{display:none}
+@media (max-width:820px){.sh-row .incol{grid-column:1 / -1}}
+
+

package/app/styles/tokens.css

@@ -0,0 +1,111 @@
+/* A2 tokens. One source for the site, the article, and every component. */
+
+:root,
+:root[data-theme="light"] {
+  --paper: #f8f7f3;
+  --paper-deep: #f0eee8;
+  --card: #ffffff;
+  --ink: #1b1a18;
+  --ink-soft: #2d2c29;
+  --text: #2d2c29;
+  --soft: #4a4844;
+  --muted: #6e6b64;
+  --grey: #737069;
+  --faint: #737069;
+  --rule: #e6e3dc;
+  --rule-strong: #d6d2c9;
+  --line: #e6e3dc;
+  --line-strong: #d6d2c9;
+  --well: #f0eee8;
+  --tint: rgb(27 26 24 / 5.5%);
+  --blue: #2c55b4;
+  --blue-tint: #eaf0fc;
+  --blue-line: rgb(44 85 180 / 28%);
+  --cover: #5e86e0;
+  --accent: var(--blue);
+  --accent-soft: var(--blue-tint);
+  --selection: #eaf0fc;
+  --hl: #ffe58f;
+  --red: #d82d48;
+  --red-text: #c2263f;
+  --red-tint: #fbeef0;
+  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
+  --serif: "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "Source Serif 4", Georgia, serif;
+  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
+  --font-mono: var(--mono);
+  --fs-display: 46px;
+  --fs-hero: 52px;
+  --fs-h2: 26px;
+  --fs-lead: 20px;
+  --fs-body: 17px;
+  --fs-small: 14px;
+  --fs-meta: 13px;
+  --r: 12px;
+  --r-lg: 24px;
+  --col: 700px;
+  --rail: 232px;
+  --gap: 48px;
+  --content: var(--col);
+  --wide: 1200px;
+  --shell: 1200px;
+  --hdr: 64px;
+  color-scheme: light;
+}
+
+:root[data-theme="dark"],
+html[data-theme="dark"] {
+  --paper: #161513;
+  --paper-deep: #22211d;
+  --card: #1e1d1a;
+  --ink: #eeece7;
+  --ink-soft: #dcd9d2;
+  --text: #dcd9d2;
+  --soft: #bdb9b0;
+  --muted: #a09b91;
+  --grey: #a09b91;
+  --faint: #a09b91;
+  --rule: #2f2d29;
+  --rule-strong: #45423c;
+  --line: #2f2d29;
+  --line-strong: #45423c;
+  --well: #22211d;
+  --tint: rgb(238 236 231 / 7%);
+  --blue: #93b2f4;
+  --blue-tint: rgb(147 178 244 / 13%);
+  --blue-line: rgb(147 178 244 / 35%);
+  --cover: #4c72c9;
+  --accent: var(--blue);
+  --accent-soft: var(--blue-tint);
+  --selection: rgb(147 178 244 / 22%);
+  --hl: #6b5a2a;
+  --red: #f29aab;
+  --red-text: #f29aab;
+  --red-tint: rgb(242 154 171 / 12%);
+  color-scheme: dark;
+}
+
+@media (min-width: 1400px) {
+  :root,
+  :root[data-theme="light"],
+  :root[data-theme="dark"],
+  html[data-theme="dark"] { --fs-hero: 56px; }
+}
+
+@media (max-width: 1239px) {
+  :root,
+  :root[data-theme="light"],
+  :root[data-theme="dark"],
+  html[data-theme="dark"] { --fs-hero: 44px; }
+}
+
+@media (max-width: 640px) {
+  :root,
+  :root[data-theme="light"],
+  :root[data-theme="dark"],
+  html[data-theme="dark"] {
+    --fs-hero: 30px;
+    --fs-h2: 23px;
+    --fs-lead: 18px;
+    --fs-body: 16.5px;
+  }
+}

package/app/tags/page.tsx

@@ -0,0 +1,28 @@
+import { Suspense } from "react";
+import { posts } from "../lib/content";
+import { TagIndex } from "../components/TagIndex";
+import { siteDocumentTitle } from "../site.config";
+
+export const metadata = {
+  title: siteDocumentTitle,
+  description: "按标签浏览文章。标签不是专栏，也不是分类。",
+};
+
+export default function TagsPage() {
+  const counts = new Map<string, number>();
+  for (const post of posts) {
+    for (const tag of post.tags ?? []) counts.set(tag, (counts.get(tag) ?? 0) + 1);
+  }
+  const once = [...counts.values()].filter((count) => count === 1).length;
+  return (
+    <main className="sh-main" id="content">
+      <div className="sh-head">
+        <h1>标签</h1>
+        <p className="sh-deck">{counts.size} 个标签，按使用次数排序；只用过一次的 {once} 个收在下面。点选一个标签，下方列出对应文章。</p>
+      </div>
+      <Suspense>
+        <TagIndex posts={posts} />
+      </Suspense>
+    </main>
+  );
+}

package/app/ui-parity/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { ParityInteractions } from "../../ui/react/parity";
 
 const slices = [
@@ -61,7 +62,7 @@ export default function UiParityPage() {
         <p className="garden-ui-text-sm">统计期为 2024 年 8 月至 2025 年 8 月。</p>
         <p className="garden-ui-caption">
           {"抖音电商官方报告，经新华社报道。该增速不能直接代表抖音电商整体 GMV 增速。"}<a id="parity-cite" className="garden-ui-cite" href="https://www.news.cn">
-            <img src="https://www.google.com/s2/favicons?domain=www.news.cn&sz=32" alt="" width={12} height={12} />
+            <Image src="https://www.google.com/s2/favicons?domain=www.news.cn&sz=32" alt="" width={12} height={12} unoptimized />
             Xinhua Net
           </a>
         </p>
@@ -72,7 +73,7 @@ export default function UiParityPage() {
         <p className="garden-ui-text-xs">商品条目</p>
         <p className="garden-ui-caption">
           {"阿里巴巴披露其 AI 搜索推荐系统索引了超过 20 亿商品条目。"}<a className="garden-ui-cite" href="https://www.alibabagroup.com">
-            <img src="https://www.google.com/s2/favicons?domain=www.alibabagroup.com&sz=32" alt="" width={12} height={12} />
+            <Image src="https://www.google.com/s2/favicons?domain=www.alibabagroup.com&sz=32" alt="" width={12} height={12} unoptimized />
             Alibaba Group
           </a>
         </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.3.13",
+  "version": "0.4.0",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/scripts/build-content.mjs

@@ -6,6 +6,7 @@ import { marked } from "marked";
 import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
 import { canonicalSiteDate } from "./site-date.mjs";
 import { contentForFeed, contentToSearchText, transformUiContent } from "../ui/core/transform.mjs";
+import { countDemoWords } from "../ui/garden/word-count.mjs";
 
 function resolveSiteRoot() {
   if (process.env.GARDEN_SITE) return path.resolve(process.env.GARDEN_SITE);
@@ -527,9 +528,17 @@ assertUnique(
 );
 assertUnique(thoughts, (item) => item.slug, "随想 slug");
 
+const parityDir = path.join(root, "parity", "articles");
+const a2WordCounts = fs.existsSync(parityDir)
+  ? Object.fromEntries(fs.readdirSync(parityDir).filter((name) => name.endsWith(".md")).sort().map((name) => {
+      const parsed = matter(fs.readFileSync(path.join(parityDir, name), "utf8"));
+      return [name.slice(0, -3), countDemoWords(parsed.content)];
+    }))
+  : {};
+
 const contentHash = crypto
   .createHash("sha256")
-  .update(JSON.stringify({ posts, columns, thoughts }))
+  .update(JSON.stringify({ posts, columns, thoughts, a2WordCounts }))
   .digest("hex")
   .slice(0, 12);
 
@@ -581,6 +590,7 @@ export const contentHash = "${contentHash}";
 export const posts = ${JSON.stringify(posts, null, 2)} as ContentEntry[];
 export const columns = ${JSON.stringify(columns, null, 2)} as ContentEntry[];
 export const thoughts = ${JSON.stringify(thoughts, null, 2)} as ContentEntry[];
+export const a2WordCounts = ${JSON.stringify(a2WordCounts, null, 2)} as Record<string, number>;
 `;
 
 fs.mkdirSync(path.dirname(output), { recursive: true });