From 93c716f87672d1ba35362ec466b4a47babc9bdfe Mon Sep 17 00:00:00 2001
From: hoelee <me@hoelee.com>
Date: Sun, 6 Sep 2026 07:31:02 +0800
Subject: [PATCH] Add Pagefind search, sort posts by update time, link
 DigiKedai bot repo

---
 package-lock.json                             | 112 +++++++++-
 package.json                                  |   5 +-
 src/components/PostList.astro                 |   8 +
 src/components/Search.astro                   | 201 ++++++++++++++++++
 .../how-i-built-the-digikedai-telegram-bot.md |   2 +-
 src/layouts/BaseLayout.astro                  |   4 +
 src/lib/sort.ts                               |  17 ++
 src/pages/categories/[category].astro         |   7 +-
 src/pages/index.astro                         |   4 +-
 src/pages/posts/index.astro                   |   4 +-
 src/pages/zh/index.astro                      |   4 +-
 src/styles/global.css                         |  14 ++
 12 files changed, 369 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Search.astro
 create mode 100644 src/lib/sort.ts

diff --git a/package-lock.json b/package-lock.json
index 7931a1f..71a2677 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
         "@astrojs/sitemap": "^3.7.4",
         "@fontsource-variable/inter": "^5.3.0",
         "@fontsource/jetbrains-mono": "^5.3.0",
-        "astro": "^5.5.0"
+        "astro": "^5.5.0",
+        "pagefind": "^1.5.2"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -1184,6 +1185,97 @@
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
       "license": "MIT"
     },
+    "node_modules/@pagefind/darwin-arm64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.5.2.tgz",
+      "integrity": "sha512-MXpI+7HsAdPkvJ0gk9xj9g541BCqBZOBbdwj9g6lB5LCj6kSV6nqDSjzcAJwvOsfu0fjwvC8hQU+ecfhp+MpiQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/darwin-x64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.5.2.tgz",
+      "integrity": "sha512-IojxFWMEJe0RQ7PQ3KXQsPIImNsbpPYpoZ+QUDrL8fAl/O27IX+LVLs74/UzEZy5uA2LD8Nz1AiwKr72vrkZQw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/freebsd-x64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.5.2.tgz",
+      "integrity": "sha512-7EVzo9+0w+2cbe671BtMj10UlNo83I+HrLVLfRxO731svHRJKUfJ/mo05gU14pe9PCfpKNQT8FS3Xc/oDN6pOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@pagefind/linux-arm64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.5.2.tgz",
+      "integrity": "sha512-Ovt9+K35sqzn8H3ZMXGwls4TD/wMJuvRtShHIsmUQREmaxjrDEX7gHckRCrwYJ4XE1H1p6HkLz3wukrAnsfXQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/linux-x64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.5.2.tgz",
+      "integrity": "sha512-V+tFqHKXhQKq/WqPBD67AFy7scn1/aZID00ws4fSDd+1daSi5UHR9VVlRrOUYKxn3VuFQYRD7lYXdZK1WED1YA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/windows-arm64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/windows-arm64/-/windows-arm64-1.5.2.tgz",
+      "integrity": "sha512-hN9Nh90fNW61nNRCW9ZyQrAj/mD0eRvmJ8NlTUzkbuW8kIzGJUi3cxjFkEcMZ5h/8FsKWD/VcouZl4yo1F7B6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@pagefind/windows-x64": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.5.2.tgz",
+      "integrity": "sha512-Fa2Iyw7kaDRzGMfNYNUXNW2zbL5FQVDgSOcbDHdzBrDEdpqOqg8TcZ68F22ol6NJ9IGzvUdmeyZypLW5dyhqsg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
@@ -4028,6 +4120,24 @@
       "integrity": "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==",
       "license": "MIT"
     },
+    "node_modules/pagefind": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.5.2.tgz",
+      "integrity": "sha512-XTUaK0hXMCu2jszWE584JGQT7y284TmMV9l/HX3rnG5uo3rHI/uHU56XTyyyPFjeWEBxECbAi0CaFDJOONtG0Q==",
+      "license": "MIT",
+      "bin": {
+        "pagefind": "lib/runner/bin.cjs"
+      },
+      "optionalDependencies": {
+        "@pagefind/darwin-arm64": "1.5.2",
+        "@pagefind/darwin-x64": "1.5.2",
+        "@pagefind/freebsd-x64": "1.5.2",
+        "@pagefind/linux-arm64": "1.5.2",
+        "@pagefind/linux-x64": "1.5.2",
+        "@pagefind/windows-arm64": "1.5.2",
+        "@pagefind/windows-x64": "1.5.2"
+      }
+    },
     "node_modules/parse-latin": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/parse-latin/-/parse-latin-7.0.0.tgz",
