Switch to pagefind for search

We have more control over search indices if we use a local
search library

Author: AidanDelaney

.github/workflows/main.yml

@@ -21,6 +21,11 @@ jobs:
         uses: actions/setup-go@v6
         with:
           go-version: '1.x'
+      # Node is used to generate the pagefind index
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v6
+        with:
+          node-version: 'latest'
       - name: Install Dependencies
         run: sudo apt-get install make curl jq
       - name: Install pack

Makefile

@@ -30,17 +30,9 @@ TOOLS_BIN:=tools/bin
 $(TOOLS_BIN):
 	mkdir $(TOOLS_BIN)
 
-# adapted from https://stackoverflow.com/a/12099167/552902
 HUGO_OS:=Linux
-HUGO_ARCH:=32bit
+HUGO_ARCH:=64bit
 HUGO_EXT:=tar.gz
-ifeq ($(OS),Windows_NT)
-	HUGO_OS:=Windows
-	HUGO_EXT:=zip
-ifeq ($(PROCESSOR_ARCHITECTURE),AMD64)
-	HUGO_ARCH:=64bit
-endif
-endif
 
 ifeq ($(shell uname -s),Darwin)
 	HUGO_OS:=darwin
@@ -135,6 +127,8 @@ build: export PACK_VERSION:=$(PACK_VERSION)
 build: $(HUGO_BIN) pack-version pack-docs-update
 	@echo "> Building..."
 	$(HUGO_BIN)
+	# Github Workflows ensures `node` is installed.
+	npx run pagefind --source ./public --destination ./public/pagefind
 
 .PHONY: test
 test: install-pack-cli check-pack-cli-version install-ugo

themes/buildpacks/assets/scss/components/_algolia.scss

@@ -6,7 +6,6 @@
 @import 'code';
 @import 'syntax';
 
-@import 'components/algolia';
 @import 'components/header';
 @import 'components/hero';
 @import 'components/grid';

themes/buildpacks/assets/scss/site.scss

@@ -17,8 +17,8 @@
   {{ $style := resources.Get "scss/site.scss" | toCSS }}
   <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <link rel="stylesheet" href="/pagefind/pagefind-ui.css">
+  <script src="/pagefind/pagefind-ui.js"></script>
 
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-CJLSR4FQXL"></script>
   <link rel="stylesheet"
@@ -35,31 +35,6 @@
     }
   </style>
 
-  <script>
-    $(function () {
-      $('h1[id], h2[id], h3[id], h4[id], h5[id]').not(':has(a)').each(function () {
-        this.innerHTML =
-          `<a href="#${this.id}" class="h-anchor">
-            ${this.innerHTML} <i class="fas fa-link icon" aria-label="Anchor"></i>
-          </a>`;
-      });
-
-      if ($('input#search').length > 0) {
-        docsearch({
-          apiKey: '5c00a51f166dab99e1cc6e0a9976e9f9',
-          indexName: 'buildpacks',
-          inputSelector: 'input#search',
-          debug: false
-        });
-      }
-    });
-
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
-    gtag('config', 'G-CJLSR4FQXL');
-  </script>
-
   <title>{{ .Title | plainify }} · {{ .Site.Title }}</title>
 </head>
 

themes/buildpacks/layouts/_default/baseof.html

@@ -1,9 +1,16 @@
 {{- $currentNode := . -}}
 
 <nav class='sidebar'>
-  <form class="pt-1 pb-3 pl-2 pr-3 border-bottom">
-    <input id="search" class="form-control" type="search" placeholder="Search..." aria-label="Search">
-  </form>
+  <div id="search"></div>
+  <script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    new PagefindUI({
+      element: "#search",
+      showSubResults: true,
+      bundlePath: "/pagefind/"
+    });
+  });
+  </script>
   {{ with .Site.GetPage "/docs" }}
   {{- $home := . -}}
   <ul>