Pagefind search

package.json

@@ -10,8 +10,10 @@
     "kill": "kill $(ps -ef | grep '[n]pm exec @11ty/eleventy --serve' | awk '{print $2}')",
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "npx rimraf dist public",
-    "dev": "npm run clean && open=true npx @11ty/eleventy --serve",
-    "build": "npm run clean && npx @11ty/eleventy && cp -r ./dist/ ./public"
+    "search": "npx pagefind --site dist",
+    "eleventy": "npm run clean && npx @11ty/eleventy && npm run search",
+    "dev": "npm run eleventy && open=true npx @11ty/eleventy --serve",
+    "build": "npm run eleventy && cp -r ./dist/ ./public"
   },
   "devDependencies": {
     "@bryanfriedman/eleventy-plugin-html-relative-datacascade": "0.1.5",

src/_includes/head.njk

@@ -45,14 +45,17 @@
 <link rel="manifest" href="{{ '/site.webmanifest' | url }}">
 <meta name="theme-color" content="#ffffff">
 
-{# Preload only the hero image needed for this page to avoid wasted bandwidth #}
 {% if page.url and (page.url | lower | slice(0,6)) == "/about" %}
   <link rel="preload" fetchpriority="high" as="image" href="{{ '/img/about.webp' | url }}">
 {% else %}
   <link rel="preload" fetchpriority="high" as="image" href="{{ '/img/header.webp' | url }}">
 {% endif %}
 
-<title>{{ (title or metadata.title) | addDevPrefix }}</title>
+{% set pageTitle = title or metadata.title %}
+{% if layout == "post.njk" and title %}
+  {% set pageTitle = metadata.title ~ " - " ~ title %}
+{% endif %}
+<title>{{ pageTitle | addDevPrefix }}</title>
 
 {# Minimal critical styles to avoid flash of default blue/unstyled content before async CSS loads #}
 <style>

src/_includes/navbar.njk

@@ -13,9 +13,13 @@
                     </ul>
             </div>
         </div>
+
         <div class="row">
-            <div class="collapse navbar-collapse">
-                <ul class="navbar-nav ms-auto py-4 py-lg-0 nav-social">
+            <div class="collapse navbar-collapse d-flex align-items-center justify-content-end gap-3">
+                <form role="search" class="nav-search mb-3 mb-lg-0 me-lg-3">
+                    <input id="nav-search" type="search" placeholder="Search…" autocomplete="off" />
+                </form>
+                <ul class="navbar-nav ms-auto py-4 py-lg-0 nav-social d-flex align-items-center gap-2 gap-lg-3 mb-0">
                     <li class="nav-item">
                         <a class="nav-link nav-icon-link py-3" href="{{ metadata.author.linkedin }}" target="_blank" aria-label="LinkedIn">
                             <span class="nav-icon" aria-hidden="true">

src/_includes/pageheader.njk

@@ -10,32 +10,12 @@
         <div class="container position-relative px-4 px-lg-5">
             <div class="row gx-4 gx-lg-5 justify-content-center">
                 <div class="col-md-10 col-lg-8 col-xl-7">
-                    {# Let's not show the post titles in the page header so we keep the blog title there always instead
-                    <!-- If it's a single post page, display the post title in the heading -->
-                    {% if layout == "post.njk" %}
-                    <div class="post-heading">
-                        <h1>{{ title }}</h1>
-                        <span class="subheading">{{ description }}</span>
-                        {% import "postmeta.njk" as postmeta %}
-		                {{ postmeta.postmeta(collections.all | getCollectionItem(page)) }}
-                    </div>
-                    {% else %}
-                    #}
                     <div class="site-heading">
-                        {#<h1>{{ title | default(metadata.title) }}</h1>#}
                         <h1>{{ metadata.title }}</h1>
                         <span class="subheading">{{ metadata.description }}</span>
-                        {#
-                        <!-- Display page title if it's a specific page, otherwise display the site title -->
-                        {% if (layout == "page.njk") %}
-                            <span class="subheading">{{ description }}</span>
-                        {% else %}
-                            <span class="subheading">{{ description | default(metadata.description) }}</span>
-                        {% endif %}
-                    </div>
-                    % endif %}
-                    #}
                 </div>
             </div>
         </div>
     </header>
+
+<div id="search-results" aria-live="polite"></div>

src/_includes/scripts.njk

@@ -7,3 +7,5 @@
 </script>
 <script defer src="{{ '/js/scripts.js' | minifyPath | url }}"></script>
 <script defer src="/js/tweet-loader.js"></script>
+<script type="module" src="{{ '/js/pagefind-search.js' | minifyPath | url }}"></script>
+

src/_layouts/base.njk

@@ -5,17 +5,19 @@
     {% include 'head.njk' %}
   </head>
 
-  <body>
+  <body{% if pagefind_ignore %} data-pagefind-ignore="true"{% endif %}>
 
     {% include 'navbar.njk' %}
     {% include 'pageheader.njk' %}
 
-    {{ content | safe }}
+    <main id="page-content">
+      {{ content | safe }}
+    </main>
 
     {% include 'footer.njk' %}
 
     {% include 'scripts.njk' %}
 
   </body>
 
-</html>
+</html>

src/_layouts/post.njk

@@ -7,9 +7,9 @@ layout: base.njk
     <div class="container px-4 px-lg-5">
         <div class="row gx-4 gx-lg-5 justify-content-center">
             <div class="col-md-10 col-lg-8 col-xl-7 post-preview">
-                <article class="mb-4">
-                    <h1 class="post-title">{{ title }}</h1>
-                    <span class="post-subtitle">{{ description }}</span>
+                <article class="mb-4" data-pagefind-body>
+                    <h1 class="post-title" data-pagefind-meta="title">{{ title }}</h1>
+                    <span class="post-subtitle" data-pagefind-meta="description">{{ description }}</span>
                     {% import "postmeta.njk" as postmeta %}
                     {{ postmeta.postmeta(post) }}
                     {{ content | safe }}
@@ -33,4 +33,3 @@ layout: base.njk
         </div>
     </div>
 </div> 
-

src/assets/js/pagefind-search.js

@@ -0,0 +1,37 @@
+import { options, init, search } from "/pagefind/pagefind.js";
+
+await options({ basePath: "/pagefind", excerptLength: 50 });
+await init();
+
+const input = document.querySelector("#nav-search");
+const results = document.querySelector("#search-results");
+const body = document.body;
+
+input?.addEventListener("input", async (e) => {
+  const query = e.target.value.trim();
+  results.innerHTML = "";
+  results.classList.remove("has-results");
+  body.classList.remove("search-active");
+  if (!query) return;
+
+  const res = await search(query);
+  const hits = res.results || [];
+
+  for (const hit of hits) {
+    const data = await hit.data();
+    const excerpt = data.excerpt || data.meta?.excerpt || data.meta?.description || "";
+
+    results.insertAdjacentHTML(
+      "beforeend",
+      `<article>
+         <a href="${data.url}">${data.meta?.title ?? data.url}</a>
+         ${excerpt ? `<p>${excerpt}</p>` : ""}
+       </article>`
+    );
+  }
+
+  if (hits.length) {
+    results.classList.add("has-results");
+    body.classList.add("search-active");
+  }
+});

src/assets/scss/components/_pagefind.scss

@@ -0,0 +1,68 @@
+#nav-search {
+  width: 180px;
+  max-width: 100%;
+  border-radius: 999px;
+  border: 1px solid #d9d9d9;
+  background: #f9f9f9;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.95rem;
+}
+
+#mainNav .nav-search {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+#nav-search:focus {
+  outline: none;
+  border-color: #b3b3b3;
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
+}
+
+#search-results {
+  display: none;
+  gap: 1rem;
+  max-width: 900px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+#search-results.has-results {
+  display: grid;
+}
+
+#search-results article {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  padding: 1rem 1.25rem;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+}
+
+#search-results article a {
+  font-weight: 700;
+  color: inherit;
+  text-decoration: none;
+}
+
+#search-results article p {
+  margin: 0.5rem 0 0;
+  color: #4a4a4a;
+  line-height: 1.5;
+}
+
+// spacing for social icons in nav
+#mainNav .nav-social {
+  gap: 0.75rem;
+}
+
+#mainNav .nav-social .nav-link {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+body.search-active #page-content {
+  display: none;
+}

src/assets/scss/styles.scss

@@ -33,6 +33,7 @@
 // Components
 @import './components/buttons';
 @import './components/navbar';
+@import './components/pagefind';
 
 // Sections
 @import './sections/footer';

src/content/index.njk

@@ -6,6 +6,7 @@ pagination:
   reverse: true
 layout: home.njk
 headerImage: "header.webp"
+pagefind_ignore: true
 eleventyNavigation:
   key: Home
   order: 1

src/content/topics-list.njk

@@ -4,6 +4,7 @@ layout: home.njk
 eleventyNavigation:
   key: Topics
   order: 2
+pagefind_ignore: true
 ---
 
 <h1>Topics</h1>

src/content/topics.njk

@@ -7,6 +7,7 @@ pagination:
     - all
   addAllPagesToCollections: true
 layout: home.njk
+pagefind_ignore: true
 eleventyComputed:
   title: "Topic: {{ topic }}"
 description: ""