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 # npm
node_modules node_modules
# local build # build
_live _site
_includes/head-content.njk
+5
View File
@@ -33,6 +33,7 @@
{# Styles #} {# Styles #}
<style>{% include "css/main.css" %}</style> <style>{% include "css/main.css" %}</style>
<style>{% include "css/nav.css" %}</style> <style>{% include "css/nav.css" %}</style>
<style>{% include "css/pagefind.css" %}</style>
<style>{% include "css/highlighting.css" %}</style> <style>{% include "css/highlighting.css" %}</style>
<style>{% include "css/print.css" %}</style> <style>{% include "css/print.css" %}</style>
@@ -41,3 +42,7 @@
{# Scripts #} {# Scripts #}
<script>{% include "js/theme.js" %}</script> <script>{% include "js/theme.js" %}</script>
<script type="module">{% getBundle "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> </ul>
</nav> </nav>
<div class="dark searchbox" data-pf-theme="dark">
<pagefind-searchbox></pagefind-searchbox>
</div>
<div class="light searchbox">
<pagefind-searchbox></pagefind-searchbox>
</div>
</header> </header>
_includes/layouts/base.njk
+1 -1
View File
@@ -6,7 +6,7 @@
<body> <body>
{% include "header.njk" %} {% include "header.njk" %}
<main id="main"> <main id="main" data-pagefind-body>
{{ content | safe }} {{ content | safe }}
</main> </main>
css/nav.css
+3 -4
View File
@@ -1,12 +1,11 @@
/* Header */ /* Header */
header { header {
position: sticky;
top: 0;
background-color: var(--color-bg); background-color: var(--color-bg);
padding: .75rem 0; padding: .75rem 0;
z-index: 10;
border-bottom: thick solid var(--color-teal); border-bottom: thick solid var(--color-teal);
box-shadow: 0 .25rem .15rem var(--color-shadow); box-shadow: 0 .25rem .15rem var(--color-shadow);
display: grid;
grid-template-columns: auto;
} }
/* Header links, pagination links */ /* Header links, pagination links */
@@ -164,7 +163,7 @@ a[aria-current="page"] a:focus-visible i,
width: auto; width: auto;
height: auto; height: auto;
overflow: auto; overflow: auto;
margin: 0 10%; margin: -.125rem 10%;
z-index: 999; 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 { attrs } from "@mdit/plugin-attrs";
import { chunk } from "lodash-es"; import { chunk } from "lodash-es";
import path from "node:path"; import path from "node:path";
import { execSync } from 'child_process';
import pluginFilters from "./_config/filters.js"; import pluginFilters from "./_config/filters.js";
@@ -136,6 +137,12 @@ export default async function(eleventyConfig) {
/* Watch when serving */ /* Watch when serving */
eleventyConfig.addWatchTarget("css"); eleventyConfig.addWatchTarget("css");
eleventyConfig.addWatchTarget("js"); 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 = { export const config = {
package-lock.json
Generated
+119 -1
View File
@@ -18,7 +18,8 @@
"@mdit/plugin-attrs": "^0.24.2", "@mdit/plugin-attrs": "^0.24.2",
"@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main", "@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
"lodash-es": "^4.17.23", "lodash-es": "^4.17.23",
"luxon": "^3.7.2" "luxon": "^3.7.2",
"pagefind": "^1.5.2"
} }
}, },
"node_modules/@11ty/dependency-tree": { "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": { "node_modules/@rgrove/parse-xml": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/@rgrove/parse-xml/-/parse-xml-4.2.0.tgz", "resolved": "https://registry.npmjs.org/@rgrove/parse-xml/-/parse-xml-4.2.0.tgz",
@@ -2081,6 +2180,25 @@
"node": ">=8" "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": { "node_modules/parse-srcset": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", "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", "description": "Lee's personal website, take 2, built with 11ty",
"scripts": { "scripts": {
"build": "rm -rf _site && npx @11ty/eleventy --quiet", "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": [], "keywords": [],
"author": "Lee Cattarin", "author": "Lee Cattarin",
@@ -20,6 +20,7 @@
"@mdit/plugin-attrs": "^0.24.2", "@mdit/plugin-attrs": "^0.24.2",
"@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main", "@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
"lodash-es": "^4.17.23", "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 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. 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 - [Lenny](http://www.wondra.codes/){target="_blank" rel="external"}, especially for their HTML/CSS and accessibility expertise