Merge branch 'main' into stickers

.drone.yml

@@ -0,0 +1,28 @@
+kind: pipeline
+type: docker
+name: default
+trigger:
+  branch:
+    - main
+
+steps:
+  - name: build
+    image: node:current
+    environment:
+      REPOSITORY: leecat.art-site
+      GIT_USER: inherentlee
+      GIT_TOKEN:
+        from_secret: GIT_TOKEN
+    commands:
+      - git config credential.helper '!f() { echo username=$GIT_USER; echo "password=$GIT_TOKEN"; };f'
+      - git submodule update --remote --init --merge
+      - npm install
+      - npm run build
+      - apt-get update && apt-get install -y rsync
+      - rsync -uavh _site/ $REPOSITORY --delete --exclude .git
+      - cd $REPOSITORY
+      - git checkout main
+      - git config --global --add safe.directory /drone/src/$REPOSITORY
+      - git add -A
+      - git commit -m "drone build $(TZ=':America/Los_Angeles' date)"
+      - git push

.gitignore

@@ -1,5 +1,5 @@
-# eleventy output
-_site
-
 # npm
 node_modules
+
+# build
+_site

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "leecat.art-site"]
+	path = leecat.art-site
+	url = https://heckin.technology/inherentlee/leecat.art-site.git

README.md

@@ -0,0 +1,23 @@
+# leecat.art
+
+Lee Cattarin's personal website, v2. Built on Eleventy.
+
+## Install
+
+```sh
+npm i
+# or
+npm install
+```
+
+## Run locally
+
+```sh
+npm run dev
+```
+
+## Build website
+
+```sh
+npm run build
+```

_config/filters.js

@@ -2,29 +2,91 @@ import { DateTime } from "luxon";
 
 export default function (eleventyConfig) {
 	// Return the keys used in an object
-	eleventyConfig.addFilter("getKeys", target => {
+	eleventyConfig.addFilter("getKeys", (target) => {
 		return Object.keys(target);
 	});
 
+	/* Exclude all posts with given URLs from a collection list */
+	eleventyConfig.addFilter(
+		"excludeFromCollection",
+		function (collection = [], urls = [this.ctx.page.url]) {
+			return collection.filter((post) => urls.indexOf(post.url) === -1);
+		},
+	);
+
+	/* Filter a collection by a set of tags, returning any that share one or more tags */
+	eleventyConfig.addFilter(
+		"filterByTags",
+		function (collection = [], ...requiredTags) {
+			return collection.filter((post) => {
+				return requiredTags.flat().some((tag) => post.data.tags.includes(tag));
+			});
+		},
+	);
+
+	/* Return n elements from a list */
+	eleventyConfig.addFilter("head", (collection = [], n) => {
+		if (!Array.isArray(collection) || collection.length === 0) {
+			return [];
+		}
+		if (n < 0) {
+			return collection.slice(n);
+		}
+
+		return collection.slice(0, n);
+	});
+
 	/* For <time> elements */
 	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
-		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
+		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd");
+	});
+
+	/* What it says on the tin */
+	eleventyConfig.addFilter("randomize", function (array) {
+		// Create a copy of the array to avoid modifying the original
+		let shuffledArray = array.slice();
+
+		// Fisher-Yates shuffle algorithm
+		for (let i = shuffledArray.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[shuffledArray[i], shuffledArray[j]] = [
+				shuffledArray[j],
+				shuffledArray[i],
+			];
+		}
+
+		return shuffledArray;
 	});
 
 	/* Human-readable dates */
-	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
-		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
-			.toLocaleString(DateTime.DATE_FULL);
+	eleventyConfig.addFilter("readableDate", (dateObj) => {
+		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toLocaleString(
+			DateTime.DATE_FULL,
+		);
 	});
 
 	/* Filter out structural tags */
 	eleventyConfig.addFilter("removeBasicTags", (tags) => {
-		return tags.filter(tag => ["all", "posts", "gallery", "reference", "tagPagination"].indexOf(tag) === -1);
+		return tags.filter(
+			(tag) =>
+				[
+					"all",
+					"posts",
+					"gallery",
+					"reference",
+					"tagPagination",
+					"blur",
+				].indexOf(tag) === -1,
+		);
 	});
 
-	/* What it says */
-	eleventyConfig.addFilter("sortAlphabetically", strings =>
-		(strings || []).sort((b, a) => b.localeCompare(a))
+	/* What it says on the tin */
+	eleventyConfig.addFilter("sortAlphabetically", (strings) =>
+		(strings || []).sort((b, a) => b.localeCompare(a)),
 	);
 
-};
+	/* Remove year from image filenames for OG metadata file path */
+	eleventyConfig.addFilter("toOgFilename", (filename) => {
+		return filename.split("/")[1];
+	});
+}

_includes/footer.njk

@@ -1,7 +1,7 @@
 <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon"
+      <a href="/colophon/"
       {% if page.url == "/colophon/" %}aria-current="page"{% endif %}>
         colophon
       </a>
@@ -9,9 +9,9 @@
 
     <li>
       <a href="/" title="go home"
-      aria-label="go home | {{ metadata.title }} from {{ metadata.author }} in 2026"
+      aria-label="go home | {{ metadata.title }} from {{ metadata.author }}, copyright 2022-2026"
       {% if page.url == "/" %}aria-current="page"{% endif %}>
-        {{ metadata.title }} from {{ metadata.author }} in 2026</a>
+        {{ metadata.title }} from {{ metadata.author }}, © 2022-2026</a>
     </li>
 
     <li>
@@ -21,4 +21,25 @@
       </a>
     </li>
   </ul>
