diff --git a/.gitignore b/.gitignore
index 1906a252..7331b2f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
# npm
node_modules
-# local build
-_live
+# build
+_site
diff --git a/_includes/head-content.njk b/_includes/head-content.njk
index d6f377fb..af52bfe8 100644
--- a/_includes/head-content.njk
+++ b/_includes/head-content.njk
@@ -33,6 +33,7 @@
{# Styles #}
+
@@ -41,3 +42,7 @@
{# Scripts #}
+
+{# Pagefind #}
+
+
diff --git a/_includes/header.njk b/_includes/header.njk
index 0b2535e3..766c2d39 100644
--- a/_includes/header.njk
+++ b/_includes/header.njk
@@ -17,4 +17,10 @@
+
+
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 11603cd5..0c9ea318 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -6,7 +6,7 @@
{% include "header.njk" %}
-
+
{{ content | safe }}
diff --git a/css/nav.css b/css/nav.css
index 5405392c..12456987 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -1,12 +1,11 @@
/* Header */
header {
- position: sticky;
- top: 0;
background-color: var(--color-bg);
padding: .75rem 0;
- z-index: 10;
border-bottom: thick solid var(--color-teal);
box-shadow: 0 .25rem .15rem var(--color-shadow);
+ display: grid;
+ grid-template-columns: auto;
}
/* Header links, pagination links */
@@ -164,7 +163,7 @@ a[aria-current="page"] a:focus-visible i,
width: auto;
height: auto;
overflow: auto;
- margin: 0 10%;
+ margin: -.125rem 10%;
z-index: 999;
}
diff --git a/css/pagefind.css b/css/pagefind.css
new file mode 100644
index 00000000..2a2c1195
--- /dev/null
+++ b/css/pagefind.css
@@ -0,0 +1,90 @@
+/* Handle color schemes */
+:root:has(#theme-light:checked) .dark {
+ display: none;
+}
+:root:has(#theme-dark:checked) .light {
+ display: none;
+}
+
+@media (prefers-color-scheme: light) {
+ :root:not(:has(#theme-dark:checked)) .dark {
+ display: none;
+ }
+}
+@media (prefers-color-scheme: dark) {
+ :root:not(:has(#theme-light:checked)) .light {
+ display: none;
+ }
+}
+
+.searchbox {
+ margin: 1rem auto 0;
+}
+
+pagefind-searchbox,
+pagefind-modal-trigger,
+pagefind-modal {
+ /* Shadows */
+ --pf-scroll-shadow: var(--color-shadow) !important;
+ --pf-shadow-sm: .15rem .15rem 0 var(--color-shadow) !important;
+ --pf-shadow-md: .25rem .25rem 0 var(--color-shadow) !important;
+ --pf-shadow-lg: 1rem 1rem 0 var(--color-shadow) !important;
+
+ /* Typography */
+ --pf-font: var(--font-family) !important;
+
+ /* Border */
+ --pf-border-radius: 1.5rem !important;
+
+ /* Focus */
+ --pf-outline-width: .125rem !important;
+ --pf-outline-offset: 0 !important;
+
+ /* Width */
+ --pf-searchbox-max-width: min(550px, 92vw) !important;
+}
+
+.light pagefind-searchbox,
+.light pagefind-modal-trigger,
+.light pagefind-modal {
+ --pf-text: var(--color-dark) !important;
+ --pf-text-secondary: var(--color-dark-alt) !important;
+ --pf-text-muted: var(--color-dark-alt) !important;
+ --pf-background: var(--color-light-alt) !important;
+ --pf-border: var(--color-pink-dark) !important;
+ --pf-border-focus: var(--color-pink-dark) !important;
+ --pf-skeleton: var(--color-light) !important;
+ --pf-skeleton-shine: var(--color-dark) !important;
+ --pf-hover: var(--color-light) !important;
+ --pf-mark: var(--color-teal-dark) !important;
+ --pf-outline-focus: var(--color-teal-dark) !important;
+}
+
+.dark pagefind-searchbox,
+.dark pagefind-modal-trigger,
+.dark agefind-modal {
+ --pf-text: var(--color-light) !important;
+ --pf-text-secondary: var(--color-light-alt) !important;
+ --pf-text-muted: var(--color-light-alt) !important;
+ --pf-background: var(--color-dark-alt) !important;
+ --pf-border: var(--color-pink-light) !important;
+ --pf-border-focus: var(--color-pink-light) !important;
+ --pf-skeleton: var(--color-dark) !important;
+ --pf-skeleton-shine: var(--color-dark) !important;
+ --pf-hover: var(--color-dark) !important;
+ --pf-mark: var(--color-teal-light) !important;
+ --pf-outline-focus: var(--color-teal-light) !important;
+}
+
+pagefind-searchbox input {
+ border-width: .125rem !important;
+}
+
+pagefind-searchbox input:not(:focus-visible) {
+ box-shadow: var(--pf-shadow-md) !important;
+}
+
+.pf-searchbox-dropdown,
+.pf-searchbox-footer {
+ border-width: .125rem !important;
+}
diff --git a/eleventy.config.js b/eleventy.config.js
index d44d67a7..5b2d76da 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -6,6 +6,7 @@ import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import { attrs } from "@mdit/plugin-attrs";
import { chunk } from "lodash-es";
import path from "node:path";
+import { execSync } from 'child_process';
import pluginFilters from "./_config/filters.js";
@@ -136,6 +137,12 @@ export default async function(eleventyConfig) {
/* Watch when serving */
eleventyConfig.addWatchTarget("css");
eleventyConfig.addWatchTarget("js");
+
+ /* Implement search */
+ /* From https://rknight.me/blog/using-pagefind-with-eleventy-for-search/ */
+ eleventyConfig.on('eleventy.after', () => {
+ execSync(`npx pagefind --site _site --glob \"**/*.html\"`, { encoding: 'utf-8' })
+ });
};
export const config = {
diff --git a/package-lock.json b/package-lock.json
index 3d1c9347..8940690c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
"@mdit/plugin-attrs": "^0.24.2",
"@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
"lodash-es": "^4.17.23",
- "luxon": "^3.7.2"
+ "luxon": "^3.7.2",
+ "pagefind": "^1.5.2"
}
},
"node_modules/@11ty/dependency-tree": {
@@ -730,6 +731,104 @@
}
}
},
+ "node_modules/@pagefind/darwin-arm64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.5.2.tgz",
+ "integrity": "sha512-MXpI+7HsAdPkvJ0gk9xj9g541BCqBZOBbdwj9g6lB5LCj6kSV6nqDSjzcAJwvOsfu0fjwvC8hQU+ecfhp+MpiQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@pagefind/darwin-x64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.5.2.tgz",
+ "integrity": "sha512-IojxFWMEJe0RQ7PQ3KXQsPIImNsbpPYpoZ+QUDrL8fAl/O27IX+LVLs74/UzEZy5uA2LD8Nz1AiwKr72vrkZQw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@pagefind/freebsd-x64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.5.2.tgz",
+ "integrity": "sha512-7EVzo9+0w+2cbe671BtMj10UlNo83I+HrLVLfRxO731svHRJKUfJ/mo05gU14pe9PCfpKNQT8FS3Xc/oDN6pOA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "freebsd"
+ ]
+ },
+ "node_modules/@pagefind/linux-arm64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.5.2.tgz",
+ "integrity": "sha512-Ovt9+K35sqzn8H3ZMXGwls4TD/wMJuvRtShHIsmUQREmaxjrDEX7gHckRCrwYJ4XE1H1p6HkLz3wukrAnsfXQw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@pagefind/linux-x64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.5.2.tgz",
+ "integrity": "sha512-V+tFqHKXhQKq/WqPBD67AFy7scn1/aZID00ws4fSDd+1daSi5UHR9VVlRrOUYKxn3VuFQYRD7lYXdZK1WED1YA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@pagefind/windows-arm64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/windows-arm64/-/windows-arm64-1.5.2.tgz",
+ "integrity": "sha512-hN9Nh90fNW61nNRCW9ZyQrAj/mD0eRvmJ8NlTUzkbuW8kIzGJUi3cxjFkEcMZ5h/8FsKWD/VcouZl4yo1F7B6g==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@pagefind/windows-x64": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.5.2.tgz",
+ "integrity": "sha512-Fa2Iyw7kaDRzGMfNYNUXNW2zbL5FQVDgSOcbDHdzBrDEdpqOqg8TcZ68F22ol6NJ9IGzvUdmeyZypLW5dyhqsg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
"node_modules/@rgrove/parse-xml": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@rgrove/parse-xml/-/parse-xml-4.2.0.tgz",
@@ -2081,6 +2180,25 @@
"node": ">=8"
}
},
+ "node_modules/pagefind": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.5.2.tgz",
+ "integrity": "sha512-XTUaK0hXMCu2jszWE584JGQT7y284TmMV9l/HX3rnG5uo3rHI/uHU56XTyyyPFjeWEBxECbAi0CaFDJOONtG0Q==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "pagefind": "lib/runner/bin.cjs"
+ },
+ "optionalDependencies": {
+ "@pagefind/darwin-arm64": "1.5.2",
+ "@pagefind/darwin-x64": "1.5.2",
+ "@pagefind/freebsd-x64": "1.5.2",
+ "@pagefind/linux-arm64": "1.5.2",
+ "@pagefind/linux-x64": "1.5.2",
+ "@pagefind/windows-arm64": "1.5.2",
+ "@pagefind/windows-x64": "1.5.2"
+ }
+ },
"node_modules/parse-srcset": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
diff --git a/package.json b/package.json
index 055a9a91..47b524cc 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "Lee's personal website, take 2, built with 11ty",
"scripts": {
"build": "rm -rf _site && npx @11ty/eleventy --quiet",
- "dev": "rm -rf _live && npx @11ty/eleventy --serve --quiet --output _live"
+ "dev": "rm -rf _site && npx @11ty/eleventy --serve --quiet --output _site"
},
"keywords": [],
"author": "Lee Cattarin",
@@ -20,6 +20,7 @@
"@mdit/plugin-attrs": "^0.24.2",
"@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
"lodash-es": "^4.17.23",
- "luxon": "^3.7.2"
+ "luxon": "^3.7.2",
+ "pagefind": "^1.5.2"
}
}
diff --git a/src/pages/colophon.md b/src/pages/colophon.md
index 94afbeeb..98fc3999 100644
--- a/src/pages/colophon.md
+++ b/src/pages/colophon.md
@@ -8,6 +8,8 @@ v1 of this site began in 2022 and was based on [Millennial](https://lenpaul.gith
The fonts are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont){target="_blank" rel="external"} for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :)
+The search bar is powered by [Pagefind](https://pagefind.app/){target="_blank" rel="external"}. I was guided by [Robb Knight's walkthrough](https://rknight.me/blog/using-pagefind-with-eleventy-for-search/){target="_blank" rel="external"} when setting it up.
+
Thank you to some lovely friends for their feedback and help with the site! You should hire them. Yes, you.
- [Lenny](http://www.wondra.codes/){target="_blank" rel="external"}, especially for their HTML/CSS and accessibility expertise