Use eslint v9 and eleventy v3.

.eleventy.js

@@ -1,14 +1,14 @@
 // Imports
-const markdownIt = require('markdown-it');
-const {execSync} = require('child_process');
-const legend = require('./src/_data/legend.json');
-const BarRating = require('./_shortcodes/BarRating');
-const markdownItAnchor = require('markdown-it-anchor');
-const mermaidShortcode = require('./_shortcodes/mermaid');
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
-const eleventyMermaidPlugin = require('@kevingimbel/eleventy-plugin-mermaid');
-const mermaidFullscreenJsShortcode =
-  require('./_shortcodes/mermaid_fullscreen_js');
+import BarRating from './_shortcodes/BarRating.js';
+import eleventyMermaidPlugin from '@kevingimbel/eleventy-plugin-mermaid';
+import {execSync} from 'node:child_process';
+import legend from './src/_data/legend.json' with {type: 'json'};
+import markdownIt from 'markdown-it';
+import markdownItAnchor from 'markdown-it-anchor';
+import mermaidFullscreenJsShortcode from
+  './_shortcodes/mermaid_fullscreen_js.js';
+import mermaidShortcode from './_shortcodes/mermaid.js';
+import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
 
 // Constants
 const statusMarks = legend.reduce((all, statusMark) => {
@@ -22,19 +22,19 @@ const statusLabel = legend.reduce((all, statusMark) => {
 }, {});
 
 // Eleventy Configurations
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
   /* Markdown Overrides */
   const markdownLibrary = markdownIt({
     html: true,
-    linkify: true,
+    linkify: true
   }).use(markdownItAnchor, {
-    permalink: false,
+    permalink: false
   });
   eleventyConfig.setLibrary('md', markdownLibrary);
 
   eleventyConfig.addPlugin(syntaxHighlight);
   eleventyConfig.addPlugin(eleventyMermaidPlugin, {
-    extra_classes: 'attached',
+    extra_classes: 'attached'
   });
 
   // Shortcode components
@@ -88,7 +88,7 @@ module.exports = function(eleventyConfig) {
     dir: {
       input: 'src/',
 
-      layouts: '_layouts',
-    },
+      layouts: '_layouts'
+    }
   };
-};
+}

.gitignore

