feat: Initial search implementation using pagefind.

Dockerfile

@@ -32,6 +32,7 @@ RUN npm install -g pnpm@latest-10
 COPY . .
 
 RUN pnpm install && pnpm run css-build
+RUN npx -y pagefind --site deploy
 
 # ==================================================
 # Run Image

Sources/Docs/Templates/BaseLayout.swift

@@ -127,6 +127,16 @@ private func generateHeader(_ pageTitle: String, _ extraHeader: NodeConvertible)
     link(href: "/static/style.css", rel: "stylesheet")
     link(href: "/articles/feed.xml", rel: "alternate", title: SiteMetadata.name, type: "application/rss+xml")
     extraHeader
-    script(src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js")
+    // script(src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js")
+    //
+    Node.raw("""
+    <script src="/pagefind/pagefind-ui.js"></script>
+    <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+    <script>
+        window.addEventListener('DOMContentLoaded', (event) => {
+            new PagefindUI({ element: "#search", showSubResults: true });
+        });
+    </script>
+    """)
   }
 }

Sources/Docs/Templates/Header.swift

@@ -40,19 +40,7 @@ func generateHeader(
       meta(content: "1014", name: "og:image:width"),
       meta(content: "530", name: "og:image:height"),
       script(crossorigin: "anonymous", src: "https://kit.fontawesome.com/f209982030.js"),
-      Node.raw("""
+      script(src: "https://cdn.jsdelivr.net/npm/minisearch@7.1.2/dist/umd/index.min.js")
-      <script>
-      MathJax = {
-        tex: {
-          inlineMath: [['$', '$']]
-        },
-        svg: {
-          fontCache: 'global'
-        }
-      };
-      </script>
-      """),
-      script(defer: true, src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js")
     ])
   }
 }

Sources/Docs/Templates/RenderArticle.swift

@@ -105,7 +105,10 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
       div {
         renderArticleInfo(context.item)
       }
-      Node.raw(context.item.body)
+      // Only index the body of the articles for search.
+      div(customAttributes: ["data-pagefind-body": ""]) {
+        Node.raw(context.item.body)
+      }
     }
 
     div(class: "border-t border-light pt-8 mt-16") {

Sources/Docs/Templates/RenderArticles.swift

@@ -63,16 +63,16 @@ func renderYear<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) ->
   baseRenderArticles(context.items, canocicalURL: "/articles/\(context.key)/", title: "Articles in \(context.key)")
 }
 
-private struct SearchData: Encodable, Identifiable {
+private struct SearchData: Encodable {
-  let id: String
+  let url: String
   let title: String
-  let content: String
+  let body: String
 
   init(article: Item<ArticleMetadata>) throws {
-    self.id = article.url
+    self.url = article.url
     self.title = article.title
     let rawContent: String = try article.absoluteSource.read()
-    self.content = Self.parse(rawContent)
+    self.body = Self.parse(rawContent)
   }
 
   /// Grabs the metadata (wrapped within `---`), the first title, and the body of the document.

Sources/Docs/Templates/RenderPage.swift

@@ -27,6 +27,7 @@ func renderPage(context: ItemRenderingContext<PageMetadata>) -> Node {
 
 func renderHome(body: String) -> Node {
   div {
+    div(class: "font-avenir", id: "search") {}
     div(class: "my-24 uppercase font-avenir text-[40px] leading-[1.25] font-thin text-center [&>h1>strong]:font-bold") {
       Node.raw(body)
     }

content/static/main.js

@@ -0,0 +1,24 @@
+const documents = null;
+
+var loadDocuments = function () {
+  fetch("/static/search.json")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to load search index.");
+      }
+      return response.json();
+    })
+    .then((response) => (this.documents = response))
+    .catch((error) => console.error(error));
+};
+
+let miniSearch = new MiniSearch({
+  fields: ["title", "body"],
+  storeFields: ["title", "url"],
+});
+
+loadDocuments();
+
+console.log(documents);
+
+miniSearch.addAll(documents);

package.json

@@ -16,6 +16,7 @@
     "tailwindcss": "^4.0.8"
   },
   "dependencies": {
-    "@tailwindcss/cli": "^4.0.8"
+    "@tailwindcss/cli": "^4.0.8",
+    "pagefind": "^1.3.0"
   }
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@tailwindcss/cli':
         specifier: ^4.0.8
         version: 4.1.1
+      pagefind:
+        specifier: ^1.3.0
+        version: 1.3.0
     devDependencies:
       tailwindcss:
         specifier: ^4.0.8
@@ -18,6 +21,31 @@ importers:
 
 packages:
 
+  '@pagefind/darwin-arm64@1.3.0':
+    resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@pagefind/darwin-x64@1.3.0':
+    resolution: {integrity: sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@pagefind/linux-arm64@1.3.0':
+    resolution: {integrity: sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@pagefind/linux-x64@1.3.0':
+    resolution: {integrity: sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@pagefind/windows-x64@1.3.0':
+    resolution: {integrity: sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==}
+    cpu: [x64]
+    os: [win32]
+
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -292,6 +320,10 @@ packages:
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
+  pagefind@1.3.0:
+    resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==}
+    hasBin: true
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -312,6 +344,21 @@ packages:
 
 snapshots:
 
+  '@pagefind/darwin-arm64@1.3.0':
+    optional: true
+
+  '@pagefind/darwin-x64@1.3.0':
+    optional: true
+
+  '@pagefind/linux-arm64@1.3.0':
+    optional: true
+
+  '@pagefind/linux-x64@1.3.0':
+    optional: true
+
+  '@pagefind/windows-x64@1.3.0':
+    optional: true
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -519,6 +566,14 @@ snapshots:
 
   node-addon-api@7.1.1: {}
 
+  pagefind@1.3.0:
+    optionalDependencies:
+      '@pagefind/darwin-arm64': 1.3.0
+      '@pagefind/darwin-x64': 1.3.0
+      '@pagefind/linux-arm64': 1.3.0
+      '@pagefind/linux-x64': 1.3.0
+      '@pagefind/windows-x64': 1.3.0
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}