Add Pagefind search, sort posts by update time, link DigiKedai bot repo
Deploy / build (push) Successful in 20s

This commit is contained in:
2026-09-06 07:31:02 +08:00
parent dfd9612a6b
commit 93c716f876
12 changed files with 369 additions and 13 deletions
+111 -1
View File
@@ -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",
+3 -2
View File
@@ -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"
}
}
+8
View File
@@ -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>)}
+201
View File
@@ -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>
@@ -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
+4
View File
@@ -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');
+17
View File
@@ -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());
}
+4 -3
View File
@@ -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.`}>
+2 -2
View File
@@ -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}>
+2 -2
View File
@@ -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.">
+2 -2
View File
@@ -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
+14
View File
@@ -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) ---------- */