Search and stuff

_data/metadata.js

@@ -66,6 +66,11 @@ export default {
 			linkDisplay: "Quizzes",
 			linkURL: "/quizzes/",
 		},
+		{
+			iconURL: "/img/icons/breeze/file-search-symbolic.svg",
+			linkDisplay: "Search",
+			linkURL: "/search/",
+		},
 		{
 			iconURL: "/img/icons/breeze/map-globe.svg",
 			linkDisplay: "Sitemap",

_includes/layouts/base.njk

@@ -5,6 +5,10 @@
 		<link rel="stylesheet" type="text/css" href="/css/index.css" />
 		<link rel="stylesheet" type="text/css" href="/css/webfonts/webfonts.css" />
 		<link rel="stylesheet" type="text/css" href="/css/code.css" />
+		{% if search %}
+		<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
+		<link rel="stylesheet" type="text/css" href="/css/search.css" />
+		{% endif %}
 		<!-- Mochi webmentions -->
 		<link rel="webmention" href="https://mochi-webmentions.meadow.cafe/webmention/mochi@upchur.ch/1/receive" />
 		<!-- Indieweb profile links -->

_includes/layouts/links.njk

@@ -1,7 +1,7 @@
 ---
 layout: layouts/linksPage.njk
 ---
-<div class="links-container h-card">
+<div class="links-container h-card" data-pagefind-body>
 	<img class="profilePic u-photo" src="{{ metadata.author.profilePic }}">
 	<h1 class="socialTitle p-name">Nathan Upchurch</h1>
 	<p class="page-block nodropcap">Beside what I do to earn a crust, among other things, I’m an incense maker and enthusiast, a classical trombonist, vegan cook, writer, mediocre photographer, and a fan of, advocate for, and occasional contributor to free and open source software. Here’s where you can find me on the internet:</p>

_includes/layouts/post.njk

@@ -1,8 +1,8 @@
 ---
 layout: layouts/base.njk
 ---
-<article class="post">
+<article class="post" data-pagefind-body>
-<h1>{{ title | safe }}</h1>
+<h1>{{ title | markdownify | safe}}</h1>
 {% include "mastodonComments.njk" %}
 {% if not hideMetadata %}
 <div class="post-metadata">

_includes/postslist.njk

@@ -17,7 +17,7 @@
 				<a href="{{ post.url }}" class="postlist-link">
 			{% endif %}
 					<h3>
-						{% if post.data.title %}{{ post.data.title | safe }}{% else %}?{% endif %}
+						{% if post.data.title %}{{ post.data.title | markdownify | safe }}{% else %}?{% endif %}
 					</h3>
 				{% if not postListTypeMicroblog %}
 				</a>

content/about/colophon/index.md

@@ -6,7 +6,7 @@ structuredData: none
 
 # Colophon
 ## What I used to build this website
-I built this website in plain-old HTML, CSS, and a touch of vanilla JavaScript using [Zach Leatherman](https://www.zachleat.com/)'s [11ty static site generator](https://www.11ty.dev/) and Mozilla's [Nunjucks templating language](https://mozilla.github.io/nunjucks/). I used free and open source variable typefaces [Fraunces](https://fraunces.undercase.xyz/), designed by Phaedra Charles and Flavia Zimbardi[^1], and [Manrope](https://www.gent.media/manrope), designed by Mikhail Sharanda[^2].
+I built this website in plain-old HTML, CSS, and a touch of vanilla JavaScript using [Zach Leatherman](https://www.zachleat.com/)'s [11ty static site generator](https://www.11ty.dev/) (now called, *sigh*, Build Awesome) and Mozilla's [Nunjucks templating language](https://mozilla.github.io/nunjucks/). I used free and open source variable typefaces [Fraunces](https://fraunces.undercase.xyz/), designed by Phaedra Charles and Flavia Zimbardi[^1], and [Manrope](https://www.gent.media/manrope), designed by Mikhail Sharanda[^2]. [Search](/search) powered by [Pagefind](https://pagefind.app/). [Guestbook](/guestbook) powered by [Guestbooks](https://guestbooks.meadow.cafe/).
 
 The handy calculators on [utopia.fyi](https://utopia.fyi), created by James Gilyead and Trys Mudford, helped me implement fluid typography and spacing, which has allowed me to make this website responsive without using a single media query. The future is upon us.
 

content/about/index.md

@@ -5,7 +5,7 @@ eleventyNavigation:
   key: About
   order: 2
 ---
-<article>
+<article data-pagefind-body>
 <h1>About me and my&nbsp;website.</h1>
 <p class="page-block nodropcap">I’m a prolific vegan home cook, classical trombonist, incense maker, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, designer, programmer, music producer, print lover, and human with too many interests and too little time.<br><br>
 This is my little corner of the internet where I talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining my writing to topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself and have fun writing about topics I enjoy.<br><br>

content/ai/index.md

@@ -4,6 +4,8 @@ title: Nathan Upchurch | AI
 structuredData: none
 ---
 
+<article data-pagefind-body>
+
 # AI
 Certified generative AI hater here. This website and all content herein is 100% guaranteed AI slop free: code, prose images, music, et cetera.
 
@@ -11,3 +13,5 @@ Certified generative AI hater here. This website and all content herein is 100%
 
 ## AI Permissions
 I do my utmost to ensure that my work is not hoovered wholesale and regurgitated by AI products by including an [ai.txt file](/ai.txt) and disallowing known crawlers in my [robots.txt file](/robots.txt), but just in case it will ever become meaningful in any legal sense, I'd like to make it clear here that I do not grant permission for any content on this website to be used as training data for any AI project, or for any portion of this website to be scraped by bots associated with AI projects.
+
+</article>

content/blank/blank.md

@@ -3,5 +3,8 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Blank
 structuredData: none
 ---
+<article data-pagefind-body>
 
 This page was intentionally left blank.
+
+</article>

content/blog/100-webmaster-questions.md

@@ -4,6 +4,7 @@ description: Answering a lot of questions.
 date: 2026-02-05T00:00:00.000Z
 tags:
   - Questionnaire
+  - Web Development
 synopsis: Answering a lot of questions.
 mastodon_id: '116021932929019975'
 ---

content/blog/eleventy-becomes-build-awesome.md

@@ -0,0 +1,112 @@
+---
+title: "Eleventy Becomes, *Sigh*, Build Awesome"
+description: "Sustainability? Enshittification? I have some feelings about this."
+date: 2026-03-11
+tags:
+  - Eleventy
+  - Enshittification
+  - Web Development
+synopsis: "Sustainability? Enshittification? I have some feelings about this."
+imageURL: /img/eleventy-becomes-sigh-build-awesome/eleventy-logo.png
+imageAlt: The old Eleventy logo.
+mastodon_id: ""
+---
+In case you haven't heard, Eleventy, the excellent static site generator that I
+use for this very website has been acquired by Font Awesome. As a result, it
+has been renamed to, *sigh*,
+[Build Awesome](https://www.11ty.dev/blog/build-awesome/). After seeing what
+happened to [Shoelace](https://shoelace.style/), I'm apprehensive
+and very much not looking forward to seeing what features get locked behind a
+paywall. But beside the enshittification likely to follow, I thought we'd
+stopped appending "awesome" to everything at roughly the same time bacon memes,
+curly moustaches, and
+[stomp-clap music](https://knowyourmeme.com/memes/stomp-clap-hey-music) went
+out of style. It seems like
+[I'm not the only one](https://www.allaboutken.com/posts/20260305-digesting-eleventy-becomes-build-awesome/)
+who feels this way either.
+
+While disappointed with this state of affairs, I'm not terribly surprised.
+Beyond the matter of funding,
+[as W. Evan Sheehan of The Darth Mall put it](https://darthmall.net/notes/2026/eleventy-build-awesome/)
+:
+
+> …the vibe of open source in the JavaScript community is a little bit different than what I think of as the broader open source movement. Open source JavaScript projects often feel a little more tied to corporations than Linux, or Python, or NeoVim.
+
+I wholeheartedly agree. There's
+[a big difference](https://www.gnu.org/philosophy/open-source-misses-the-point.en.html)
+in philosophy between "free software" and "open source," and many JavaScript
+projects seem to be firmly in the latter camp.
+
+The choice of the MIT license for Eleventy in the first place speaks
+volumes—it's antithetical to the free software movement. The MIT license allows
+corporations to snatch up free and open source software, insert whatever
+malicious functionality they please, lock down the source code, and abuse the
+users they extort with their rent-seeking pricing schemes. On the other hand,
+code licensed under a strong copyleft license such as the GPL ensures that
+software always remains free (as in speech). Under a strong copyleft license,
+anyone can use the software for any purpose. They may study, change, improve,
+and redistribute it. But unlike permissive licenses such as the MIT license,
+they may *not* strip these rights from users at any point.
+
+The goal of the free software movement is to create a
+[commons](https://en.wikipedia.org/wiki/Commons) of software that anyone is
+free to use, study, redistribute, and improve so that abusive software ceases
+to be competitive. In terms of how MIT licensed software helps this cause, it's
+a bit like putting a soldier on the battlefield with no armor. They may do some
+damage, but they're a cinch to eliminate from the field. At this point, I see
+MIT licensing as a red flag on all but the very few projects where it makes
+sense (such as programming languages). When you decide to rely on MIT-licensed
+software for your day to day activities, you never know when it will be
+enshittified, put behind a paywall, or
+[EEE](https://en.wikipedia.org/wiki/Embrace,_extend,_and_extinguish)'d out of
+existence.
+
+I'm not saying that these things are going to happen to what we knew and loved
+as Eleventy. Who knows what the future may bring. But I am saying that this
+move is certainly not in the spirit of Free / Libre and Open Source Software. I
+fear that the age-old pattern
+[that befell Standard Notes](/blog/underrated-apps-qownnotes/) is going to
+happen once again here: first attractive new features appear behind a paywall,
+then old features you relied on get
+[put behind a paywall](https://www.reddit.com/r/StandardNotes/comments/strgh2/very_confused_about_selfhosting_and_extensions/), using the software without paying is slowly made increasingly difficult,
+and, before you know it, they
+[pull the ol' switcheroo](https://www.reddit.com/r/StandardNotes/comments/16wkrau/note_version_316725_is_the_last_one_to_be_free_or/)
+on the license (even if they revert from embarrassment later).
+
+At the same time, despite my misgivings, I'm happy that
+[Zach Leatherman](https://www.zachleat.com/) is (I assume) going to be properly
+paid to continue his work on the project. It shouldn't be so damned hard to
+make a living while performing a public good. Zach seemed pretty happy about
+all of this during his appearance on, *sigh*,
+[Podcast Awesome](https://www.youtube.com/watch?v=QnnU_iguZ4I). He strikes me
+as someone who really cares about his work, and seems a lovely man, always
+willing to jump in help someone even when the problem is between the chair and
+the keyboard (ask me how I know). Zach deserves, at minimum, to be paid a
+decent salary for his contribution to the world, and I'm thrilled that it seems
+he's going to get at least that.
+
+Now I'm tempted to turn this into a screed on funding for FLOSS projects, but
+better informed people than I have written plenty of those already, so I'll
+leave it at this—the fact that NASA, Cern, Google, Microsoft, Mozilla, Ubuntu,
+JetBrains, CloudCannon, Netlify, Cloudflare, Shopify, MIT, Stanford, the
+governments of France, the UK, and the USA, Orange, Red Hat, Just Eat,
+[and others](https://www.11ty.dev/#why-should-you-use-eleventy) didn't manage
+to muster between them
+[a piddling $6,000 per month](https://www.zachleat.com/web/independent-sustainable-11ty/#asking-for-help)
+to pay the developer of a tool they use to publish their websites is *disgusting*. We might have avoided this situation if they had.
+
+I developed something like a brand loyalty to Eleventy. It's a scrappy project
+from a talented developer who has managed to keep it alive and well for eight
+years. The project has become widely used because *it's excellent*: flexible,
+powerful, fast, and easy to use for web developers who are used to working with
+JavaScript. I'm sad to see the name go, along with the red balloon, and that
+scruffy possum. The [clean, middle-class replacement](https://github.com/11ty/11ty-website/blob/main/src/img/mascots/awesome-possum-balloon-smile-sm.svg) with its stupid *clothing*
+and *fancy green balloon* [^1] can take a hike—I can't believe they've
+gentrified the damn mascot!
+
+[![Grumpy, one of Eleventy's mascot possums suspended from a red balloon in a field of stars.](/img/eleventy-becomes-sigh-build-awesome/grumpy_among_the_stars.webp "They say Grumpy floats among the stars now.")](/img/eleventy-becomes-sigh-build-awesome/grumpy_among_the_stars.webp)
+
+While I have major apprehensions about where, *sigh*, Font Awesome is going to take the project, I suppose we'll just have to wait and see where this goes. In the meantime, let's all be sure to donate to the FLOSS projects we use, publicly shame corporations who don't give back to the projects they profit from, and pressure our representatives to fund FLOSS software!
+
+[^1]: And green is my favorite color, too :[
+

content/blog/galleries.md

@@ -5,6 +5,7 @@ date: 2024-12-02
 tags:
   - Site Updates
   - Eleventy
+  - Web Development
 synopsis: At last, I've gotten around to implementing image galleries.
 imageURL: /img/isabella-fischer-X2l9M6jsS7E-unsplash.webp
 imageAlt: Some very tasty looking pop tarts with pink icing and sprinkles.

content/blog/making-quizzes-using-eleventy.md

@@ -5,6 +5,7 @@ date: 2025-02-04
 tags:
  - Site Updates
  - Eleventy
+ - Web Development
 synopsis: "Remember when internet quizzes were a thing? I wanted to bring them to my website."
 imageURL: ""
 imageAlt: ""

content/blog/new-audio-component-ballin.md

@@ -5,6 +5,7 @@ date: 2024-10-23
 tags:
   - Music
   - Site Updates
+  - Web Development
 synopsis: "I've gone and built a not-so-fancy audio component for my blog."
 imageURL: /audio/covers/ballin.webp
 imageAlt: An uncapped fountain pen on top of a pretty, gold-foiled pad of paper beside some envelopes with stamps featuring coffee drinks on them.

content/blog/underrated-apps-qownnotes.md

@@ -4,6 +4,7 @@ description: QOwnNotes is a terminally underrated native markdown note-taking ap
 synopsis: QOwnNotes is a terminally underrated native markdown note-taking app, despite the fact that you'll rarely see it mentioned on the internet.
 date: 2023-08-09
 tags:
+  - Enshittification
   - FOSS/FLOSS
   - Underrated Apps
 imageURL: /img/qownnotes.webp
@@ -13,7 +14,7 @@ mastodon_id: "110862579682916657"
 [![A screenshot of QOwnNotes showing a note subfolder panel beside markdown editor and preview panels.](/img/qownnotes.webp "QOwnNotes running on EndeavourOS / KDE Plasma")](/img/qownnotes.webp)
 
 ## What makes a good note taking app?
-After its author decided to make future versions closed-source, I found myself searching for a replacement for the excellent [Notable](https://notable.app/). Unfortunately, while note-taking applications are a dime a dozen, they're also common ground for the [Notable](https://notable.app/) / [SimpleNote](https://simplenote.com/) style FLOSS bait-and-switch: developers release an outstanding note-taking app, only to make future versions closed-source, or make it inordinately difficult to properly and fully make use of the software without paying for a hosted service. Victim to the former, I set out to find a note-taking app that I felt could not only be trusted to operate in the spirit of FLOSS philosophy, but also met some key criteria:
+After its author decided to make future versions closed-source, I found myself searching for a replacement for the excellent [Notable](https://notable.app/). Unfortunately, while note-taking applications are a dime a dozen, they're also common ground for the [Notable](https://notable.app/) / [Standard Notes](https://standardnotes.com/) style FLOSS bait-and-switch: developers release an outstanding note-taking app, only to make future versions closed-source, or make it inordinately difficult to properly and fully make use of the software without paying for a hosted service. Victim to the former, I set out to find a note-taking app that I felt could not only be trusted to operate in the spirit of FLOSS philosophy, but also met some key criteria:
 
 1. Native Code
 

content/blogroll/index.njk

@@ -3,6 +3,8 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Blogroll
 structuredData: none
 ---
+<article data-pagefind-body>
+
 	<h1>Blogroll</h1>
 	<p class="nodropcap">Here are some blogs and independent news outlets I like to read. You can click the RSS icon next to each to subscribe using <a href="../about-feeds/">your newsreader</a>, or import all of them at once by downloading and importing this convenient <a href="./nathanUpchurchBlogroll.opml" download>.opml file</a>.</p>
 	<p class="page-block">
@@ -34,3 +36,5 @@ structuredData: none
 			{% endfor %}
 		</section>
 	{% endfor %}
+
+</article>

content/changelog/index.md

@@ -3,7 +3,13 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Changelog
 structuredData: none
 ---
+<article data-pagefind-body>
+
 # Changelog
+* 2026-03-11
+	* Implemented [search](/search).
+* 2026-03-06
+	* Updated [/incense](/incense).
 * 2026-03-05
 	* Updated [/wish](/wish) and [/incense](/incense).
 * 2026-02-07
@@ -158,3 +164,4 @@ structuredData: none
 	* Implemented [/changelog](/changelog) 🎉.
 	* Implemented [/ai](/ai) a la [slashai.page](https://slashai.page/).
 
+</article>

content/galleries/gallery-image-page-generator.njk

@@ -11,7 +11,7 @@ eleventyComputed:
   permalink: "/gallery/{{ picture.containingGallery | slugify }}/{{ picture.filename | slugify }}/"
   description: "{{ picture.title }} from gallery: {{ picture.containingGallery}}"
 ---
-<article>
+<article data-pagefind-body>
 	<h1>{{ picture.title }}</h1>
 	<div class="buttonContainer galleryButtons">
 		{% if picture.previousImage %}

content/galleries/gallery-page-generator.njk

@@ -11,6 +11,7 @@ eleventyComputed:
   permalink: "/gallery/{{ gallery.title | slugify }}/"
   description: "{{ gallery.description }}"
 ---
+<div data-pagefind-body>
 	<h1>{{ gallery.title }}</h1>
 	<p class="page-block nodropcap">{{ gallery.description }}</p>
 	<section class="gallery-images">
@@ -22,3 +23,4 @@ eleventyComputed:
 		</a>
 		{% endfor %}
 	</section>
+</div>

content/galleries/index.njk

@@ -1,8 +1,10 @@
 ---
 layout: layouts/base.njk
 ---
+<div data-pagefind-body>
 	<h1>My image galleries.</h1>
 	<p class="page-block nodropcap">
 	Photography trips, memes, and other pictures I thought would be worth sharing.
 	</p>
 	{% include "gallerieslist.njk" %}
+</div>

content/incense/index.md

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Incense
 structuredData: none
 ---
+<article data-pagefind-body>
 
 # Incense: Writing & Resources
 ::: info
@@ -25,6 +26,7 @@ Incense making is hard. While parts of the world with strong incense cultures en
 ### Resources
 * [/r/incense posts flaired with "incense making"](https://www.reddit.com/r/Incense/?f=flair_name%3A%22Incense%20Making%22)—For better or worse, the incense subreddit is *the* place to go for incense discussion and advice. I'm working on changing that, but it's slow-going; see the forums / discussion boards section below.
 * [incensemaking.com](https://incensemaking.com/)—A useful site, particularly for listing many of the aromatics used in incense making. Be careful, however, as not all of the ingredients listed may be suited for [combustible incense](https://en.wikipedia.org/wiki/Incense#Types).
+* [Jarguna Incense YouTube playlist](https://www.youtube.com/watch?v=ZzPT3nU1j70&list=PLWogy1GQgvfECuf-F3kIrsuiBFXh1ctNr&index=1)
 * [The Incense Dragon YouTube channel](https://www.youtube.com/c/IncenseDragon)
 
 ## Advanced Incense Making Techniques
@@ -112,3 +114,4 @@ Incense making is hard. While parts of the world with strong incense cultures en
 
 
 [^1]: Here I am referring to traditional incense making, using actual plants as aromatics. There is certainly no lack of knowledge or production of "dipped" incense here, an extremely easy to make category of incense which is considered the absolute bottom of the barrel in terms of quality.
+</article>

content/links/index.md

@@ -4,6 +4,8 @@ title: Nathan Upchurch | Links
 structuredData: none
 ---
 
+<article data-pagefind-body>
+
 # Links
 Here are some links to pages and resources that I believe are worth sharing.
 ## Design tools and resources
@@ -258,3 +260,5 @@ Unlimited creativity, zero ads.
 	* VPN
 ## Random cool stuff
 * [intertapes.net](https://intertapes.net/)—An updating collection of found cassette tapes from different locations. The audio fragments include: voice memos, field recordings, mixtapes, bootlegs and more.
+
+</article>

content/now-burning/Now Burning_2026-03-06_12:56.md

@@ -0,0 +1,7 @@
+---
+title: Warming
+manufacturer: "Faircense / Pema of Tibet"
+date: 2026-03-06 12:56:00
+time: 12:56 PM
+---
+

content/now-burning/index.njk

@@ -9,7 +9,7 @@ postlistHeaderText: "What I've been burning:"
 {% set burning = collections.nowBurning | last %}
 
 <h1>Now Burning:</h1>
-<article class="post microblog-post">
+<article class="post microblog-post" data-pagefind-body>
 	<img class="microblog-icon" src="/img/censer.svg">
 	<div class="microblog-status">
 		<h2 class="">{{ burning.data.title }}{% if burning.data.manufacturer %}, {{ burning.data.manufacturer }}{% endif %}, {{ burning.date | niceDate }}, {{ burning.data.time }}</h2>

content/now/index.njk

@@ -4,7 +4,7 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Now
 structuredData: none
 ---
-<article class="post">
+<article class="post" data-pagefind-body>
 <h1>Now: Life updates.</h1>
 {% set now = collections.now | last %}
 <h2>{{ now.data.title }} • {{ now.date | niceDate }}</h2>

content/once-burned/index.njk

@@ -9,6 +9,8 @@ pagination:
 permalink: "once-burned/{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}index.html"
 paginationRootDir: once-burned
 ---
+<div data-pagefind-body>
+
 <h1>Previous “Now Burning” Entries:</h1>
 
 {% set postsCount = pagination.items | length %}
@@ -25,3 +27,5 @@ paginationRootDir: once-burned
 <a href="/now-burning/">
 	<button type="button">Latest »</button>
 </a>
+
+</div>

content/prior-thoughts/index.njk

@@ -8,6 +8,8 @@ pagination:
 permalink: "prior-thoughts/{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}index.html"
 paginationRootDir: prior-thoughts
 ---
+<div data-pagefind-body>
+
 	<h1>Prior thoughts:</h1>
 
 	{% set postsCount = pagination.items | length %}
@@ -24,3 +26,5 @@ paginationRootDir: prior-thoughts
 	<a href="/status/">
 		<button type="button">Latest »</button>
 	</a>
+
+</div>

content/quizzes/index.njk

@@ -5,6 +5,8 @@ title: Nathan Upchurch | Quizzes
 structuredData: none
 description: "Bored? Take a fun quiz to while away the time!"
 ---
+<div data-pagefind-body>
+
 	<h1>Quizzes</h1>
 	<p>Test your knowledge, learn about yourself, and waste your precious time, right here, right now, with a quiz!</p>
 
@@ -13,3 +15,5 @@ description: "Bored? Take a fun quiz to while away the time!"
 	{% set postslist = collections.quiz %}
 	{% set showPostListHeader = false %}
 	{% include "postslist.njk" %}
+
+</div>

content/referrals/index.md

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Referrals
 structuredData: none
 ---
+<article data-pagefind-body>
 
 # Referrals / Affiliate Links
 
@@ -10,3 +11,5 @@ Here are some referral links to services / products that I use and recommend. Ye
 
 ## Web Hosting, Storage, and VPS
 I like [Interserver](https://www.interserver.net/r/745483). They've always been quick to resolve any issues, I like the dashboard with integrated VNC, and their storage VPS' are super cheap.
+
+</article>

content/search/index.njk

@@ -0,0 +1,11 @@
+---
+layout: layouts/base.njk
+search: true
+title: Nathan Upchurch | Search
+structuredData: none
+---
+<h1>Search this site</h1>
+
+<div id="search" class="search"></div>
+
+<script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>

content/sitemap/index.md

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Sitemap
 structuredData: none
 ---
+<article data-pagefind-body>
 
 # Sitemap
 * [Home](/)
@@ -26,6 +27,7 @@ structuredData: none
 * [Once Burned](/once-burned)
 * [Prior Thoughts](/prior-thoughts)
 * [Referrals](/referrals)
+* [Search](/search)
 * [Slashes](/slashes)
 * Special
 	* [Flying Toasters](/special/flying-toasters)
@@ -33,3 +35,5 @@ structuredData: none
 * [Status](/status)
 * [Wishes](/wish)
 * [Quizzes](/quizzes)
+
+</article>

content/slashes/index.md

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Slashes
 structuredData: none
 ---
+<article data-pagefind-body>
 
 # Slashes
 
@@ -20,3 +21,5 @@ This is an index of all my [slash pages](https://slashpages.net/). These are pag
 * [/Referrals](/referrals)
 * [/Sitemap](/sitemap)
 * [/Wish](/wish)
+
+</article>

content/status/index.njk

@@ -8,7 +8,7 @@ permalink: "/status/index.html"
 {% set status = collections.status | last %}
 
 <h1>Nathan’s status:</h1>
-<article class="post microblog-post">
+<article class="post microblog-post" data-pagefind-body>
 	<div class="microblog-status card">
 		<span class="microblog-emoji">{{ status.data.emoji }}</span>
 

content/tags/index.njk

@@ -4,6 +4,8 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Tags
 structuredData: none
 ---
+<article data-pagefind-body>
+
 	<h1>Tags / Topics</h1>
 
 	<p class="page-block nodropcap">
@@ -16,3 +18,5 @@ Click on a tag to see all posts on the topic; you can also subscribe to an RSS f
 		<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
 	{% endfor %}
 	</ul>
+
+</article>

content/tags/tag-page-generator.njk

@@ -8,6 +8,11 @@ pagination:
     - post
     - posts
     - tagList
+    - feed
+    - onceBurned
+    - nowBurning
+    - status
+    - priorThoughts
   addAllPagesToCollections: true
 layout: layouts/base.njk
 postlistHeaderText: "Latest Posts:"
@@ -17,6 +22,8 @@ eleventyComputed:
   permalink: "/tags/{{ tag | slugify }}/"
   description: A list of every post I've written tagged “{{ tag }}.”
 ---
+<article data-pagefind-body>
+
 	<h1>Topic: “{{ tag }}.”
 	</h1>
 	<p class="page-block nodropcap">
@@ -36,3 +43,5 @@ Here’s everything I’ve posted tagged “{{ tag }}.” Want to be notified wh
 
 	{% set postslist = collections[ tag ] | reverse %}
 	{% include "postslist.njk" %}
+
+</article>

content/wish/index.md

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Wish
 structuredData: none
 ---
+<article data-pagefind-body>
 
 # My Wishlist
 ## What is this?
@@ -92,3 +93,5 @@ However if abstention seems unconscionable, I would be delighted if you were to
 * Healthcare, education, housing, and any resource necessary to sustain life to be free for all.
 
 [^1]: Within reason—if you are filthy rich and would like to buy me a house or finance an escape to the UK for my partner and I, I'll not slap your hand away.
+
+</article>

eleventy.config.js

@@ -12,12 +12,21 @@ import pluginNavigation from "@11ty/eleventy-navigation";
 import prettier from "prettier";
 import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
 import { dateSuffixAdder, monthMap } from "./public/js/modules/dateTools.js";
+// For PageFind
+import childProcess from "child_process";
 
 const figoptions = {
 	figcaption: true,
 };
 
 export default async function (eleventyConfig) {
+	// PageFind Search
+	eleventyConfig.on("eleventy.after", () => {
+		childProcess.execSync(`npx pagefind --site _site --glob "**/*.html"`, {
+			encoding: "utf-8",
+		});
+	});
+
 	// Customize Markdown library settings:
 	let markdownItOptions = {
 		html: true,

package.json

@@ -37,7 +37,8 @@
 		"luxon": "^3.3.0",
 		"markdown-it-anchor": "^8.6.7",
 		"markdown-it-footnote": "^3.0.3",
-		"mdfigcaption": "^0.1.1"
+		"mdfigcaption": "^0.1.1",
+		"pagefind": "^1.4.0"
 	},
 	"dependencies": {
 		"@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",

public/css/index.css

@@ -255,6 +255,9 @@ main {
 .indexFeature:not(:last-child) {
 	padding-bottom: var(--space-l);
 }
+mark {
+	background-color: var(--contrast-color);
+}
 nav {
 	grid-column: 2 / span 12;
 }
@@ -583,7 +586,7 @@ hr {
 }
 
 /* Dropcap */
-main > section > article > p:not(.nodropcap):first-of-type:first-letter {
+main > section > article.post > p:not(.nodropcap):first-of-type:first-letter {
 	float: left;
 	font-size: var(--step-5);
 	padding: var(--space-2xs);

public/css/search.css

@@ -0,0 +1,51 @@
+:root {
+	--pagefind-ui-scale: 1;
+	--pagefind-ui-primary: var(--contrast-color);
+	--pagefind-ui-text: var(--text-color);
+	--pagefind-ui-background: var(--background-color);
+	--pagefind-ui-border: var(--color-gray-20);
+	--pagefind-ui-tag: var(--text-color);
+	--pagefind-ui-border-width: 1px;
+	--pagefind-ui-border-radius: var(--border-radius);
+	--pagefind-ui-font: var(--font-family);
+}
+
+mark {
+	background-color: var(--background-color) !important;
+	color: var(--contrast-color) !important;
+	font-variation-settings:
+		"opsz" 18,
+		"wght" 510,
+		"SOFT" 40,
+		"WONK" 0 !important;
+}
+
+.pagefind-ui__button {
+	background-color: var(--contrast-color) !important;
+	border: none !important;
+	border-radius: var(--border-radius) !important;
+	color: var(--background-color) !important;
+	font-family: var(--font-family-ui) !important;
+	font-size: var(--step--2) !important;
+	font-variation-settings: var(--font-variation-ui) !important;
+	letter-spacing: var(--ui-letter-spacing) !important;
+	margin: var(--space-xs) 0 0 0 !important;
+	padding: 0 var(--space-xs) !important;
+	text-transform: uppercase !important;
+	transition: var(--transition-normal) !important;
+	white-space: nowrap !important;
+}
+
+.pagefind-ui__search-clear {
+	font-family: var(--meta-font-family) !important;
+	font-size: var(--meta-font-size) !important;
+	font-style: var(--meta-font-style) !important;
+	font-variation-settings: var(--meta-font-variation-settings) !important;
+	line-height: calc(
+		var(--meta-font-size) * 0.5 + var(--meta-font-size)
+	) !important;
+}
+
+.pagefind-ui__search-input {
+	border-color: var(--contrast-color) !important;
+}

public/img/icons/breeze/file-search-symbolic.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="file-search-symbolic.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="57.0625"
+     inkscape:cx="8"
+     inkscape:cy="10.102957"
+     inkscape:window-width="2048"
+     inkscape:window-height="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <defs
+     id="defs3051">
+    <style
+       type="text/css"
+       id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
+  </defs>
+  <path
+     style="fill:#faf5f5;fill-opacity:1;stroke:none"
+     d="M 6.5 2 C 4.007 2 2 4.01 2 6.5 C 2 8.993 4.01 11 6.5 11 C 7.5636432 11 8.5263409 10.618801 9.2949219 10.005859 L 13.292969 14.003906 L 14 13.296875 L 10.001953 9.2988281 C 10.617604 8.529048 11 7.565338 11 6.5 C 11 4.007 8.99 2 6.5 2 z M 6.5 3 C 8.439 3 10 4.561 10 6.5 C 10 8.439 8.439 10 6.5 10 C 4.561 10 3 8.439 3 6.5 C 3 4.561 4.561 3 6.5 3 z "
+     class="ColorScheme-Text"
+     id="path1" />
+</svg>