Add site search (Pagefind)

Client-side index generated after the Hugo build; search box in the
header, results page with a section filter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YDRjtmAiNpo5mK5N3d7QwZ

layouts/_partials/machine-header.html

@@ -2,13 +2,13 @@
 {{ $m := .machine }}
 {{ $labels := dict "photos" "Photos" "adverts" "Adverts" "hardware" "Hardware" "connectors" "Connectors" "software" "Software" "emulators" "Emulators" "links" "Links" "docs" "Docs" "videos" "Videos" "comments" "Comments" }}
 <header class="machine-header">
-  <p class="crumbs">
+  <p class="crumbs" data-pagefind-ignore>
     <a href="{{ (site.GetPage "/museum").RelPermalink }}">Museum</a>
     {{ with $m.GetTerms "categories" }}{{ range first 1 . }} › <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}{{ end }}
     {{ with $m.Params.company }}{{ with site.GetPage . }} › <a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }}{{ end }}
   </p>
   <h1>{{ with $m.Params.logo }}<img class="logo" src="{{ . }}" alt="">{{ end }}{{ $m.Title }}</h1>
-  <nav class="tabs">
+  <nav class="tabs" data-pagefind-ignore>
     <a href="{{ $m.RelPermalink }}"{{ if not $.tab }} class="active"{{ end }}>System info</a>
     {{ range $m.Params.tabs }}
     <a href="{{ $m.RelPermalink }}{{ . }}/"{{ if eq . $.tab }} class="active"{{ end }}>{{ index $labels . }}</a>

layouts/author/taxonomy.html

@@ -1,6 +1,6 @@
 {{ define "title" }}Authors · {{ site.Title }}{{ end }}
 {{ define "main" }}
-<p class="crumbs">{{ with site.GetPage "/post" }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }}</p>
+<p class="crumbs" data-pagefind-ignore>{{ with site.GetPage "/post" }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }}</p>
 <h1>Authors</h1>
 <ul class="columns">
   {{ range .Data.Terms.Alphabetical }}

layouts/author/term.html

@@ -1,6 +1,6 @@
 {{ define "title" }}Posts by {{ .Title }} · {{ site.Title }}{{ end }}
 {{ define "main" }}
-<p class="crumbs">{{ with site.GetPage "/post" }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }} › <a href="{{ .Parent.RelPermalink }}">Authors</a></p>
+<p class="crumbs" data-pagefind-ignore>{{ with site.GetPage "/post" }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }} › <a href="{{ .Parent.RelPermalink }}">Authors</a></p>
 <h1>Posts by {{ .Title }}</h1>
 <div class="posts">
   {{ range .Pages.ByDate.Reverse }}{{ partial "post-summary.html" . }}{{ end }}

layouts/baseof.html

@@ -18,8 +18,15 @@
       <a href="{{ .URL }}"{{ if or ($current.IsMenuCurrent .Menu .) ($current.HasMenuCurrent .Menu .) (eq $current.Section .Page.Section) }} class="active"{{ end }}>{{ .Name }}</a>
       {{ end }}
     </nav>
+    <form class="search" role="search" action="{{ "search/" | relURL }}" method="get">
+      <input type="search" name="q" placeholder="Search…" aria-label="Search the site">
+    </form>
   </header>
-  <main>
+  {{/* search index: content pages only (not lists), filterable by section; see layouts/search.html */}}
+  {{ $indexed := and .IsPage (ne .Layout "search") (ne .Params.tab "comments") }}
+  {{ $section := "" }}{{ with .FirstSection }}{{ if not .IsHome }}{{ $section = .Title }}{{ end }}{{ end }}
+  {{ if eq .Section "machine-tabs" }}{{ $section = "Museum" }}{{ end }}
+  <main{{ if $indexed }} data-pagefind-body{{ with $section }} data-pagefind-filter="Section:{{ . }}"{{ end }}{{ end }}>
     {{ block "main" . }}{{ end }}
   </main>
   <footer class="site-footer">

layouts/companies/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <article>
-  <p class="crumbs"><a href="{{ .Parent.RelPermalink }}">Companies</a></p>
+  <p class="crumbs" data-pagefind-ignore><a href="{{ .Parent.RelPermalink }}">Companies</a></p>
   <h1>{{ with .Params.logo }}<img class="logo" src="{{ . }}" alt="">{{ end }}{{ .Title }}</h1>
   <div class="content">{{ .Content }}</div>
   {{ with .Params.machines }}

layouts/history/single.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
 <article>
-  <p class="crumbs"><a href="{{ .Parent.RelPermalink }}">History</a>{{ with .GetTerms "topics" }} › {{ partial "terms.html" (dict "page" $ "taxonomy" "topics") }}{{ end }}</p>
+  <p class="crumbs" data-pagefind-ignore><a href="{{ .Parent.RelPermalink }}">History</a>{{ with .GetTerms "topics" }} › {{ partial "terms.html" (dict "page" $ "taxonomy" "topics") }}{{ end }}</p>
   <h1>{{ .Title }}</h1>
   {{ with .Params.when }}<p class="meta">{{ . }}</p>{{ end }}
   <div class="content">{{ .Content }}</div>
