Add TinySearch-powered site search

.github/workflows/ci.yml

@@ -38,13 +38,11 @@ jobs:
           curl -sSL https://github.com/mre/gh-stats/releases/download/v0.1.0/gh-stats-v0.1.0-x86_64-unknown-linux-gnu.tar.gz | tar xz --directory=bin
           sudo install "$(pwd)/bin/gh-stats" /usr/local/bin
 
-      - name: ⏬ Install wasm-pack
-        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 
       - name: ⏬ Install tinysearch
         run: |
           set -e
-          curl -sSL https://github.com/tinysearch/tinysearch/releases/download/v0.10.0/tinysearch-v0.10.0-x86_64-unknown-linux-gnu.tar.gz | tar xz
+          curl -sSL https://github.com/tinysearch/tinysearch/releases/download/v0.11.0/tinysearch-v0.11.0-x86_64-unknown-linux-gnu.tar.gz | tar xz
           sudo install "$(pwd)/tinysearch" /usr/local/bin
 
       - name: ⏬ Install cavif
@@ -57,8 +55,8 @@ jobs:
       - name: ⏬ Install binaryen
         run: |
           set -e
-          curl -L https://github.com/WebAssembly/binaryen/releases/download/version_104/binaryen-version_104-x86_64-linux.tar.gz | tar xzf -
-          sudo install "$(pwd)/binaryen-version_104/bin/wasm-opt" /usr/local/bin
+          curl -L https://github.com/WebAssembly/binaryen/releases/download/version_131/binaryen-version_131-x86_64-linux.tar.gz | tar xzf -
+          sudo install "$(pwd)/binaryen-version_131/bin/wasm-opt" /usr/local/bin
 
       - name: ⏬ Install terser
         run: sudo npm install -g terser

Makefile

@@ -1,4 +1,5 @@
 SHELL := /bin/bash
+TINYSEARCH_VERSION := 0.11.0
 
 .PHONY: help
 help: ## This help message
@@ -12,8 +13,7 @@ clean-img: ## Remove autogenerated image files
 
 .PHONY: clean-pub
 clean-pub: ## Remove build files
-	rm -rf public/
-	rm -f static/tinysearch_engine*
+	rm -rf public/ tinysearch_out/
 
 .PHONY: clean
 clean: clean-pub clean-img ## Remove public files and images
@@ -25,7 +25,6 @@ versions: ## Show versions of tools
 	tinysearch --version
 	wasm-opt --version
 	terser --version
-	wasm-opt --version
 	cavif --version
 	convert -version
 
@@ -37,23 +36,24 @@ content: ## Build the content of the static site with zola
 images: ## Create avif images 
 	cargo run --manifest-path ./helpers/img/Cargo.toml
 
-# Creating a temporary directory here because wasm-pack seems to overwrite
-# the public output directory. Haven't yet found the reason why.
+# Keep a copy in static/ so plain `zola serve` can load search locally.
+# Production still gets a freshly generated copy in public/.
 .PHONY: index
 index: content ## Build the search index with tinysearch
-	# Commented out tinysearch build for now
-	# mkdir -p tinysearch_out
-	# mv public/tinysearch.json/index.html public/search_index.json
-	# RUST_LOG=debug tinysearch --release -o -m wasm -p tinysearch_out public/search_index.json
-	# mv tinysearch_out/* public
-	# rm -rf tinysearch_out
+	@tinysearch --version | grep -q "tinysearch $(TINYSEARCH_VERSION)" || (echo "tinysearch $(TINYSEARCH_VERSION) is required"; exit 1)
+	mkdir -p tinysearch_out
+	mv public/tinysearch.json/index.html public/search_index.json
+	tinysearch --release -o -m wasm -p tinysearch_out public/search_index.json
+	cp tinysearch_out/tinysearch_engine.wasm static/
+	mv tinysearch_out/tinysearch_engine.wasm public/
+	rm -rf public/tinysearch.json public/search_index.json tinysearch_out
 
 .PHONY: minify
