⬆️ Upgrade docs/ dependencies and migrate to elevently v3

- Convert .eleventy.js to eleventy.config.mjs (ESM) since
  @11ty/eleventy-plugin-rss@3.0.0 is ESM-only
- Replace search-index.json.njk with search-index.json.11ty.js
  to avoid async templateContent access in Nunjucks filters
- Update feed.njk to use new RSS plugin v3 filter names:
  rssLastUpdatedDate -> getNewestCollectionItemDate | dateToRfc3339
  rssDate -> dateToRfc3339
- Add 11ty.js to templateFormats for search index generation

docs/.eleventy.js

@@ -1,147 +0,0 @@
-const { DateTime } = require("luxon");
-const fs = require("fs");
-const pluginNavigation = require("@11ty/eleventy-navigation");
-const pluginRss = require("@11ty/eleventy-plugin-rss");
-const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const pluginAncestry = require("@tigersway/eleventy-plugin-ancestry");
-const metagen = require('eleventy-plugin-metagen');
-const pluginTOC = require('eleventy-plugin-nesting-toc');
-const markdownIt = require("markdown-it");
-const markdownItAnchor = require("markdown-it-anchor");
-const markdownItPlantUML = require("markdown-it-plantuml");
-const elasticlunr = require("elasticlunr");
-
-
-module.exports = function(eleventyConfig) {
-  eleventyConfig.addPlugin(pluginNavigation);
-  eleventyConfig.addPlugin(pluginRss);
-  eleventyConfig.addPlugin(pluginSyntaxHighlight);
-  eleventyConfig.addPlugin(pluginAncestry);
-  eleventyConfig.addPlugin(metagen);
-  eleventyConfig.addPlugin(pluginTOC, {
-    tags: ['h1', 'h2', 'h3']
-  });
-
-  eleventyConfig.setDataDeepMerge(true);
-
-  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
-
-  eleventyConfig.addFilter("readableDate", dateObj => {
-    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
-  });
-
-  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
-    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
-  });
-
-  // Remove trailing # in automatic generated toc, because of
-  // anchors added at the end of the titles.
-  eleventyConfig.addFilter('stripHash', (toc) => {
-    return toc.replace(/ #\<\/a\>/g, "</a>");
-  });
-
-  // Get the first `n` elements of a collection.
-  eleventyConfig.addFilter("head", (array, n) => {
-    if( n < 0 ) {
-      return array.slice(n);
-    }
-
-    return array.slice(0, n);
-  });
-
-  // Get the lowest in a list of numbers.
-  eleventyConfig.addFilter("min", (...numbers) => {
-    return Math.min.apply(null, numbers);
-  });
-
-  // Build a search index
-  eleventyConfig.addFilter("search", (collection) => {
-    // What fields we'd like our index to consist of
-    // TODO: remove html tags from content
-    var index = elasticlunr(function () {
-      this.addField("title");
-      this.addField("content");
-      this.setRef("id");
-    });
-
-    // loop through each page and add it to the index
-    collection.forEach((page) => {
-      index.addDoc({
-        id: page.url,
-        title: page.template.frontMatter.data.title,
-        content: page.template.frontMatter.content,
-      });
-    });
-
-    return index.toJSON();
-  });
-
-  eleventyConfig.addPassthroughCopy("img");
-  eleventyConfig.addPassthroughCopy("css");
-  eleventyConfig.addPassthroughCopy("js");
-
-  // Redirects (for Cloudflare)
-  eleventyConfig.addPassthroughCopy({"_redirects": "_redirects" });
-
-  /* Markdown Overrides */
-  let markdownLibrary = markdownIt({
-    html: true,
-    breaks: false,
-    linkify: true
-  }).use(markdownItAnchor, {
-    permalink: true,
-    permalinkClass: "direct-link",
-    permalinkSymbol: "#"
-  }).use(markdownItPlantUML, {
-  });
-  eleventyConfig.setLibrary("md", markdownLibrary);
-
-  // Browsersync Overrides
-  eleventyConfig.setBrowserSyncConfig({
-    callbacks: {
-      ready: function(err, browserSync) {
-        const content_404 = fs.readFileSync('_dist/404.html');
-
-        browserSync.addMiddleware("*", (req, res) => {
-          // Provides the 404 content without redirect.
-          res.write(content_404);
-          res.end();
-        });
-      },
-    },
-    ui: false,
-    ghostMode: false
-  });
-
-  return {
-    templateFormats: [
-      "md",
-      "njk",
-      "html",
-      "liquid"
-    ],
-
-    // If your site lives in a different subdirectory, change this.
-    // Leading or trailing slashes are all normalized away, so don’t worry about those.
-
-    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
-    // This is only used for link URLs (it does not affect your file structure)
-    // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
-
-    // You can also pass this in on the command line using `--pathprefix`
-    // pathPrefix: "/",
-
-    markdownTemplateEngine: "liquid",
-    htmlTemplateEngine: "njk",
-    dataTemplateEngine: "njk",
-
-    // These are all optional, defaults are shown:
-    dir: {
-      input: ".",
-      includes: "_includes",
-      data: "_data",
-      output: "_dist"
-    }
-  };
-};

