Updates various libs and moves to ESM modules

Author: lmammino

.eleventy.js

@@ -1,8 +1,6 @@
-'use strict'
+import allPlugins from './_11ty/allPlugins.js'
 
-const allPlugins = require('./_11ty/allPlugins')
-
-module.exports = function (config) {
+export default function (config) {
   config.addPlugin(allPlugins)
 
   return {

.github/workflows/main.yml

@@ -10,10 +10,10 @@ jobs:
       - name: Begin CI...
         uses: actions/checkout@v2
 
-      - name: Use Node 14
+      - name: Use Node 20
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 20.x
 
       - name: Use cached node_modules
         uses: actions/cache@v1

_11ty/allPlugins.js

@@ -1,20 +1,17 @@
-'use strict'
+import rss from '@11ty/eleventy-plugin-rss'
+import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
+import copyStaticFiles from './copyStaticFiles.js'
+import configureMarkdown from './configureMarkdown.js'
+import toc from './toc.js'
+import purifycss from './purifycss.js'
+import minifyhtml from './minifyhtml.js'
+import nunjucksFilters from './nunjucksFilters.js'
+import shareImage from './shareImage.js'
+import responsiveImage from './responsiveImage.js'
+import image from './image.js'
 
-const rss = require('@11ty/eleventy-plugin-rss')
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
-const copyStaticFiles = require('./copyStaticFiles')
-const configureMarkdown = require('./configureMarkdown')
-const toc = require('./toc')
-const purifycss = require('./purifycss')
-const minifyhtml = require('./minifyhtml')
-const nunjucksFilters = require('./nunjucksFilters')
-const shareImage = require('./shareImage')
-const responsiveImage = require('./responsiveImage')
-const image = require('./image')
-
-module.exports = function allPlugins (config) {
+export default function allPlugins (config) {
   config.setUseGitIgnore(false)
-
   config.addPlugin(rss)
   config.addPlugin(syntaxHighlight)
   config.addPlugin(copyStaticFiles)

_11ty/configureMarkdown.js

@@ -1,10 +1,8 @@
-'use strict'
+import markdownIt from 'markdown-it'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItClass from '@toycode/markdown-it-class'
 
-const markdownIt = require('markdown-it')
-const markdownItAnchor = require('markdown-it-anchor')
-const markdownItClass = require('@toycode/markdown-it-class')
-
-module.exports = function configureMarkdown (config) {
+export default function configureMarkdown (config) {
   // configure markdown
   const mdClassesMapping = {
     h2: ['title', 'is-2'],

_11ty/copyStaticFiles.js

@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = function copyStaticFiles (config) {
+export default function copyStaticFiles (config) {
   // Pass-through files
   config.addPassthroughCopy('src/CNAME')
   config.addPassthroughCopy({ 'src/static/*': '.' })

_11ty/image.js

@@ -1,9 +1,10 @@
-'use strict'
+import { join, extname, basename } from 'node:path'
+import { createReadStream, createWriteStream } from 'node:fs'
+import { access } from 'node:fs/promises'
+import { createHash } from 'node:crypto'
+import * as url from 'node:url'
 
-const { join, extname, basename } = require('path')
-const { createReadStream, createWriteStream } = require('fs')
-const { access } = require('fs').promises
-const { createHash } = require('crypto')
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 
 function hashFile (fileStream) {
   return new Promise((resolve, reject) => {
@@ -26,7 +27,7 @@ function copyFile (fileStream, dest) {
   })
 }
 
-module.exports = function image (config) {
+export default function image (config) {
   config.addNunjucksAsyncShortcode('image', async function (src, alt, options) {
     if (typeof alt === 'undefined') {
       throw new Error(`Missing \`alt\` on image from: ${src}`)

_11ty/minifyhtml.js

@@ -1,6 +1,4 @@
-'use strict'
-
-const htmlmin = require('html-minifier')
+import htmlmin from 'html-minifier'
 
 const banner = `<!--
 888b    888               888              d8b               8888888b.                    d8b                        8888888b.          888    888                                      
@@ -24,7 +22,7 @@ const banner = `<!--
 
 -->`
 
-module.exports = function minifyhtml (config) {
+export default function minifyhtml (config) {
   // Add HTML minification transform
   config.addTransform('htmlmin', function (content, outputPath) {
     if (outputPath.endsWith('.html')) {

_11ty/nunjucksFilters.js

@@ -1,9 +1,7 @@
-'use strict'
+import format from 'date-fns/format'
+import markdownIt from 'markdown-it'
 
-const format = require('date-fns/format')
-const markdownIt = require('markdown-it')
-
-module.exports = function nunjucksFilters (config) {
+export default function nunjucksFilters (config) {
   // Add is_array filter
   config.addFilter('is_array', function (value) {
     return Array.isArray(value)

_11ty/purifycss.js

@@ -1,11 +1,12 @@
-'use strict'
+import { join } from 'node:path'
+import { readFile } from 'node:fs/promises'
+import * as url from 'node:url'
+import { PurgeCSS } from 'purgecss'
+import { minify } from 'csso'
 
-const { join } = require('path')
-const { readFile } = require('fs').promises
-const PurgeCSS = require('purgecss').PurgeCSS
-const csso = require('csso')
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 
-module.exports = function purifycss (config) {
+export default function purifycss (config) {
   // optimize css - removes unused css and inlines css
   config.addTransform('purifyCss', async function (content, outputPath) {
     if (outputPath.endsWith('.html')) {
@@ -35,7 +36,7 @@ module.exports = function purifycss (config) {
           variables: true
         })
 
-        const after = csso.minify(purged[0].css).css
+        const after = minify(purged[0].css).css
         newContent = newContent.replace(match, `<style>${after}</style>`)
       }
 

_11ty/responsiveImage.js

@@ -1,13 +1,15 @@
 'use strict'
 
-const { cpus } = require('os')
-const { join, extname, basename } = require('path')
-const { access } = require('fs').promises
-const Image = require('@11ty/eleventy-img')
+import { cpus } from 'node:os'
+import { join, extname, basename } from 'node:path'
+import { access } from 'node:fs/promises'
+import * as url from 'node:url'
+import Image from '@11ty/eleventy-img'
 
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 Image.concurrency = (cpus()).length
 
-module.exports = function responsiveImage (config) {
+export default function responsiveImage (config) {
   // Add responsive image helper
   config.addNunjucksAsyncShortcode('responsiveImage', async function (src, alt, options = {}) {
     if (typeof alt === 'undefined') {
@@ -45,8 +47,8 @@ module.exports = function responsiveImage (config) {
     const html = `<span style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: ${maxWidth}px; ">
 <picture>
   ${Object.values(stats).map(imageFormat => {
-  return `<source type="image/${imageFormat[0].format}" srcset="${imageFormat.map(entry => `${entry.url} ${entry.width}w`).join(', ')}" sizes="${sizes}">`
-}).join('\n')}
+      return `<source type="image/${imageFormat[0].format}" srcset="${imageFormat.map(entry => `${entry.url} ${entry.width}w`).join(', ')}" sizes="${sizes}">`
+    }).join('\n')}
 <img loading="lazy" decoding="async" style="max-width: 100%; width: 100%; margin: 0px; vertical-align: middle;" ${options.class ? `class="${options.class}"` : ''} alt="${alt}" src="${lowestSrc.url}" width="${lowestSrc.width}" height="${lowestSrc.height}">
 </picture>
 </span>`