feat(structure): compact archive + tag pages + hero/featured, and fix site search

Found a real bug while verifying the nav search: /pagefind/pagefind.js is an ES
module that defines no window.Pagefind, but Search.astro loaded it with a classic
<script src> and read window.Pagefind — so every query answered "Search is
unavailable." (confirmed live before the fix). Now a dynamic import; the specifier
must be a variable or Rollup resolves it at build time and the build fails.

Measured before/after in a real browser:

- archive /posts/ + /zh/posts/: 18,220px -> 3,788px (71 rows at 44px, grouped by
  year) with a client-side filter (title/tags/description text, category chips,
  14 tag chips, zero requests). Tested: "nginx" -> 6 rows, chip devops -> 28.
- tag pages for tags with >= 3 posts. Measured 235 distinct tags (an earlier brief
  claimed 74), 156 used exactly once — pages only where a topic exists: 40 tags ->
  80 pages, build 165 -> 245 pages. Pills link only when a page exists.
- homepage + ZH homepage: hero (288px) with the real scale claim, three CTAs, a
  fixed Featured 4 (scale -> automation -> observability -> a delivered result),
  Latest 10 -> 6. ZH hero had linked "关于我" to the English /about/.
- long code blocks collapse above 420px with an Expand button + gradient, copy
  button still copies the whole block (verified on the 1010px block).
- search is visible ("⌕ Search /" pill, "/" plus the existing Ctrl/Cmd+K) and the
  zero-result screen offers topic chips instead of a dead end.

Docs: project-state B3 entry, ops-runbook Pagefind gotcha.

src/pages/index.astro

@@ -7,24 +7,51 @@ import { SITE } from '../config';
 import { sortForListing } from '../lib/sort';
 
 const posts = sortForListing(await getCollection('posts', isEn));
+
+// Featured picks: fixed slugs, not "newest 4", so the front page stays stable after a
+// publish and keeps answering "who is this and what has he actually run" (scale →
+// automation → observability → a delivered business result). Falls back to the newest
+// posts if a slug ever disappears.
+const FEATURED_SLUGS = [
+  'running-production-infrastructure-solo',
+  'loop-engineering-without-a-coding-agent',
+  'one-prometheus-for-unraid-synology-and-a-vps',
+  'self-healing-digital-goods-entitlements',
+];
+const bySlug = new Map(posts.map((p) => [p.slug, p]));
+const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
+const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
 ---
 
 <BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
-  <section>
-    <h1>Hi, I'm {SITE.author}.</h1>
-    <p>
-      A full-stack developer and DevOps engineer based in Malaysia. I build web
-      apps (PHP/CodeIgniter, Java/Spring, TypeScript/React), self-host a
-      ~140-container homelab, and run a website design & development business
-      for Malaysian SMEs. I write here about what I learn and ship.
+  <section class="hero">
+    <h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
+    <p class="hero-sub">
+      I run <strong>162 containers across three self-managed hosts</strong> — client sites, a
+      mail platform, CI/CD, workflow automation and this blog — and I build web systems for
+      Malaysian SMEs. I write up what broke, what the evidence said, and how I fixed it.
     </p>
-    <p>
-      <a href="/about/">More about me</a>
-      <span class="sep">·</span>
-      <a href="/posts/">Browse all posts</a>
-      <span class="sep">·</span>
-      <a href="/rss.xml">RSS</a>
+    <p class="hero-cta">
+      <a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
+      <a class="btn" href="/about/">Hiring? Profile &amp; stack →</a>
+      <a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
     </p>
