Switch to PageFind for search

gatsby-ssr.js

@@ -1,6 +1,7 @@
 /*eslint-env node */
 
 const React = require('react')
+const { withPrefix } = require('gatsby')
 
 // Adds the dark mode class name to the html element before render,
 // using an inline script to void a flash of white in dark mode
@@ -14,6 +15,9 @@ exports.onRenderBody = ({ setHeadComponents }) => {
 
         // Add the new scheme
         document.documentElement.classList.add(scheme)
+
+        // Pagefind's search UI reads this attribute to theme itself
+        document.documentElement.setAttribute('data-pf-theme', scheme)
       }
 
       var isDarkMode =
@@ -38,5 +42,18 @@ exports.onRenderBody = ({ setHeadComponents }) => {
       key='dark-mode-script'
       dangerouslySetInnerHTML={{ __html: script }}
     ></script>,
+    // Pagefind's search index and UI bundle are generated as a post-build
+    // step (see the `build` script), so they're loaded from the static
+    // output directory rather than bundled as an npm dependency.
+    <link
+      key='pagefind-css'
+      rel='stylesheet'
+      href={withPrefix('/pagefind/pagefind-component-ui.css')}
+    />,
+    <script
+      key='pagefind-script'
+      type='module'
+      src={withPrefix('/pagefind/pagefind-component-ui.js')}
+    ></script>,
   ])
 }

package.json

