feat: upgrade to 11ty 3.0.0@alpha

2023-12-21 13:31:57 -08:00 · 2023-12-21 13:31:57 -08:00 · e16633653a
commit e16633653a
parent 2cd8e4a380
43 changed files with 578 additions and 5039 deletions
--- a/config/collections/index.js
+++ b/config/collections/index.js
@ -1,8 +1,8 @@
-const { DateTime } = require('luxon')
-const tagAliases = require('../data/tag-aliases.json')
-const { makeYearStats, processPostFile } = require('./utils')
+import { DateTime } from 'luxon'
+import tagAliases from '../data/tag-aliases.js'
+import { makeYearStats, processPostFile } from './utils.js'

-const tagList = (collection) => {
+export const tagList = (collection) => {
  const tagsSet = new Set()
  collection.getAll().forEach((item) => {
    if (!item.data.tags) return
@ -13,7 +13,7 @@ const tagList = (collection) => {
  return Array.from(tagsSet).sort()
 }

-const tagMap = (collection) => {
+export const tagMap = (collection) => {
  const tags = {}
  collection.getAll().forEach((item) => {
    if (item.data.collections.posts) {
@ -38,7 +38,7 @@ const tagMap = (collection) => {
  return tags
 }

-const postStats = (collectionApi) => {
+export const postStats = (collectionApi) => {
  const oneDayMilliseconds = 1000 * 60 * 60 * 24
  const statsObject = {
    avgDays: 0,
@ -164,9 +164,3 @@ const postStats = (collectionApi) => {
  statsObject.highPostCount = highPostCount
  return statsObject
 }
-
-module.exports = {
-  tagList,
-  tagMap,
-  postStats,
-}
--- a/config/collections/utils.js
+++ b/config/collections/utils.js
@ -1,7 +1,7 @@
-const fs = require('fs')
-const writingStats = require('writing-stats')
+import fs from 'fs'
+import writingStats from 'writing-stats'

-const processPostFile = (filePath) => {
+export const processPostFile = (filePath) => {
  try {
    let content = fs.readFileSync(filePath, 'utf8')
    // remove front matter
@ -30,7 +30,7 @@ const processPostFile = (filePath) => {
  }
 }

-const makeYearStats = (
+export const makeYearStats = (
  currentYear,
  yearPostCount,
  yearWordCount,
@ -57,8 +57,3 @@ const makeYearStats = (
    yearProgress,
  }
 }
-
-module.exports = {
-  processPostFile,
-  makeYearStats,
-}
--- a/config/data/tag-aliases.js
+++ b/config/data/tag-aliases.js
@ -0,0 +1,21 @@
+export default {
+  '11ty': '#Eleventy',
+  accessibility: '#Accessibility',
+  development: '#WebDev',
+  eleventy: '#Eleventy',
+  email: '#Email',
+  fastmail: '#Email',
+  gmail: '#Email',
+  ios: '#iOS #Apple',
+  javascript: '#JavaScript',
+  'last.fm': '#Music',
+  lastfm: '#Music',
+  macos: '#macOS #Apple',
+  music: '#Music',
+  react: '#JavaScript',
+  rss: '#RSS',
+  'social media': '#Tech',
+  spotify: '#Music',
+  tech: '#Tech',
+  technology: '#Tech',
+}
--- a/config/data/tag-aliases.json
+++ b/config/data/tag-aliases.json
@ -1,21 +0,0 @@
-{
-  "11ty": "#Eleventy",
-  "accessibility": "#Accessibility",
-  "development": "#WebDev",
-  "eleventy": "#Eleventy",
-  "email": "#Email",
-  "fastmail": "#Email",
-  "gmail": "#Email",
-  "ios": "#iOS #Apple",
-  "javascript": "#JavaScript",
-  "last.fm": "#Music",
-  "lastfm": "#Music",
-  "macos": "#macOS #Apple",
-  "music": "#Music",
-  "react": "#JavaScript",
-  "rss": "#RSS",
-  "social media": "#Tech",
-  "spotify": "#Music",
-  "tech": "#Tech",
-  "technology": "#Tech"
-}
--- a/config/events/index.js
+++ b/config/events/index.js
@ -1,7 +1,7 @@
-const fs = require('fs')
-const Image = require('@11ty/eleventy-img')
+import fs from 'fs'
+import Image from '@11ty/eleventy-img'

-const svgToJpeg = function () {
+export const svgToJpeg = function () {
  const socialPreviewImagesDir = '_site/assets/img/social-preview/'
  fs.readdir(socialPreviewImagesDir, (err, files) => {
    if (!!files && files.length > 0) {
@ -23,7 +23,3 @@ const svgToJpeg = function () {
    }
  })
 }
-
-module.exports = {
-  svgToJpeg,
-}
--- a/config/filters/index.js
+++ b/config/filters/index.js
@ -1,12 +1,12 @@
-const { DateTime } = require('luxon')
-const markdownIt = require('markdown-it')
-const { URL } = require('url')
-const sanitizeHTML = require('sanitize-html')
+import { DateTime } from 'luxon'
+import markdownIt from 'markdown-it'
+import { URL } from 'url'
+import sanitizeHTML from 'sanitize-html'

 const utmPattern = /[?&](utm_[^&=]+=[^&#]*)/gi
 const BASE_URL = 'https://coryd.dev'

-module.exports = {
+export default {
  // general
  trim: (string, limit) => {
    return string.length <= limit ? string : `${string.slice(0, limit)}...`
--- a/config/shortcodes/img/index.js
+++ b/config/shortcodes/img/index.js
@ -1,70 +0,0 @@
-const outdent = require('outdent')
-const Image = require('@11ty/eleventy-img')
-
-const img = async (
-  src,
-  alt,
-  className = undefined,
-  loading = 'lazy',
-  widths = [75, 150, 300, 600, 900, 1200],
-  formats = ['webp', 'jpeg'],
-  sizes = '100vw'
-) => {
-  const imageMetadata = await Image(src, {
-    widths: [...widths, null],
-    formats: [...formats, null],
-    outputDir: './_site/assets/img/cache/',
-    urlPath: '/assets/img/cache/',
-  })
-
-  const stringifyAttributes = (attributeMap) => {
-    return Object.entries(attributeMap)
-      .map(([attribute, value]) => {
-        if (typeof value === 'undefined') return ''
-        return `${attribute}="${value}"`
-      })
-      .join(' ')
-  }
-
-  const sourceHtmlString = Object.values(imageMetadata)
-    .map((images) => {
-      const { sourceType } = images[0]
-      const sourceAttributes = stringifyAttributes({
-        type: sourceType,
-        srcset: images.map((image) => image.srcset).join(', '),
-        sizes,
-      })
-
-      return `<source ${sourceAttributes}>`
-    })
-    .join('\n')
-
-  const getLargestImage = (format) => {
-    const images = imageMetadata[format]
-    return images[images.length - 1]
-  }
-
-  const largestUnoptimizedImg = getLargestImage(formats[0])
-  const imgAttributes = stringifyAttributes({
-    src: largestUnoptimizedImg.url,
-    width: largestUnoptimizedImg.width,
-    height: largestUnoptimizedImg.height,
-    alt,
-    loading,
-    decoding: 'async',
-  })
-
-  const imgHtmlString = `<img ${imgAttributes}>`
-  const pictureAttributes = stringifyAttributes({
-    class: className,
-  })
-
-  const picture = `<picture ${pictureAttributes}>
-    ${sourceHtmlString}
-    ${imgHtmlString}
-  </picture>`
-
-  return outdent`${picture}`
-}
-
-module.exports = img
--- a/config/shortcodes/index.js
+++ b/config/shortcodes/index.js
@ -1,4 +1,68 @@
-const img = require('./img')
-module.exports = {
-  img,
+import outdent from 'outdent'
+import Image from '@11ty/eleventy-img'
+
+export const img = async (
+  src,
+  alt,
+  className = undefined,
+  loading = 'lazy',
+  widths = [75, 150, 300, 600, 900, 1200],
+  formats = ['webp', 'jpeg'],
+  sizes = '100vw'
+) => {
+  const imageMetadata = await Image(src, {
+    widths: [...widths, null],
+    formats: [...formats, null],
+    outputDir: './_site/assets/img/cache/',
+    urlPath: '/assets/img/cache/',
+  })
+
+  const stringifyAttributes = (attributeMap) => {
+    return Object.entries(attributeMap)
+      .map(([attribute, value]) => {
+        if (typeof value === 'undefined') return ''
+        return `${attribute}="${value}"`
+      })
+      .join(' ')
+  }
+
+  const sourceHtmlString = Object.values(imageMetadata)
+    .map((images) => {
+      const { sourceType } = images[0]
+      const sourceAttributes = stringifyAttributes({
+        type: sourceType,
+        srcset: images.map((image) => image.srcset).join(', '),
+        sizes,
+      })
+
+      return `<source ${sourceAttributes}>`
+    })
+    .join('\n')
+
+  const getLargestImage = (format) => {
+    const images = imageMetadata[format]
+    return images[images.length - 1]
+  }
+
+  const largestUnoptimizedImg = getLargestImage(formats[0])
+  const imgAttributes = stringifyAttributes({
+    src: largestUnoptimizedImg.url,
+    width: largestUnoptimizedImg.width,
+    height: largestUnoptimizedImg.height,
+    alt,
+    loading,
+    decoding: 'async',
+  })
+
+  const imgHtmlString = `<img ${imgAttributes}>`
+  const pictureAttributes = stringifyAttributes({
+    class: className,
+  })
+
+  const picture = `<picture ${pictureAttributes}>
+    ${sourceHtmlString}
+    ${imgHtmlString}
+  </picture>`
+
+  return outdent`${picture}`
 }
--- a/config/transforms/html-config.js
+++ b/config/transforms/html-config.js
@ -1,19 +0,0 @@
-const htmlmin = require('html-minifier-terser')
-
-module.exports = (eleventyConfig) => {
-  eleventyConfig.addTransform('html-minify', (content, path) => {
-    if (path && path.endsWith('.html')) {
-      return htmlmin.minify(content, {
-        collapseBooleanAttributes: true,
-        collapseWhitespace: true,
-        decodeEntities: true,
-        includeAutoGeneratedTags: false,
-        minifyCSS: true,
-        minifyJS: true,
-        removeComments: true,
-        processScripts: ['application/ld+json'], // minify JSON-LD scripts
-      })
-    }
-    return content
-  })
-}
--- a/config/utils/index.js
+++ b/config/utils/index.js
@ -1,13 +1,9 @@
-const slugify = require('slugify')
+import slugify from 'slugify'

-const slugifyString = (str) => {
+export const slugifyString = (str) => {
  return slugify(str, {
    replacement: '-',
    remove: /[#,&,+()$~%.'":*?<>{}]/g,
    lower: true,
  })
 }
-
-module.exports = {
-  slugifyString,
-}