From 779cce9f9d70b6eb4db1be836bab3c28aa10090b Mon Sep 17 00:00:00 2001
From: Nathan Upchurch <nathan@upchur.ch>
Date: Fri, 29 Mar 2024 14:19:01 -0500
Subject: [PATCH] Fix my HTML and integrate prettier

---
 _includes/header.njk           |   9 ++-
 _includes/layouts/post.njk     |  16 +++--
 _includes/mastodonComments.njk |   1 +
 _includes/nextLast.njk         | 107 ++++++++++++++++++---------------
 content/about/index.md         |  10 +--
 content/blog/patience.md       |   6 +-
 eleventy.config.js             |  12 +++-
 package.json                   |   3 +-
 public/css/code.css            |   3 +-
 9 files changed, 102 insertions(+), 65 deletions(-)

diff --git a/_includes/header.njk b/_includes/header.njk
index a4b88d1..c5c8b1e 100644
--- a/_includes/header.njk
+++ b/_includes/header.njk
@@ -1,5 +1,12 @@
 <a href="#skip" class="visually-hidden">Skip to main content</a>
 <header>
-	<a href="/" class="home-link"><img class="logo" src="{{ metadata.logo }}" alt="{{ metadata.title }}"></a>
+	<a
+	href="/"
+	class="home-link">
+		<img
+		class="logo"
+		src="{{ metadata.logo }}"
+		alt="{{ metadata.title }}">
+	</a>
 	{% if not hideNav %}{% include "nav.njk" %}{% endif %}
 </header>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index 14cb1bf..722303d 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -9,13 +9,13 @@ layout: layouts/base.njk
 <div class="post-metadata">
 	{% if author %}
 
