feat: rewrite templates using vento (#232)

eleventy.config.js

@@ -7,6 +7,8 @@ import pluginAutoCacheBuster from 'eleventy-auto-cache-buster';
 import pluginIcons from 'eleventy-plugin-icons';
 import pluginValidate from 'eleventy-plugin-validate';
 
+import { VentoPlugin } from 'eleventy-plugin-vento';
+
 import markdownLibrary from './config/markdown/core.js';
 
 import {
@@ -78,6 +80,7 @@ export default eleventy(function (eleventyConfig) {
 			},
 		],
 	});
+	eleventyConfig.addPlugin(VentoPlugin);
 
 	/* Passthrough Copy */
 	eleventyConfig.addPassthroughCopy({ 'public/': '.' });
@@ -123,11 +126,11 @@ export default eleventy(function (eleventyConfig) {
 		dir: {
 			input: 'src',
 			output: 'dist',
-			includes: '_includes',
-			layouts: '_layouts',
+			includes: 'components',
+			layouts: 'layouts',
 			data: '_data',
 		},
-		templateFormats: ['md', 'njk', '11ty.js'],
-		markdownTemplateEngine: 'njk',
+		templateFormats: ['md', 'vto', '11ty.js'],
+		markdownTemplateEngine: 'vto',
 	};
 });

package.json

@@ -27,6 +27,7 @@
 		"eleventy-auto-cache-buster": "^0.6.1",
 		"eleventy-plugin-icons": "^4.5.1",
 		"eleventy-plugin-validate": "^0.1.3",
+		"eleventy-plugin-vento": "^4.0.1",
 		"html-minifier": "^4.0.0",
 		"image-size": "^1.1.1",
 		"lightningcss": "^1.28.1",

src/components/postslist.vto

@@ -0,0 +1,33 @@
+{{ export function PostsList(posts) }}
+	{{- for index, post of posts -}}
+	<div class="{{ if index === 0 }}mt-0{{ else }}mx-0 my-8{{ /if }} no-underline">
+		<h2 class="font-semibold mx-0 my-0 text-xl leading-8" style="view-transition-name: post-{{ post.data.title |> slugify }}">
+			<a href="{{ post.url }}">{{ post.data.title }}</a>
+		</h2>
+		<div class="flex flex-row flex-wrap gap-2 lowercase my-2">
+		{{- if post.data.date -}}
+			<span>
+				{{ set date = post.data.date |> toShortDate }}
+				{{ set edited = post.data.edited |> toShortDate }}
+				<time datetime="{{ post.data.date }}">{{ date }}</time>
+				{{- if post.data.edited && (edited !== date) -}}
+					&nbsp;(last edited <time datetime="{{ post.data.edited }}">{{ edited }}</time>)
+				{{- /if -}}
+			</span>
+		{{- /if -}}
+		{{- if post.data.tags -}}
+			<span>&middot;</span>
+			<div class="flex flex-row flex-wrap space-x-1">
+				{{- for index, tag of post.data.tags -}}
+				<span>
+					<a href="/tags/{{ tag |> slugify }}">{{ tag }}</a>
+					{{- index != (post.data.tags.length - 1) ? ',' : '' -}}
+				</span>
+				{{- /for -}}
+			</div>
+		{{- /if -}}
+		</div>
+		<p class="mb-0 mt-1">{{ post.data.description }}</p>
+	</div>
+	{{- /for -}}
+{{ /export }}