npm: Update to Eleventy 3.x

The main changes are that ESM modules are now supported, so on top of switching the syntax for imports/exports, "package" is now a keyword and some of their uses needed to be changed in the configuration file. The "baseHtmlUrl" filter is now named "htmlBaseUrl". While at it, the uneeded "arrayLength" filter was removed, in favor of using .length directly on arrays. Also the unused "recentReleaseNotes" collection was removed.
Igalia · Nov 27, 2024 · 9310d1c · 9310d1c
1 parent 070d7ad
commit 9310d1c
Show file tree

Hide file tree

Showing 7 changed files with 985 additions and 975 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,11 +1,14 @@
-const MarkdownIt = require("markdown-it");
-const MarkdownItAnchor = require("markdown-it-anchor");
-const MarkdownItTOC = require("markdown-it-toc-done-right");
-const EleventyNavigation = require("@11ty/eleventy-navigation");
-const EleventySyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const { DateTime } = require("luxon");
-const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
-const PosixPath = require("node:path").posix;
+import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
+import EleventyNavigation from "@11ty/eleventy-navigation";
+import EleventyRSS from "@11ty/eleventy-plugin-rss";
+import EleventySyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+
+import MarkdownIt from "markdown-it";
+import MarkdownItAnchor from "markdown-it-anchor";
+import MarkdownItTOC from "markdown-it-toc-done-right";
+
+import { DateTime } from "luxon";
+import { posix as PosixPath } from "node:path";
 
 class DefaultDict {
   constructor(defaultValue) {
@@ -15,7 +18,6 @@ class DefaultDict {
   }
 }
 
-const pluginRss = require("@11ty/eleventy-plugin-rss");
 const endSlashRe = /\/$/;
 
 function findSitemapEntries(collection, curPath = "/") {
@@ -43,17 +45,17 @@ function findSitemapEntries(collection, curPath = "/") {
   return pages.sort((a, b) => (a.order || 0) - (b.order || 0));
 }
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy('css')
   eleventyConfig.addPassthroughCopy('js')
   eleventyConfig.addPassthroughCopy('vendor')
   eleventyConfig.addPassthroughCopy('assets')
   eleventyConfig.addPassthroughCopy('release/verify/*.key')
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
   eleventyConfig.addPlugin(EleventyNavigation);
+  eleventyConfig.addPlugin(EleventyRSS);
   eleventyConfig.addPlugin(EleventySyntaxHighlight);
-  eleventyConfig.addPlugin(pluginRss);
-
+
   eleventyConfig.setLiquidOptions({
     dynamicPartials: false,
     strictFilters: false, // renamed from `strict_filters` in Eleventy 1.0
@@ -68,9 +70,6 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addFilter("isodate", (value) => {
     return new Date(value).toISOString();
   });
-  eleventyConfig.addFilter("arrayLength", (value) => {
-    return value.length;
-  });
   eleventyConfig.addFilter('topLevel', (path) => {
     if (path == "/") return "/";
     return path.match(/^(.+?\/)/)[1];
@@ -93,13 +92,6 @@ module.exports = function(eleventyConfig) {
     });
   })
 
-  eleventyConfig.addCollection("recentReleaseNotes", (collectionApi) => {
-    let i =0;
-    return collectionApi.getFilteredByTag("release").reverse().filter((item) => {
-      return i++ < 5;
-    });
-  })
-
   eleventyConfig.addCollection("recentWSAs", (collectionApi) => {
     let i = 0;
     return collectionApi.getFilteredByTag("WSA").reverse().filter((item) => {
@@ -110,7 +102,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addCollection("pkgCatalog", collection => {
     let pkgCatalog = new Object;
     collection.getAll().forEach(item => {
-      let thisPkg = item.data.package;
+      let thisPkg = item.data["package"];
       if (!thisPkg) return;
       if (!pkgCatalog[thisPkg]) pkgCatalog[thisPkg] = {
         latestStable: new Object,
@@ -148,27 +140,27 @@ module.exports = function(eleventyConfig) {
     const makeFilter = function () {
       let seenPackages = new DefaultDict(false);
       return (item) => {
-        const package = item.data.package;
+        const pkg = item.data["package"];
 
-        if (seenPackages[package])
+        if (seenPackages[pkg])
           return false;
 
-        seenPackages[package] = true;
+        seenPackages[pkg] = true;
         return true;
       };
     };
 
     const gatherLatest = function (result, kind) {
       for (let item of collectionApi.getFilteredByTags("release", kind).reverse().filter(makeFilter())) {
-        const package = item.data.package;
-        if (package === undefined)
+        const pkg = item.data["package"];
+        if (pkg === undefined)
           continue;
-        if (result[package] === undefined)
-          result[package] = {};
-        result[package][kind] = {
+        if (result[pkg] === undefined)
+          result[pkg] = {};
+        result[pkg][kind] = {
           version: item.data.version,
           date: item.date,
-          package: package,
+          package: pkg,
           kind: kind,
           url: item.url,
         };
@@ -189,18 +181,18 @@ module.exports = function(eleventyConfig) {
   })
 
   eleventyConfig.setLibrary("md", MarkdownIt({
-    typographer: true,
-    linkify: false,
-    breaks: false,
-    html: true,
-  }).use(MarkdownItAnchor, {
-    level: 2,
-  }).use(MarkdownItTOC, {
-    level: [2, 3],
-  })
+      typographer: true,
+      linkify: false,
+      breaks: false,
+      html: true,
+    }).use(MarkdownItAnchor, {
+      level: 2,
+    }).use(MarkdownItTOC, {
+      level: [2, 3],
+    })
   );
 
   return {
     passthroughFileCopy: true,
   }
-}
+};
diff --git a/_data/menu.js b/_data/menu.js
@@ -1,4 +1,4 @@
-module.exports = [
+export default [
 	{ title: "Home", url: "/" },
 	{ title: "Learn & Discover", url: "/about/" },
 	{ title: "Blog", url: "/blog/" },

diff --git a/index.html b/index.html
@@ -188,7 +188,7 @@
 header.page div h1 {
 	font-size: 3em;
 	font-weight: 400;
-	background: url({{ '/assets/img/graphic-title-white.svg' | baseHtmlUrl }}) 0 100% / 7rem auto no-repeat;
+	background: url({{ '/assets/img/graphic-title-white.svg' | htmlBaseUrl }}) 0 100% / 7rem auto no-repeat;
 }
 
 .explore-embedded, .resources, .developers {
@@ -289,7 +289,7 @@
 section.igalia {
 	padding-inline: 0;
 	background: 
-		url({{ '/assets/img/dotted-continents.svg' | baseHtmlUrl }}) 50% 25% / cover;
+		url({{ '/assets/img/dotted-continents.svg' | htmlBaseUrl }}) 50% 25% / cover;
 }
 section.igalia > div {
 	padding-block-end: 3em;
@@ -311,7 +311,7 @@
 	section.igalia {
 		background: 
 			linear-gradient(to bottom right,#142B7AFA,#80A0B2) 100% 0 / 50% 100% no-repeat,
-			url({{ '/assets/img/dotted-continents.svg' | baseHtmlUrl }}) 50% 25% / cover;
+			url({{ '/assets/img/dotted-continents.svg' | htmlBaseUrl }}) 50% 25% / cover;
 		background-blend-mode: multiply;
 	}
 	section.igalia > div {