feat: update 11ty and node

.eleventy.js

@@ -1,38 +1,50 @@
-const { readFileSync, readdirSync, writeFileSync } = require('graceful-fs');
-const { EleventyHtmlBasePlugin } = require('@11ty/eleventy');
-const pluginRSS = require('@11ty/eleventy-plugin-rss');
-
-const cssMin = require('./utils/transforms/css-min');
-const jsMin = require('./utils/transforms/js-min');
-const fullEscaper = require('./utils/full-escaper');
-const translate = require('./utils/translate');
-const {
+import gracefulFS from 'graceful-fs';
+import { EleventyHtmlBasePlugin } from '@11ty/eleventy';
+import pluginRSS from '@11ty/eleventy-plugin-rss';
+
+import UpgradeHelper from '@11ty/eleventy-upgrade-help';
+
+import cssMin from './utils/transforms/css-min.js';
+import jsMin from './utils/transforms/js-min.js';
+import { fullEscaper } from './utils/full-escaper.js';
+import { translate } from './utils/translate.js';
+import {
   imageShortcode,
   featureImageShortcode
-} = require('./utils/shortcodes/images');
-const cacheBusterShortcode = require('./utils/shortcodes/cache-buster');
-const createJSONLDShortcode = require('./utils/shortcodes/create-json-ld');
-const {
+} from './utils/shortcodes/images.js';
+import {
+  cacheBusterShortcode,
+  manifest
+} from './utils/shortcodes/cache-buster.js';
+import { createJSONLDShortcode } from './utils/shortcodes/create-json-ld.js';
+import {
   publishedDateShortcode,
   timeAgoShortcode,
   buildDateFormatterShortcode,
   fullYearShortcode,
   toISOStringShortcode
-} = require('./utils/shortcodes/dates');
-const { currentLocale_i18n, eleventyEnv } = require('./config');
-const sitePath = require('./utils/site-path');
+} from './utils/shortcodes/dates.js';
+import { sitePath } from './utils/site-path.js';
+import { config } from './config/index.js';
+
+const { readFileSync, readdirSync, writeFileSync } = gracefulFS;
+const { currentLocale_i18n, eleventyEnv } = config;
 