diff --git a/package.json b/package.json
index 1d98aac..4ce1d03 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "astro dev",
-    "build": "astro build",
+    "build": "astro build && pagefind --site dist",
     "preview": "astro preview",
     "astro": "astro"
   },
@@ -14,6 +14,7 @@
     "@astrojs/sitemap": "^3.7.4",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource/jetbrains-mono": "^5.3.0",
-    "astro": "^5.5.0"
+    "astro": "^5.5.0",
+    "pagefind": "^1.5.2"
   }
 }
diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index 1ca16d9..9c14a5c 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -19,6 +19,14 @@ const fmt = (d: Date) =>
       <a href={`/posts/${post.slug}/`}><h2>{post.data.title}</h2></a>
       <div class="meta">
         <time datetime={post.data.pubDate.toISOString()}>{fmt(post.data.pubDate)}</time>
+        {post.data.updatedDate && (
+          <>
+            <span class="sep">·</span>
+            <span class="updated" title={`Updated ${fmt(post.data.updatedDate)}`}>
+              Updated {fmt(post.data.updatedDate)}
+            </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>)}
diff --git a/src/components/Search.astro b/src/components/Search.astro
new file mode 100644
index 0000000..5cb45d8
--- /dev/null
+++ b/src/components/Search.astro
@@ -0,0 +1,201 @@
+---
+// Client-side search via Pagefind. The search box lives in the site header;
+// this component is mounted once per page (in BaseLayout) and drives the
+// overlay + results. Pagefind's index is generated post-build (see the build
+// script); its UI/JS loads from /pagefind/ at runtime.
+interface Props {
+  lang: string;
+}
+const { lang } = Astro.props;
+const placeholder =
+  lang === 'zh' ? '搜索文章…' : 'Search posts…';
+const noResults =
+  lang === 'zh' ? '没有匹配的结果。' : 'No results.';
+---
+
+<div class="search-overlay" id="search-overlay" hidden>
+  <div class="search-panel">
+    <div class="search-bar">
+      <input
+        type="search"
+        id="search-input"
+        placeholder={placeholder}
+        autocomplete="off"
+        spellcheck="false"
+        aria-label={placeholder}
+      />
+      <button class="search-close" id="search-close" aria-label="Close">✕</button>
+    </div>
+    <div class="search-results" id="search-results"></div>
+  </div>
+</div>
+
+<style>
+  .search-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: color-mix(in srgb, var(--paper) 92%, transparent);
+    backdrop-filter: blur(4px);
+    padding-top: 4rem;
+  }
+  .search-panel {
+    max-width: var(--measure);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+  }
+  .search-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.4rem 0.7rem;
+  }
+  .search-bar input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--ink);
+    font-family: var(--font-sans);
+    font-size: 1.05rem;
+    padding: 0.4rem 0;
+  }
+  .search-close {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    border-radius: 6px;
+    padding: 0.2rem 0.6rem;
+    cursor: pointer;
+    font-family: var(--font-sans);
+  }
+  .search-close:hover { color: var(--brand); border-color: var(--brand); }
+  .search-results {
+    margin-top: 1rem;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+  .search-result {
+    display: block;
+    padding: 0.85rem 0;
+    border-bottom: 1px solid var(--border);
+    color: var(--ink);
+    text-decoration: none;
+  }
+  .search-result:hover { color: var(--brand); }
+  .search-result h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
+  .search-result .excerpt { color: var(--muted); font-size: 0.88rem; margin: 0; }
+  .search-result mark {
+    background: color-mix(in srgb, var(--brand) 25%, transparent);
+    color: var(--ink);
+    border-radius: 2px;
+    padding: 0 0.1em;
+  }
+</style>
+
+<script>
+  interface Pagefind {
+    search(query: string): Promise<{ results: PagefindResult[] }>;
+    debouncedSearch(query: string): Promise<{ results: PagefindResult[] }>;
+  }
+  interface PagefindResult {
+    data(): Promise<{ url: string; meta: Record<string, string>; excerpt: string }>;
+  }
+
+  const overlay = document.getElementById('search-overlay') as HTMLElement;
+  const input = document.getElementById('search-input') as HTMLInputElement;
+  const results = document.getElementById('search-results') as HTMLElement;
+  const closeBtn = document.getElementById('search-close') as HTMLButtonElement;
+
+  let pagefind: Pagefind | undefined;
+  let searchButton: HTMLElement | null = null;
+
+  function open() {
+    overlay.hidden = false;
+    input.value = '';
+    results.innerHTML = '';
+    input.focus();
+  }
+  function close() {
+    overlay.hidden = true;
+  }
+
+  // The header search trigger is injected by BaseLayout's script.
+  const trigger = document.getElementById('search-toggle');
+  if (trigger) trigger.addEventListener('click', open);
+  closeBtn.addEventListener('click', close);
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) close();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !overlay.hidden) close();
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      overlay.hidden ? open() : close();
+    }
+  });
+
+  async function loadPagefind() {
+    if (pagefind) return pagefind;
+    // Pagefind's UI/JS is copied into /pagefind/ post-build. Load it via a
+    // script tag (not a dynamic import) so Vite leaves the URL untouched.
+    await new Promise<void>((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = '/pagefind/pagefind.js';
+      s.onload = () => resolve();
+      s.onerror = () => reject(new Error('pagefind load failed'));
+      document.head.appendChild(s);
+    });
+    const w = window as unknown as { Pagefind?: Pagefind };
+    pagefind = w.Pagefind;
+    return pagefind;
+  }
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  input.addEventListener('input', () => {
+    const q = input.value.trim();
+    if (!q) {
+      results.innerHTML = '';
+      return;
+    }
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(async () => {
+      try {
+        const pf = await loadPagefind();
+        const search = pf.debouncedSearch ? pf.debouncedSearch(q) : pf.search(q);
+        const res = await search;
+        results.innerHTML = '';
+        if (!res.results.length) {
+          const empty = document.createElement('p');
+          empty.className = 'excerpt';
+          empty.textContent = 'No results.';
+          results.appendChild(empty);
+          return;
+        }
+        for (const r of res.results.slice(0, 12)) {
+          const d = await r.data();
+          const a = document.createElement('a');
+          a.className = 'search-result';
+          a.href = d.url;
+          const h = document.createElement('h3');
+          h.textContent = d.meta.title || d.url;
+          const ex = document.createElement('p');
+          ex.className = 'excerpt';
+          ex.innerHTML = d.excerpt || '';
+          a.appendChild(h);
+          a.appendChild(ex);
+          results.appendChild(a);
+        }
+      } catch (err) {
+        results.innerHTML = '';
+        const errEl = document.createElement('p');
+        errEl.className = 'excerpt';
+        errEl.textContent = 'Search is unavailable.';
+        results.appendChild(errEl);
+      }
+    }, 120);
+  });
+</script>
diff --git a/src/content/posts/how-i-built-the-digikedai-telegram-bot.md b/src/content/posts/how-i-built-the-digikedai-telegram-bot.md
index 1c1917b..5742a70 100644
--- a/src/content/posts/how-i-built-the-digikedai-telegram-bot.md
+++ b/src/content/posts/how-i-built-the-digikedai-telegram-bot.md
@@ -153,7 +153,7 @@ One container on the NAS now answers customer questions across two channels
 language, and issues free-trial accounts end-to-end — with a prompt suite of
 ~175 unit tests covering the deterministic flows, retrieval, and the payload
 contracts. The source lives at
