inherentlee/leecat.art
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search bar timeeee

Browse Source
This commit is contained in:
inherentlee
2026-09-11 11:46:47 -07:00
parent d8049a1f34
commit 58da634ec7
10 changed files with 238 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -2
View File
@@ -1,5 +1,5 @@
# npm
node_modules
# local build
_live
# build
_site
_includes/head-content.njk
+5
View File
@@ -33,6 +33,7 @@
{# Styles #}
<style>{% include "css/main.css" %}</style>
<style>{% include "css/nav.css" %}</style>
<style>{% include "css/pagefind.css" %}</style>
<style>{% include "css/highlighting.css" %}</style>
<style>{% include "css/print.css" %}</style>
@@ -41,3 +42,7 @@
{# Scripts #}
<script>{% include "js/theme.js" %}</script>
<script type="module">{% getBundle "js" %}</script>
{# Pagefind #}
<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
_includes/header.njk
+6
View File
@@ -17,4 +17,10 @@
</ul>
</nav>
<div class="dark searchbox" data-pf-theme="dark">
<pagefind-searchbox></pagefind-searchbox>
</div>
<div class="light searchbox">
<pagefind-searchbox></pagefind-searchbox>
</div>
</header>
_includes/layouts/base.njk
+1 -1
View File
@@ -6,7 +6,7 @@
<body>
{% include "header.njk" %}
<main id="main">
<main id="main" data-pagefind-body>
{{ content | safe }}
</main>
css/nav.css
+3 -4
View File
@@ -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;
}
css/pagefind.css
+90
View File
@@ -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;
}
eleventy.config.js
+7
View File
@@ -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 = {
package-lock.json
Generated
+119 -1
View File
@@ -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",
package.json
+3 -2
View File
@@ -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"
}
}
src/pages/colophon.md
+2
View File
@@ -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