diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 99a9c5d95..1bd8a7722 100644
--- a/gatsby-ssr.js
+++ b/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 }}
>,
+ // 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.
+ ,
+ ,
])
}
diff --git a/package.json b/package.json
index 451f59e12..f9ce1c6d8 100644
--- a/package.json
+++ b/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\"",
diff --git a/src/components/header/color-scheme-toggle/color-scheme-toggle.jsx b/src/components/header/color-scheme-toggle/color-scheme-toggle.jsx
index 73c2eb031..dff58673d 100644
--- a/src/components/header/color-scheme-toggle/color-scheme-toggle.jsx
+++ b/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() {
diff --git a/src/components/header/search/search.jsx b/src/components/header/search/search.jsx
index 087d5a043..6ebf06dbe 100644
--- a/src/components/header/search/search.jsx
+++ b/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 (
- //
- {
- 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),
- }
- })
- }}
- />
- //
- )
-}
+ 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