metadata tweak

Fix <li> inside <a> so screenreader can parse nav

_data/metadata.js

@@ -3,8 +3,10 @@ export default {
 	logo: "/img/logo.svg",
 	url: "https://nathanupchurch.com/",
 	language: "en",
-	description: "The personal website and blog of Nathan Upchurch.",
+	description: "The personal website and blog of Nathan Upchurch, where I write about incense, free and open source software, design, vegan cooking, music, and all sorts of other topics that I find interesting.",
 	author: {
+		givenName: "Nathan",
+		familyName: "Upchurch",
 		name: "Nathan Upchurch",
 		email: "blog@upchur.ch",
 		url: "https://nathanupchurch.com/me",
@@ -38,7 +40,7 @@ export default {
 		},
 		{
 			title: "Matrix",
-			linkURL: "https://matrix.to/#/@nathanu:matrix.org",
+			linkURL: "https://matrix.to/#/@nathan:upchur.ch",
 			linkDisplay: "Matrix",
 			iconURL: "/img/matrix-org.svg"
 		},

_includes/nav.njk

@@ -2,14 +2,9 @@
 	<h2 class="visually-hidden">Top level navigation menu</h2>
 	<ul class="nav">
 	{%- for entry in collections.all | eleventyNavigation %}
-		<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}>
+		<li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
-			<li>{{ entry.title }}</li>
-		</a>
 	{%- endfor %}
-		<a class="nav-item" href="/feed/feed.xml">
+		<li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
-			<li class="subscribe">
+		</li>
-			{% include "rssLogo.njk" %}Feed
-			</li>
-		</a>
 	</ul>
 </nav>

_includes/structuredData.njk

@@ -3,17 +3,23 @@
 <script type="application/ld+json">
 {
 	"@context": "https://schema.org/",
-	"@type": "Article",
+	"@type": "BlogPosting",
-	"headline": "{{ title }}",
+	"articleBody": "{{ content | striptags }}"
 	"author": {
 		"@type": "Person",
-		"name": "{{ metadata.author.name }}"
+		"familyName": "{{ metadata.author.familyName }}",
+		"givenName": "{{ metadata.author.givenName }}",
+		"image": "{{ metadata.url }}{{ metadata.author.profilePic }}",
+		"name": "{{ metadata.author.name }}",
+		"url": "{{ metadata.author.url }}"
 	},
 	"datePublished": "{{ date }}",
 	"description": "{% if synopsis %}{{ synopsis}}{% endif %}",
+	"headline": "{{ title }}",
 	"image": "{% if imageURL %}{{ imageURL | htmlBaseUrl(metadata.url) }}{% else %}{{ metadata.defaultPostImageURL | htmlBaseUrl(metadata.url) }}{% endif %}",
+	"inLanguage": "{{ metadata.language }}",
+	"name": "{{ title }}",
 	"url": "{{ page.url | htmlBaseUrl(metadata.url) }}",
-	"articleBody": "{{ content | striptags }}"
 }
 </script>
 <!-- Open Graph -->

content/blog.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 <h1>Nathan’s Blog.</h1>
 
 <p class="page-block nodropcap">
-Looking for something in particular? Have a look at <a href="/tags/">this convenient list of post categories</a> to filter results by topic.
+Thank you for visiting my blog; I write about lots of things here, from <a href="/tags/storytime">personal stories,</a> to <a href="/tags/gnu-linux">tech,</a> <a href="/tags/vegan-cooking">food,</a> and <a href="/tags/incense">incense.</a> Explore all posts below or <a href="/tags/">choose a topic.</a>
 </p>
 <h2>What’s New:</h2>
 {% set postslist = collections.posts %}

content/blog/cowsay_2024-01-02.md

@@ -10,5 +10,4 @@ imageAlt: An ASCII cow with a thought bubble containing the word wut
 mastodon_id: "111688829907363670"
 ---
 As a big-old nerd, I spend a lot of time in the terminal on my computer. When you spend a lot of time somewhere, you want it to be comfortable. As a part of making my terminal more homey, I've set it up to give me a random quote each time I start a new session, delivered, of course, by a cow. Here's today's cowsay of the day:
-
 {{  cowList.onScience | cowsay | safe }}

content/blog/that-time-i-drew-my-ex.md

@@ -0,0 +1,31 @@
+---
+title: That Time I Drew My Ex
+description:  The tale of the time I made my best effort to draw my live-modeling ex. Also some not-very-good art.
+date: 2024-08-20
+tags:
+  - Storytime
+  - Quick Thoughts
+synopsis: The tale of the time I made my best effort to draw my live-modeling ex. Also some not-very-good art.
+imageURL: /img/doodle.webp
+imageAlt: A wiggly vector ice cream cone with a wee smiling face and colorful sprinkles. The cone is holding two smaller ice cream cones in its long, wiggly arms, one of which is wrapped around its body.
+mastodon_id: "112996800811207774"
+---
+At the start of the pandemic, I had just begun a relationship with an artist who had the occasional gig doing a bit of nude live modeling.
+
+[![A wiggly vector ice cream cone with a wee smiling face and colorful sprinkles. The cone is holding two smaller ice cream cones in its long, wiggly arms, one of which is wrapped around its body.](/img/doodle.webp "Not my ex")](/img/doodle.webp)
+
+When he invited me to join a session via zoom, I was apprehensive. Drawing has never been my strong suit. I can *doodle,* but I can't *draw.* But hey, I thought, I'm not completely devoid of artistic skill. I *have* been doing design work for years; while graphic design is not art, it's at least art-adjacent. Hell, when I sit down and take my time, I can produce something that's downright fridge-worthy!
+
+[![A crude oil pastel ocean-scape featuring a sunset. Wee boats bob about on the waves and little birds fly above them.](/img/pastel.webp "I'd put that on my fridge!")](/img/pastel.webp)
+
+Prepared to do my best, I settled down with my laptop, some pencils, and a pad of paper. What I was not prepared for, however, was how quickly the poses would change. There I was, expecting a good chunk of time to carefully render my new boyfriend in loving detail, only to have the pose end before I'd even managed an outline! And so I changed my strategy: I decided to prioritize *speed.* That didn't work either. Here are some of the results:
+
+[![A very speedily drawn cat, with what I think is my ex behind it. It looks like a sack of potatoes.](/img/quicklydrawncat.webp "I'm fairly certain this was supposed to be his cat.")](/img/quicklydrawncat.webp)
+
+[![This drawing, honest to god, looks like a rotisserie chicken with a perm.](/img/chicken.webp "I really don't know what happened  here.")](/img/chicken.webp)
+
+After much scribbling, I did begin to improve, eventually turning out this:
+
+[![A half decent drawing of what is quite clearly a human sitting on the floor.](/img/notbad.webp "I stopped while I was ahead here.")](/img/notbad.webp)
+
+I put the pencil down after that.

content/tags.njk

@@ -11,8 +11,9 @@ pagination:
   addAllPagesToCollections: true
 layout: layouts/base.njk
 eleventyComputed:
-  title: Tagged “{{ tag }}”
+  title: Posts tagged “{{ tag }}”
-permalink: "/tags/{{ tag | slugify }}/"
+	permalink: "/tags/{{ tag | slugify }}/"
+	description: A list of every post I've written tagged “{{ tag }}.”
 ---
 <h1>More posts tagged “{{ tag }}.”
 	<a href="/feeds/{{ tag | slugify }}.xml">
@@ -37,7 +38,7 @@ permalink: "/tags/{{ tag | slugify }}/"
 		</svg>
 	</a>
 </h1>
-<p class="page-block nodropcap">Here’s everything I’ve posted with the tag “{{ tag }}:”</p>
+<p class="page-block nodropcap">Here’s everything I’ve posted tagged “{{ tag }}.” Want to be notified when I post on this topic? <a href="/feeds/{{ tag | slugify }}.xml">Subscribe to “{{ tag }}.”</a></p>
 
 {% set postslist = collections[ tag ] %}
 {% include "postslist.njk" %}

eleventy.config.js

@@ -1,5 +1,4 @@
 import { DateTime } from "luxon";
-import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import markdownIt from "markdown-it";
 import markdownItFootnote from "markdown-it-footnote";
 import markdownItAnchor from "markdown-it-anchor";
@@ -37,17 +36,6 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 
 	// Official plugins
-	/*
-	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-		extensions: "html",
-		formats: ["webp"],
-		widths: [270,540,810,1080],
-			defaultAttributes: {
-				loading: "lazy",
-				decoding: "async",
-			},
-			urlPath: "/img/",
-	});*/
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
 		preAttributes: { tabindex: 0 }
@@ -74,7 +62,7 @@ export default async function(eleventyConfig) {
 	// Shortcodes
 
 	// Cowsay
-	eleventyConfig.addNunjucksFilter("cowsay", cowText => {
+	eleventyConfig.addFilter("cowsay", cowText => {
 		const cowCaptionReplacementTable = [
 			[`
 					o   ^__^
@@ -130,15 +118,8 @@ export default async function(eleventyConfig) {
 	});
 
 	// Passthrough
-	eleventyConfig.addPassthroughCopy({ 'public/xsl/*': "/xsl/" });
+
-	eleventyConfig.addPassthroughCopy({ 'public/img/*': "/img/" });
+	eleventyConfig.addPassthroughCopy({ './public/': "/" });
-	eleventyConfig.addPassthroughCopy({ 'public/robots.txt': "/" });
-	eleventyConfig.addPassthroughCopy({ 'public/js/*': "/js/" });
-	eleventyConfig.addPassthroughCopy({ 'public/js/webComponents/*': "/js/webComponents" });
-	eleventyConfig.addPassthroughCopy({ 'public/js/modules/*': "/js/modules" });
-	// Copying so that basic.xsl can use it
-	eleventyConfig.addPassthroughCopy({ 'public/css/index.css': "/css/index.css" });
-	eleventyConfig.addPassthroughCopy({ 'public/css/webfonts/*': "/css/webfonts/" });
 
 	// Get the first `n` elements of a collection.
 	eleventyConfig.addFilter("head", (array, n) => {

public/css/index.css

@@ -492,13 +492,8 @@ nav ul {
 	width: var(--space-2xs);
 }
 .nav-item {
-	display: inline-block;
-	text-decoration: none;
-	border-top: var(--border-nav);
-}
-.nav-item li {
 	align-items: baseline;
-	color: var(--text-color);
+	border-top: var(--border-nav);
 	display: flex;
 	font-size: var(--step--2);
 	font-variation-settings: var(--font-variation-ui);
@@ -509,37 +504,33 @@ nav ul {
 	transition: var(--transition-normal);
 	letter-spacing: var(--ui-letter-spacing);
 }
-.nav-item:hover {
+.nav-item a {
-	border-top: var(--border-nav-hover);
+	color: var(--text-color);
+	margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
+	padding-top: var(--space-xs-s); /* Give <a> a larger click area */
 }
-/* Compensate for increased border thickness on hover of a.nav-item */
+.nav-item:hover {
-.nav-item:hover li {
+	border-top: var(--border-nav-hover); /* Increase border thickness */
-	margin-top: calc(var(--space-xs-s) * -1);
+}
+.nav-item:hover a {
+	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
 }
 .nav-item a[href]:visited {
 	color: var(--text-color);
 }
-.nav-item a[href]:hover {
+.nav-item:hover a[href] {
 	color: var(--text-color);
 	text-decoration: none;
-
 }
 .nav-item a[href]:not(:hover) {
-	color: var(--text-color);
 	text-decoration: none;
 }
 .nav-item[data-currentpage="true"] {
 	border-top: var(--border-nav-currentpage);
+}
+.nav-item[data-currentpage="true"] a, .nav-item[data-currentpage="true"] a[href]:visited, .nav-item[data-currentpage="true"]:hover a {
 	color: var(--contrast-color);
-}
+	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
-.nav-item[data-currentpage="true"] li {
-	margin-top: calc(var(--space-xs-s) * -1);
-}
-.nav a[href][aria-current="page"] li {
-	color: var(--contrast-color);
-}
-.subscribe:hover {
-	color: var(--text-color);
 }
 
 /* Posts list */
@@ -568,9 +559,11 @@ nav ul {
 .post-image-container {
 	border-radius: var(--border-radius);
 	box-shadow: var(--box-shadow);
+	height: 15rem;
 	margin-left: calc(var(--space-l) * -1);
 	max-height: 15rem;
 	overflow: hidden;
+	width: 15rem;
 }
 
 .postlist-date,

public/css/webfonts/webfonts.css

@@ -1,16 +1,19 @@
 @font-face {
+	font-display: swap;
 	font-family: Manrope;
 	font-style: normal;
 	font-weight: 200 900;
 	src: url(/css/webfonts/Manrope[wght].woff2) format("woff2");
 }
 @font-face {
+	font-display: swap;
 	font-family: Fraunces;
 	font-style: normal;
 	font-weight: 100 900;
 	src: url(/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2) format("woff2");
 }
 @font-face {
+	font-display: swap;
 	font-family: Fraunces;
 	font-style: italic;
 	font-weight: 100 900;

public/img/logo_favicon.svg.2024_08_06_11_23_44.0.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="8.4666662mm"
+   height="8.4666662mm"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="logo_favicon.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   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:document-units="mm"
+     inkscape:zoom="9.5624995"
+     inkscape:cx="25.098041"
+     inkscape:cy="34.19608"
+     inkscape:current-layer="g1"
+     inkscape:window-width="1337"
+     inkscape:window-height="1077"
+     inkscape:window-x="522"
+     inkscape:window-y="231"
+     inkscape:window-maximized="0" />
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-23.248082,-20.452073)">
+    <g
+       id="g1">
+      <path
+         d="m 24.299497,21.503489 v 1.520267 0.734109 2.589192 c 0,0.842244 0.678022,1.520267 1.520266,1.520267 h 3.323302 c 0.842243,0 1.520266,-0.678023 1.520266,-1.520267 v -3.323301 c 0,-0.842245 -0.678023,-1.520267 -1.520266,-1.520267 h -2.875068 -0.448234 z"
+         style="fill:#faf5f5;fill-opacity:1;stroke-width:0.121929;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="path3" />
+      <path
+         d="m 29.856464,26.04708 c 0.144453,0 0.263097,0.04267 0.356568,0.127641 0.09347,0.08497 0.140559,0.197242 0.140559,0.337447 0,0.140205 -0.04709,0.252992 -0.140559,0.337964 -0.09347,0.08497 -0.212115,0.127124 -0.356568,0.127124 -0.148702,0 -0.269815,-0.04215 -0.363285,-0.127124 -0.08922,-0.08497 -0.133842,-0.197759 -0.133842,-0.337964 0,-0.140205 0.04462,-0.252474 0.133842,-0.337447 0.09347,-0.08497 0.214583,-0.127641 0.363285,-0.127641 z"
+         style="fill:#333333;stroke-width:0.162218;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="path4" />
+      <path
+         d="m 24.764269,22.375987 v 0.12764 c 0.140203,0.0042 0.244145,0.02142 0.312125,0.05116 0.07223,0.02549 0.11932,0.07648 0.14056,0.152962 0.02549,0.07223 0.03824,0.186965 0.03824,0.344165 v 2.944007 c 0,0.186938 -0.01275,0.33355 -0.03824,0.439766 -0.02124,0.106217 -0.06833,0.182714 -0.14056,0.229443 -0.06798,0.04673 -0.171922,0.07861 -0.312125,0.0956 v 0.127641 c 0.06798,-0.0085 0.152798,-0.01292 0.254764,-0.01292 0.106216,-0.0042 0.210675,-0.0062 0.312643,-0.0062 0.114713,0 0.235827,0.002 0.363285,0.0062 0.127459,0 0.231396,0.0044 0.312126,0.01292 v -0.127641 c -0.178443,-0.01699 -0.312306,-0.04887 -0.401526,-0.0956 -0.08497,-0.05098 -0.140392,-0.131381 -0.165882,-0.241845 -0.02549,-0.114713 -0.03824,-0.274073 -0.03824,-0.478007 v -2.753321 l 2.7342,3.715536 c 0.05098,-0.0042 0.09755,-0.0062 0.140043,-0.0062 0.04673,0 0.0894,0.002 0.127641,0.0062 v -3.639054 c 0,-0.19119 0.01079,-0.3378 0.03204,-0.439767 0.02549,-0.106217 0.07401,-0.182713 0.146245,-0.229443 0.07223,-0.05098 0.176685,-0.08285 0.312642,-0.0956 v -0.12764 c -0.06373,0.0043 -0.149066,0.0087 -0.255282,0.01292 -0.101965,0.0042 -0.205909,0.0062 -0.312125,0.0062 -0.110465,0 -0.231578,-0.002 -0.363286,-0.0062 -0.127457,-0.0043 -0.231405,-0.0087 -0.312125,-0.01292 v 0.12764 c 0.182692,0.01274 0.316556,0.04461 0.401526,0.0956 0.08497,0.05098 0.139874,0.131898 0.165364,0.242362 0.02549,0.110465 0.03824,0.269823 0.03824,0.478007 v 2.236556 l -2.389518,-3.180167 c -0.07223,0.0043 -0.155094,0.0087 -0.248564,0.01292 -0.09347,0.0042 -0.189084,0.0062 -0.286804,0.0062 -0.101968,0 -0.206427,-0.002 -0.312643,-0.0062 -0.101966,-0.0043 -0.186785,-0.0087 -0.254764,-0.01292 z"
+         style="fill:#333333;stroke-width:0.162218;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="path5" />
+    </g>
+  </g>
+</svg>