-[git.hoelee.com/hoelee/dsm-resource-management](https://git.hoelee.com/hoelee/dsm-resource-management).
+[git.hoelee.com/hoelee/digikedai-bot](https://git.hoelee.com/hoelee/digikedai-bot).
 
 If you're building your own Telegram bot backed by an LLM, the lesson is the
 boring one: the model is the easy part. The webhook lifecycle, the payload
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 12fa6ad..0bc3b1b 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,6 +3,7 @@ import '../styles/global.css';
 import '@fontsource-variable/inter';
 import '@fontsource/jetbrains-mono/400.css';
 import { SITE } from '../config';
+import Search from '../components/Search.astro';
 
 interface Props {
   title: string;
@@ -137,6 +138,7 @@ const nav = isZh
         <a href={isZh ? '/zh/' : '/categories/'}>{nav.categories}</a>
         <a href={isZh ? '/zh/' : '/about/'}>{nav.about}</a>
         <a href="/rss.xml" title={nav.rss}>{nav.rss}</a>
+        <button class="search-toggle" id="search-toggle" aria-label={isZh ? '搜索' : 'Search'}>⌕</button>
         <a class="lang-switch" href={resolvedSwitchHref} aria-label={isZh ? 'Switch to English' : '切换到中文'}>{switchLabel}</a>
         <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">◐</button>
       </nav>
@@ -156,6 +158,8 @@ const nav = isZh
       </span>
     </footer>
 
+    <Search lang={lang} />
+
     <script>
       // Theme toggle + code copy buttons (tiny, no framework)
       const btn = document.getElementById('theme-toggle');
diff --git a/src/lib/sort.ts b/src/lib/sort.ts
new file mode 100644
index 0000000..2393a3b
--- /dev/null
+++ b/src/lib/sort.ts
@@ -0,0 +1,17 @@
+import type { CollectionEntry } from 'astro:content';
+
+type Post = CollectionEntry<'posts'>;
+
+/**
+ * Effective "last updated" timestamp for a post — `updatedDate` when present,
+ * else `pubDate`. Used to sort listings newest-first by *update time*, so a
+ * revised post resurfaces to the top.
+ */
+export function updatedAt(post: Post): Date {
+  return post.data.updatedDate ?? post.data.pubDate;
+}
+
+/** Sort posts newest-first by update time (updatedDate ?? pubDate). */
+export function sortByUpdated(posts: Post[]): Post[] {
+  return [...posts].sort((a, b) => updatedAt(b).valueOf() - updatedAt(a).valueOf());
+}
diff --git a/src/pages/categories/[category].astro b/src/pages/categories/[category].astro
index 5158b34..4b52f1d 100644
--- a/src/pages/categories/[category].astro
+++ b/src/pages/categories/[category].astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import PostList from '../../components/PostList.astro';
 import { getCollection } from 'astro:content';
 import { isEn } from '../../lib/lang';
+import { sortByUpdated } from '../../lib/sort';
 
 export async function getStaticPaths() {
   const posts = await getCollection('posts', isEn);
@@ -12,9 +13,9 @@ export async function getStaticPaths() {
 
 const { category } = Astro.params;
 
-const posts = (await getCollection('posts', isEn))
-  .filter((p) => p.data.category === category)
-  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const posts = sortByUpdated(
+  (await getCollection('posts', isEn)).filter((p) => p.data.category === category),
+);
 ---
 
 <BaseLayout title={`${category} — Mr Hoelee`} description={`Posts in the ${category} category.`}>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1ceb4d2..f0a9d2e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,9 +4,9 @@ import PostList from '../components/PostList.astro';
 import { getCollection } from 'astro:content';
 import { isEn } from '../lib/lang';
 import { SITE } from '../config';
+import { sortByUpdated } from '../lib/sort';
 
-const posts = (await getCollection('posts', isEn))
-  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const posts = sortByUpdated(await getCollection('posts', isEn));
 ---
 
 <BaseLayout title={SITE.title} description={SITE.description}>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 4c6372e..40351fd 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -3,9 +3,9 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import PostList from '../../components/PostList.astro';
 import { getCollection } from 'astro:content';
 import { isEn } from '../../lib/lang';
+import { sortByUpdated } from '../../lib/sort';
 
-const posts = (await getCollection('posts', isEn))
-  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const posts = sortByUpdated(await getCollection('posts', isEn));
 ---
 
 <BaseLayout title="Posts — Mr Hoelee" description="All posts on Mr Hoelee's blog.">
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index de34847..4e7977f 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -4,9 +4,9 @@ import PostList from '../../components/PostList.astro';
 import { getCollection } from 'astro:content';
 import { isZh } from '../../lib/lang';
 import { SITE } from '../../config';
+import { sortByUpdated } from '../../lib/sort';
 
-const posts = (await getCollection('posts', isZh))
-  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const posts = sortByUpdated(await getCollection('posts', isZh));
 ---
 
 <BaseLayout
diff --git a/src/styles/global.css b/src/styles/global.css
index ee91f48..8c0cf26 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -123,6 +123,18 @@ body {
   font-family: var(--font-sans);
 }
 .theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
+.search-toggle {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  border-radius: var(--radius);
+  padding: 0.25rem 0.6rem;
+  font-size: 0.95rem;
+  line-height: 1;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.search-toggle:hover { color: var(--brand); border-color: var(--brand); }
 .lang-switch {
   color: var(--muted);
   text-decoration: none;
@@ -282,6 +294,8 @@ pre code {
 .post-list li:last-child { border-bottom: none; }
 .post-list h2 { margin: 0 0 0.3rem; font-size: 1.25rem; }
 .post-list .meta { color: var(--faint); font-size: 0.85rem; margin-bottom: 0.5rem; }
+.post-list .meta .sep { color: var(--border); }
+.post-list .updated { color: var(--brand); font-weight: 500; }
 .post-list p { color: var(--muted); margin: 0.4rem 0 0; }
 
 /* ---------- Callouts (correct / wrong in tutorials) ---------- */