chore: clean out dependencies and bump to latest

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

.nvmrc

@@ -1 +1 @@
-22
+24

.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: "none",
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  arrowParens: "avoid",
+  endOfLine: "auto",
+};

config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   url: 'https://www.accessibility-developer-guide.com',
   title: 'Accessibility Developer Guide',
   description: '', // TODO: Add

eslint.config.js

@@ -0,0 +1,37 @@
+import globals from 'globals'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import js from '@eslint/js'
+import { importX } from 'eslint-plugin-import-x'
+
+export default defineConfig([
+  globalIgnores(['dist', 'src/assets/js/lib/vendor']),
+  js.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        $: 'readonly',
+        jQuery: 'readonly',
+        define: 'readonly'
+      }
+    }
+  },
+  importX.flatConfigs.recommended,
+  {
+    rules: {
+      'import-x/no-named-as-default': 'off',
+      'import-x/no-named-as-default-member': 'off',
+      'import-x/order': 'warn',
+      'no-empty': ['error', { allowEmptyCatch: true }],
+      'no-unused-vars': [
+        'error',
+        {
+          caughtErrors: 'none',
+          argsIgnorePattern: '^(e|event|context|options)$'
+        }
+      ],
+      'no-useless-assignment': 'off'
+    }
+  }
+])

gulp/css.js

@@ -1,11 +1,13 @@
-const gulp = require('gulp')
-const sass = require('gulp-sass')(require('sass'))
-const globImporter = require('node-sass-glob-importer')
+import gulp from 'gulp'
+import gulpSassInit from 'gulp-sass/legacy.js'
+import sassCompiler from 'sass'
+import globImporter from 'node-sass-glob-importer'
+import autoprefixer from 'autoprefixer'
+import postcss from 'gulp-postcss'
 
-const autoprefixer = require('autoprefixer')
-const postcss = require('gulp-postcss')
+const sass = gulpSassInit(sassCompiler)
 