+    <p class="hero-note">
+      {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
+    </p>
+  </section>
+
+  <section id="featured">
+    <h2>Featured</h2>
+    <div class="featured-grid">
+      {featuredPosts.map((p) => (
+        <a class="featured-card" href={`/posts/${p.slug}/`}>
+          <span class="featured-badge">{p.data.category}</span>
+          <h3>{p.data.title}</h3>
+          <p>{p.data.description}</p>
+        </a>
+      ))}
+    </div>
   </section>
 
   <section>
@@ -32,7 +59,8 @@ const posts = sortForListing(await getCollection('posts', isEn));
     {posts.length === 0 ? (
       <p><em>No posts yet — check back soon.</em></p>
     ) : (
-      <PostList posts={posts} limit={10} />
+      <PostList posts={posts} limit={6} />
     )}
+    <p class="archive-meta"><a href="/posts/">All {posts.length} posts</a> · <a href="/tags/docker/">tag pages</a></p>
   </section>
 </BaseLayout>

src/pages/posts/[...slug].astro

@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import AuthorCard from '../../components/AuthorCard.astro';
 import { getCollection, render } from 'astro:content';
 import { postLang } from '../../lib/lang';
+import { tagCounts, tagLink } from '../../lib/tags';
 import { SITE } from '../../config';
 
 export async function getStaticPaths() {
@@ -29,6 +30,8 @@ const minutesOf = (body?: string) => Math.max(1, Math.round((body?.trim().split(
 
 // Related posts: same language, same category or overlapping tags, excluding self
 const all = await getCollection('posts', ({ data }) => !data.draft);
+// Tag pills: a tag with its own page becomes a link, a one-off tag stays plain text.
+const tagCount = tagCounts(all.filter((p) => postLang(p.slug) === lang));
 const related = all
   .filter((p) => p.slug !== post.slug && postLang(p.slug) === lang)
   .map((p) => {
@@ -97,7 +100,10 @@ const jsonLd = {
         <span>{minutes} min read</span>
         <span class="sep">·</span>
         <a class="tag" href={`/categories/${post.data.category}/`}>{post.data.category}</a>
-        {post.data.tags.map((t) => <span class="tag">{t}</span>)}
+        {post.data.tags.map((t) => {
+          const href = tagLink(t, tagCount, lang);
+          return href ? <a class="tag" href={href}>{t}</a> : <span class="tag">{t}</span>;
+        })}
       </div>
     </header>
 

src/pages/posts/index.astro

@@ -1,24 +1,27 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import PostList from '../../components/PostList.astro';
+import Archive from '../../components/Archive.astro';
 import { getCollection } from 'astro:content';
 import { isEn } from '../../lib/lang';
 import { sortForListing } from '../../lib/sort';
 import { SITE } from '../../config';
 
+// One static page for all posts: the filter (title/tags/category) runs client-side
+// over this already-rendered list, so it costs no requests and Ctrl+F still works.
+// Before 2026-10-16 this page rendered 71 full cards and stood 18,220px tall.
 const posts = sortForListing(await getCollection('posts', isEn));
 ---
 
 <BaseLayout
   title="Posts — Mr Hoelee"
-  description="All posts on Mr Hoelee's blog."
-  switchHref="/zh/"
-  altLocaleUrl={`${SITE.url}/zh/`}
+  description={`All ${posts.length} posts on Mr Hoelee's blog — engineering, DevOps, self-hosting, AI automation.`}
+  switchHref="/zh/posts/"
+  altLocaleUrl={`${SITE.url}/zh/posts/`}
 >
   <h1>Posts</h1>
-  {posts.length === 0 ? (
-    <p><em>No posts yet.</em></p>
-  ) : (
-    <PostList posts={posts} />
-  )}
+  <p class="archive-lead">
+    {posts.length} posts, newest first. Filter by title, tag or category below — or read a
+    whole topic through its <a href="/tags/docker/">tag page</a>.
+  </p>
+  <Archive posts={posts} lang="en" />
 </BaseLayout>

src/pages/tags/[tag].astro

@@ -0,0 +1,40 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Archive from '../../components/Archive.astro';
+import { getCollection } from 'astro:content';
+import { isEn } from '../../lib/lang';
+import { sortForListing } from '../../lib/sort';
+import { tagCounts, tagPageNames } from '../../lib/tags';
+import { SITE } from '../../config';
+
+// One page per tag that carries a topic (>= TAG_MIN_POSTS posts). Measured
+// 2026-10-16: 235 distinct tags, 156 of them used exactly once — generating a page
+// for those would be 156 near-empty pages, so the threshold is the line between a
+// topic and a word that happened to appear in one post.
+export async function getStaticPaths() {
+  const posts = sortForListing(await getCollection('posts', isEn));
+  const counts = tagCounts(posts);
+  return tagPageNames(posts).map((tag) => ({
+    params: { tag },
+    props: { tag, n: counts.get(tag) ?? 0, posts: posts.filter((p) => p.data.tags.includes(tag)) },
+  }));
+}
+
+const { tag, posts } = Astro.props as { tag: string; posts: any[] };
+---
+
+<BaseLayout
+  title={`${tag} — posts — Mr Hoelee`}
+  description={`${posts.length} posts tagged "${tag}" on Mr Hoelee's blog — engineering, DevOps and self-hosting write-ups.`}
+  switchHref={`/zh/tags/${tag}/`}
+  altLocaleUrl={`${SITE.url}/zh/tags/${tag}/`}
+>
+  <h1>Posts tagged <span class="tag-name">{tag}</span></h1>
+  <p class="archive-lead">
+    {posts.length} posts, newest first.
+    <a href="/posts/">All posts</a>
+    <span class="sep">·</span>
+    <a href="/categories/">Categories</a>
+  </p>
+  <Archive posts={posts} lang="en" chrome={false} />
+</BaseLayout>

src/pages/zh/index.astro

@@ -7,6 +7,19 @@ import { SITE } from '../../config';
 import { sortForListing } from '../../lib/sort';
 
 const posts = sortForListing(await getCollection('posts', isZh));
+
+// Same four topics as the English front page, in their Chinese versions, so the two
+// front pages tell the same story (scale → automation → observability → a delivered
+// business result). Falls back to the newest posts if a slug ever disappears.
+const FEATURED_SLUGS = [
+  'zh/running-production-infrastructure-solo',
+  'zh/loop-engineering-without-a-coding-agent',
+  'zh/one-prometheus-for-unraid-synology-and-a-vps',
+  'zh/self-healing-digital-goods-entitlements',
+];
+const bySlug = new Map(posts.map((p) => [p.slug, p]));
+const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
+const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
 ---
 
 <BaseLayout
@@ -15,19 +28,34 @@ const posts = sortForListing(await getCollection('posts', isZh));
   lang="zh"
   altLocaleUrl={`${SITE.url}/`}
 >
-  <section>
-    <h1>你好，我是 {SITE.author}。</h1>
-    <p>
-      一名base在马来西亚的全栈开发者兼 DevOps 工程师。我构建 Web 应用，
-      自托管一个约 140 个容器的 homelab，并运营 Hoelee Enterprise——一家面向
-      马来西亚中小企业的网站设计开发公司（邮箱托管只是副业，并非主业）。
-      这里是博客的中文部分。
+  <section class="hero">
+    <h1>{SITE.author} —— 全栈开发者兼 DevOps 工程师</h1>
+    <p class="hero-sub">
+      我独自运维 <strong>三台自管服务器上的 162 个容器</strong>（客户站点、邮件平台、
+      CI/CD、流程自动化与这个博客），并为马来西亚中小企业构建 Web 系统。这里写的是
+      「坏了什么、证据在哪、怎么修好」。
     </p>
-    <p>
-      <a href="/">切换到英文</a>
-      <span class="sep">·</span>
-      <a href="/about/">关于我</a>
+    <p class="hero-cta">
+      <a class="btn btn-primary" href="#featured">先看工程案例 ↓</a>
+      <a class="btn" href="/zh/about/">招聘方：技术栈与履历 →</a>
+      <a class="btn" href={SITE.website} target="_blank" rel="noopener">中小企业：合作方式 ↗</a>
     </p>
+    <p class="hero-note">
+      共 {posts.length} 篇中文文章 · <a href="/">English</a> · <a href="/rss.xml">RSS</a>
+    </p>
+  </section>
+
+  <section id="featured">
+    <h2>精选</h2>
+    <div class="featured-grid">
+      {featuredPosts.map((p) => (
+        <a class="featured-card" href={`/posts/${p.slug}/`}>
+          <span class="featured-badge">{p.data.category}</span>
+          <h3>{p.data.title}</h3>
+          <p>{p.data.description}</p>
+        </a>
+      ))}
+    </div>
   </section>
 
   <section>
@@ -35,7 +63,8 @@ const posts = sortForListing(await getCollection('posts', isZh));
     {posts.length === 0 ? (
       <p><em>中文文章即将发布，敬请期待。</em></p>
     ) : (
-      <PostList posts={posts} lang="zh" />
+      <PostList posts={posts} lang="zh" limit={6} />
     )}
+    <p class="archive-meta"><a href="/zh/posts/">全部 {posts.length} 篇</a></p>
   </section>
 </BaseLayout>

src/pages/zh/posts/index.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from '../../../layouts/BaseLayout.astro';
-import PostList from '../../../components/PostList.astro';
+import Archive from '../../../components/Archive.astro';
 import { getCollection } from 'astro:content';
 import { isZh } from '../../../lib/lang';
 import { sortForListing } from '../../../lib/sort';
@@ -14,15 +14,15 @@ const posts = sortForListing(await getCollection('posts', isZh));
 
 <BaseLayout
   title="文章 — Mr Hoelee"
-  description="Hoelee 技术博客的全部中文文章。"
+  description={`Hoelee 技术博客的全部 ${posts.length} 篇中文文章：工程、DevOps、自托管与 AI 自动化。`}
   lang="zh"
   switchHref="/posts/"
   altLocaleUrl={`${SITE.url}/posts/`}
 >
   <h1>文章</h1>
-  {posts.length === 0 ? (
-    <p><em>中文文章即将发布，敬请期待。</em></p>
-  ) : (
-    <PostList posts={posts} lang="zh" />
-  )}
+  <p class="archive-lead">
+    共 {posts.length} 篇，按时间倒序。下方可按标题、标签或分类即时筛选，也可以走
+    <a href="/zh/tags/docker/">标签页</a> 把一个主题读完。
+  </p>
+  <Archive posts={posts} lang="zh" />
 </BaseLayout>

src/pages/zh/tags/[tag].astro

@@ -0,0 +1,39 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import Archive from '../../../components/Archive.astro';
+import { getCollection } from 'astro:content';
+import { isZh } from '../../../lib/lang';
+import { sortForListing } from '../../../lib/sort';
+import { tagCounts, tagPageNames } from '../../../lib/tags';
+import { SITE } from '../../../config';
+
+// Chinese twin of /tags/<tag>/ — same threshold, same tag names (the EN and ZH posts
+// carry identical tag sets, so every language pair actually has both pages).
+export async function getStaticPaths() {
+  const posts = sortForListing(await getCollection('posts', isZh));
+  const counts = tagCounts(posts);
+  return tagPageNames(posts).map((tag) => ({
+    params: { tag },
+    props: { tag, n: counts.get(tag) ?? 0, posts: posts.filter((p) => p.data.tags.includes(tag)) },
+  }));
+}
+
+const { tag, posts } = Astro.props as { tag: string; posts: any[] };
+---
+
+<BaseLayout
+  title={`${tag} — 文章 — Mr Hoelee`}
+  description={`标签「${tag}」下的 ${posts.length} 篇中文文章。`}
+  lang="zh"
+  switchHref={`/tags/${tag}/`}
+  altLocaleUrl={`${SITE.url}/tags/${tag}/`}
+>
+  <h1>标签 <span class="tag-name">{tag}</span></h1>
+  <p class="archive-lead">
+    共 {posts.length} 篇，按时间倒序。
+    <a href="/zh/posts/">全部文章</a>
+    <span class="sep">·</span>
+    <a href="/zh/categories/">分类</a>
+  </p>
+  <Archive posts={posts} lang="zh" chrome={false} />
+</BaseLayout>