Replace categories with tags

lib/generate/archive.ts

@@ -0,0 +1,13 @@
+import * as metadata from "../metadata";
+import { Page } from "../metadata";
+import * as util from "../util";
+import layout from "../layout";
+
+export default async function archive(posts: Page[]) {
+	const page = await metadata.get("site/archive.html.ejs");
+	page.text = util.render(page.text, {
+		posts,
+	}, "site/archive.html.ejs");
+	page.text = await layout(page.text, page.metadata, page.metadata.layout!);
+	util.write("archive/index.html", page.text);
+}

lib/generate/categories.ts

@@ -1,24 +0,0 @@
-import { Page, PostMetadata } from "../metadata";
-import generatePaginated from "./paginated";
-
-export default async function(posts: Page[]): Promise<Map<string, Page[]>> {
-	const categories = new Map<string, Page[]>();
-
-	for (const post of posts) {
-		const category = (<PostMetadata>post.metadata).category;
-		if (!categories.has(category)) {
-			categories.set(category, []);
-		}
-		categories.get(category)!.push(post);
-	}
-
-	categories.forEach((categoryPosts, category) => {
-		generatePaginated(categoryPosts, `/${category}/`, "site/category.html.ejs", {
-			category
-		}, {
-			title: `${category} posts`
-		});
-	});
-
-	return categories;
-}

lib/generate/index.ts

@@ -1,21 +1,23 @@
-import categories from "./categories";
+import archive from "./archive";
 import copy from "./copy";
 import css from "./css";
 import errors from "./errors";
 import homepage from "./homepage";
 import posts from "./posts";
 import * as rss from "./rss";
+import tags from "./tags";
 import tutorials from "./tutorials";
 import years from "./years";
 
 export = {
-	categories,
+	archive,
 	copy,
 	css,
 	errors,
 	homepage,
 	posts,
 	rss,
+	tags,
 	tutorials,
 	years,
 };

lib/generate/rss.ts

@@ -4,7 +4,7 @@ import { Page, PostMetadata } from "../metadata";
 import * as util from "../util";
 import { TutorialSeries } from "./tutorials";
 