-module.exports = config => {
+export default config => {
   return gulp
     .src(config.src, {
       base: config.srcBase
@@ -14,7 +16,7 @@ module.exports = config => {
       sass({
         importer: globImporter(),
         includePaths: config.includePaths,
-        silenceDeprecations: ['mixed-decls', 'import', 'legacy-js-api'],
+        silenceDeprecations: ['import', 'legacy-js-api'],
         quietDeps: true
       }).on('error', config.errorHandler)
     )

gulp/examples.js

@@ -1,17 +1,15 @@
-const gulp = require('gulp')
-const plumber = require('gulp-plumber')
-const through = require('through2')
-const handlebars = require('gulp-hb')
-const frontMatter = require('front-matter')
-const importFresh = require('import-fresh')
-const fs = require('fs')
-const path = require('path')
-const babel = require('@babel/core')
-const babelPreset = require('@babel/preset-env')
-
-module.exports = (config, cb) => {
-  const helpers = importFresh('./helpers/examples')
+import fs from 'node:fs'
+import path from 'node:path'
+import gulp from 'gulp'
+import plumber from 'gulp-plumber'
+import through from 'through2'
+import handlebars from 'gulp-hb'
+import frontMatter from 'front-matter'
+import * as babel from '@babel/core'
+import babelPreset from '@babel/preset-env'
+import * as helpers from './helpers/examples.js'
 
+export default config => {
   const layout = fs.readFileSync('./src/templates/example.hbs')
 
   return (

gulp/helpers/datetime.js

@@ -28,6 +28,4 @@ const formatDate = date => {
   return `${monthNames[monthIndex]} ${day}, ${year}`
 }
 
-module.exports = {
-  formatDate
-}
+export { formatDate }

gulp/helpers/examples.js

@@ -1,8 +1,8 @@
-const fs = require('fs')
-const path = require('path')
-const frontMatter = require('front-matter')
-const hljs = require('highlight.js')
-const _ = require('lodash')
+import fs from 'node:fs'
+import path from 'node:path'
+import { randomUUID } from 'node:crypto'
+import frontMatter from 'front-matter'
+import hljs from 'highlight.js'
 
 const getFile = (files, type, dir) => {
   const match = files.find(file => {
@@ -51,7 +51,7 @@ const getTitle = href => {
   return meta.title
 }
 
-const getCodePenForm = (code, title) => {
+const getCodePenForm = code => {
   const config = {
     title: code.details.title,
 
@@ -83,10 +83,10 @@ const getCodePenForm = (code, title) => {
   </form>`
 }
 
-const getExample = (examplePath, filePath) => {
+const getExample = examplePath => {
   try {
     const code = getCode(examplePath)
-    const id = _.uniqueId('example-')
+    const id = `example-${randomUUID()}`
 
     const compatibilitySummaryBrowsers = [
       'Chrome',
@@ -153,7 +153,6 @@ const getExample = (examplePath, filePath) => {
       // Format date
       const date = new Date(result.date)
 
-      // eslint-disable-next-line eqeqeq
       if (date != 'Invalid Date') {
         result.date = `${date.getFullYear()}-${
           date.getMonth() + 1
@@ -265,10 +264,4 @@ const getLink = token => {
   return href.match(/_examples/) ? href : null
 }
 
-module.exports = {
-  getCode,
-  getTitle,
-  getCodePenForm,
-  getExample,
-  getLink
-}
+export { getCode, getTitle, getCodePenForm, getExample, getLink }

gulp/helpers/markdown.js

@@ -1,18 +1,28 @@
-const markdownIt = require('markdown-it')
-const importFresh = require('import-fresh')
-const path = require('path')
+import path from 'node:path'
+import markdownIt from 'markdown-it'
+import iterator from 'markdown-it-for-inline'
+import regexp from 'markdown-it-regexp'
+import abbr from 'markdown-it-abbr'
+import attrs from 'markdown-it-attrs'
+import deflist from 'markdown-it-deflist'
+import kbd from 'markdown-it-kbd'
+import samp from 'markdown-it-samp'
+import responsive from '@gerhobbelt/markdown-it-responsive'
+import replacements from 'markdown-it-replacements'
+import toc from 'markdown-it-toc-done-right'
+import * as examples from './examples.js'
 
 const plugins = {
-  iterator: require('markdown-it-for-inline'),
-  regexp: require('markdown-it-regexp'),
-  abbr: require('markdown-it-abbr'),
-  attrs: require('markdown-it-attrs'),
-  deflist: require('markdown-it-deflist'),
-  kbd: require('markdown-it-kbd'),
-  samp: require('markdown-it-samp'),
-  responsive: require('@gerhobbelt/markdown-it-responsive'),
-  replacements: require('markdown-it-replacements'),
-  toc: require('markdown-it-toc-done-right')
+  iterator,
+  regexp,
+  abbr,
+  attrs,
+  deflist,
+  kbd,
+  samp,
+  responsive,
+  replacements,
+  toc
 }
 
 plugins.replacements.replacements.push({
@@ -34,19 +44,18 @@ const slugify = text => {
     .toString()
     .toLowerCase()
     .replace(/\s+/g, '-') // Replace spaces with -
-    .replace(/[^\w\-]+/g, '') // Remove all non-word chars
-    .replace(/\-\-+/g, '-') // Replace multiple - with single -
+    .replace(/[^\w-]+/g, '') // Remove all non-word chars
+    .replace(/--+/g, '-') // Replace multiple - with single -
     .replace(/^-+/, '') // Trim - from start of text
     .replace(/-+$/, '') // Trim - from end of text
 }
 
-module.exports = rootDir => filePath => {
+export default rootDir => filePath => {
   const markdown = markdownIt({
     html: true,
     linkify: true,
     typography: true
   })
-  const examples = importFresh('./examples')
 
   markdown.validateLink = url => {
     const BAD_PROTO_RE = /^(vbscript|file|data):/
@@ -180,30 +189,28 @@ module.exports = rootDir => filePath => {
                   : path.resolve(path.dirname(filePath), exampleLink)
                 example = examples.getExample(examplePath, filePath)
 
-                token.children
-                  .slice(childIdx)
-                  .some((followingChildToken, followingChildIdx) => {
-                    if (followingChildToken.type === 'text') {
-                      // Change link title and wrap with span
-                      followingChildToken.type = 'html_inline'
-                      followingChildToken.content = `<span class="example-link-text">${
-                        example.code.details.title
-                      }</span>${
-                        example.code.preview
-                          ? `<img src="/${path.relative(
-                              path.join(rootDir, 'pages'),
-                              example.code.preview
-                            )}" alt="Preview">`
-                          : ''
-                      }`
-                    }
-
-                    if (followingChildToken.type === 'link_close') {
-                      return true
-                    }
-
-                    return false
-                  })
+                token.children.slice(childIdx).some(followingChildToken => {
+                  if (followingChildToken.type === 'text') {
+                    // Change link title and wrap with span
+                    followingChildToken.type = 'html_inline'
+                    followingChildToken.content = `<span class="example-link-text">${
+                      example.code.details.title
+                    }</span>${
+                      example.code.preview
+                        ? `<img src="/${path.relative(
+                            path.join(rootDir, 'pages'),
+                            example.code.preview
+                          )}" alt="Preview">`
+                        : ''
+                    }`
+                  }
+
+                  if (followingChildToken.type === 'link_close') {
+                    return true
+                  }
+
+                  return false
+                })
 
                 // Add custom class to link
                 exampleLinkClass = childToken.attrGet('class')

gulp/helpers/metatags.js

@@ -43,6 +43,4 @@ const generateTags = map => {
   return metatags
 }
 
-module.exports = {
-  generateTags
-}
+export { generateTags }

gulp/helpers/rss.js

@@ -1,8 +1,7 @@
-const { Feed } = require('feed')
-
-module.exports = (origPages = []) => {
-  const appConfig = require('../../config')
+import { Feed } from 'feed'
+import appConfig from '../../config.js'
 
+export default (origPages = []) => {
   // Sort by date
   const pages = origPages.sort((a, b) => {
     return new Date(b.data.changed) - new Date(a.data.changed)