Add Page Find

Author: adam3smith

.github/workflows/build.yml

@@ -44,10 +44,14 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "18"
-      - name: Install PurgeCSS and Terser
+      - name: Install PurgeCSS, Terser, and PageFind
         run: |
           npm install -g purgecss
           npm install -g terser
+          npm install -g pagefind
+
+      - name: Index site with PageFind
+        run: npx pagefind --site _site
       - name: Compress CSS with PurgeCSS
         run: |
           purgecss --config purgecss.config.js

.github/workflows/deploy.yml

@@ -0,0 +1,83 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build and index
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4
+        with:
+          ruby-version: "3.1"
+          bundler-cache: true
+          cache-version: 0
+
+      - name: Build with Jekyll
+        run: bundle exec jekyll build
+        env:
+          JEKYLL_ENV: production
+
+      - name: Install Minify
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y minify
+
+      - name: Compress HTML
+        run: |
+          minify --all --html-keep-document-tags --html-keep-end-tags -r -o _site/ _site/
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+
+      - name: Install PurgeCSS, Terser, and PageFind
+        run: |
+          npm install -g purgecss
+          npm install -g terser
+          npm install -g pagefind
+
+      - name: Index site with PageFind
+        run: npx pagefind --site _site
+
+      - name: Compress CSS with PurgeCSS
+        run: |
+          purgecss --config purgecss.config.js
+
+      - name: Compress JavaScript with Terser
+        run: |
+          terser _site/assets/js/main.js --compress ecma=2015,top_retain=window.conference --mangle --comments false --output _site/assets/js/main.js
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: _site/
+
+  deploy:
+    name: Deploy
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

_config.yml

@@ -109,7 +109,7 @@ conference:
             relative_url: /instructors/travel-lodging
           - name: Honorarium Payment, Per Diem, and Travel Reimbursement
             relative_url: /instructors/honoraria-logistics
-      - name: AQMMR & EMW 
+      - name: AQMMR & EMW
         relative_url: /weekend-workshops/
         menu:
 

_includes/partials/header.html

@@ -56,6 +56,6 @@ <h1 class="display-4">
     {%- endunless -%}
 
   </header>
-  <main class="container">
+  <main class="container" data-pagefind-body>
 
     {%- include partials/info_bar.html -%}

_includes/partials/navbar.html

@@ -79,6 +79,10 @@
           {%- endif -%}
         {%- endfor %}
       </ul>
+
+      <form class="form-inline ml-3" action="/search/" method="get" role="search">
+        <input class="form-control form-control-sm" type="search" name="q" placeholder="Search…" aria-label="Search" style="width: 120px;">
+      </form>
     </div>
 
     {%- if site.conference.navigation.logo %}

_layouts/page.html

@@ -1,7 +1,7 @@
 {% include partials/header.html %}
 
 {% if page.title -%}
-  <h1 class="display-5 mb-3 text-break">{{ page.title }}</h1>
+  <h1 class="display-5 mb-3 text-break" data-pagefind-meta="title">{{ page.title }}</h1>
 {%- endif %}
 
 {{ content }}

search/index.md

@@ -0,0 +1,35 @@
+---
+layout: page
+title: Search
+---
+
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
+
+<div id="search" class="mt-3"></div>
+
+<script>
+  function initSearch() {
+    new PagefindUI({
+      element: '#search',
+      showImages: false,
+      excerptLength: 30
+    });
+    var q = new URLSearchParams(window.location.search).get('q');
+    if (q) {
+      setTimeout(function () {
+        var input = document.querySelector('.pagefind-ui__search-input');
+        if (input) {
+          input.value = q;
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+      }, 50);
+    }
+  }
+
+  function searchUnavailable() {
+    document.getElementById('search').innerHTML =
+      '<p class="text-muted">Search index not available in local development. ' +
+      'Run <code>bundle exec jekyll build &amp;&amp; npx pagefind --site _site</code> to enable search.</p>';
+  }
+</script>
+<script src="/pagefind/pagefind-ui.js" onload="initSearch()" onerror="searchUnavailable()"></script>