@@ -7,7 +7,6 @@
   "dependencies": {
     "@babel/core": "^7.15.0",
     "@babel/eslint-parser": "^7.15.0",
-    "@docsearch/react": "^3.5.2",
     "@josephuspaye/gatsby-remark-graphviz": "^0.3.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
@@ -37,6 +36,7 @@
     "gatsby-transformer-sharp": "^3.11.0",
     "husky": "^7.0.0",
     "katex": "^0.13.13",
+    "pagefind": "^1.5.2",
     "postcss": "^8.3.6",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.3.2",
@@ -58,7 +58,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
+    "build": "gatsby build && pagefind --site public",
     "dev": "gatsby develop",
     "clean": "rimraf .cache/ public/",
     "lint": "eslint \"src/**/*.{jsx,js}\" \"*.js\" && stylelint \"src/**/*.css\"",

src/components/header/color-scheme-toggle/color-scheme-toggle.jsx

@@ -9,6 +9,9 @@ function setColorScheme(scheme) {
     scheme === 'light' ? 'dark' : 'light'
   )
   document.documentElement.classList.add(scheme)
+
+  // Pagefind's search UI reads this attribute to theme itself
+  document.documentElement.setAttribute('data-pf-theme', scheme)
 }
 
 function toggleColorScheme() {

src/components/header/search/search.jsx

@@ -1,40 +1,41 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import '@docsearch/css'
+import React, { useEffect, useRef } from 'react'
 import './search.module.css'
-import { DocSearch } from '@docsearch/react'
 
 const Search = () => {
-  return (
-    // <div className={style.search}>
-    <DocSearch
-      appId='BH4D9OD16A'
-      apiKey='be16e460d9d03fa711df82d525dec3c1'
-      indexName='nubots'
-      placeholder='Search NUbook...'
-      transformItems={(items) => {
-        return items.map((item) => {
-          // Get the origin (domain + port, if any) from the result URL
-          const { origin } = new URL(item.url)
-          return {
-            ...item,
-            // Replace the origin in the result URL with our current origin,
-            // so the links work for local development and deploy previews
-            url: item.url.replace(origin, window.location.origin),
-          }
-        })
-      }}
-    />
-    // </div>
-  )
-}
+  const triggerRef = useRef(null)
+  const modalRef = useRef(null)
 
-Search.propTypes = {
-  background: PropTypes.string,
-}
+  // Pagefind's web components mutate their own children as soon as they're
+  // upgraded (e.g. pagefind-modal adds an internal <dialog>). If React
+  // renders them via JSX, that mutation happens before/during hydration and
+  // React "corrects" it by tearing the mutated children back out, breaking
+  // the modal. So they're mounted imperatively into empty wrapper divs that
+  // React never diffs into, after hydration has already settled.
+  useEffect(() => {
+    const triggerEl = triggerRef.current
+    const modalEl = modalRef.current
+
+    const trigger = document.createElement('pagefind-modal-trigger')
+    trigger.setAttribute('placeholder', 'Search NUbook...')
+    trigger.setAttribute('shortcut', 'mod+k')
+    triggerEl.appendChild(trigger)
 
-Search.defaultProps = {
-  background: 'solid',
+    const modal = document.createElement('pagefind-modal')
+    modal.setAttribute('reset-on-close', '')
+    modalEl.appendChild(modal)
+
+    return () => {
+      triggerEl.removeChild(trigger)
+      modalEl.removeChild(modal)
+    }
+  }, [])
+
+  return (
+    <>
+      <div ref={triggerRef} />
+      <div ref={modalRef} />
+    </>
+  )
 }
 
 export default Search

src/components/header/search/search.module.css

@@ -1,120 +1,16 @@
-*:global.DocSearch-Button {
-  backdrop-filter: blur(4px);
-  font-weight: inherit;
-  transition: all 0.2s ease-in-out;
-
-  @apply m-0 h-10 w-full pr-3 md:px-4 rounded appearance-none outline-none;
-
-  &:hover {
-    box-shadow: none;
-  }
-
-  &:focus {
-    box-shadow: none;
-  }
-}
-
-*:global.DocSearch-Button-Keys {
-  display: none;
-}
-
-*:global.DocSearch-Button-Container {
-  @apply gap-3 w-full;
-}
-
-*:global.DocSearch-Button-Placeholder {
+/* The search bar always sits on the header's dark bg (bg-gray-900),
+   regardless of the site's light/dark theme (set via data-pf-theme on
+   <html>, see gatsby-ssr.js and color-scheme-toggle.jsx), so the trigger
+   button's own styling stays constant. An element's own declarations
+   always win over an inherited value, so this overrides whatever
+   data-pf-theme cascades down regardless of the current theme. */
+pagefind-modal-trigger {
   display: block;
+  width: 100%;
 
-  @apply text-lg;
-}
-
-*:global.DocSearch-Modal {
-  box-shadow: none;
-}
-
-*:global.DocSearch-Hits {
-  mark {
-    @apply font-semibold;
-  }
-}
-
-*:global.DocSearch-Footer {
-  box-shadow: none;
-
-  *:global.DocSearch-Commands {
-    display: none;
-  }
-}
-
-*:global.DocSearch-Form {
-  box-shadow: none;
-}
-
-:global(.dark) {
-  --docsearch-container-background: rgba(115, 115, 115, 0.8);
-  --docsearch-modal-background: gray-700;
-  --docsearch-footer-background: gray-700;
-  --docsearch-hit-color: text-primary-inverted;
-  --docsearch-text-color: text-primary-inverted;
-  --docsearch-hit-background: rgba(255, 255, 255, 0.07);
-  --docsearch-hit-active-color: #000;
-  --docsearch-highlight-color: #f9a50d;
-  --docsearch-hit-shadow: none;
-
-  *:global.DocSearch-Button {
-    background-color: rgba(255, 255, 255, 0.15);
-    color: hsla(0, 0%, 100%, 0.45);
-
-    > :global.DocSearch-Button-Container {
-      > :global.DocSearch-Search-Icon {
-        color: hsla(0, 0%, 100%, 0.45);
-      }
-    }
-
-    &:hover {
-      box-shadow: none;
-      background-color: rgba(66, 66, 66, 1);
-    }
-  }
-
-  *:global.DocSearch-Modal {
-    background-color: #222;
-  }
-
-  *:global.DocSearch-Form {
-    background-color: rgba(255, 255, 255, 0.075);
-  }
-
-  *:global.DocSearch-Hit-source {
-    background-color: #222;
-  }
-}
-
-:global(.light) {
-  --docsearch-container-background: rgba(115, 115, 115, 0.8);
-  --docsearch-highlight-color: #cc880d;
-  --docsearch-hit-active-color: #fff;
-
-  *:global.DocSearch-Button {
-    background-color: rgba(255, 255, 255, 0.15);
-    color: hsla(0, 0%, 100%, 0.45);
-
-    > :global.DocSearch-Button-Container {
-      > :global.DocSearch-Search-Icon {
-        color: hsla(0, 0%, 100%, 0.45);
-      }
-    }
-
-    &:hover {
-      box-shadow: none;
-      background-color: rgba(255, 255, 255, 1);
-      color: rgba(50, 50, 50, 0.87);
-
-      > :global.DocSearch-Button-Container {
-        > :global.DocSearch-Search-Icon {
-          color: rgba(50, 50, 50, 0.87);
-        }
-      }
-    }
-  }
+  --pf-background: rgba(255, 255, 255, 0.15);
+  --pf-text: rgba(255, 255, 255, 0.87);
+  --pf-text-secondary: hsla(0, 0%, 100%, 0.45);
+  --pf-border: transparent;
+  --pf-border-radius: 0.25rem;
 }

src/components/layout.jsx

@@ -72,7 +72,7 @@ const Layout = ({ children, data, pageContext, contributions }) => {
               )}
             </div>
             <div className='px-6 pt-26 pb-12 w-full max-w-3xl mx-auto xl:px-12 lg:ml-0 lg:mr-auto xl:mx-0 xl:w-3/4'>
-              <article className='content' id='page-content'>
+              <article className='content' id='page-content' data-pagefind-body>
                 <ArticleHeader
                   section={currentSection}
                   chapter={currentChapter}

src/styles/global.css

@@ -98,95 +98,4 @@ body {
   @apply pt-3 italic text-base;
 }
 
-/*
-  Algolia search dropdown styling
-*/
-
-.algolia-autocomplete {
-  width: 100%;
-}
-
-.algolia-autocomplete .ds-dropdown-menu {
-  max-width: 100% !important;
-  width: 100%;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
-  @apply text-nubots-700 !important;
-}
-
-.algolia-autocomplete
-  .algolia-docsearch-suggestion--category-header
-  .algolia-docsearch-suggestion--category-header-lvl0
-  .algolia-docsearch-suggestion--highlight,
-.algolia-autocomplete
-  .algolia-docsearch-suggestion--category-header
-  .algolia-docsearch-suggestion--category-header-lvl1
-  .algolia-docsearch-suggestion--highlight,
-.algolia-autocomplete
-  .algolia-docsearch-suggestion--text
-  .algolia-docsearch-suggestion--highlight {
-  box-shadow: inset 0 -2px 0 0 #f9a50d !important;
-}
-
-@media (max-width: 768px) {
-  .algolia-autocomplete .ds-dropdown-menu {
-    min-width: auto !important;
-    max-width: none !important;
-    margin-right: -48px !important;
-    width: calc(100vw - 48px);
-
-    &::before {
-      display: none !important;
-    }
-  }
-
-  .algolia-autocomplete
-    .algolia-docsearch-suggestion
-    .algolia-docsearch-suggestion--subcategory-column::after {
-    content: '|';
-    margin-right: 4px;
-  }
-}
-
-.dark .algolia-autocomplete {
-  .ds-dropdown-menu::before {
-    background-color: #333;
-    border-color: #333;
-  }
-
-  .ds-dropdown-menu [class^='ds-dataset-'] {
-    background-color: #333;
-    border-color: #333;
-  }
-
-  .algolia-docsearch-suggestion {
-    background-color: #333;
-    color: theme('colors.primary-inverted');
-  }
-
-  .algolia-docsearch-suggestion--category-header {
-    border-color: theme('colors.gray.700');
-    color: theme('colors.primary-inverted');
-  }
-
-  .algolia-docsearch-suggestion--title {
-    color: theme('colors.primary-inverted');
-  }
-
-  .algolia-docsearch-suggestion--highlight {
-    @apply text-nubots-500 !important;
-  }
-
-  .ds-dropdown-menu
-    .ds-suggestion.ds-cursor
-    .algolia-docsearch-suggestion.suggestion-layout-simple,
-  .ds-dropdown-menu
-    .ds-suggestion.ds-cursor
-    .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
-    .algolia-docsearch-suggestion--content {
-    background-color: rgba(69, 142, 225, 0.15);
-  }
-}
-
 /* purgecss end ignore */