@@ -1,5 +1,10 @@
+*.sw[nop]
+*~
+.DS_Store
+.cache/
+.project
+.settings
+.vscode/
 _site/*
 node_modules/
 package-lock.json
-.cache/
-.vscode/

_shortcodes/BarRating.js

@@ -56,4 +56,4 @@ function BarRating(passed, pending, failed, total, width) {
   `;
 }
 
-module.exports = BarRating;
+export default BarRating;

_shortcodes/mermaid.js

@@ -1,4 +1,4 @@
-module.exports = content => {
+export default content => {
   return `<div style="position: relative">
 <span class="ui top right attached blue icon label">
   <i class="expand icon"></i>

_shortcodes/mermaid_fullscreen_js.js

@@ -1,4 +1,4 @@
-module.exports = () => {
+export default () => {
   const src = 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';
   return `<script type="module" async>
     import mermaid from '${src}';

eslint.config.js

@@ -0,0 +1,20 @@
+import globals from 'globals';
+
+import config from '@digitalbazaar/eslint-config/node-recommended';
+
+export default [
+  ...config,
+  {
+    ignores: ['_site', '!.eleventy.js']
+  },
+  {
+    files: [
+      'src/assets/js/*'
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.browser
+      }
+    }
+  }
+];

package.json

@@ -2,10 +2,10 @@
   "name": "canivc",
   "version": "0.0.0",
   "description": "Community compatibility dashboard for Verifiable Credentials.",
-  "main": "index.js",
+  "type": "module",
   "scripts": {
     "build": "eleventy",
-    "lint": "eslint .",
+    "lint": "eslint",
     "serve": "rm -rf _site/ && eleventy --serve",
     "start": "rm -rf _site/ && eleventy --serve",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -20,19 +20,19 @@
   "author": "Digital Bazaar, Inc.",
   "license": "BSD-3-Clause",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
-    "@11ty/eleventy-fetch": "^4.0.0",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "@kevingimbel/eleventy-plugin-mermaid": "^2.1.0",
-    "eslint": "^8.52.0",
-    "eslint-config-digitalbazaar": "^5.0.1",
-    "eslint-plugin-jsdoc": "^46.8.2",
-    "eslint-plugin-unicorn": "^48.0.1",
-    "pagefind": "^1.0.4"
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-fetch": "^5.1.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+    "@digitalbazaar/eslint-config": "github:digitalbazaar/eslint-config-digitalbazaar#use-eslint-v9",
+    "@kevingimbel/eleventy-plugin-mermaid": "^3.0.0",
+    "eslint": "^9.34.0",
+    "eslint-plugin-jsdoc": "^54.1.1",
+    "eslint-plugin-unicorn": "^60.0.0",
+    "pagefind": "^1.3.0"
   },
   "dependencies": {
-    "markdown-it-anchor": "^8.6.7",
-    "sass": "^1.66.0",
+    "markdown-it-anchor": "^9.2.0",
+    "sass": "^1.90.0",
     "w3c-ccg-vc-test-suite-implementations": "github:w3c-ccg/vc-api-test-suite-implementations",
     "w3c-vc-test-suite-implementations": "github:w3c/vc-test-suite-implementations"
   }

src/_data/implementations.js

@@ -1,4 +1,4 @@
-module.exports = async () => {
+export default async () => {
   const {
     allImplementations: vcwgImplementations
   } = await import('w3c-vc-test-suite-implementations');

src/_data/results.js

@@ -1,4 +1,4 @@
-const EleventyFetch = require('@11ty/eleventy-fetch');
+import EleventyFetch from '@11ty/eleventy-fetch';
 
 const specUrls = [
   'https://w3c.github.io/vc-data-model-2.0-test-suite/index.json',
@@ -9,7 +9,7 @@ const specUrls = [
   'https://w3c-ccg.github.io/did-key-test-suite/index.json',
   'https://w3c-ccg.github.io/vc-api-issuer-test-suite/index.json',
   'https://w3c-ccg.github.io/vc-api-verifier-test-suite/index.json',
-  'https://w3c.github.io/vc-bitstring-status-list-test-suite/index.json',
+  'https://w3c.github.io/vc-bitstring-status-list-test-suite/index.json'
 ];
 
 // Helper function: Remove company name suffix (Digital Bazaar: P-256)
@@ -30,7 +30,7 @@ const extractCompanyResultsByTestType = results => {
         const testState = test.state;
         all[testState] = all[testState] ? all[testState] + 1 : 1;
         return {total: tests.length, ...all};
-      }, {}),
+      }, {})
     };
   };
 
@@ -49,7 +49,7 @@ const extractCompanyResultsByTestType = results => {
         ...all,
         [testType]: testSuiteDataByTestType[testType].map(({suites}) => {
           return suites.reduce(getTestResults, {});
-        }),
+        })
       };
     },
     {}
@@ -209,12 +209,12 @@ function removeSomeTestSections(results) {
 }
 
 // Repeated fetch
-module.exports = async function() {
+export default async function() {
   /* This returns a promise */
   const promises = specUrls.map(url =>
     EleventyFetch(url, {
       duration: '1w', // save for 1 week
-      type: 'json', // we’ll parse JSON for you
+      type: 'json' // we’ll parse JSON for you
     })
   );
 
@@ -244,4 +244,4 @@ module.exports = async function() {
       ]
     }))
   };
-};
+}

src/assets/js/globalState.js

@@ -29,7 +29,7 @@ const store = reactive({
         this.toggleLoading();
       }
     }
-  },
+  }
 });
 
 // Make global state available with app scopes

src/assets/js/spiderCharts.js

@@ -1,4 +1,4 @@
-/* global document, Chart */
+/* global Chart */
 const ctx = Array.from(document.querySelectorAll('.spider-chart'));
 
 // Chart global defaults
@@ -34,7 +34,7 @@ ctx.forEach(elementCtx => {
           pointHoverBackgroundColor: white,
           pointBackgroundColor: fomanticGreen,
           pointHoverBorderColor: fomanticGreen,
-          backgroundColor: fomanticGreenTransparent,
+          backgroundColor: fomanticGreenTransparent
         }
       ]
     },
@@ -56,6 +56,6 @@ ctx.forEach(elementCtx => {
           }
         }
       }
-    },
+    }
   });
 });