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,2 +1,5 @@
 # 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

@@ -2,4 +2,22 @@
 
 Lee Cattarin's personal website, v2. Built on Eleventy.
 
-Not live yet.
+## Install
+
+```sh
+npm i
+# or
+npm install
+```
+
+## Run locally
+
+```sh
+npm run dev
+```
+
+## Build website
+
+```sh
+npm run build
+```

_config/filters.js

@@ -2,33 +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 */
+	/* 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,51 +1,17 @@
 <!doctype html>
+<html lang="en">
   <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  {% set pageTitle %}{{ title }} | {{ 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="{{ 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 }}" />
-  {% if image %}
-  <meta property="og:image" content="/img/{{ image.src | toOgFilename }}" />
-  <meta property="og:image:alt" content="{{ image.alt }}" />
-  {% endif %}
-
-  <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,7 +31,11 @@ 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 }}
@@ -43,4 +49,16 @@ layout: base.njk
   {% 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/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 %}

_site/feed.xml

@@ -1,144 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
-  <title>hello hello</title>
-  <subtitle>Lee Cattarin... on the internet!</subtitle>
-  <link href="https://leecat.art/feed.xml" rel="self" />
-  <link href="https://leecat.art/" />
-  <updated>2026-02-19T21:09:51Z</updated>
-  <id>https://leecat.art/</id>
-  <author>
-    <name>Lee Cattarin</name>
-    <email>lee.cattarin@gmail.com</email>
-  </author>
-  <entry>
-    <title>screen reader optimizations</title>
-    <link href="https://leecat.art/screen-reader-optimizations/" />
-    <updated>2026-02-19T21:09:51Z</updated>
-    <id>https://leecat.art/screen-reader-optimizations/</id>
-    <content type="html">&lt;h2 id=&quot;context&quot;&gt;context&lt;/h2&gt;
-&lt;p&gt;recently, I&#39;ve been working on a &lt;a href=&quot;https://inherentlee.codeberg.page/spoonfairies/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;website for a project called spoonfairies&lt;/a&gt;. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:&lt;/p&gt;
-&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/spoonfairies-provider.png&quot; alt=&quot;A provider listing from spoonfairies. On the top row of text, it shows the provider&#39;s name in large purple text, then their pronouns in slightly opaque white and slightly smaller font, then aligned on the right, a map pin emoji and their general location in standard size white text. On the second row of text, it lists a few services the provider offers, comma separated.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1000&quot; height=&quot;147&quot;&gt;&lt;/p&gt;
-&lt;h2 id=&quot;pronouns&quot;&gt;pronouns&lt;/h2&gt;
-&lt;p&gt;at first, all three pieces of information in the top row had no extra styling - it was just a line of text with the same color and size throughout. The location bit also didn&#39;t exist yet, so we&#39;re going to briefly ignore it. Screenreader testing (with NVDA, specifically) informed me that, when reading through a long list of providers, parentheses become &lt;em&gt;very&lt;/em&gt; irritating. Imagine hearing the following:&lt;/p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Lorem Ipsum left parentheses she slash her right parentheses web accessiblity webdev. Dolor Sit left parentheses they slash them right parentheses housecleaning. Amet Consectetur left parentheses he slash him right parentheses webdev spreadsheets software.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;...ad nauseam. Kinda irritating.&lt;/p&gt;
-&lt;h3 id=&quot;the-fix&quot;&gt;the fix&lt;/h3&gt;
-&lt;p&gt;put the pronouns in a span that provides special styling, and use &lt;code&gt;::before&lt;/code&gt; and &lt;code&gt;::after&lt;/code&gt; to apply parentheses.&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/providers/lorem-ipsum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    Lorem Ipsum
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pronouns&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;she/her&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.pronouns::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;(&quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
-&lt;span class=&quot;token selector&quot;&gt;.pronouns::after&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;)&quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;&lt;strong&gt;the slash is the magic there.&lt;/strong&gt; The string before the slash indicates the visual content, and the string after the slash is the alternative text content. I went happily on my way.&lt;/p&gt;
-&lt;p&gt;plus, this is neat - now I can style the pronouns separately. Let&#39;s make them the standard text color rather than the link color, and a bit smaller, and a smidge opaque... nice.&lt;/p&gt;
-&lt;h2 id=&quot;location&quot;&gt;location&lt;/h2&gt;
-&lt;p&gt;ooh, time to implement locations! I did my same ol&#39; trick.&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/providers/lorem-ipsum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    Lorem Ipsum
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pronouns&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;she/her&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;location&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Tacoma&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.location::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;📍&quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;is based out of&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;I even added actual alternative text rather than an empty string to provide some context. Pronouns, I figured, could exist without much context, as it&#39;s pretty common for them to follow directly after names in introductions, but location isn&#39;t as much of a given.&lt;/p&gt;
-&lt;p&gt;again, style em up nice, more of a standard text look, right-aligned. Cool.&lt;/p&gt;
-&lt;h2 id=&quot;a-bigger-problem-than-parentheses&quot;&gt;a bigger problem than parentheses&lt;/h2&gt;
-&lt;p&gt;...then I did some screen reader testing. Which I should have done directly after the pronouns bit. Turns out, I wasn&#39;t thrilled with what the &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;s did.&lt;/p&gt;
-&lt;p&gt;at least with fairly default settings in NVDA, the &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;s broke up the way the link was read out. Suddenly, I was getting:&lt;/p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;visited link Lorem Ipsum visited link she slash her visited link Tacoma&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;this is all one link, mind you. The &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag isn&#39;t broken into three links. But the &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;s apparently break up the screen reader output anyway (in NVDA, that&#39;s a continual caveat).&lt;/p&gt;
-&lt;p&gt;ooookay... what next?&lt;/p&gt;
-&lt;h3 id=&quot;total-overhaul&quot;&gt;total overhaul&lt;/h3&gt;
-&lt;p&gt;I moved away from my &lt;code&gt;content&lt;/code&gt; approach entirely (well, I kept it around as a failsafe, but it&#39;s not running the show now). Instead, I switched over to an &lt;code&gt;aria-label&lt;/code&gt; for the whole link.&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/providers/lorem-ipsum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Lorem Ipsum she/her is based out of Tacoma&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    Lorem Ipsum
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pronouns&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;she/her&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;location&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Tacoma&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;(technically, all this is templated to hell and back. I would hope that&#39;s obvious given I&#39;m talking about &lt;em&gt;lists&lt;/em&gt; of these entries.)&lt;/p&gt;
-&lt;p&gt;now, after more screen reader testing, it reads out smoothly. The &lt;code&gt;aria-label&lt;/code&gt; precludes the actual link text and cleanly says what needs to be said, with nothing breaking up the text and the whole thing easily recognized as one link. &lt;em&gt;And&lt;/em&gt; I&#39;ve got my fancy styling. Sweet.&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>crow</title>
-    <link href="https://leecat.art/crow/" />
-    <updated>2026-02-09T00:00:00Z</updated>
-    <id>https://leecat.art/crow/</id>
-    <content type="html"></content>
-  </entry>
-  <entry>
-    <title>charlie the alpaca handspun</title>
-    <link href="https://leecat.art/charlie-the-alpaca-handspun/" />
-    <updated>2026-02-05T00:00:00Z</updated>
-    <id>https://leecat.art/charlie-the-alpaca-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from Circle R Ranch. 100% alpaca, from Charlie the alpaca.&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>ruby the alpaca handspun</title>
-    <link href="https://leecat.art/ruby-the-alpaca-handspun/" />
-    <updated>2026-01-27T00:00:00Z</updated>
-    <id>https://leecat.art/ruby-the-alpaca-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from Circle R Ranch. 100% alpaca, from Ruby the alpaca.&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>hand-dyed gold handspun</title>
-    <link href="https://leecat.art/hand-dyed-gold-handspun/" />
-    <updated>2026-01-24T00:00:00Z</updated>
-    <id>https://leecat.art/hand-dyed-gold-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from &lt;a href=&quot;https://paradisefibers.com&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Paradise Fibers&lt;/a&gt;. 70% merino/30% nylon. Hand-dyed by me.&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>spinner&#39;s dream handspun</title>
-    <link href="https://leecat.art/spinners-dream-handspun/" />
-    <updated>2026-01-18T00:00:00Z</updated>
-    <id>https://leecat.art/spinners-dream-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from &lt;a href=&quot;https://paradisefibers.com&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Paradise Fibers&lt;/a&gt;. 40% merino/20% alpaca/20% camel/20% mulberry silk. Scrumptiously soft.&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>rambouillet handspun</title>
-    <link href="https://leecat.art/rambouillet-handspun/" />
-    <updated>2026-01-18T00:00:00Z</updated>
-    <id>https://leecat.art/rambouillet-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from &lt;a href=&quot;https://woolgatherings.com&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Woolgatherings&lt;/a&gt;. 100% rambouillet. Hand-dyed!&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>fire &amp; ice handspun</title>
-    <link href="https://leecat.art/fire-and-ice-handspun/" />
-    <updated>2026-01-18T00:00:00Z</updated>
-    <id>https://leecat.art/fire-and-ice-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from &lt;a href=&quot;https://www.etsy.com/shop/JakiraFarms&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Jakira Farms&lt;/a&gt; in Fire &amp;amp; Ice colorway. 100% merino.&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>dyeing fiber</title>
-    <link href="https://leecat.art/dyeing-fiber/" />
-    <updated>2026-01-18T00:00:00Z</updated>
-    <id>https://leecat.art/dyeing-fiber/</id>
-    <content type="html">&lt;p&gt;hand-dyed with acid dyes&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>coral reef handspun</title>
-    <link href="https://leecat.art/coral-reef-handspun/" />
-    <updated>2026-01-18T00:00:00Z</updated>
-    <id>https://leecat.art/coral-reef-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from &lt;a href=&quot;https://www.etsy.com/shop/JakiraFarms&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Jakira Farms&lt;/a&gt; in Coral Reef colorway. 100% merino.&lt;/p&gt;
-</content>
-  </entry>
-</feed>