-async function generateFeed(posts: Page[], permalink: string, category?: string) {
+async function generateFeed(posts: Page[], permalink: string, tag?: string) {
 	posts = posts.sort((a, b) => {
 		const aDate = <Date>(<PostMetadata>a.metadata).date;
 		const bDate = <Date>(<PostMetadata>b.metadata).date;
@@ -16,7 +16,7 @@ async function generateFeed(posts: Page[], permalink: string, category?: string)
 	let text = (await fs.readFile("site/feed.xml.ejs")).toString();
 	text = util.render(text, {
 		posts,
-		category,
+		tag,
 		permalink,
 		feedPath: dest
 	}, "site/feed.xml.ejs");
@@ -28,9 +28,9 @@ export async function posts(posts: Page[]) {
 	generateFeed(posts, "/");
 }
 
-export async function categories(categories: Map<string, Page[]>) {
-	categories.forEach((posts, category) => {
-		generateFeed(posts, `/${category}/`, category);
+export async function tags(tags: Map<string, Page[]>) {
+	tags.forEach((posts, tag) => {
+		generateFeed(posts, `/${tag}/`, tag);
 	});
 }
 

lib/generate/tags.ts

@@ -0,0 +1,26 @@
+import { Page, PostMetadata } from "../metadata";
+import generatePaginated from "./paginated";
+
+export default async function(posts: Page[]): Promise<Map<string, Page[]>> {
+	const taggedPosts = new Map<string, Page[]>();
+
+	for (const post of posts) {
+		const tags = (<PostMetadata>post.metadata).tags;
+		for (const tag of tags) {
+			if (!taggedPosts.has(tag)) {
+				taggedPosts.set(tag, []);
+			}
+			taggedPosts.get(tag)!.push(post);
+		}
+	}
+
+	taggedPosts.forEach((tagPosts, tag) => {
+		generatePaginated(tagPosts, `/${tag}/`, "site/tag.html.ejs", {
+			tag
+		}, {
+			title: `${tag} posts`
+		});
+	});
+
+	return taggedPosts;
+}

lib/index.ts

@@ -22,7 +22,8 @@ async function generate(): Promise<Page[]> {
 	generators.homepage(posts);
 	generators.years(posts);
 	generators.rss.posts(posts)
-	generators.categories(posts).then(generators.rss.categories);
+	generators.tags(posts).then(generators.rss.tags);
+	generators.archive(posts);
 
 	return posts;
 }

lib/metadata.ts

@@ -16,7 +16,7 @@ export interface Metadata {
 export interface PostMetadata extends Metadata {
 	title: string;
 	slug: string;
-	category: string;
+	tags: string[];
 	date: string | Date;
 	readingTime?: number;
 	wordCount?: number;

lib/util.ts

@@ -71,7 +71,6 @@ export function video(metadata: Metadata, name: string, attributes: object): str
 	return `
 <video ${attributesStr}>
 	<source src="${metadata.permalink}/${name}.mp4" type="video/mp4">
-	<source src="${metadata.permalink}/${name}.webm" type="video/webm">
 </video>
 `;
 }

site/archive.html.ejs

@@ -0,0 +1,23 @@
+```
+metadata.layout = "default.html.ejs"
+metadata.title = "Archive"
+```
+
+<div class="main">
+	<% let currentYear %>
+	<% for (const post of posts) { %>
+		<% if (post.metadata.date.getFullYear() !== currentYear) { %>
+			<% if (currentYear) { %>
+				</ul>
+			<% } %>
+			<% currentYear = post.metadata.date.getFullYear() %>
+			<h2><%= currentYear %></h2>
+			<ul>
+		<% } %>
+		<li>
+			<a href="<%= post.metadata.permalink %>">
+				<%= post.metadata.title %>
+			</a>
+		</li>
+	<% } %>
+</div>

site/css/dark.scss

@@ -7,6 +7,9 @@
 	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
 	--content-text-color: var(--dark-content-text-color);
 
+	--aside-background: var(--dark-aside-background);
+	--aside-border: var(--dark-aside-border);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);
@@ -31,6 +34,9 @@
 	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
 	--content-text-color: var(--light-content-text-color);
 
+	--aside-background: var(--light-aside-background);
+	--aside-border: var(--light-aside-border);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);

site/css/light.scss

@@ -7,6 +7,9 @@
 	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
 	--content-text-color: var(--light-content-text-color);
 
+	--aside-background: var(--light-aside-background);
+	--aside-border: var(--light-aside-border);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);
@@ -31,6 +34,9 @@
 	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
 	--content-text-color: var(--dark-content-text-color);
 
+	--aside-background: var(--dark-aside-background);
+	--aside-border: var(--dark-aside-border);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);

site/css/main.scss

@@ -1,9 +1,13 @@
 <%- include("normalize.css") %>
 <%- include("syntax-highlighting.css") %>
 
+$light-accent-color: #0638d0;
+$dark-accent-color: #f9c72f;
+
 :root {
-	--light-accent-color: #0638d0;
-	--dark-accent-color: #f9c72f;
+	// Theme colors
+	--light-accent-color: #{$light-accent-color};
+	--dark-accent-color: #{$dark-accent-color};
 	--light-content-background-color: white;
 	--dark-content-background-color: #111;
 	--light-shadow-color: #f7f7f7;
@@ -17,6 +21,11 @@
 	--light-content-text-color: #222;
 	--dark-content-text-color: #ddd;
 
+	--light-aside-background: #{lighten($light-accent-color, 50%)};
+	--dark-aside-background: #{darken($dark-accent-color, 50%)};
+	--light-aside-border: #{darken($light-accent-color, 10%)};
+	--dark-aside-border: #{darken($dark-accent-color, 10%)};
+
 	// Syntax highlighting
 	--light-atom-base: #fafafa;
 	--dark-atom-base: #282c34;
@@ -42,6 +51,11 @@
 	--dark-atom-hue-6: #d19a66;
 	--light-atom-hue-6-2: #c18401;
 	--dark-atom-hue-6-2: #e6c07b;
+
+	// Fonts
+	--ui-font: Avenir, Lucida Grande, Arial, sans-serif;
+	--content-font: Charter, Georgia, serif;
+	--monospace-font: SF Mono, monospace;
 }
 .theme-light {
 	--accent-color: var(--light-accent-color);
@@ -52,6 +66,9 @@
 	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
 	--content-text-color: var(--light-content-text-color);
 
+	--aside-background: var(--light-aside-background);
+	--aside-border: var(--light-aside-border);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);
@@ -75,6 +92,9 @@
 	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
 	--content-text-color: var(--dark-content-text-color);
 
+	--aside-background: var(--dark-aside-background);
+	--aside-border: var(--dark-aside-border);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);
@@ -90,15 +110,10 @@
 	--atom-hue-6-2: var(--dark-atom-hue-6-2);
 }
 
-// Fonts
-$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
-$serif: Charter, Georgia, serif;
-$monospace: SF Mono, monospace;
-
 // General
 html {
 	background-color: var(--content-background-color);
-	font-family: $sansSerif;
+	font-family: var(--ui-font);
 	font-size: 16px;
 	line-height: 1.6;
 	color: var(--ui-text-color);
@@ -145,7 +160,7 @@ article {
 
 		&::before {
 			content: "#";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--accent-color);
 			user-select: none;
 		}
@@ -175,15 +190,16 @@ article {
 	}
 
 	.article-content {
-		font-family: $serif;
+		position: relative;
+		font-family: var(--content-font);
 		font-size: 1.25rem;
 		word-wrap: break-word;
 
 		h1, h2, h3, h4, h5, h6 {
-			font-family: $sansSerif;
+			font-family: var(--ui-font);
 
 			.header-anchor {
-				font-family: $monospace;
+				font-family: var(--monospace-font);
 				color: var(--accent-color);
 				user-select: none;
 				text-decoration: none;
@@ -208,6 +224,22 @@ article {
 			word-break: break-all;
 		}
 
+		aside {
+			background-color: var(--aside-background);
+			border: 1px solid var(--aside-border);
+			padding: 15px;
+			font-size: 1rem;
+			width: 50%;
+			position: absolute;
+			left: 100%;
+			margin-left: 15px;
+			box-sizing: border-box;
+			transform: translateY(-50%);
+
+			p:first-child { margin-top: 0; }
+			p:last-child { margin-bottom: 0; }
+		}
+
 		// Markdown decorations
 		@media screen and (min-width: 768px) {
 			a {
@@ -216,7 +248,7 @@ article {
 				&::after { content: "](" attr(data-link) ")"; word-wrap: break-word; }
 				&::before, &::after {
 					color: var(--secondary-ui-text-color);
-					font-family: $monospace;
+					font-family: var(--monospace-font);
 					font-size: 0.75em;
 				}
 			}
@@ -233,7 +265,7 @@ article {
 		}
 		code::before, code::after {
 			content: "`";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--secondary-ui-text-color);
 		}
 		pre code::before,
@@ -244,12 +276,12 @@ article {
 		}
 		strong::before, strong::after {
 			content: "**";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--secondary-ui-text-color);
 		}
 		em::before, em::after {
 			content: "_";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--secondary-ui-text-color);
 		}
 	}
@@ -394,7 +426,7 @@ a {
 			position: absolute;
 			top: -0.15em;
 			transition: 0.3s ease all;
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: transparent;
 
 			&:first-child {
@@ -430,11 +462,13 @@ pre {
 	tab-size: 4;
 
 	word-wrap: normal;
+
+	font-family: var(--monospace-font);
 }
 
-pre, code {
-	font-family: $monospace;
-	font-size: 1rem;
+code {
+	font-family: var(--monospace-font);
+	font-size: 0.8em;
 }
 
 img {
@@ -447,7 +481,7 @@ figure {
 	margin: 0;
 
 	figcaption {
-		font-family: $sansSerif;
+		font-family: var(--ui-font);
 		font-size: 1rem;
 		font-style: italic;
 		color: var(--secondary-ui-text-color);
@@ -671,3 +705,12 @@ figure {
 		max-width: 720px;
 	}
 }
+
+@media (max-width: 1455px) {
+	article .article-content aside {
+		position: initial;
+		width: 100%;
+		margin: 0;
+		transform: unset;
+	}
+}

site/feed.xml.ejs

@@ -1,13 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom">
-	<title>Shadowfacts<% if (category) { %> (<%= category %>)<% } %></title>
+	<title>Shadowfacts<% if (tag) { %> (<%= tag %>)<% } %></title>
 	<subtitle>
-		<% if (category) { %>
-			Only <%= category %> posts.
+		<% if (tag) { %>
+			Only <%= tag %> posts.
 		<% } else { %>
 			Just my various ramblings.
 		<% } %>
 	</subtitle>
+	<% if (tag) { %>
+		<category term="<%= tag %>" />
+	<% } %>
 	<link rel="alternate" type="text/html" href="https://shadowfacts.net<%= permalink %>" />
 	<link rel="self" href="https://shadowfacts.net<%= feedPath %>" type="application/atom+xml" />
 	<id>https://shadowfacts.net<%= feedPath %></id>
@@ -21,8 +24,10 @@
 			<title><%= post.metadata.title %></title>
 			<updated><%= post.metadata.date.toISOString() %></updated>
 			<link rel="alternate" type="text/html" href="https://shadowfacts.net<%= post.metadata.permalink %>" />
-			<% if (post.metadata.category) { %>
-				<category term="<%= post.metadata.category %>" />
+			<% if (post.metadata.tags) { %>
+				<% for (const tag of post.metadata.tags) { %>
+					<category term="<%= tag %>" />
+				<% } %>
 			<% } %>
 			<content type="html"><![CDATA[
 <%- post.text %>

site/includes/article-meta.html.ejs

@@ -8,9 +8,11 @@
 		<% const fullFormatted = formatDate(metadata.date, "hh:mm:ss A MMM Do, YYYY") %>
 		<time itemprop="datePublished" datetime="<%= metadata.date.toISOString() %>" title="<%= fullFormatted %>"><%= formatted %></time>
 	</span>
-	<% if (metadata.category) { %>
+	<% if (metadata.tags) { %>
 		in
-		<span itemprop="articleSection"><a href="/<%= metadata.category %>/" rel="category"><%= metadata.category %></a></span>
+		<% for (let i = 0; i < metadata.tags.length; i++) { %>
+			<span itemprop="articleSection"><a href="/<%= metadata.tags[i] %>/" rel="tag"><%= metadata.tags[i] %></a></span><%= i < metadata.tags.length - 1 ? ", " : "" %>
+		<% } %>
 	<% } else if (metadata.series) { %>
 		in
 		<span itemprop="articleSection"><a href="/tutorials/<%= metadata.series %>" rel="category"><%= metadata.seriesName %></a></span>

site/layouts/default.html.ejs

@@ -48,14 +48,15 @@
 			</div>
 			<nav class="site-nav" role="navigation">
 				<ul>
+					<li><%- fancyLink("Archive", "/archive/") %></li>
 					<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
 					<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
-					<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
 					<li>
 						<a href="#" class="dropdown-link" aria-haspopup="true">Other <span class="arrow arrow-down" aria-hidden="true"></span></a>
 						<ul aria-label="other links">
 							<li><%- fancyLink("Gitea", "https://git.shadowfacts.net") %></li>
 							<li><%- fancyLink("Maven", "https://maven.shadowfacts.net") %></li>
+							<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
 							<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
 						</ul>
 					</li>

site/posts/2016-05-05-hello-world.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Hello, World!"
-metadata.category = "meta"
+metadata.tags = ["meta"]
 metadata.date = "2016-05-06 11:13:18 -0400"
 metadata.oldPermalink = ["/meta/2016/06/07/hello-world/", "/meta/2016/hello-world/"]
 metadata.shortDesc = "Hello again, world! Welcome to the third iteration of my website."

site/posts/2016-05-21-194-porting-spree.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "1.9.4 Porting Spree"
-metadata.category = "minecraft"
+metadata.tags = ["minecraft"]
 metadata.date = "2016-05-21 17:47:18 -0400"
 metadata.oldPermalink = ["/mods/2016/05/21/194-porting-spree/", "/minecraft/2016/1-9-4-porting-spree/"]
 metadata.shortDesc = "Now that Forge for 1.9.4 is out, I've begun the log and arduous process of porting my mods to 1.9.4 (if by long and arduous, you mean short and trivial)."

site/posts/2016-06-29-introducing-rtfm.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Introducing RTFM"
-metadata.category = "minecraft"
+metadata.tags = ["minecraft"]
 metadata.date = "2016-06-29 12:00:00 -0400"
 metadata.oldPermalink = ["/meta/2016/06/29/introducing-rtfm/", "/minecraft/2016/introducing-rtfm/"]
 metadata.shortDesc = "RTFM is the brand new website that will contain the documentation for all of my projects, currently it only contains documentation for MC mods."

site/posts/2016-06-30-forge-1102-tutorials.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Forge Modding Tutorials for 1.10.2"
-metadata.category = "minecraft"
+metadata.tags = ["minecraft"]
 metadata.date = "2016-06-30 10:35:00 -0400"
 metadata.oldPermalink = ["/meta/2016/06/30/forge-1102-tutorials/", "/minecraft/2016/forge-modding-tutorials-for-1-10-2"]
 metadata.shortDesc = "The Forge modding tutorials have all the been updated to MC 1.10.2 as has the GitHub repo."

site/posts/2016-07-28-introducing-mirror.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Introducing Mirror"
-metadata.category = "java"
+metadata.tags = ["java"]
 metadata.date = "2016-07-28 16:45:00 -0400"
 metadata.oldPermalink = ["/java/2016/07/28/introducing-mirror/", "/java/2016/introducing-mirror/"]
 metadata.shortDesc = "Allow me to introduce my latest project, Mirror. Mirror is a reflection library for Java designed to take advantage of the streams, lambdas, and optionals introduced in Java 8."

site/posts/2016-08-06-kotlin-and-forge.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Kotlin and Minecraft Forge"
-metadata.category = "minecraft"
+metadata.tags = ["minecraft"]
 metadata.date = "2016-08-06 16:45:30 -0400"
 metadata.oldPermalink = ["/forge/2016/08/06/kotlin-and-forge/", "/minecraft/2016/kotlin-and-minecraft-forge/"]
 metadata.shortDesc = "So, you wanna use Kotlin in your Forge mod? Well there's good news, I've just released Forgelin, a fork of Emberwalker's Forgelin, a library that provides utilities for using Kotlin with Minecraft/Forge. "

site/posts/2016-08-07-the-great-redesign.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "The Great Redesign"
-metadata.category = "meta"
+metadata.tags = ["meta"]
 metadata.date = "2016-08-07 15:39:48 -0400"
 metadata.oldPermalink = ["/meta/2016/08/07/the-great-redesign/", "/meta/2016/the-great-redesign/"]
 metadata.shortDesc = "Welcome to the fourth iteration of my website."

site/posts/2016-10-02-type.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Type: A FOSS clone of typing.io"
-metadata.category = "misc"
+metadata.tags = ["misc"]
 metadata.date = "2016-10-08 17:29:42 -0400"
 metadata.oldPermalink = ["/misc/2016/10/08/type/", "/misc/2016/type/"]
 metadata.shortDesc = "I made an awesome FOSS clone of typing.io that you can check out at type.shadowfacts.net."

site/posts/2017-02-13-the-pretty-good-minor-update.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "The Pretty Good Minor Update"
-metadata.category = "meta"
+metadata.tags = ["meta"]
 metadata.date = "2017-02-17 14:30:42 -0400"
 metadata.oldPermalink = ["/meta/2017/02/17/the-pretty-good-minor-update/", "/meta/2017/the-pretty-good-minor-update/"]
 metadata.shortDesc = "It's been about six months since the last time I redesigned the site, and while I didn't want to redesign it yet again, I felt it could use a little update to make sure everything's still good."

site/posts/2018-04-23-comments-powered-by-github.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Comments Powered by GitHub"
-metadata.category = "meta"
+metadata.tags = ["meta"]
 metadata.date = "2017-04-23 09:05:42 -0400"
 metadata.oldPermalink = ["/meta/2017/04/23/comments-powered-by-github/", "/meta/2017/comments-powered-by-git-hub/"]
 metadata.shortDesc = "I built a way of commenting on my static website using GitHub to store comments."

site/posts/2019-09-18-reincarnation.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Reincarnation"
-metadata.category = "meta"
+metadata.tags = ["meta"]
 metadata.date = "2019-09-18 10:34:42 -0400"
 metadata.shortDesc = "Stand by for reincarnation."
 metadata.oldPermalink = "/meta/2019/reincarnation/"

site/posts/2019-09-22-activitypub-resources.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "ActivityPub Resources"
-metadata.category = "activitypub"
+metadata.tags = ["activitypub"]
 metadata.date = "2019-09-22 17:50:42 -0400"
 metadata.shortDesc = "A compilation of resources I found useful in learning/implementing ActivityPub."
 metadata.oldPermalink = "/activitypub/2019/activity-pub-resources/"

site/posts/2019-10-10-learning-elixir.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Learning Elixir"
-metadata.category = "elixir"
+metadata.tags = ["elixir"]
 metadata.date = "2019-10-10 12:29:42 -0400"
 metadata.shortDesc = "How I learned Elixir and why I love it."
 metadata.oldPermalink = "/elixir/2019/learning-elixir/"

site/posts/2019-11-11-js-free-hamburger-menu.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Building a JavaScript-Free Slide-Over Menu"
-metadata.category = "web"
+metadata.tags = ["web"]
 metadata.date = "2019-11-11 21:08:42 -0400"
 metadata.shortDesc = "Building a slide-over hamburger menu without using JavaScript."
 metadata.oldPermalink = "/web/2019/js-free-hamburger-menu/"

site/posts/2019-12-22-mock-http-ios-ui-testing.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Mocking HTTP Requests for iOS App UI Tests"
-metadata.category = "swift"
+metadata.tags = ["swift"]
 metadata.date = "2019-12-22 19:12:42 -0400"
 metadata.shortDesc = "Integrating a tiny web server into your Xcode UI test target to mock HTTP requests."
 metadata.oldPermalink = "/ios/2019/mock-http-ios-ui-testing/"

site/posts/2020-01-28-faking-mongo-eval.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Faking the Mongo Eval Command"
-metadata.category = "swift"
+metadata.tags = ["swift"]
 metadata.date = "2020-01-28 19:33:42 -0400"
 metadata.shortDesc = "MongoDB 4.2 removed the eval command, which is a good security measure, but unfortunate for building database-viewing GUI."
 metadata.slug = "faking-mongo-eval"

site/posts/2020-02-18-simple-swift-promises.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Simple Swift Promises"
-metadata.category = "swift"
+metadata.tags = ["swift"]
 metadata.date = "2020-02-18 22:10:42 -0400"
 metadata.shortDesc = "Building a rudimentary implementation of asynchronous promises in Swift."
 metadata.slug = "simple-swift-promises"

site/posts/2020-04-09-syntax-highlighting-javascript.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Writing a JavaScript Syntax Highlighter in Swift"
-metadata.category = "swift"
+metadata.tags = ["swift"]
 metadata.date = "2020-04-09 11:48:42 -0400"
 metadata.shortDesc = "Things I learned while building a tiny syntax highlighter."
 metadata.slug = "syntax-highlighting-javascript"

site/posts/2020-04-13-thunderbolt-3.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "The Sorry State of Thunderbolt 3 Docks"
-metadata.category = "computers"
+metadata.tags = ["computers"]
 metadata.date = "2020-04-13 17:19:42 -0400"
 metadata.shortDesc = "On a quest to find a Thunderbolt dock that meets my needs."
 metadata.slug = "thunderbolt-3"

site/posts/2020-05-21-switching-to-vim.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Switching to Vim"
-metadata.category = "editors"
+metadata.tags = ["editors"]
 metadata.date = "2020-05-21 18:22:42 -0400"
 metadata.shortDesc = "How I went about joining the cult of Vim."
 ```

site/posts/2020-06-05-algorithmic-bias.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Algorithmic Bias"
-metadata.category = "misc"
+metadata.tags = ["misc"]
 metadata.date = "2020-06-05 09:55:42 -0400"
 metadata.shortDesc = ""
 ```

site/posts/2020-07-03-uipreviewparameters-textlinerects.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Replicating Safari's Link Preview Animation"
-metadata.category = "swift"
+metadata.tags = ["swift"]
 metadata.date = "2020-07-03 16:28:42 -0400"
 metadata.shortDesc = ""
 metadata.slug = "uipreviewparameters-textlinerects"
@@ -122,7 +122,9 @@ return UITargetedPreview(view: snapshotContainer, parameters: parameters, target
 
 And with that, only the link text is visible in the preview animation and it expands nicely into the full preview:
 
+<div>
 <%- video(metadata, "masked", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a link being previewed and dismissed with the link text animating back to its starting position upon dismissal."}) %>
+</div>
 
 But, there's still one small detail as keen-eyed readers may have noticed. In Safari, when dismissing the full preview, it animates back into the preview view and springs back to the original position. With our implementation, however, it doesn't. The preview view controller does animate back into the preview view, however, instead of returning to the original position, it disappears off into the middle of the screen. This is because there's still one `UIContextMenuInteractionDelegate` method we need to implement: `contextMenuInteraction(_:previewForDismissingMenuWithConfiguration:)`. Similar to the `previewForHighlighting` method, this method takes the interaction and the context menu configuration, creating a `UITargetedPreview` that should be used during the dismissal animation. Since we want the preview to go back to the same location while dismissing as it came from while expanding, we can cache the targeted preview we've already constructed for the highlight method and return it from the dismissal method.
 

site/posts/2020-07-22-gemini-network-framework.md

@@ -1,6 +1,6 @@
 ```
 metadata.title = "Implement a Gemini Protocol Client Using Network.framework"
-metadata.category = "swift"
+metadata.tags = ["swift", "gemini"]
 metadata.date = "2020-07-22 21:57:42 -0400"
 metadata.shortDesc = ""
 metadata.slug = "gemini-network-framework"

site/posts/2020-08-25-swiftui-expanding-text-view.md

@@ -0,0 +1,97 @@
+```
+metadata.title = "SwiftUI Auto-Expanding Text Views"
+metadata.tags = ["swift"]
+metadata.date = "2020-08-29 11:20:42 -0400"
+metadata.shortDesc = "Building a non-scrolling UITextView for use in SwiftUI layouts."
+metadata.slug = "swiftui-expanding-text-view"
+```
+
+I'm currently in the process of rewriting the Compose screen in Tusker to use SwiftUI. This has mostly been a smooth process, but there have been a few hiccups, the first of which was the main text box. The updates to SwiftUI introduced in iOS 14 included [`TextEditor`](https://developer.apple.com/documentation/swiftui/texteditor), the SwiftUI equivalent of `UITextView` to allow multi-line text editing. Unfortunately, there's no (straightforward) way of disabling scrolling, making it unsuitable for some designs where the text view is embedded in a separate scroll view. Additionally, the fact that it's not available at all on iOS 13 means layouts that require non-scrolling multi-line text editors must wrap `UITextView` themselves in order to be achievable with SwiftUI.
+
+<!-- excerpt-end -->
+
+You'd think this would be pretty simple: just use `UIViewRepresentable` with `UITextView` and disable scrolling. But if you try that approach, you'll find a few issues that make things a bit more complex. While setting the `isScrollEnabled` property on the text view to `false` does indeed disable scrolling and make the text view expand itself as more lines are typed, the text view does not entirely respect SwiftUI's layout system. Typing text that is larger than the available space causes the text view to expand outwards from the centerpoint, screwing up the layout, instead of wrapping the text onto the next line.
+
+<div>
+<%- video(metadata, "scroll-disabled", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a non-scrolling UITextView inside SwiftUI being edited. When the text view grows, it expands from the center point and ends up offscreen."}) %>
+</div>
+
+Enabling scrolling on the text view partially solves this, making the text wrap whenever the user types something longer than fits on a single line. Of course, this also reintroduces the problem that the text view now scrolls instead of expanding to fit the contents. The simplest solution I've come up with for this problem is to have the SwiftUI side of the layout automatically expand the text view's frame whenever the contents changes. So, even though the `UITextView` is allowed to scroll, it never will because the layout will ensure that the actual size of the view is always taller than the text's height. Additionally, with bouncing disabled, there's no indication from the user's perspective that this is anything other than a regular non-scrolling text view.
+
+Actually implementing this is pretty simple. There's a `UIViewRepresentable` which wraps the `UITextView` and plumbs a `Binding<String>` up to the text view. It also stores a closure that receives the `UITextView` which is invoked whenever the text changes, using the `UITextViewDelegate` method. This will allow the actual SwiftUI view to listen for text view changes and update the frame of the wrapped view.
+
+```swift
+import SwiftUI
+
+struct WrappedTextView: UIViewRepresentable {
+	typealias UIViewType = UITextView
+
+	@Binding var text: String
+	let textDidChange: (UITextView) -> Void
+
+	func makeUIView(context: Context) -> UITextView {
+		let view = UITextView()
+		view.isEditable = true
+		view.delegate = context.coordinator
+		return view
+	}
+
+	func updateUIView(_ uiView: UITextView, context: Context) {
+		uiView.text = self.text
+		DispatchQueue.main.async {
+			textDidChange(uiView)
+		}
+	}
+
+	func makeCoordinator() -> Coordinator {
+		return Coordinator(text: $text, textDidChange: textDidChange)
+	}
+
+	class Coordinator: NSObject, UITextViewDelegate {
+		@Binding var text: String
+		let textDidChange: (UITextView) -> Void
+
+		init(text: Binding<String>, textDidChange: @escaping (UITextView) -> Void) {
+			self._text = text
+			self.textDidChange = textDidChange
+		}
+
+		func textViewDidChange(_ textView: UITextView) {
+			self.text = textView.text
+			self.textDidChange(textView)
+		}
+	}
+}
+```
+
+One key line to note is that, in the `updateUIView` method, after the text is updated, the `textDidChange` closure is called. This is necessary because the `UITextView.text` setter does not call the delegate method automatically. So, if the text was changed programatically, the delegate method wouldn't be called and, in turn, the did-change callback wouldn't execute, preventing the height from updating. `DispatchQueue.main.async` is used to defer running updating the view height until the next runloop iteration for two reasons:
+
+1. So that we're not modifying view state during view updates, as that's undefined behavior in SwiftUI.
+2. Because the UITextView doesn't recalculate its content size immediately when the text is set.
+
+Waiting until the next runloop iteration solves both of those issues: the SwiftUI view updates will have finished and the text view will have recalculated its size.
+
+The wrapping SwiftUI view is pretty simple. It passes the string binding through to the wrapped view and it also stores its minimum height, as well as an internal `@State` variable for the current height of the text view. The text view height is an optional, because before the text view appears, there is no height.
+
+```swift
+struct ExpandingTextView: View {
+	@Binding var text: String
+	let minHeight: CGFloat = 150
+	@State private var textViewHeight: CGFloat?
+
+	var body: some View {
+		WrappedTextView(text: $text, textDidChange: self.textDidChange)
+			.frame(height: height ?? minHeight)
+	}
+
+	private func textDidChange(_ textView: UITextView) {
+		self.height = max(textView.contentSize.height, minHeight)
+	}
+}
+```
+
+Now, everything works correctly. The text view wraps text and expands to fit user input as expected, as well as updating its height when the content is altered in code.
+
+<div>
+<%- video(metadata, "custom-wrapper", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a custom text view inside SwiftUI. When the text changes, the scroll view does not overflow and the height expands to fit the content."}) %>
+</div>

site/tag.html.ejs

@@ -3,9 +3,9 @@ metadata.layout = "default.html.ejs"
 ```
 
 <div class="main">
-	<h1 class="page-heading"><%= category %> posts</h1>
+	<h1 class="page-heading"><%= tag %> posts</h1>
 	<p class="rss">
-		Subscribe to just <%= category %> posts via <a href="/<%= category %>/feed.xml">RSS</a>.
+		Subscribe to just <%= tag %> posts via <a href="/<%= tag %>/feed.xml">RSS</a>.
 	</p>
 
 	<% for (const post of posts) { %>

site/tutorials.html.ejs

@@ -1,5 +1,6 @@
 ```
 metadata.layout = "default.html.ejs"
+metadata.title = "Tutorials"
 ```
 
 <div class="main">