Add Pagefind search, sort posts by update time, link DigiKedai bot repo

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>)}

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>

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

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');

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());
+}

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.`}>

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}>

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.">

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

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) ---------- */