-minify: ## Compress JavaScript assets
-	terser --compress --mangle --output public/search_min.js -- static/search.mjs
+minify: index ## Compress JavaScript assets
+	terser --module --compress --mangle --output public/search.mjs -- static/search.mjs
 
 .PHONY: build 
-build: stars content index minify ## Build static site and search index, minify JS
+build: stars minify ## Build static site and search index, minify JS
 
 .PHONY: build-quick
 build-quick: content ## Build static site

content/static/tinysearch.md

@@ -0,0 +1,7 @@
++++
+title = "Search Index"
+path = "tinysearch.json"
+template = "tinysearch_index.html"
+date = 2026-08-14
+in_sitemap = false
++++

static/css/main.css

@@ -329,8 +329,18 @@ main article {
     font-size: 0.8rem;
 }
 
-/* Theme toggle button */
-.theme-toggle {
+/* Header controls */
+.header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-left: 10px;
+    position: relative;
+}
+
+
+.theme-toggle,
+.search-toggle {
     background: none;
     border: 1px solid var(--border-color);
     padding: 0.4em;
@@ -343,17 +353,22 @@ main article {
     justify-content: center;
     color: var(--text-color);
     opacity: 0.8;
-    transition: all 0.3s ease;
-    margin-left: 10px;
+    transition:
+        opacity var(--transition) ease,
+        border-color var(--transition) ease;
     vertical-align: middle;
 }
 
-.theme-toggle:hover {
+.theme-toggle:hover,
+.theme-toggle:focus-visible,
+.search-toggle:hover,
+.search-toggle:focus-visible {
     opacity: 1;
     border-color: var(--accent-color);
 }
 
-.theme-toggle svg {
+.theme-toggle svg,
+.search-toggle svg {
     width: 1.2em;
     height: 1.2em;
     stroke: currentColor;
@@ -376,6 +391,108 @@ main article {
     display: block;
 }
 
+.site-search {
+    display: inline-flex;
+    position: relative;
+}
+
+.search-panel {
+    width: 100%;
+    margin: 0 auto 3rem;
+    padding: 0.55rem;
+    background: var(--background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+    text-align: left;
+}
+
+.search-panel[hidden] {
+    display: none;
+}
+
+.search-form {
+    margin: 0;
+}
+
+.search-input {
+    width: 100%;
+    padding: 0.6rem 0.7rem;
+    border: 1px solid var(--border-color);
+    border-radius: calc(var(--radius) - 3px);
+    color: var(--text-color);
+    background: var(--surface-color);
+    font: inherit;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+.search-input:focus {
+    border-color: var(--accent-color);
+    outline: 2px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
+    outline-offset: 1px;
+}
+
+.search-content {
+    padding: 0.5rem 0 3rem;
+}
+
+.search-content-status {
+    margin-bottom: 1.25rem;
+    color: var(--meta-color);
+    font-size: 0.8rem;
+}
+
+.search-content-results {
+    margin: 0;
+    padding: 0;
+}
+
+.search-content-results li {
+    list-style: none;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.search-content-results a {
+    display: block;
+    padding: 0.85rem 0.25rem;
+    color: var(--accent-color);
+    font-family: var(--heading-font);
+    font-size: 1.05rem;
+    line-height: 1.35;
+    text-decoration: none;
+}
+
+.search-content-results a:hover,
+.search-content-results a:focus-visible,
+.search-content-results a.is-active {
+    color: var(--text-color);
+    background: var(--surface-color);
+    outline: none;
+}
+
+body.is-search-open .homepage-header,
+body.is-search-open .site-header {
+    padding-bottom: 25px;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+body > header,
+.article-header {
+    overflow: visible;
+}
+
 /* Media elements */
 img,
 video,
@@ -809,7 +926,7 @@ footer .body {
         position: relative;
     }
 
-    .post-meta {
+    .post-meta .post-date {
         display: none;
     }
 
@@ -860,11 +977,12 @@ footer .body {
         padding: 40px 20px;
     }
 
-    .theme-toggle {
-        margin-left: 0;
+    .homepage-header .header-actions {
         margin-top: 10px;
+        margin-left: 0;
     }
 
+
     /* Back to normal width on very small screens */
     article img,
     article video,