-module.exports = function (config) {
+export default function (config) {
   // Minify inline CSS
   config.addFilter('cssMin', cssMin);
 
   // Minify inline JS
   config.addNunjucksAsyncFilter('jsMin', jsMin);
 
   // Empty manifest to load new versions of cached files
-  // for hot reloading
+  // (styling, JS, and so on) for hot reloading
   config.on('beforeBuild', () => {
-    manifest = {};
+    for (const prop in manifest) {
+      if (Object.hasOwn(manifest, prop)) {
+        delete manifest[prop];
+      }
+    }
   });
 
   config.on('afterBuild', () => {
@@ -65,6 +77,8 @@ module.exports = function (config) {
 
   config.addPlugin(pluginRSS);
 
+  config.addPlugin(UpgradeHelper);
+
   config.addNunjucksShortcode('image', imageShortcode);
 
   config.addNunjucksShortcode('featureImage', featureImageShortcode);
@@ -119,10 +133,7 @@ module.exports = function (config) {
   // Use the new Base plugin to replace the old url filter method
   // so we can deploy in a different directory
   config.addPlugin(EleventyHtmlBasePlugin, {
-    baseHref: sitePath,
-    filters: {
-      base: 'htmlBaseUrl'
-    }
+    baseHref: sitePath
   });
 
   // Eleventy configuration
@@ -138,4 +149,4 @@ module.exports = function (config) {
     markdownTemplateEngine: 'njk',
     pathPrefix: sitePath
   };
-};
+}

.github/workflows/cypress.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
         browsers: [chrome, firefox]
         languages: [english, chinese, espanol]
 

.github/workflows/deploy-eng.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
         languages: [english]
         site_tlds: [org]
 

.github/workflows/deploy-i18n.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
         languages:
           [chinese, espanol, italian, japanese, korean, portuguese, ukrainian]
         site_tlds: [org]

.github/workflows/node.js-test.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
 
     steps:
       - name: Checkout source code
@@ -40,7 +40,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
         languages: [english, espanol]
 
     env:

.nvmrc

@@ -1 +1 @@
-18
+22

config/i18n/config.js

@@ -1,26 +1,32 @@
-const i18next = require('i18next');
-const Backend = require('i18next-fs-backend');
-const { readdirSync, lstatSync } = require('fs');
-const { join } = require('path');
-const {
-  currentLocale_i18n,
-  currentLocale_i18nISOCode
-} = require('../index.js');
+import i18next, { use } from 'i18next';
+import Backend from 'i18next-fs-backend';
+import gracefulFS from 'graceful-fs';
+import { join } from 'path';
 
-i18next.use(Backend).init({
+import { config } from '../index.js';
+
+const { readdirSync, lstatSync } = gracefulFS;
+const { currentLocale_i18n, currentLocale_i18nISOCode } = config;
+
+use(Backend).init({
   lng: currentLocale_i18nISOCode,
   fallbackLng: 'en',
   initImmediate: false,
-  preload: readdirSync(join(__dirname, './locales')).filter(fileName => {
-    const joinedPath = join(join(__dirname, './locales'), fileName);
-    const isDirectory = lstatSync(joinedPath).isDirectory();
-    return isDirectory;
-  }),
+  preload: readdirSync(join(import.meta.dirname, './locales')).filter(
+    fileName => {
+      const joinedPath = join(join(import.meta.dirname, './locales'), fileName);
+      const isDirectory = lstatSync(joinedPath).isDirectory();
+      return isDirectory;
+    }
+  ),
   ns: ['translations', 'meta-tags', 'links', 'trending'],
   defaultNS: 'translations',
   backend: {
-    loadPath: join(__dirname, `./locales/${currentLocale_i18n}/{{ ns }}.json`)
+    loadPath: join(
+      import.meta.dirname,
+      `./locales/${currentLocale_i18n}/{{ ns }}.json`
+    )
   }
 });
 
-module.exports = i18next;
+export default i18next;

config/i18n/generate-serve-config.js

@@ -1,14 +1,21 @@
-const path = require('path');
-const { writeFileSync, mkdirSync } = require('fs');
-const { locales } = require('../index.js');
+import gracefulFS from 'graceful-fs';
+import { join } from 'path';
+
+import { locales } from '../index.js';
+import { loadJSON } from '../../utils/load-json.js';
+import source from '../serve.json';
+
+const { writeFileSync, mkdirSync } = gracefulFS;
 
-const source = require('../serve.json');
 locales.push('dothraki');
 
 for (let language of locales) {
   const sourceClone = { ...source };
-  const filePath = path.join(__dirname, `/locales/${language}/redirects.json`);
-  const redirectsArray = require(filePath);
+  const filePath = join(
+    import.meta.dirname,
+    `/locales/${language}/redirects.json`
+  );
+  const redirectsArray = loadJSON(filePath);
 
   sourceClone.redirects = [
     {
@@ -20,12 +27,12 @@ for (let language of locales) {
     ...(redirectsArray.length ? redirectsArray : [])
   ];
 
-  mkdirSync(path.join(__dirname, `../../docker/languages/${language}`), {
+  mkdirSync(join(import.meta.dirname, `../../docker/languages/${language}`), {
     recursive: true
   });
 
   writeFileSync(
-    path.join(__dirname, `../../docker/languages/${language}/serve.json`),
+    join(import.meta.dirname, `../../docker/languages/${language}/serve.json`),
     JSON.stringify(sourceClone, null, 2)
   );
 

config/i18n/locales.test.js

@@ -1,7 +1,10 @@
-const { locales, localeCodes, algoliaIndices } = require('../index.js');
+import gracefulFS from 'graceful-fs';
+import { setup } from 'jest-json-schema-extended';
 
-const fs = require('fs');
-const { setup } = require('jest-json-schema-extended');
+import { config } from '../index.js';
+
+const { existsSync } = gracefulFS;
+const { locales, localeCodes, algoliaIndices } = config;
 
 setup();
 
@@ -20,15 +23,15 @@ const filesThatShouldExist = [
   }
 ];
 
-const path = `${__dirname}/locales`;
+const path = `${import.meta.dirname}/locales`;
 
 describe('Locale tests:', () => {
   locales.forEach(lang => {
     describe(`-- ${lang} --`, () => {
       filesThatShouldExist.forEach(file => {
         // check that each json file exists
         test(`${file.name} file exists`, () => {
-          const exists = fs.existsSync(`${path}/${lang}/${file.name}`);
+          const exists = existsSync(`${path}/${lang}/${file.name}`);
           expect(exists).toBeTruthy();
         });
       });

config/i18n/redirects.test.js

@@ -1,15 +1,17 @@
-let { locales } = require('../index.js');
-locales = [...locales, 'dothraki'];
+import { config } from '../../config/index.js';
+import { loadJSON } from '../../utils/load-json.js';
+const { locales } = config;
+const testLocales = [...locales, 'dothraki'];
 
-const path = `${__dirname}`;
+const path = `${import.meta.dirname}`;
 
 // To do: Simplify the npm scripts and test the generated serve.json files
 // in the docker directory. Add a test for the first /slug/amp to
 // /news/slug or /lang/news/slug redirect.
 describe('Redirect and rewrite tests:', () => {
-  locales.forEach(lang => {
+  testLocales.forEach(lang => {
     describe(`-- ${lang} --`, () => {
-      const redirects = require(`${path}/locales/${lang}/redirects.json`);
+      const redirects = loadJSON(`${path}/locales/${lang}/redirects.json`);
 
       test('redirects is an array', () => {
         expect(Array.isArray(redirects)).toBe(true);

config/i18n/schema-validation.js

@@ -1,8 +1,11 @@
-const path = require('path');
-const { locales } = require('../index.js');
-const linksSchema = require('./locales/english/links.json');
-const metaTagsSchema = require('./locales/english/meta-tags.json');
-const translationsSchema = require('./locales/english/translations.json');
+import { join } from 'path';
+import { config } from '../index.js';
+import { loadJSON } from '../../utils/load-json.js';
+import linksSchema from './locales/english/links.json' with { type: 'json' };
+import metaTagsSchema from './locales/english/meta-tags.json' with { type: 'json' };
+import translationsSchema from './locales/english/translations.json' with { type: 'json' };
+
+const { locales } = config;
 
 /**
  * Flattens a nested object structure into a single
@@ -110,11 +113,11 @@ const translationSchemaKeys = Object.keys(flattenAnObject(translationsSchema));
  */
 const translationSchemaValidation = languages => {
   languages.forEach(language => {
-    const filePath = path.join(
-      __dirname,
+    const filePath = join(
+      import.meta.dirname,
       `/locales/${language}/translations.json`
     );
-    const fileJson = require(filePath);
+    const fileJson = loadJSON(filePath);
     const fileKeys = Object.keys(flattenAnObject(fileJson));
     findMissingKeys(
       fileKeys,
@@ -140,11 +143,11 @@ const translationSchemaValidation = languages => {
 
 const metaTagsSchemaValidation = languages => {
   languages.forEach(language => {
-    const filePath = path.join(
-      __dirname,
+    const filePath = join(
+      import.meta.dirname,
       `/locales/${language}/meta-tags.json`
     );
-    const fileJson = require(filePath);
+    const fileJson = loadJSON(filePath);
     const fileKeys = Object.keys(flattenAnObject(fileJson));
     findMissingKeys(fileKeys, metaTagsSchemaKeys, `${language}/meta-tags.json`);
     findExtraneousKeys(
@@ -166,8 +169,11 @@ const metaTagsSchemaValidation = languages => {
 
 const linksSchemaValidation = languages => {
   languages.forEach(language => {
-    const filePath = path.join(__dirname, `/locales/${language}/links.json`);
-    const fileJson = require(filePath);
+    const filePath = join(
+      import.meta.dirname,
+      `/locales/${language}/links.json`
+    );
+    const fileJson = loadJSON(filePath);
     const fileKeys = Object.keys(flattenAnObject(fileJson));
     findMissingKeys(fileKeys, linksSchemaKeys, `${language}/links.json`);
     findExtraneousKeys(fileKeys, linksSchemaKeys, `${language}/links.json`);