Add support for essays

.eleventy.js

@@ -11,6 +11,11 @@ export default async function (config) {
 	config.addPassthroughCopy('src/assets/**/*');
 	config.addPassthroughCopy('src/fonts/**/*');
 
+	config.setFrontMatterParsingOptions({
+		excerpt: true,
+		excerpt_separator: '<!-- excerpt -->',
+	});
+
 	config.setServerOptions({
 		watch: ['src/styles/**/*.css'],
 	});

src/_includes/essay.njk

@@ -0,0 +1,21 @@
+{% extends "base.njk" %}
+
+{%- block title -%}
+<title>Z. Charles Dziura | Essay</title>
+{%- endblock -%}
+
+{%- block body -%}
+{%- import "header.njk" as header -%}
+{{ header.header(page='essay') }}
+<main>
+	<article class="essay">
+		<header>
+			<h1 class="title">{{ page.data.title }}</h1>
+			<span>Posted on {{ page.date | formatDate }}</span>
+		</header>
+		<div class="content">
+			{{ content | safe }}
+		</div>
+	</article>
+</main>
+{%- endblock -%}

src/_includes/header.njk

@@ -5,7 +5,7 @@
 	</hgroup>
 	<nav>
 		<a href="/" {% if page == 'home' -%}class="current"{%- endif -%}>Home</a>
-		{# <a href="#" {% if page == 'essays' -%}class="current"{%- endif -%}>Essays</a> #}
+		<a href="/essays" {% if page == 'essays' -%}class="current"{%- endif -%}>Essays</a>
 		<a href="/thoughts" {% if page == 'thoughts' -%}class="current"{%- endif -%}>Thoughts</a>
 	</nav>
 </header>

src/assets/document.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="000"><path d="M340-460h280v-64H340v64Zm0 120h280v-64H340v64Zm0 120h174v-64H340v64ZM263.72-96Q234-96 213-117.15T192-168v-624q0-29.7 21.15-50.85Q234.3-864 264-864h312l192 192v504q0 29.7-21.16 50.85Q725.68-96 695.96-96H263.72ZM528-624v-168H264v624h432v-456H528ZM264-792v168-168 624-624Z"/></svg>

src/essays.njk

@@ -0,0 +1,31 @@
+{% extends "base.njk" %}
+
+{%- block title -%}
+<title>Z. Charles Dziura | Weblog</title>
+{%- endblock -%}
+
+{%- block body -%}
+{%- import "header.njk" as header -%}
+
+{{ header.header(page='essays') }}
+
+<main>
+{%- for post in collections.essays | reverse -%}
+	<section class="thought">
+		<header>
+			<img class="hash" src="/assets/document.svg" type="image/svg+xml">
+			<span>{{ post.data.title }}</span>
+			<a href="{{ post.url }}" class="link">
+				<img src="/assets/link.svg" type="image/svg+xml">
+			</a>
+		</header>
+		<div class="content">
+			{{ post.page.excerpt | safe }}
+		</div>
+		<footer>
+			Posted on {{ post.date | formatDate }}
+		</footer>
+	</section>
+{%- endfor -%}
+</main>
+{%- endblock -%}

src/essays/2025/04/hacking-a-ttrpg.md

@@ -0,0 +1,14 @@
+---
+title: Hacking a TTRPG
+---
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet ante turpis. Pellentesque vitae diam euismod, venenatis magna eget, gravida eros. Suspendisse scelerisque justo sit amet magna tincidunt facilisis. Duis facilisis ligula et libero cursus, malesuada sollicitudin ex congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lobortis consequat consequat. Nam ac lacus in ipsum volutpat laoreet. Pellentesque pellentesque risus sit amet mi aliquam consequat. Curabitur dignissim urna tellus, sit amet porttitor sem scelerisque finibus. Etiam tortor velit, consectetur a libero ut, pretium porta quam. Curabitur et risus id leo pharetra elementum nec sit amet diam.
+
+<!-- excerpt -->
+
+Nam suscipit dui non urna venenatis dignissim. Aliquam malesuada sollicitudin leo sit amet tempus. Aenean elit mi, rutrum in cursus at, laoreet eget ex. Donec mollis dui neque, ut efficitur risus rutrum nec. Nullam et tellus libero. In blandit consectetur nisl id rhoncus. Curabitur nec orci et magna vestibulum hendrerit sit amet quis arcu. Nunc eget suscipit risus. Etiam ipsum erat, vestibulum quis est quis, pharetra tincidunt est. Vestibulum vitae mauris erat. Mauris non magna id neque consequat bibendum. Proin sodales rutrum felis. Vivamus laoreet nunc a sodales rutrum.
+
+Suspendisse fermentum sit amet nibh sed suscipit. Aliquam erat volutpat. Donec massa arcu, aliquam gravida euismod a, ultrices ac elit. Morbi consequat lectus quis vehicula pharetra. Proin maximus maximus elit ac porta. Nam gravida, quam nec maximus maximus, odio risus ullamcorper felis, vitae malesuada dui massa ut enim. Nulla scelerisque sagittis posuere. Praesent varius magna sed odio fringilla semper. Aliquam ligula massa, gravida at pulvinar vitae, hendrerit non lacus. Curabitur imperdiet turpis condimentum, viverra odio ac, venenatis justo. Nam sed accumsan tortor, vitae dictum velit. Ut vehicula urna tincidunt, lobortis tellus at, blandit eros. Proin risus elit, consectetur at ex id, lacinia malesuada justo.
+
+Donec ornare felis id pretium varius. Ut venenatis orci in risus facilisis varius. Ut urna quam, porttitor vitae malesuada at, tempor quis libero. Suspendisse lacinia, lectus imperdiet malesuada fermentum, quam urna volutpat lacus, in dapibus justo turpis pharetra orci. Nullam vel sem risus. Mauris ultrices accumsan magna, ac tempus quam pretium vitae. Duis risus justo, tincidunt vestibulum aliquet ut, condimentum vitae sapien. Maecenas iaculis et urna quis consectetur.
+
+Suspendisse non ullamcorper lorem, a mattis justo. Aenean aliquam condimentum gravida. Pellentesque nec vehicula sapien. Duis posuere massa vel hendrerit congue. Fusce fringilla sollicitudin mauris in dictum. Cras faucibus tellus at dictum dictum. Etiam eu egestas elit, a porttitor quam. Integer sit amet dignissim diam. Curabitur quis mauris consequat, tristique tellus quis, sagittis tellus. Praesent sed porttitor nisl. Quisque nisi ipsum, interdum sit amet tempor ut, tincidunt ac arcu. Fusce efficitur ullamcorper pharetra. Nullam vitae pharetra nisi.

src/essays/essays.11tydata.js

@@ -0,0 +1,17 @@
+import { DateTime } from 'luxon';
+
+export default {
+	date: 'git Created',
+	tags: 'essays',
+	type: 'essay',
+	layout: 'essay.njk',
+	permalink: function ({ page }) {
+		const { date, fileSlug, outputFileExtension } = page;
+		const today = DateTime.fromJSDate(date).toUTC();
+
+		return `/essays/${today.year}/${String(today.month).padStart(2, '0')}/${String(today.day).padStart(
+			2,
+			'0'
+		)}/${fileSlug}.${outputFileExtension}`;
+	},
+};

src/index.njk

@@ -27,6 +27,22 @@
 			Posted on {{ post.date | formatDate }}
 		</footer>
 	</section>
+{%- elif post.data.type == "essay" -%}
+	<section class="thought">
+		<header>
+			<img class="hash" src="/assets/document.svg" type="image/svg+xml">
+			<span>{{ post.data.title }}</span>
+			<a href="{{ post.url }}" class="link">
+				<img src="/assets/link.svg" type="image/svg+xml">
+			</a>
+		</header>
+		<div class="content">
+			{{ post.page.excerpt | safe }}
+		</div>
+		<footer>
+			Posted on {{ post.date | formatDate }}
+		</footer>
+	</section>
 {%- endif -%}
 {%- endfor -%}
 </main>

src/styles.css

@@ -121,3 +121,13 @@ main > .thought > footer {
 	color: var(--color-on-bg);
 	padding: var(--size-md);
 }
+
+main > .essay {
+	align-self: flex-start;
+	margin-top: var(--size-md);
+}
+
+main > .essay > header > .title {
+	font-weight: 300;
+	margin-top: 0;
+}