-	{% if author.url %}<a href="{{ author.url }}">{% endif %}
-	<p>{% if author.name %}{{ author.name }}, {% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
+	{% if author.name %}{{ author.name }}, {% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% else %}
 
-	{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
-	<p>{% if metadata.author.name %}{{ metadata.author.name }}, {% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
+	{% if metadata.author.name %}{{ metadata.author.name }}, {% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% endif %}
 
@@ -23,7 +23,13 @@ layout: layouts/base.njk
 	<ul>
 		{%- for tag in tags | filterTagList %}
 		{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-		<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}&nbsp;</a></li>
+		<li>
+			<a
+			href="{{ tagUrl }}"
+			class="post-tag">
+				{{ tag }}&nbsp;
+			</a>
+		</li>
 		{%- endfor %}
 	</ul>
 </div>
diff --git a/_includes/mastodonComments.njk b/_includes/mastodonComments.njk
index bd963d6..4d3921b 100644
--- a/_includes/mastodonComments.njk
+++ b/_includes/mastodonComments.njk
@@ -11,6 +11,7 @@
 				Reply on Mastodon to comment &#187;
 			</button>
 		</a>
+	</div>
 </section>
 
 <template id="comment-template">
diff --git a/_includes/nextLast.njk b/_includes/nextLast.njk
index 10ec29a..871b8c7 100644
--- a/_includes/nextLast.njk
+++ b/_includes/nextLast.njk
@@ -1,51 +1,62 @@
-{%- if collections.posts %}
-{%- set previousPost = collections.posts | getPreviousCollectionItem %}
-{%- set nextPost = collections.posts | getNextCollectionItem %}
-{%- if nextPost or previousPost %}
-<section class="links-nextprev">
-<h2>Read Next</h2>
-	<div class="postlist-item-container">
-		{%- if previousPost %}
-		<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-			<a href="{{ previousPost.url }}" class="postlist-link">
-				<div class="post-image-container">
-					<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
-				</div>
-			</a>
-			<div class="post-copy">
-				<a href="{{ previousPost.url }}" class="postlist-link">
-					<p>Previous Article:</p>
-					<h3>
-						{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
-					</h3>
-				</a>
-				<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
-				{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ previousPost.content | truncate(105) | safe }}{% endif %}
-			</div>
-	</article>
+{% if collections.posts %}
+	{% set previousPost = collections.posts | getPreviousCollectionItem %}
+	{% set nextPost = collections.posts | getNextCollectionItem %}
+	{% if nextPost or previousPost %}
+		<section class="links-nextprev">
+			<h2>Read Next</h2>
+			<div class="postlist-item-container">
+				{% if previousPost %}
+					<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+						<a href="{{ previousPost.url }}" class="postlist-link">
+							<div class="post-image-container">
+								<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
+							</div>
+						</a>
+						<div class="post-copy">
+							<a href="{{ previousPost.url }}" class="postlist-link">
+								<p>Previous Article:</p>
+								<h3>
+									{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
+								</h3>
+							</a>
+							<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
+							{% if previousPost.data.synopsis %}
+								<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>
+								{% else %}
+								<p>{{ previousPost.content | truncate(105) | safe }}</p>
+							{% endif %}
+						</div>
+					</article>
+					{% if not nextPost %}
+					</div>
+						</section>
+					{% endif %}
+				{% endif %}
 
+				{% if nextPost %}
+					<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+						<a href="{{ nextPost.url }}" class="postlist-link">
+							<div class="post-image-container">
+								<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
+							</div>
+						</a>
+						<div class="post-copy">
+							<a href="{{ nextPost.url }}" class="postlist-link">
+								<p>Next Article:</p>
+								<h3>
+									{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
+								</h3>
+							</a>
+							<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
+							{% if nextPost.data.synopsis %}
+								<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>
+								{% else %}
+								<p>{{ nextPost.content | truncate(105) | safe }}</p>
+							{% endif %}
+						</div>
+					</article>
+			</div>
+		</section>
 		{% endif %}
-		{%- if nextPost %}
-		<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-			<a href="{{ nextPost.url }}" class="postlist-link">
-				<div class="post-image-container">
-					<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
-				</div>
-			</a>
-			<div class="post-copy">
-				<a href="{{ nextPost.url }}" class="postlist-link">
-					<p>Next Article:</p>
-					<h3>
-						{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
-					</h3>
-				</a>
-				<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
-				{% if nextPost.data.synopsis %}<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ nextPost.content | truncate(105) | safe }}{% endif %}
-			</div>
-	</div>
-</section>
 	{% endif %}
-
-</div>
-{%- endif %}
-{%- endif %}
+{% endif %}
diff --git a/content/about/index.md b/content/about/index.md
index 37ad133..dc7435d 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -7,16 +7,16 @@ eleventyNavigation:
 <article>
 <h1>About me and this website I’ve built.</h1>
 <h2>All about Nathan</h2>
-<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.
+<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.</p>
 
-This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself as a human and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here soon.</p>
+<p>This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself as a human and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here soon.</p>
 
 <h2>About this website</h2>
-<p>This website is made with <a href="https://www.11ty.dev/">the 11ty static site generator</a>, free and open source variable typefaces <a href="https://www.gent.media/manrope">Manrope</a> and <a href="https://fraunces.undercase.xyz/">Fraunces</a>, along with plain-old HTML, CSS, and some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on <a href="https://utopia.fyi">utopia.fyi</a> to help me implement fluid typography and spacing.
+<p>This website is made with <a href="https://www.11ty.dev/">the 11ty static site generator</a>, free and open source variable typefaces <a href="https://www.gent.media/manrope">Manrope</a> and <a href="https://fraunces.undercase.xyz/">Fraunces</a>, along with plain-old HTML, CSS, and some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on <a href="https://utopia.fyi">utopia.fyi</a> to help me implement fluid typography and spacing.</p>
 
-I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a> otherwise). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website.
+<p>I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a> otherwise). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website.</p>
 
-Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.</p>
+<p>Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.</p>
 
 <h2>Contact Me</h2>
 <p>If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here’s where you can find me</a>.</p>
diff --git a/content/blog/patience.md b/content/blog/patience.md
index d9ca127..c3e6074 100644
--- a/content/blog/patience.md
+++ b/content/blog/patience.md
@@ -10,8 +10,10 @@ imageURL: /img/dragons_blood_incense_copy.avif
 imageAlt: A small piece of a coreless, Japanese-style incense stick burning in a black cast-iron burner.
 mastodon_id: "111732713202024407"
 ---
-Some time ago, maybe a year or so, I extruded a batch of incense sticks from some ingredients I thought might go well together: sandalwood, cinnamon, dragon's blood resin, a touch of Hojari frankincense for acidity, and some tonka bean for sweetness, if I recall correctly. After leaving the sticks to dry overnight, I was disappointed to see that they didn't stay lit; the stick would shrink behind the ember, and it would fizzle out in short order. Even worse, the little scent I was able to detect during the short burn was terrible: acrid and smoky. Dejected, I put the sticks away, returning to attempt to burn a small fragment every few days or so before I lost interest entirely. A few months later, the tube of crooked red incense sticks caught my eye, and I once again attempted to burn a stick. To my surprise, it stayed lit throughout the entire burn. The fragrance had transformed also, from leafy-campfire to a simple, warm, slightly sweet, and medicinal fragrance. While this was enough of an improvement to encourage me to light one every now and then, I remained disappointed that the fragrance was so far from what I'd hoped to achieve. After half-heartedly burning each stick in the little plastic tube that housed them over a period of weeks, the tube disappeared into a basket on the shelf beneath my coffee table amidst a mess of bundled cables and game-controllers, never to be seen again – until just a few days ago.
+Some time ago, maybe a year or so, I extruded a batch of incense sticks from some ingredients I thought might go well together: sandalwood, cinnamon, dragon's blood resin, a touch of Hojari frankincense for acidity, and some tonka bean for sweetness, if I recall correctly. After leaving the sticks to dry overnight, I was disappointed to see that they didn't stay lit; the stick would shrink behind the ember, and it would fizzle out in short order. Even worse, the little scent I was able to detect during the short burn was terrible: acrid and smoky. Dejected, I put the sticks away, returning to attempt to burn a small fragment every few days or so before I lost interest entirely.
+
+A few months later, the tube of crooked red incense sticks caught my eye, and I once again attempted to burn a stick. To my surprise, it stayed lit throughout the entire burn. The fragrance had transformed also, from leafy-campfire to a simple, warm, slightly sweet, and medicinal fragrance. While this was enough of an improvement to encourage me to light one every now and then, I remained disappointed that the fragrance was so far from what I'd hoped to achieve. After half-heartedly burning each stick in the little plastic tube that housed them over a period of weeks, the tube disappeared into a basket on the shelf beneath my coffee table amidst a mess of bundled cables and game-controllers, never to be seen again – until just a few days ago.
 
 [![A small piece of a coreless, Japanese-style incense stick burning in a black cast-iron burner.](/img/dragons_blood_incense_copy.avif "The last fragment.")](/img/dragons_blood_incense_copy.avif)
 
-While rustling around in search of a controller, I discovered the thin plastic tube, noticing two small fragments of incense sliding about as I lifted the tube from the basket. As I lit the first fragment this morning, I was met with a wonderfully clear impression of dragon's blood, uplifted by the bright citrus of Hojari frankincense, on a sweet, warm, woody base; my incense had turned out well after all. Unfortunately, the recipe, written on the tube in dry-erase marker, had long worn off; thinking the batch was a failure, I hadn't recorded it anywhere else. Burning those last two fragments today was bittersweet; all I had needed to do was wait. I'm frustrated about a number of things here, but there is something oddly gratifying about the situation. By failing to record the recipe, I got to experience something rare and unique today. In those peaceful, fragrant moments, I experienced something lovely for the first and last time – and I learned a thing or two about patience.
+While rustling around in search of a controller, I discovered the thin plastic tube, noticing two small fragments of incense sliding about as I lifted the tube from the basket. As I lit the first fragment this morning, I was met with a wonderfully clear impression of dragon's blood, uplifted by the bright citrus of Hojari frankincense, on a sweet, warm, woody base; my incense had turned out well after all. Unfortunately, the recipe, written on the tube in dry-erase marker, had long worn off; thinking the batch was a failure, I hadn't recorded it anywhere else. Burning those last two fragments today was bittersweet; all I had needed to do was wait. I'm frustrated about a number of things here, but there is something oddly gratifying about the situation. By failing to record the recipe, I got to experience something rare and unique today. In those peaceful, fragrant moments, I experienced something lovely for the first and last time — and I learned a thing or two about patience.
diff --git a/eleventy.config.js b/eleventy.config.js
index f015dd9..c3388d7 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -7,13 +7,14 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginBundle = require("@11ty/eleventy-plugin-bundle");
 const pluginNavigation = require("@11ty/eleventy-navigation");
+const prettier = require("prettier");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 
 const figoptions = {
 	figcaption: true
 };
 
-module.exports = function(eleventyConfig) {
+module.exports = eleventyConfig => {
 
 	// Helper Functions
 	const multiReplace = (text, replacementTable) => {
@@ -22,6 +23,15 @@ module.exports = function(eleventyConfig) {
 		return newText;
 	};
 
+	// Transforms
+	eleventyConfig.addTransform("prettier", function (content, outputPath) {
+		if (outputPath && outputPath.endsWith(".html")) {
+			return prettier.format(content, {parser: "html", bracketSameLine: true, vueIndentScriptAndStyle: true, singleAttributePerLine: true, htmlWhitespaceSensitivity: "ignore"});
+		} else {
+			return content;
+		}
+	});
+
 	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 
 	// Official plugins
diff --git a/package.json b/package.json
index b10f40d..1061716 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
 	},
 	"dependencies": {
 		"markdown-it-footnote": "^3.0.3",
-		"markdown-it-image-figures": "^2.1.1"
+		"markdown-it-image-figures": "^2.1.1",
+		"prettier": "^3.2.5"
 	}
 }
diff --git a/public/css/code.css b/public/css/code.css
index 752d454..2444e66 100644
--- a/public/css/code.css
+++ b/public/css/code.css
@@ -1,5 +1,4 @@
-code[class*="language-"],
-pre[class*="language-"] {
+code[class*="language-"], pre[class*="language-"] {
 	color: #f8f8f2;
 	background: none;
 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);