+
+  <fieldset id="theme">
+    <legend>color scheme</legend>
+
+    <input type="radio" id="theme-light" name="theme" value="light"/>
+    <label class="theme-light" for="theme-light">
+      <i class="fa-regular fa-sun" aria-hidden="true"></i>
+      light
+    </label>
+
+    <input type="radio" id="theme-auto" name="theme" value="auto" checked/>
+    <label class="theme-auto" for="theme-auto">
+      auto
+    </label>
+
+    <input type="radio" id="theme-dark" name="theme" value="dark"/>
+    <label class="theme-dark" for="theme-dark">
+      dark
+      <i class="fa-regular fa-moon" aria-hidden="true"></i>
+    </label>
+  </fieldset>
 </footer>

_includes/head-content.njk

@@ -0,0 +1,51 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+
+{% set pageTitle %}{{ title | safe }} | {{ metadata.title }}{% endset %}
+<title>{{ pageTitle }}</title>
+<meta name="description" content="{{ description or metadata.description }}">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+
+<meta property="og:title" content="{{ pageTitle }}" />
+<meta property="og:type" content="website" />
+<meta property="og:description" content="{{ description or metadata.description }}" />
+<meta property="og:site_name" content="{{ metadata.title }}" />
+<meta property="og:url" content="{{ metadata.url }}{{ page.url }}" />
+{% if image %}
+<meta property="og:image" content="{{ metadata.url }}/img/{{ image.src | toOgFilename }}" />
+<meta property="og:image:alt" content="{{ image.alt }}" />
+{% else %}
+<meta property="og:image" content="{{ metadata.url }}/favicon.ico" />
+<meta property="og:image:alt" content="a teal bird icon" />
+{% endif %}
+
+<meta name="generator" content="{{ eleventy.generator }}">
+
+<meta itemprop="ai-content-declaration:version" content="1.0.0">
+<meta itemprop="ai-content-declaration:level" content="none">
+
+{# Fonts #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+{# Icons #}
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+{# 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>
+
+<style>{% getBundle "css" %}</style>
+
+{# 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

@@ -1,6 +1,5 @@
 <header>
-
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -9,8 +8,7 @@
       {% for entry in collections.all | eleventyNavigation %}
       <li>
         <a href="{{ entry.url }}" title="{{ entry.data.label }}"
-        {% if entry.url == page.url %}aria-current="page"{% endif %}
-        aria-label="{{ entry.data.label }}">
+        {% if entry.url == page.url %}aria-current="page"{% endif %}>
           <i class="{{ entry.data.icon }}" aria-hidden="true"></i>
           <span class="menu-text">{{ entry.title }}</span>
         </a>
@@ -19,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,46 +1,17 @@
 <!doctype html>
+<html lang="en">
   <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <title>{{ title or metadata.title }}</title>
-  <meta name="description" content="{{ description or metadata.description }}">
-  {# <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> #}
-
-  <meta property="og:title" content="{{ title or metadata.title }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:description" content="{{ description or metadata.description }}" />
-  <meta property="og:site_name" content="{{ metadata.title }}" />
-
-  <meta name="generator" content="{{ eleventy.generator }}">
-
-  {# Fonts #}
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
-
-  {# Icons #}
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
-
-  {# Styles #}
-  <style>{% include "css/main.css" %}</style>
-  <style>{% include "css/nav.css" %}</style>
-  <style>{% include "css/print.css" %}</style>
-
-  <style>{% getBundle "css" %}</style>
-
-  <script type="module">{% getBundle "js" %}</script>
+    {% include "head-content.njk" %}
   </head>
   <body>
     {% include "header.njk" %}
 
     <main id="main">
       {{ content | safe }}
-
-    <hr>
     </main>
 
     {% include "footer.njk" %}
 
     <!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->
-<body>
+  </body>
+</html>

_includes/layouts/page.njk

@@ -3,7 +3,7 @@ layout: base.njk
 ---
 {% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
 
-<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
+<heading-anchors content="<i class='fa-solid fa-anchor'></i>" data-pagefind-body>
   <h1>{{ title }}</h1>
 
   {{ content | safe }}

_includes/layouts/post-with-toc.njk

@@ -0,0 +1,13 @@
+---
+layout: post.njk
+---
+{% css %}{% include "css/post-toc.css" %}{% endcss %}
+
+<aside id="toc">
+  <details>
+    <summary><h2>table of contents</h2></summary>
+    {{ content | toc | safe }}
+  </details>
+</aside>
+
+{{ content | safe }}

_includes/layouts/post.njk

@@ -2,11 +2,13 @@
 layout: base.njk
 ---
 {% css %}{% include "css/post.css" %}{% endcss %}
-{% css %}{% include "css/highlighting.css" %}{% endcss %}
+{% css %}{% include "css/lists.css" %}{% endcss %}
+{% css %}{% include "css/modal.css" %}{% endcss %}
 {% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
+{% js %}{% include "js/modal.js" %}{% endjs %}
 
 <heading-anchors content="<i class='fa-solid fa-anchor'></i>">
-  <article>
+  <article data-pagefind-body>
     <h1>{{ title }}</h1>
 
     <div class="post-metadata">
@@ -29,9 +31,34 @@ layout: base.njk
     </div>
 
     {% if image %}
-    <img src="/img/{{ image.src }}" alt="{{ image.alt }}">
+		<dialog closedby="any" aria-label="image modal" tabindex="-1">
+			<button class="close-dialog" autofocus aria-label="close the image modal">&times;</button>
+	    <img class="modal-img" src="/img/{{ image.src }}" alt="{{ image.alt }}">
+		</dialog>
+    <img class="hero" src="/img/{{ image.src }}" alt="{{ image.alt }}">
     {% endif %}
 
     {{ content | safe }}
   </article>
+
+  {% set olderPost = collections.posts | getPreviousCollectionItem %}
+  {% set newerPost = collections.posts | getNextCollectionItem %}
+  {% set olderHref = olderPost.url %}
+  {% set newerHref = newerPost.url %}
+  {% set olderTitle = olderPost.data.title %}
+  {% set newerTitle = newerPost.data.title %}
+  {% set inPost = true %}
+  {% include "pagination.njk" %}
+
+  <hr>
+
+  {% set relevantTags = tags | removeBasicTags %}
+  {% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection([page.url, olderHref, newerHref]) | randomize | head(3) %}
+  {% if postlist.length %}
+  <section class="related-posts">
+    <h2 data-ha-exclude>related posts</h2>
+    {% include "postlist.njk" %}
+  </section>
+  {% endif %}
+
 </heading-anchors>

_includes/layouts/resume.njk

@@ -1,6 +0,0 @@
----
-layout: base.njk
----
-{% css %}{% include "css/resume.css" %}{% endcss %}
-
-{{ content | safe }}

_includes/layouts/tag-redirect.njk

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {% include "head-content.njk" %}
+
+    <meta http-equiv="refresh" content="0; url=/tags/{{ tag }}">
+  </head>
+  <body>
+    {% include "header.njk" %}
+
+    <main id="main">
+      <h1>{{ title }}</h1>
+
+      {{ content | safe }}
+    </main>
+
+    {% include "footer.njk" %}
+
+    <!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->
+  <body>
+</html>

_includes/pagination.njk

@@ -1,17 +1,17 @@
 {% if olderHref or newerHref %}
 <nav aria-label="pagination">
-  <ol class="pagination">
+  <ol class="pagination {% if inPost %}post-pagination{% endif %}">
     {% if olderHref %}
     <li class="older">
       <a href="{{ olderHref }}">
-        <i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> older
+        <i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> {{ olderTitle or "older" }}
       </a>
     </li>
     {% endif %}
     {% if newerHref %}
     <li class="newer">
       <a href="{{ newerHref }}">
-        newer <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
+        {{ newerTitle or "newer" }} <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
       </a>
     </li>
     {% endif %}

_includes/postlist.njk

@@ -2,15 +2,16 @@
 	{% for post in postlist %}
   <li class="post">
 		<a class="postlink" href="{{ post.url }}">
+			<h2 data-ha-exclude>{{ post.data.title }} {% if "blur" in post.data.tags %}(mature){% endif %}</h2>
 			{% if post.data.image %}
-			<img src="/img/{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
-			{% endif %}
-			<h2>{{ post.data.title }}</h2>
 			<ul class="postlist-tags">
 				{% for tag in post.data.tags | removeBasicTags %}
 				<li>{{ tag }}</li>
 				{% endfor %}
 			</ul>
+			<img src="/img/{{ post.data.image.src }}" alt="{{ post.data.image.alt }}"
+        {% if "blur" in post.data.tags %}class="blur"{% endif %}>
+			{% endif %}
 		</a>
 	</li>
 	{% endfor %}

css/feed.css

@@ -0,0 +1,30 @@
+main {
+	margin-bottom: 2rem;
+}
+
+.rss-explainer {
+	background: var(--color-bg-alt);
+	padding: 1rem;
+	margin-block: 1rem;
+	border-radius: .5rem;
+}
+
+.rss-explainer p {
+	margin: 0;
+}
+
+.rss-explainer p + p {
+	margin-top: 1.25rem;
+}
+
+.feed-url {
+	font-family: var(--font-family-code);
+	font-size: .9rem;
+	text-align: center;
+}
+
+p:has(small) {
+	display: block;
+	margin: .25rem 0 0 .75rem;
+	color: var(--color-grey);
+}

css/highlighting.css

@@ -7,7 +7,7 @@ code[class*=language-],
 pre[class*=language-] {
 	font-family: var(--font-family-code);
 	background-color: var(--color-bg-alt);
-	font-size: .9rem;
+	font-size: .9em;
 	text-shadow: 0 1px var(--color-shadow);
 	-moz-tab-size: 4;
 	-o-tab-size: 4;

css/lists.css

@@ -93,7 +93,6 @@
 /* Click animation */
 .postlink:active,
 .taglink:active {
-	box-shadow: none;
 	top: .2rem;
 	left: .2rem;
 	box-shadow: .15rem .15rem var(--color-shadow);
@@ -112,6 +111,7 @@
 	grid-area: h2;
 	padding: .25rem .5rem;
 	text-transform: uppercase;
+	font-family: var(--font-family);
 	font-size: 1.5rem;
 	color: var(--color-primary);
 	border-radius: 1rem 1rem 0 0;
@@ -143,6 +143,11 @@
 	grid-area: img;
 }
 
+.blur {
+	filter: blur(.75rem);
+	clip-path: inset(0 round 1rem);
+}
+
 .tag-imgs {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
@@ -158,7 +163,7 @@
 	width: 100%;
 	aspect-ratio: 3 / 2;
 	background-color: var(--color-bg-alt);
-	border-radius: calc(1rem);
+	border-radius: 1rem;
 }
 
 .taglink:focus-visible .missing-image {
@@ -216,4 +221,3 @@
 .tag:nth-child(odd) p {
 	text-align: right;
 }
-

css/main.css

@@ -1,7 +1,17 @@
+@font-face {
+	font-family: "Peritel";
+	src:
+		url("/fonts/Peritel/Peritel-Regular.woff2") format("woff2"),
+		url("/fonts/Peritel/Peritel-Regular.otf") format("opentype");
+}
+
 :root {
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
+	/* if you change the header font, go to post-toc.css and fuck about with the width
+		of the table of contents */
+	--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
 	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
 
 	--color-dark: #2e303e;
@@ -17,7 +27,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -49,12 +59,16 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
+}
 
-	--header-offset: 3.1rem;
+:root:has(#theme-light:checked) {
+	color-scheme: light;
+}
+:root:has(#theme-dark:checked) {
+	color-scheme: dark;
 }
 
 /* Base */
-
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -71,10 +85,9 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
 }
 
-@media (max-width: 1050px) {
+@media (max-width: 1100px) {
 	main {
 		width: 75vw;
 	}
@@ -90,28 +103,38 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
+	font-family: var(--font-family-headers);
+	letter-spacing: 0.1rem;
 }
 
 h1 {
 	margin-top: 3rem;
-	font-size: 3.5rem;
+	font-size: 3.7rem;
 	text-align: center;
 }
 
 h2 {
 	margin-top: 2rem;
-	font-size: 2.2rem;
+	font-size: 2.35rem;
 }
 
 h3 {
 	margin-top: 1.5rem;
-	font-size: 1.6rem;
+	font-size: 1.7rem;
+}
+
+@media (max-width: 650px) {
+	h1 {
+		margin-top: 1.5rem;
+		font-size: 2.25rem;
+	}
+	h2 { font-size: 1.8rem; }
+	h3 { font-size: 1.4rem; }
 }
 
 h4, h5, h6 {
 	margin-top: 1rem;
-	font-size: 1.2rem;
+	font-size: 1.25rem;
 }
 
 /* Images */
@@ -120,6 +143,7 @@ img {
 	max-width: 100%;
 	height: auto;
 	border-radius: 1rem;
+	margin: 0 auto;
 }
 
 /* Paragraphs */
@@ -163,12 +187,13 @@ a:active {
 a.ha,
 span.ha-placeholder {
 	color: var(--color-pink);
+	font-size: .8em;
+	vertical-align: .1em;
 }
 span.ha-placeholder {
 	opacity: .55;
 }
 
-
 /* Lists */
 ::marker {
 	color: var(--color-pink);
@@ -178,14 +203,27 @@ ul, ol, dl, li {
 	margin-left: 1rem;
 }
 
+@media (max-width: 650px) {
+	ul, ol, dl {
+		margin-left: 0;
+	}
+}
+
 li {
-	line-height: 1.2	5;
+	line-height: 1.4;
 	margin-top: .65rem;
 	margin-bottom: .65rem;
 }
 
 li ul, li ol {
 	margin: .5rem 0;
+	margin-left: 1rem;
+}
+
+@media (max-width: 650px) {
+	li ul, li ol {
+		margin-left: 0;
+	}
 }
 
 dt {
@@ -200,9 +238,9 @@ dd {
 
 /* Blockquotes */
 blockquote {
-	margin: .5rem 1rem;
+	margin: .5rem 0;
 	padding: 0 1rem;
-	border-radius: .25rem 1rem 1rem .25rem;
+	border-radius: .5rem;
 	line-height: 1.25;
 	border-left: .5rem solid var(--color-pink);
 }
@@ -225,6 +263,7 @@ table {
 	border-spacing: 0; /* border collapse doesn't play nice with radii */
 	border-radius: .3rem;
 	border: thin solid var(--color-pink);
+	margin: 1.25rem 0;
 }
 
 th {
@@ -232,6 +271,10 @@ th {
 	background-color: var(--color-pink);
 }
 
+th code {
+	color: var(--color-text); /* Yes, I actually do this somewhere */
+}
+
 th, td {
 	padding: .5rem;
 	text-align: left;
@@ -250,13 +293,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {

css/modal.css

@@ -0,0 +1,89 @@
+img[tabindex="0"] {
+	cursor: pointer;
+}
+
+img[tabindex="0"]:focus-visible {
+	outline: .15rem solid var(--color-teal);
+}
+
+dialog {
+	margin: auto;
+	flex-flow: column;
+	background: transparent;
+	border: none;
+	position: absolute;
+}
+
+dialog[open] {
+	display: flex;
+}
+
+dialog::backdrop {
+	background-color: rgba(from var(--color-bg) r g b / .8);
+	backdrop-filter: blur(4px);
+}
+
+body:has(dialog[open]) {
+	overflow: hidden;
+}
+
+.close-dialog {
+	background-color: rgba(from var(--color-teal) r g b / .35);
+	font-size: 1.5rem;
+	padding: 0 .5rem .15rem;
+	border-radius: 1rem;
+	color: var(--color-teal);
+	box-shadow: .15rem .15rem var(--color-shadow);
+	border: .08rem solid var(--color-teal);
+	align-self: flex-end;
+	justify-self: flex-start;
+	margin: 0 .1rem;
+	/* Click animation handling */
+	position: relative;
+	top: 1rem;
+	left: -.15rem;
+	transition: top .1s ease-in, left .1s ease-in;
+}
+
+.close-dialog:focus-visible {
+	outline: none;
+	background-color: var(--color-teal);
+	color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.close-dialog:hover {
+		outline: none;
+		background-color: var(--color-teal);
+		color: var(--color-bg);
+	}
+}
+
+@media (forced-colors: active) {
+	.close-dialog:focus-visible {
+		outline-offset: .08rem;
+		outline: .08rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.close-dialog:hover {
+			outline-offset: .08rem;
+			outline: .08rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.close-dialog:active {
+	top: 1.1rem;
+	left: -.05rem;
+	box-shadow: .05rem .05rem var(--color-shadow);
+}
+
+.modal-img {
+	max-height: calc(100vh - 2rem);
+  object-fit: contain;
+  width: auto;
+  max-width: 90%;
+  margin: 0 auto;
+}

css/nav.css

@@ -1,11 +1,11 @@
 /* Header */
 header {
-	position: sticky;
-	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	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 */
@@ -163,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;
 }
 
@@ -198,6 +198,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -205,6 +207,7 @@ footer ul {
 	list-style: none;
 	gap: .5rem;
 	justify-content: center;
+	margin: 0;
 }
 
 footer li {
@@ -237,17 +240,133 @@ footer a:focus-visible {
 	outline-color: var(--color-pink);
 }
 
+/* color picker */
+#theme {
+	display: flex;
+	justify-content: center;
+	margin: .5rem auto 0;
+	padding: 0 .75rem .5rem;
+	width: fit-content;
+	border: .125rem solid var(--color-teal);
+	border-radius: 2rem;
+}
+
+#theme legend {
+	margin: 0 auto;
+	color: var(--color-teal);
+}
+
+footer label {
+	cursor: pointer;
+	border: .125rem solid var(--color-pink);
+	padding: 0 .25rem;
+	color: var(--color-pink);
+	background-color: var(--color-bg); /* this stops the box shadows from showing through */
+	box-shadow: .15em .15em var(--color-shadow);
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+footer input:checked + label {
+	color: var(--color-blue);
+	border-color: var(--color-blue);
+}
+
+footer label i {
+	color: var(--color-teal);
+}
+
+footer input:checked + label i {
+	color: var(--color-pink);
+}
+
+@media (any-hover: hover) {
+	footer label:hover,
+	footer input:checked + label:hover,
+	footer label:hover i,
+	footer input:checked + label:hover i {
+		color: var(--color-bg);
+	}
+
+	footer label:hover {
+		background-color: var(--color-pink);
+	}
+
+	footer input:checked + label:hover {
+		background-color: var(--color-teal);
+	}
+}
+
+footer input:focus-visible + label,
+footer input:focus-visible + label i {
+	color: var(--color-bg);
+	background-color: var(--color-pink);
+	border-color: var(--color-pink);
+}
+
+footer input:checked:focus-visible + label,
+footer input:checked:focus-visible + label i {
+	color: var(--color-bg);
+	background-color: var(--color-teal);
+	border-color: var(--color-teal);
+}
+
+footer label:active {
+	top: .09em;
+	left: .09em;
+	box-shadow: .05em .05em var(--color-shadow);
+}
+
+label.theme-light {
+	border-top-left-radius: 1rem;
+	border-bottom-left-radius: 1rem;
+	border-right: none;
+	padding-left: .35rem;
+}
+
+label.theme-auto {
+}
+
+label.theme-dark {
+	border-top-right-radius: 1rem;
+	border-bottom-right-radius: 1rem;
+	border-left: none;
+	padding-right: .35rem;
+}
+
+footer input {
+	/* To allow screen reader to still access these. */
+	/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
 /* Pagination */
+.pagination,
+.pagination li {
+	margin: 0;
+}
+
 .pagination {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	grid-template-areas: "older newer";
 	list-style: none;
+	margin-top: 3rem;
 }
 
-.pagination,
-.pagination li {
-	margin: 0;
+@media (max-width: 650px) {
+	.post-pagination {
+		grid-template-columns: 1fr;
+		grid-template-areas:
+			"older"
+			"newer";
+		gap: .75rem;
+	}
 }
 
 .pagination .older {
@@ -268,8 +387,8 @@ footer a:focus-visible {
 	display: flex;
 	flex-flow: row wrap;
 	list-style: none;
-	justify-content: space-around;
-	gap: .35rem;
+	justify-content: center;
+	gap: .5rem;
 }
 
 .webring ul,

css/pagefind.css

@@ -0,0 +1,106 @@
+/* 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 {
+	/* 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 {
+	--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;
+
+  /* Error */
+  --pf-error-bg: var(--color-light-alt) !important;
+  --pf-error-border: var(--color-red-dark) !important;
+  --pf-error-text: var(--color-red-dark) !important;
+  --pf-error-text-secondary: var(--color-red-dark) !important;
+}
+
+.dark pagefind-searchbox {
+	--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;
+
+  /* Error */
+  --pf-error-bg: var(--color-dark-alt) !important;
+  --pf-error-border: var(--color-red-light) !important;
+  --pf-error-text: var(--color-red-light) !important;
+  --pf-error-text-secondary: var(--color-red-light) !important;
+}
+
+pagefind-searchbox input {
+	border-width: .125rem !important;
+}
+
+pagefind-searchbox input:not(:focus-visible) {
+	box-shadow: var(--pf-shadow-md) !important;
+}
+
+@media (max-width: 650px) {
+	.pf-trigger-shortcut {
+		display: none !important;
+	}
+}
+
+.pf-searchbox-dropdown,
+.pf-searchbox-footer {
+	border-width: .125rem !important;
+}
+
+.pf-error {
+	margin-top: .5rem !important;
+}

css/post-toc.css

@@ -0,0 +1,103 @@
+#toc {
+	float: right;
+	margin: 1rem 0 1.5rem 1.5rem;
+	width: fit-content;
+	max-width: 55%;
+}
+
+@media (max-width: 900px) {
+	#toc {
+		float: unset;
+		margin-top: 2rem;
+		margin-left: .5rem;
+		width: calc(100% - .5rem);
+		max-width: unset;
+	}
+}
+
+#toc details {
+	border: thick solid var(--color-pink);
+	border-radius: 1rem;
+	margin-top: 1rem;
+	background-color: var(--color-bg);
+}
+
+#toc summary {
+	position: relative;
+	top: -1.5rem;
+	left: -.75rem;
+	width: fit-content;
+	background: var(--color-bg);
+	border-radius: .5rem;
+	cursor: pointer;
+	padding-inline-end: .25rem;
+}
+
+#toc summary:focus-visible {
+	outline: .15rem solid var(--color-teal);
+}
+
+#toc summary::marker {
+	font-size: 2.35rem;
+}
+
+#toc h2 {
+	margin-top: 0;
+	display: inline;
+	line-height: normal;
+}
+
+#toc nav {
+	position: relative;
+	top: -1.25rem;
+}
+
+/* `tree` style toc */
+#toc nav > ol {
+	margin-inline: 1rem;
+}
+
+#toc ol {
+	margin: 0;
+}
+
+#toc li {
+	position: relative;
+	padding-inline-start: 1em;
+	list-style: none;
+	margin-block: 0;
+	margin-left: .35rem;
+}
+
+#toc li::before,
+#toc li::after {
+	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	inset-block: 0 auto;
+	inset-inline: 0 auto;
+	inline-size: .75em;
+	border-inline-start: .1rem solid var(--color-pink);
+}
+
+#toc li::before {
+	block-size: .5lh;
+	border-block-end: .1rem solid var(--color-pink);
+	content: "";
+}
+
+#toc li:not(:last-child)::after {
+	block-size: 100%;
+	content: "";
+}
+
+/* underlines are unnecessary in this context */
+#toc a {
+	text-decoration: none;
+	color: var(--color-blue);
+	font-weight: bold;
+}
+
+#toc a:focus-visible {
+	outline-color: var(--color-pink);
+}

css/post.css

@@ -17,6 +17,7 @@
 	gap: .5rem;
 	list-style: none;
 	margin: 0;
+	margin-left: auto;
 }
 
 .post-tags li {
@@ -72,4 +73,3 @@
 	left: .1rem;
 	box-shadow: .05rem .05rem var(--color-shadow);
 }
-

css/resume.css

@@ -34,8 +34,24 @@
 
 .job-details a {
 	font-size: 1rem;
+	font-family: var(--font-family);
 }
 
 .job p {
 	margin-top: 0;
 }
+
+.job li strong:not(a) {
+	color: var(--color-teal);
+}
+
+.testimonial {
+	font-style: italic;
+	text-align: right;
+	color: var(--color-teal);
+	/* reset some of the default bq styling */
+	border-left: none;
+	border-radius: 0;
+	background-color: transparent;
+	margin-top: 0;
+}

eleventy.config.js

@@ -1,9 +1,17 @@
-import { IdAttributePlugin } from "@11ty/eleventy";
+import { HtmlBasePlugin } from "@11ty/eleventy";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
 import { feedPlugin } from "@11ty/eleventy-plugin-rss";
 import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+
+import toc from "eleventy-plugin-nesting-toc";
+
 import { attrs } from "@mdit/plugin-attrs";
+import { markdownitLinkAttributes } from 'markdown-it-link-attributes';
+import markdownitIdAttributes from "markdown-it-anchor";
+
+import path from "node:path";
+import { execSync } from 'child_process';
 import { chunk } from "lodash-es";
 
 import pluginFilters from "./_config/filters.js";
@@ -12,6 +20,23 @@ export default async function(eleventyConfig) {
 	/* Markdown HTML attribute parsing */
 	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(attrs));
 
+	/* Markdown apply target="_blank" to all external links */
+	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitLinkAttributes, {
+    matcher(href) {
+      return href.match(/^https?:\/\//);
+    },
+    attrs: {
+      target: "_blank",
+      rel: "external",
+    },
+  }));
+
+	/* Markdown apply ID attributes to headers */
+	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitIdAttributes, {
+		level: [2, 3, 4],
+		tabIndex: false,
+	}));
+
 	/* Bundles */
 	/* CSS */
 	eleventyConfig.addBundle("css", {
@@ -29,7 +54,7 @@ export default async function(eleventyConfig) {
 	/* Tag pagination */
 	eleventyConfig.addCollection("tagPagination", function(collection) {
 		let tagSet = new Set(collection.getAllSorted().flatMap((post) => post.data.tags || []));
-		tagSet = tagSet.difference(new Set(["posts", "gallery", "reference"]));
+		tagSet = tagSet.difference(new Set(["posts", "gallery", "reference", "blur"]));
 
 		let paginationSize = 13;
 		let tagMap = [];
@@ -52,6 +77,12 @@ export default async function(eleventyConfig) {
 		return tagMap;
 	});
 
+	/* Passthrough */
+	eleventyConfig
+		.addPassthroughCopy("favicon.ico")
+		.addPassthroughCopy("fonts")
+		.addPassthroughCopy("robots.txt");
+
 	/* Plugins */
 	/* All filters from _config/filters.js */
 	eleventyConfig.addPlugin(pluginFilters);
@@ -60,6 +91,7 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPlugin(feedPlugin, {
 		type: "atom", // or "rss", "json"
 		outputPath: "/feed.xml",
+		stylesheet: "/feed.xsl",
 		collection: {
 			name: "posts", // iterate over `collections.posts`
 			limit: 10,     // 0 means no limit
@@ -76,6 +108,9 @@ export default async function(eleventyConfig) {
 		}
 	});
 
+	/* HTML base */
+	eleventyConfig.addPlugin(HtmlBasePlugin);
+
 	/* Images */
 	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
 		// output image formats
@@ -91,17 +126,36 @@ export default async function(eleventyConfig) {
 				decoding: "async",
 			},
 		},
+		filenameFormat: function (hash, src, width, format, options) {
+			// If you're building multiple widths
+			// const extension = path.extname(src);
+			// const name = path.basename(src, extension);
+
+			// return `${name}-${width}.${extension}`;
+			return path.basename(src);
+		},
 	});
 
 	/* Navigation */
 	eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
-	/* `id` attributes */
-	eleventyConfig.addPlugin(IdAttributePlugin);
-
 	/* Syntax highlighting */
 	eleventyConfig.addPlugin(syntaxHighlight);
 
+	/* Table of contents */
+	eleventyConfig.addPlugin(toc);
+
+	/* Draft handling */
+	eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
+		if (data.draft) {
+			data.title = `${data.title} (draft)`;
+		}
+
+		if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") {
+			return false;
+		}
+	});
+
 	/* Shortcodes */
 	eleventyConfig.addShortcode("currentBuildDate", () => {
 		return (new Date()).toISOString();
@@ -109,6 +163,13 @@ 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 = {

fonts/Peritel/LICENSE.md

@@ -0,0 +1,33 @@
+# End User License Agreement (EULA)
+
+This End User License Agreement is a legal agreement between the licensee (you), and the author of this font, Christopher Kirk-Nielsen.
+
+You are granted a perpetual, non-exclusive license to use the font with your purchase.
+
+## By downloading or purchasing this font, you agree to the following terms:
+
+**For use on a website**
+Use on any website owned or under the licensee's control, no pageview limits.
+
+**For use in an app**
+App embed allowed for 1 app. Another app = another license.
+
+**Distribution**
+The font may not be redistributed.
+
+**Personal modification**
+The font may be modified for personal use, but cannot be redistributed.
+
+**Do not use the font for hateful purposes**
+The font is not allowed to be used in any material promoting hate speech of any kind, including but not limited to: racism, xenophobia, homophobia, sexism, or other types of discrimination.
+
+**Do not use the font with AI**
+The font is not allowed to be used in, or in training of, AI/LLMs.
+
+**Use at your own risk**
+Any usage of the fonts are at the licensee's own risk.
+
+For ebooks and other commercial use, or any other specific needs, email me to figure something out: chriskirknielsen+fonts[at]gmail.com
+
+Thank you very much for the support!
+Christopher Kirk-Nielsen (https://chriskirknielsen.com/fonts/)

js/modal.js

@@ -0,0 +1,24 @@
+/* don't even bother on mobile */
+if (window.innerWidth > 650) {
+	const dialog = document.querySelector("dialog");
+	const closeButton = document.querySelector(".close-dialog");
+	const hero = document.querySelector(".hero");
+
+	hero.tabIndex = 0;
+
+	hero.addEventListener("click", (e) => dialog.showModal());
+	hero.addEventListener("keydown", (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			dialog.showModal();
+		}
+	});
+
+	closeButton.addEventListener("click", (e) => dialog.close());
+	closeButton.addEventListener("keydown", (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			dialog.close();
+		}
+	});
+}

js/theme.js

@@ -0,0 +1,35 @@
+const THEME = "theme";
+
+const saveTheme = (themeValue) => {
+	localStorage.setItem(THEME, themeValue);
+};
+
+const themeLight = document.getElementById("theme-light");
+themeLight.addEventListener("input", (e) => {
+	saveTheme(themeLight.value);
+});
+
+const themeAuto = document.getElementById("theme-auto");
+themeAuto.addEventListener("input", (e) => {
+	saveTheme(themeAuto.auto);
+});
+
+const themeDark = document.getElementById("theme-dark");
+themeDark.addEventListener("input", (e) => {
+	saveTheme(themeDark.value);
+});
+
+var currentThemeValue = localStorage.getItem(THEME);
+switch (currentThemeValue) {
+	case "light":
+		themeLight.checked = true;
+		themeAuto.checked = false;
+		break;
+	case "dark":
+		themeDark.checked = true;
+		themeAuto.checked = false;
+		break;
+	case "auto":
+	default:
+		themeAuto.checked = true;
+}

mogrify.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+# check for mogrify
+which mogrify > /dev/null
+if [[ $? -ne 0 ]]
+then
+  echo "mogrify not found, run the following:"
+  echo "sudo apt install imagemagick"
+  exit 1
+fi
+
+# finds pattern [number]x[number]
+REGEX="([0-9]+)x[0-9]+"
+MAX_WIDTH=1200
+
+for FILE in $(find src/img)
+do
+  # skip directories
+  if [ -d $FILE ]
+  then
+    continue
+  fi
+
+  # `identify` prints out file info incl. dimensions in pixels
+  if [[ $(identify $FILE) =~ $REGEX ]]
+  then
+    # regex capture groups
+    WIDTH=${BASH_REMATCH[1]}
+
+    # resize if too large
+    if (( $WIDTH > $MAX_WIDTH ))
+    then
+      echo "resizing $FILE with width $WIDTH"
+      mogrify -resize 1200x $FILE
+    fi
+  fi
+done

package.json

@@ -2,10 +2,9 @@
   "name": "leecat.art",
   "version": "1.0.0",
   "description": "Lee's personal website, take 2, built with 11ty",
-  "main": "index.js",
   "scripts": {
-    "build": "rm -rf _site && npx @11ty/eleventy",
-    "start": "rm -rf _site && npx @11ty/eleventy --serve --quiet"
+    "build": "rm -rf _site && npx @11ty/eleventy --quiet",
+    "dev": "rm -rf _site && npx @11ty/eleventy --serve --quiet --output _site"
   },
   "keywords": [],
   "author": "Lee Cattarin",
@@ -20,7 +19,12 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
     "@mdit/plugin-attrs": "^0.24.2",
     "@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
+    "cheerio": "^1.2.0",
+    "eleventy-plugin-nesting-toc": "^1.3.0",
     "lodash-es": "^4.17.23",
-    "luxon": "^3.7.2"
+    "luxon": "^3.7.2",
+    "markdown-it-anchor": "^10.0.0",
+    "markdown-it-link-attributes": "https://github.com/lee0c/markdown-it-link-attributes/tarball/main",
+    "pagefind": "^1.5.2"
   }
 }

robots.txt

@@ -0,0 +1,151 @@
+# Sourced from https://codeberg.org/superseriousbusiness/gotosocial/
+
+# AI scrapers and the like.
+# https://github.com/ai-robots-txt/ai.robots.txt/
+User-agent: AddSearchBot
+User-agent: AI2Bot
+User-agent: AI2Bot-DeepResearchEval
+User-agent: Ai2Bot-Dolma
+User-agent: aiHitBot
+User-agent: amazon-kendra
+User-agent: Amazonbot
+User-agent: AmazonBuyForMe
+User-agent: Andibot
+User-agent: Anomura
+User-agent: anthropic-ai
+User-agent: Applebot
+User-agent: Applebot-Extended
+User-agent: atlassian-bot
+User-agent: Awario
+User-agent: bedrockbot
+User-agent: bigsur.ai
+User-agent: Bravebot
+User-agent: Brightbot 1.0
+User-agent: BuddyBot
+User-agent: Bytespider
+User-agent: CCBot
+User-agent: Channel3Bot
+User-agent: ChatGLM-Spider
+User-agent: ChatGPT Agent
+User-agent: ChatGPT-User
+User-agent: Claude-SearchBot
+User-agent: Claude-User
+User-agent: Claude-Web
+User-agent: ClaudeBot
+User-agent: Cloudflare-AutoRAG
+User-agent: CloudVertexBot
+User-agent: cohere-ai
+User-agent: cohere-training-data-crawler
+User-agent: Cotoyogi
+User-agent: Crawl4AI
+User-agent: Crawlspace
+User-agent: Datenbank Crawler
+User-agent: DeepSeekBot
+User-agent: Devin
+User-agent: Diffbot
+User-agent: DuckAssistBot
+User-agent: Echobot Bot
+User-agent: EchoboxBot
+User-agent: FacebookBot
+User-agent: facebookexternalhit
+User-agent: Factset_spyderbot
+User-agent: FirecrawlAgent
+User-agent: FriendlyCrawler
+User-agent: Gemini-Deep-Research
+User-agent: Google-CloudVertexBot
+User-agent: Google-Extended
+User-agent: Google-Firebase
+User-agent: Google-NotebookLM
+User-agent: GoogleAgent-Mariner
+User-agent: GoogleOther
+User-agent: GoogleOther-Image
+User-agent: GoogleOther-Video
+User-agent: GPTBot
+User-agent: iAskBot
+User-agent: iaskspider
+User-agent: iaskspider/2.0
+User-agent: IbouBot
+User-agent: ICC-Crawler
+User-agent: ImagesiftBot
+User-agent: imageSpider
+User-agent: img2dataset
+User-agent: ISSCyberRiskCrawler
+User-agent: Kangaroo Bot
+User-agent: KlaviyoAIBot
+User-agent: KunatoCrawler
+User-agent: laion-huggingface-processor
+User-agent: LAIONDownloader
+User-agent: LCC
+User-agent: LinerBot
+User-agent: Linguee Bot
+User-agent: LinkupBot
+User-agent: Manus-User
+User-agent: meta-externalagent
+User-agent: Meta-ExternalAgent
+User-agent: meta-externalfetcher
+User-agent: Meta-ExternalFetcher
+User-agent: meta-webindexer
+User-agent: MistralAI-User
+User-agent: MistralAI-User/1.0
+User-agent: MyCentralAIScraperBot
+User-agent: netEstate Imprint Crawler
+User-agent: NotebookLM
+User-agent: NovaAct
+User-agent: OAI-SearchBot
+User-agent: omgili
+User-agent: omgilibot
+User-agent: OpenAI
+User-agent: Operator
+User-agent: PanguBot
+User-agent: Panscient
+User-agent: panscient.com
+User-agent: Perplexity-User
+User-agent: PerplexityBot
+User-agent: PetalBot
+User-agent: PhindBot
+User-agent: Poggio-Citations
+User-agent: Poseidon Research Crawler
+User-agent: QualifiedBot
+User-agent: QuillBot
+User-agent: quillbot.com
+User-agent: SBIntuitionsBot
+User-agent: Scrapy
+User-agent: SemrushBot-OCOB
+User-agent: SemrushBot-SWA
+User-agent: ShapBot
+User-agent: Sidetrade indexer bot
+User-agent: Spider
+User-agent: TerraCotta
+User-agent: Thinkbot
+User-agent: TikTokSpider
+User-agent: Timpibot
+User-agent: TwinAgent
+User-agent: VelenPublicWebCrawler
+User-agent: WARDBot
+User-agent: Webzio-Extended
+User-agent: webzio-extended
+User-agent: wpbot
+User-agent: WRTNBot
+User-agent: YaK
+User-agent: YandexAdditional
+User-agent: YandexAdditionalBot
+User-agent: YouBot
+User-agent: ZanistaBot
+Disallow: /
+
+# Marketing/SEO "intelligence" data scrapers
+User-agent: AwarioRssBot
+User-agent: AwarioSmartBot
+User-agent: DataForSeoBot
+User-agent: magpie-crawler
+User-agent: Meltwater
+User-agent: peer39_crawler
+User-agent: peer39_crawler/1.0
+User-agent: PiplBot
+User-agent: scoop.it
+User-agent: Seekr
+Disallow: /
+
+# Rules for everything else
+User-agent: *
+Crawl-delay: 500

src/gallery.njk

@@ -1,6 +1,5 @@
 ---
 layout: page-lists.njk
-permalink: gallery/index.html
 pagination:
   data: collections["gallery"]
   size: 13
@@ -14,7 +13,7 @@ icon: fa-regular fa-images
 label: view the gallery
 ---
 
-<p class="centered">the gallery page is for finished art</p>
+<p class="centered">the gallery section is for finished art</p>
 <p class="centered">(or <a href="/tags/">browse by tags</a>)</p>
 
 {% include "postlist.njk" %}