refactor to eleventyNavigation

Author: robb-j

eleventy.config.js

@@ -1,65 +1,37 @@
-import { EleventyRenderPlugin } from "@11ty/eleventy";
-import markdownIt from "markdown-it";
-import markdownAnchor from "markdown-it-anchor";
+import { EleventyRenderPlugin, IdAttributePlugin } from "@11ty/eleventy";
 
 import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
-import { eleventyAlembic } from "@openlab/alembic/11ty.js";
+import eleventyAlembic from "@openlab/alembic/11ty.js";
+import eleventyNavigation from "@11ty/eleventy-navigation";
 import slugify from "slugify";
 
 import pkg from "./package.json" with { type: "json" };
 import site from "./source/_data/site.json" with { type: "json" };
 
-// TODO: refactor this out when upgrading to eleventy@2
-const md = markdownIt({
-  html: true,
-});
-md.use(markdownAnchor, {
-  slugify: (str) => slugify(str, { lower: true, strict: true }),
-});
-md.disable("code");
-
-// TODO: add watch/rebuild for src in development mode?
-
-/** @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig */
+/** @param {import('@11ty/eleventy/UserConfig').default} eleventyConfig */
 export default function (eleventyConfig) {
-  eleventyConfig.setLibrary("md", md);
+  eleventyConfig.setDataDeepMerge(true); // TODO: remove for eleventy@4
 
+  eleventyConfig.addPlugin(IdAttributePlugin);
   eleventyConfig.addPlugin(EleventyRenderPlugin);
   eleventyConfig.addPlugin(eleventyAlembic);
   eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.addPlugin(eleventyNavigation);
 
-  eleventyConfig.addFilter("apiSort", (items) => {
-    return Array.from(items).sort((a, b) =>
-      b.data.title.localeCompare(a.data.title),
-    );
-  });
   eleventyConfig.addFilter("fullUrl", (path) => {
     return new URL(path, site.url).href;
   });
   eleventyConfig.addFilter("isCurrentPage", (pageUrl, currentUrl) => {
     return currentUrl.startsWith(pageUrl);
   });
-  eleventyConfig.addFilter("md", (content) => {
-    // TODO: this seems to have 11ty's syntax added already
-    return md.render(content);
-  });
-  eleventyConfig.addFilter("json", (content) =>
-    JSON.stringify(content, null, 2),
-  );
-  eleventyConfig.addFilter("getPages", (collection, tags = []) => {
-    const set = new Set(tags);
-    return collection
-      .filter((item) => item.data.tags?.some((t) => set.has(t)))
-      .sort((a, b) => a.data.title?.localeCompare(b.data.title));
-  });
-  eleventyConfig.addFilter("slug", (text) => slugify(text));
 
   eleventyConfig.addShortcode("pkgVersion", () => pkg.version);
   eleventyConfig.addPairedShortcode(
     "error",
     (content) => `<p class="eleventyError">${content}</p>`,
   );
 
+  // TODO: add watch/rebuild for src in development mode?
   // eleventyConfig.addWatchTarget('./source/**/*.css')
   // eleventyConfig.addWatchTarget('./source/**/*.ts')
 }

package-lock.json

@@ -27,10 +27,11 @@
     "build": "./scripts/build-library.js && ./scripts/build-docs.sh",
     "start": "NOVA_TASK_NAME=run npm run build",
     "test": "tsx --test **/*.test.*",
-    "format": "prettier -w **/*.{js,ts,css,md,json,yml}"
+    "format": "prettier --write '**/*.{js,ts,json,css,md}'"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.1.1",
+    "@11ty/eleventy-navigation": "^1.0.5",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1",
     "@types/node": "^22.19.15",
     "@types/svgo": "^2.6.3",

package.json

@@ -118,3 +118,5 @@ export function eleventyAlembic(
     );
   });
 }
+
+export default eleventyAlembic;

source/11ty.ts

@@ -1,16 +1,15 @@
 {% if footerNav %}
 <footer class="docsLayout-footer">
   <reel-layout class="layoutReel">
-    {% for item in footerNav %}
-    {% set page = collections[item.tag][0] %}
-    <a href="#{{ item.id }}" class="layoutReel-item">
+    {% for entry in collections.all | eleventyNavigation(footerNav) %}
+    <a href="#{{ entry.title | lower | slugify }}" class="layoutReel-item">
       <img
         width="96"
         height="96"
-        src="{{ page.data.tile | url }}"
-        alt="{{ item.name }}"
+        src="{{ entry.data.tile | url }}"
+        alt="{{ entry.title }}"
       />
-      <p>{{item.name}}</p>
+      <p>{{ entry.title }}</p>
     </a>
     {% endfor %}
   </reel-layout>

source/_data/layouts.json

@@ -1,7 +1,6 @@
 **Prerequisites**
 
-- Node.js v18+
-- npm v7+
+- Node.js v22+
 
 Then install Alembic with NPM:
 

source/_data/nav.json

@@ -1,17 +1,17 @@
 {% from 'macros.njk' import icon %}
 
-{% if links %}
+{% if siblings %}
 <grid-layout>
-  {% for link in collections.all | getPages(links) %}
+  {% for entry in collections.all | eleventyNavigation(siblings) %}
   <box-layout class="navCard">
-    <a href="{{ link.url }}">
+    <a href="{{ entry.url }}">
       <h2>
         <icon-layout>
-          {{ link.data.title }}
+          {{ entry.title }}
           {{ icon('right') }}
         </icon-layout>
       </h2>
-      <p> {{ link.data.strapline }} </p>
+      <p> {{ entry.excerpt }} </p>
     </a>
   </box-layout>
   {% endfor %}

source/_includes/footer-nav.njk

@@ -3,16 +3,16 @@
 
 {% if siblings %}
 <nav class="siblings" aria-labelledby="siblings">
-  <p id="siblings">{{ siblingTitle or 'Pages' }}</p>
+  <p id="siblings">{{ siblings }}</p>
   <ul>
-    {% for target in collections.all | getPages(siblings) %}
+    {% for entry in collections.all | eleventyNavigation(siblings) %}
     <li>
-      {% if target.url | isCurrentPage(page.url) %}
-      <strong>{{ target.data.title }}</strong>
+      {% if entry.url == page.url %}
+      <strong>{{ entry.title }}</strong>
       {% else %}
-      <a href="{{ target.url }}" >
+      <a href="{{ entry.url }}" >
         <icon-layout>
-          {{ target.data.title }}
+          {{ entry.title }}
           {{ icon('right') }}
         </icon-layout>
       </a>