docs/eleventy.config.mjs

@@ -0,0 +1,122 @@
+import { DateTime } from "luxon";
+import fs from "fs";
+import pluginNavigation from "@11ty/eleventy-navigation";
+import pluginRss from "@11ty/eleventy-plugin-rss";
+import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import pluginAncestry from "@tigersway/eleventy-plugin-ancestry";
+import metagen from "eleventy-plugin-metagen";
+import pluginTOC from "eleventy-plugin-nesting-toc";
+import markdownIt from "markdown-it";
+import markdownItAnchor from "markdown-it-anchor";
+import markdownItPlantUML from "markdown-it-plantuml";
+export default function (eleventyConfig) {
+  eleventyConfig.addPlugin(pluginNavigation);
+  eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(pluginSyntaxHighlight);
+  eleventyConfig.addPlugin(pluginAncestry);
+  eleventyConfig.addPlugin(metagen);
+  eleventyConfig.addPlugin(pluginTOC, {
+    tags: ["h1", "h2", "h3"],
+  });
+
+  eleventyConfig.setDataDeepMerge(true);
+
+  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
+
+  eleventyConfig.addFilter("readableDate", (dateObj) => {
+    return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(
+      "dd LLL yyyy",
+    );
+  });
+
+  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+  eleventyConfig.addFilter("htmlDateString", (dateObj) => {
+    return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(
+      "yyyy-LL-dd",
+    );
+  });
+
+  // Remove trailing # in automatic generated toc, because of
+  // anchors added at the end of the titles.
+  eleventyConfig.addFilter("stripHash", (toc) => {
+    return toc.replace(/ #\<\/a\>/g, "</a>");
+  });
+
+  // Get the first `n` elements of a collection.
+  eleventyConfig.addFilter("head", (array, n) => {
+    if (n < 0) {
+      return array.slice(n);
+    }
+
+    return array.slice(0, n);
+  });
+
+  // Get the lowest in a list of numbers.
+  eleventyConfig.addFilter("min", (...numbers) => {
+    return Math.min.apply(null, numbers);
+  });
+
+  eleventyConfig.addPassthroughCopy("img");
+  eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addPassthroughCopy("js");
+
+  // Redirects (for Cloudflare)
+  eleventyConfig.addPassthroughCopy({ _redirects: "_redirects" });
+
+  /* Markdown Overrides */
+  let markdownLibrary = markdownIt({
+    html: true,
+    breaks: false,
+    linkify: true,
+  })
+    .use(markdownItAnchor, {
+      permalink: true,
+      permalinkClass: "direct-link",
+      permalinkSymbol: "#",
+    })
+    .use(markdownItPlantUML, {});
+  eleventyConfig.setLibrary("md", markdownLibrary);
+
+  // Browsersync Overrides
+  eleventyConfig.setBrowserSyncConfig({
+    callbacks: {
+      ready: function (err, browserSync) {
+        const content_404 = fs.readFileSync("_dist/404.html");
+
+        browserSync.addMiddleware("*", (req, res) => {
+          // Provides the 404 content without redirect.
+          res.write(content_404);
+          res.end();
+        });
+      },
+    },
+    ui: false,
+    ghostMode: false,
+  });
+
+  return {
+    templateFormats: ["md", "njk", "html", "liquid", "11ty.js"],
+
+    // If your site lives in a different subdirectory, change this.
+    // Leading or trailing slashes are all normalized away, so don't worry about those.
+
+    // If you don't have a subdirectory, use "" or "/" (they do the same thing)
+    // This is only used for link URLs (it does not affect your file structure)
+    // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
+
+    // You can also pass this in on the command line using `--pathprefix`
+    // pathPrefix: "/",
+
+    markdownTemplateEngine: "liquid",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+
+    // These are all optional, defaults are shown:
+    dir: {
+      input: ".",
+      includes: "_includes",
+      data: "_data",
+      output: "_dist",
+    },
+  };
+}

docs/feed/feed.njk

@@ -10,7 +10,7 @@ eleventyExcludeFromCollections: true
 	{% set absoluteUrl %}{{ metadata.feed.path | url | absoluteUrl(metadata.url) }}{% endset %}
 	<link href="{{ absoluteUrl }}" rel="self"/>
 	<link href="{{ metadata.url }}"/>
-	<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
+	<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
 	<id>{{ metadata.feed.id }}</id>
 	<author>
 		<name>{{ metadata.author.name }}</name>
@@ -21,7 +21,7 @@ eleventyExcludeFromCollections: true
 	<entry>
 		<title>{{ post.data.title }}</title>
 		<link href="{{ absolutePostUrl }}"/>
-		<updated>{{ post.date | rssDate }}</updated>
+		<updated>{{ post.date | dateToRfc3339 }}</updated>
 		<id>{{ absolutePostUrl }}</id>
 		<content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
 	</entry>

docs/package.json

@@ -24,12 +24,12 @@
   },
   "homepage": "https://docs.penpot.app",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy": "^3.1.6",