-  <nav class="prev-next">
+  <nav class="prev-next" data-pagefind-ignore>
     {{ with .PrevInSection }}<a href="{{ .RelPermalink }}">← {{ .Title }}</a>{{ end }}
     {{ with .NextInSection }}<a href="{{ .RelPermalink }}">{{ .Title }} →</a>{{ end }}
   </nav>

layouts/machine-tabs/single.html

@@ -3,7 +3,7 @@
 {{ $m := site.GetPage .Params.machine }}
 {{ $tab := .Params.tab }}
 {{ $p := $m.Params }}
-<article class="machine">
+<article class="machine" data-pagefind-meta="title:{{ .Title }} – {{ .Params.tab | title }}">
   {{ partial "machine-header.html" (dict "machine" $m "tab" $tab) }}
 
   {{ if in (slice "photos" "adverts" "hardware" "connectors") $tab }}

layouts/post/single.html

@@ -1,11 +1,11 @@
 {{ define "main" }}
 <article class="post">
-  <p class="crumbs"><a href="{{ .Parent.RelPermalink }}">{{ .Parent.Title }}</a></p>
+  <p class="crumbs" data-pagefind-ignore><a href="{{ .Parent.RelPermalink }}">{{ .Parent.Title }}</a></p>
   <h1>{{ .Title }}</h1>
   <p class="meta">{{ if not .Date.IsZero }}<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2 January 2006" }}</time>{{ end }}{{ with .GetTerms "author" }}{{ if not $.Date.IsZero }} · {{ end }}{{ partial "terms.html" (dict "page" $ "taxonomy" "author") }}{{ end }}</p>
   {{ with partial "banner.html" (dict "page" . "width" 1000) }}<img class="post-banner" src="{{ . }}" alt="">{{ end }}
   <div class="content">{{ .Content }}</div>
-  <nav class="prev-next">
+  <nav class="prev-next" data-pagefind-ignore>
     {{ with .PrevInSection }}<a href="{{ .RelPermalink }}">← {{ .Title }}</a>{{ end }}
     {{ with .NextInSection }}<a href="{{ .RelPermalink }}">{{ .Title }} →</a>{{ end }}
   </nav>

layouts/search.html

@@ -0,0 +1,31 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+<div id="search"></div>
+<noscript><p>Searching needs JavaScript.</p></noscript>
+<p id="search-missing" class="note" hidden>The search index is not available in this preview: it is generated by <code>make build</code>.</p>
+<link rel="stylesheet" href="{{ "pagefind/pagefind-ui.css" | relURL }}">
+<script src="{{ "pagefind/pagefind-ui.js" | relURL }}"></script>
+<script>
+  if (window.PagefindUI) {
+    // the site may live in a sub-directory: its root is the parent of this page
+    const root = new URL("..", location.href).pathname;
+    const ui = new PagefindUI({
+      element: "#search",
+      baseUrl: root,
+      showSubResults: false,
+      pageSize: 10,
+      // images are stored with page-relative addresses: make them absolute
+      processResult: (result) => {
+        if (result.meta && result.meta.image) {
+          result.meta.image = new URL(result.meta.image, new URL(result.url, location.href)).pathname;
+        }
+        return result;
+      },
+    });
+    const q = new URLSearchParams(location.search).get("q");
+    if (q) ui.triggerSearch(q);
+  } else {
+    document.getElementById("search-missing").hidden = false;
+  }
+</script>
+{{ end }}

layouts/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <article>
-  {{ with .Parent }}{{ if not .IsHome }}<p class="crumbs"><a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ with $.Params.group }} › {{ . }}{{ end }}</p>{{ end }}{{ end }}
+  {{ with .Parent }}{{ if not .IsHome }}<p class="crumbs" data-pagefind-ignore><a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ with $.Params.group }} › {{ . }}{{ end }}</p>{{ end }}{{ end }}
   <h1>{{ .Title }}</h1>
   <div class="content">{{ .Content }}</div>
 </article>

layouts/software/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <article>
-  <p class="crumbs"><a href="{{ .Parent.RelPermalink }}">Software</a></p>
+  <p class="crumbs" data-pagefind-ignore><a href="{{ .Parent.RelPermalink }}">Software</a></p>
   <h1>{{ .Title }}</h1>
   <div class="content">{{ .Content }}</div>
   {{ with .Params.specs }}{{ partial "specs.html" . }}{{ end }}

layouts/term.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<p class="crumbs"><a href="{{ .Parent.RelPermalink }}">By {{ partial "taxonomy-label.html" .Data.Singular }}</a></p>
+<p class="crumbs" data-pagefind-ignore><a href="{{ .Parent.RelPermalink }}">By {{ partial "taxonomy-label.html" .Data.Singular }}</a></p>
 <h1>{{ .Title }}</h1>
 {{ range .Pages.GroupBy "Section" }}
 <h2>{{ with site.GetPage (printf "/%s" .Key) }}{{ .Title }}{{ end }} <small>({{ len .Pages }})</small></h2>