Upgrade to Eleventy 3.0.0

.eleventy.js

@@ -1,12 +1,17 @@
-module.exports = function(eleventyConfig) { 
+import UpgradeHelper from "@11ty/eleventy-upgrade-help";
-    // Configure passthrough copies, file ops
+
-    eleventyConfig.addPlugin(require('./config/files'));
+import files from './config/files/index.js';
-    // Setup plugins
+import plugins from './config/plugins/index.js';
-    eleventyConfig.addPlugin(require('./config/plugins'));
+import filters from './config/filters/index.js';
-    // Custom filters and shortcodes
+import collections from './config/collections/index.js';
-    eleventyConfig.addPlugin(require('./config/filters'));
+
-    // Custom collections
+export default function(eleventyConfig) { 
-    eleventyConfig.addPlugin(require('./config/collections'));
+    eleventyConfig.addPlugin(UpgradeHelper);
+
+    eleventyConfig.addPlugin(files);
+    eleventyConfig.addPlugin(plugins);
+    eleventyConfig.addPlugin(filters);
+    eleventyConfig.addPlugin(collections);
 
     return {
         passthroughFileCopy: true,

config/collections/index.js

@@ -1,7 +1,7 @@
-const tags = require('./tags');
+import tags from './tags.js';
-const posts = require('./posts');
+import posts from './posts.js';
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
     eleventyConfig.addPlugin(tags);
     eleventyConfig.addPlugin(posts);
 }

config/collections/posts.js

@@ -1,4 +1,4 @@
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
     eleventyConfig.addCollection('posts',collectionApi => 
         collectionApi.getFilteredByTag("posts")
             .filter(p => process.env.DEBUG || !p.data.tags.includes("draft"))

config/collections/tags.js

@@ -1,4 +1,4 @@
-module.exports = (eleventyConfig) => {
+export default function (eleventyConfig) {
     eleventyConfig.addCollection('tags', (collectionApi) => {
         const tags = new Set();
         collectionApi.getFilteredByTag("posts")

config/files/index.js

@@ -1,4 +1,4 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	if (process.env.NODE_ENV !== "development") {
 		eleventyConfig.ignores.add("src/posts/drafts/*");
 	}

config/filters/arrays.js

@@ -1,3 +1,3 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
     eleventyConfig.addFilter('take', (list, n) => list.slice(0, n));
 }

config/filters/dates.js

@@ -1,4 +1,4 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
   eleventyConfig.addFilter('parseDate', dateString => new Date(dateString));
 
   eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {

config/filters/excerpt.js

@@ -8,7 +8,7 @@ const createExcerpt = (post, limit ) => {
         }
         return withoutTags;
 }
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
     eleventyConfig.addFilter('excerpt', (post, limit = 250) => {
         return post.data.excerpt || createExcerpt(post, limit);
     });

config/filters/filterBy.js

@@ -1,4 +1,4 @@
-module.exports = (eleventyConfig) => {
+export default (eleventyConfig) => {
     eleventyConfig.addFilter('filterBy', (collection, value) => {
         return collection.filter((item) => {
             return item.data.tags.includes(value);

config/filters/getPost.js

@@ -1,4 +1,4 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
     eleventyConfig.addFilter('metricsToPosts', function(metrics, posts) {
         return metrics.map(metric => posts.find(post => post.url === metric.post));
     })

config/filters/index.js

@@ -1,10 +1,10 @@
-const dateFilters = require('./dates');
+import dateFilters from './dates.js';
-const arrayFilters = require('./arrays');
+import arrayFilters from './arrays.js';
-const excerptFilter = require('./excerpt');
+import excerptFilter from './excerpt.js';
-const filterBy = require('./filterBy')
+import filterBy from './filterBy.js';
-const getPost = require('./getPost');
+import getPost from './getPost.js';
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
     eleventyConfig.addPlugin(dateFilters);
     eleventyConfig.addPlugin(arrayFilters);
     eleventyConfig.addPlugin(excerptFilter);

config/plugins/image.js

@@ -1,4 +1,4 @@
-const Image = require('@11ty/eleventy-img');
+import Image from "@11ty/eleventy-img";
 
 const defaultSizes = `
     (max-width: 300px) 300px,
@@ -48,7 +48,7 @@ const remoteImageShortcode = async (src, alt, cls, sizes = defaultSizes, widths
       // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
       return Image.generateHTML(metadata, imageAttributes);
 }
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addShortcode("image", imageShortcode);
     eleventyConfig.addAsyncShortcode("remoteImage", remoteImageShortcode);
 }

config/plugins/index.js

@@ -1,11 +1,11 @@
-const { EleventyRenderPlugin } = require("@11ty/eleventy");
+import { EleventyRenderPlugin  } from "@11ty/eleventy";
-const markdownPlugin = require('./markdown');
+import markdownPlugin from "./markdown.js";
-const rss = require('@11ty/eleventy-plugin-rss');
+import rss from "@11ty/eleventy-plugin-rss";
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
-const imagePlugin = require('./image');
+import imagePlugin from "./image.js";
-const ogImagePlugin = require('./og-image');
+import ogImagePlugin from "./og-image.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(syntaxHighlight);
 	eleventyConfig.addPlugin(rss);
 	eleventyConfig.addPlugin(markdownPlugin);

config/plugins/markdown.js

@@ -1,18 +1,19 @@
-const path = require("path");
+import path from "node:path";
+import fs from "node:fs";
+import markdownIt from 'markdown-it';
+import markdownItPrism from 'markdown-it-prism';
+import markdownItAnchor from 'markdown-it-anchor';
+import markdownItClass from '@toycode/markdown-it-class';
+import markdownItLinkAttributes from 'markdown-it-link-attributes';
+import { full as markdownItEmoji } from 'markdown-it-emoji';
+import markdownItFootnote from 'markdown-it-footnote';
+import markdownitMark from 'markdown-it-mark';
+import markdownitAbbr from 'markdown-it-abbr';
+import markdownItEleventyImg from 'markdown-it-eleventy-img';
+import markdownItCallouts from 'markdown-it-obsidian-callouts';
+import { slugifyString } from '../utils.js';
 
-const markdownIt = require('markdown-it');
+const icons = JSON.parse(fs.readFileSync('./config/plugins/icons.json'), 'utf-8');
-const markdownItPrism = require('markdown-it-prism');
-const markdownItAnchor = require('markdown-it-anchor');
-const markdownItClass = require('@toycode/markdown-it-class');
-const markdownItLinkAttributes = require('markdown-it-link-attributes');
-const markdownItEmoji = require('markdown-it-emoji');
-const markdownItFootnote = require('markdown-it-footnote');
-const markdownitMark = require('markdown-it-mark');
-const markdownitAbbr = require('markdown-it-abbr');
-const markdownItEleventyImg = require('markdown-it-eleventy-img');
-const markdownItCallouts = require('markdown-it-obsidian-callouts');
-const icons = require('./icons.json');
-const { slugifyString } = require('../utils');
 
 const markdownLib = markdownIt({
 	html: true,
@@ -68,11 +69,11 @@ const markdownLib = markdownIt({
 		}
 	});
 
-	markdownLib.renderer.rules.emoji = function(token, idx) {
+markdownLib.renderer.rules.emoji = function(token, idx) {
 	return `<span class="fa-li"><i class="fa-solid fa-${token[idx].markup}" aria-hidden="true"></i></span>`;
-	};
+};
 
-  module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addFilter('md', content => content ? markdownLib.render(content) : "");
 	eleventyConfig.setLibrary('md', markdownLib);
-  };
+}

config/plugins/og-image.js

@@ -1,7 +1,7 @@
-const ogImagePlugin = require('eleventy-plugin-og-image');
+import fs from 'node:fs';
-const fs = require('node:fs');
+import ogImagePlugin from 'eleventy-plugin-og-image';
 
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
     eleventyConfig.addPlugin(ogImagePlugin, {
 		satoriOptions: {
 			fonts: [

config/utils.js

@@ -1,7 +1,6 @@
-const slugify = require('slugify');
+import slugify from 'slugify';
-
 /** Converts string to a slug form. */
-const slugifyString = str => {
+export const slugifyString = str => {
 	return slugify(str, {
 	  replacement: '-',
 	  remove: /[#,&,+()$~%.'":*?<>{}]/g,
@@ -9,6 +8,6 @@ const slugifyString = str => {
 	});
   };
   
-  module.exports = {
+export default {
 	  slugifyString
   }

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "build": "npm run build:props && npm run build:css && npm run build:eleventy",
     "build:props": "node scripts/custom-props.js",
@@ -18,23 +19,24 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0",
+    "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-fetch": "^3.0.0",
-    "@11ty/eleventy-img": "^3.0.0",
+    "@11ty/eleventy-img": "^5.0.0",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@lewisdale/blog-post-cli": "^1.0.2",
     "@toycode/markdown-it-class": "^1.2.4",
     "autoprefixer": "^10.4.13",
     "cssnano": "^6.0.1",
     "glob": "^10.3.10",
     "lodash": "^4.17.21",
-    "markdown-it-abbr": "^1.0.4",
+    "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^8.6.6",
+    "markdown-it-abbr": "^2.0.0",
-    "markdown-it-eleventy-img": "^0.10.1",
+    "markdown-it-anchor": "^9.2.0",
-    "markdown-it-emoji": "^2.0.2",
+    "markdown-it-eleventy-img": "^0.10.2",
-    "markdown-it-footnote": "^3.0.3",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-footnote": "^4.0.0",
     "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-mark": "^3.0.1",
+    "markdown-it-mark": "^4.0.0",
     "markdown-it-obsidian-callouts": "^0.2.6",
     "markdown-it-prism": "^2.3.0",
     "npm-run-all": "^4.1.5",
@@ -44,10 +46,11 @@
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-nested": "^6.0.0",
     "prettier": "^2.8.3",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.4.13"
   },
   "devDependencies": {
-    "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@11ty/eleventy-plugin-rss": "^2.0.2",
-    "eleventy-plugin-og-image": "^2.1.1"
+    "@11ty/eleventy-upgrade-help": "^3.0.1",
+    "eleventy-plugin-og-image": "^4.0.0"
   }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		'postcss-import-ext-glob': {},
 		'postcss-import': {},

scripts/custom-props.js

@@ -1,6 +1,6 @@
-const fs = require('node:fs');
+import fs from 'node:fs';
-const prettier = require('prettier');
+import prettier from 'prettier';
-const config = require('../tailwind.config.js');
+import config from '../tailwind.config.js';
 
 const groupToPrefix = (group, prefix) => {
     return Object.entries(group).map(([key, value]) => {
@@ -64,4 +64,4 @@ const generateCSSProps = () => {
 };
 
 generateCSSProps();
-module.exports = generateCSSProps;
+export default generateCSSProps;

src/_data/_postData.js

@@ -1,110 +0,0 @@
-const fs = require('fs');
-const merge = require('lodash/merge')
-
-const wordpressPassword = process.env.WORDPRESS_PASSWORD;
-const auth = Buffer.from(`lewis:${wordpressPassword}`).toString('base64');
-
-class PostCache {
-	constructor() {
-		this.readCache();
-	}
-
-	readCache() {
-		if (!fs.existsSync(".cache")) {
-			fs.mkdirSync(".cache");
-		}
-		
-		if (!fs.existsSync(".cache/wordpress_post_fetch.json")) {
-			this.last_read_date = null;
-			this.posts = {};
-		} else {
-			const data = JSON.parse(fs.readFileSync(".cache/wordpress_post_fetch.json"));
-			this.last_read_date = new Date(data.last_read_date);
-			this.posts = data.posts;
-		}
-	}
-
-	writeCache() {
-		fs.writeFileSync(".cache/wordpress_post_fetch.json", JSON.stringify(this, null, 2));
-	}
-
-	async fetchCommentsByType(type = "comment") {
-		const params = new URLSearchParams();
-		params.set("per_page", 100);
-		params.set("type", type);
-
-		if (this.last_read_date) {
-			params.set("modified_after", this.last_read_date.toISOString());
-		}
-
-		const response = await fetch(`https://cms.lewisdale.dev/wp-json/wp/v2/comments?${params.toString()}`, {
-			headers: {
-				"Authorization": `Basic ${auth}`
-			}
-		});
-		return await response.json()
-	}
-
-	async fetchComments() {
-		const likes = await this.fetchCommentsByType("like");
-		const mentions = await this.fetchCommentsByType();
-		const reposts = await this.fetchCommentsByType("repost");
-		
-		const comments = [...likes, ...mentions, ...reposts];
-
-		comments.forEach(comment => {
-			if (this.posts[comment.post]) {
-				this.posts[comment.post].comments[comment.id] = comment;
-			}
-		});
-	}
-
-	async fetchPosts() {
-		const params = new URLSearchParams();
-		params.set("per_page", 100);
-
-		if (this.last_read_date) {
-			params.set("modified_after", this.last_read_date.toISOString());
-		}
-
-		const response = await fetch(`https://cms.lewisdale.dev/wp-json/wp/v2/posts?${params.toString()}`, {
-			headers: {
-				"Authorization": `Basic ${auth}`
-			}
-		});
-		const posts = await response.json();
-
-		posts.forEach(post => {
-			this.posts[post.id] = merge({ comments: {} }, this.posts[post.id], post);
-		});
-	}
-
-	async fetchLatest() {
-		await this.fetchPosts();
-		await this.fetchComments();
-		await this.fetchTags();
-
-		this.last_read_date = new Date();
-		this.writeCache();
-	}
-
-	async fetchTags() {
-		const params = new URLSearchParams();
-		params.set("per_page", 100);
-
-		const response = await fetch(`https://cms.lewisdale.dev/wp-json/wp/v2/tags?${params.toString()}`, {
-			headers: {
-				"Authorization": `Basic ${auth}`
-			}
-		});
-		const tags = await response.json();
-		this.tags = tags.reduce((tagMap, tag) => ({...tagMap, [tag.id]: tag }), {});
-	}
-}
-
-const cache = new PostCache();
-
-// module.exports = async function() {
-//     await cache.fetchLatest();
-//     return cache;
-// }

src/_data/dev.js

@@ -1 +1 @@
-module.exports = process.env.ELEVENTY_RUN_MODE !== 'build';
+export default process.env.ELEVENTY_RUN_MODE !== 'build';

src/_data/links.js

@@ -1,4 +1,5 @@
-const fs = require('node:fs');
+import fs from 'node:fs';
+
 const apiKey = process.env.OMNIVORE_API_KEY;
 const cacheFile = '.cache/links.json';
 
@@ -89,6 +90,6 @@ const fetchLatest = async (cache = []) => {
     return cache;
 }
 
-module.exports = async function() {
+export default async function() {
     return await fetchLatest(cachedContent());
 }

src/_data/postMetrics.js

@@ -1,11 +1,11 @@
-const EleventyFetch = require("@11ty/eleventy-fetch");
+import EleventyFetch from '@11ty/eleventy-fetch';
 
 const siteId = "4f1be7ef-7fb4-4b08-81f1-68fb807a3063";
 const apiKey = process.env.UMAMI_API_KEY;
 
 const postRegex = /^\/post\//;
 
-module.exports = async function(arg) {
+export default async function(arg) {
     const url = new URL(`https://umami.lewisdale.dev/api/websites/${siteId}/metrics`);
     url.searchParams.append("startAt", 0);
     url.searchParams.append("endAt", Date.now());

src/_data/today.js

@@ -1,6 +1,6 @@
 const today = new Date();
 
-module.exports = {
+export default {
     year: today.getFullYear(),
     month: today.getMonth(),
     day: today.getDate() + 1,

src/_includes/base.njk

@@ -42,7 +42,7 @@
 		<meta name="description" content="{{ excerpt if excerpt else description }}">
 		<meta name="fediverse:creator" content="@lewis@social.lol" />
 		
-		{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
+		{% ogImage "./_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
 
 		{% if not dev %}
 		<script defer src="https://umami.lewisdale.dev/script.js" data-website-id="4f1be7ef-7fb4-4b08-81f1-68fb807a3063"></script>

src/blog/posts/posts.11tydata.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     tags: ['posts'],
     layout: 'post.njk',
     permalink: "/post/{{ data.slug if data.slug else title | slugify  }}/",

src/now.11tydata.js

@@ -1,8 +1,8 @@
-const EleventyFetch = require("@11ty/eleventy-fetch");
+import EleventyFetch from "@11ty/eleventy-fetch";
 
-module.exports = {
+export default{
     eleventyComputed: {
-        content: async () => {
+        nowContent: async () => {
             // Retrieve the /now page from the server
             const body = await EleventyFetch("https://api.omg.lol/address/lewis/now", {
                 type: 'json',

src/now.md

@@ -3,4 +3,4 @@ title: My /now page
 layout: page.njk
 ---
 
-{{ content | safe }}
+{{ nowContent | safe }}

tailwind.config.js

@@ -1,8 +1,8 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import defaultTheme from 'tailwindcss/defaultTheme.js';
-const colors = require('tailwindcss/colors');
+import colors from 'tailwindcss/colors.js';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
 	mode: 'jit',
 	content: ["./src/**/*.{md,njk,html}"],
 	theme: {