-    "@11ty/eleventy-navigation": "^0.3.5",
+    "@11ty/eleventy-navigation": "^1.0.5",
-    "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@11ty/eleventy-plugin-rss": "^3.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@tigersway/eleventy-plugin-ancestry": "^1.0.3",
-    "@types/markdown-it": "14.1.0",
+    "@types/markdown-it": "14.1.2",
     "elasticlunr": "^0.9.5",
     "eleventy-plugin-metagen": "^1.8.3",
     "eleventy-plugin-nesting-toc": "^1.3.0",
@@ -39,5 +39,5 @@
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-plantuml": "^1.4.1"
   },
-  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
+  "packageManager": "pnpm@11.7.0+sha512.19cc852c120c7125760f2443ee6be0ca5b40f9f50598de1a09a1f177503e010e57c23c77646e01e761de59bf874fb22a3398c33ab9691fc13eb946b6f0f4d620"
 }

docs/search-index.json.11ty.js

@@ -0,0 +1,30 @@
+const elasticlunr = require("elasticlunr");
+
+module.exports = {
+  permalink: "/search-index.json",
+  eleventyExcludeFromCollections: true,
+  eleventyComputed: {},
+  async data() {
+    return {
+      permalink: "/search-index.json",
+      eleventyExcludeFromCollections: true,
+    };
+  },
+  async render({ collections }) {
+    var index = elasticlunr(function () {
+      this.addField("title");
+      this.addField("content");
+      this.setRef("id");
+    });
+
+    collections.all.forEach((page) => {
+      index.addDoc({
+        id: page.url,
+        title: page.data.title,
+        content: page.templateContent,
+      });
+    });
+
+    return JSON.stringify(index.toJSON());
+  },
+};

docs/search-index.json.njk

@@ -1,6 +0,0 @@
----
-permalink: /search-index.json
----
-
-{{ collections.all | search | dump | safe }}
-