switches to ESM, 11ty img transforms (#301)

* fixed typo on now page

* updated sass and puppeteer

* switches to esm (mostly) [fixes  #277]

* adds 11ty img transformation

* updated version and changelog

* switches to esm for lighthouse

* moves luxon to dev deps

* removes lighthouse

.eleventy.js

@@ -1,9 +1,15 @@
-const package = require("./package.json")
+// FIX for https://github.com/11ty/eleventy-dependency-tree-esm/issues/2
+import { createRequire } from "node:module"
+const require = createRequire(import.meta.url)
+// import packageJSON from "./package.json" assert { type: "json"}
+// import site from "./src/_data/site.json" assert { type: "json"}
+const packageJSON = require("./package.json")
 const site = require("./src/_data/site.json")
-const { DateTime } = require("luxon")
-const Image = require("@11ty/eleventy-img")
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight")
-const { feedPlugin } = require("@11ty/eleventy-plugin-rss")
+
+import { DateTime } from "luxon"
+import Image, { eleventyImageTransformPlugin } from "@11ty/eleventy-img"
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"
+import { feedPlugin } from "@11ty/eleventy-plugin-rss"
 
 const config = {
   dir: {
@@ -53,7 +59,7 @@ const getReadTime = content => {
   return time
 }
 
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
   // css loading
   eleventyConfig.setBrowserSyncConfig({
     files: `./${config.dir.output}/css/**/*.css`,
@@ -62,11 +68,12 @@ module.exports = function (eleventyConfig) {
   // js/image loading
   eleventyConfig.addPassthroughCopy(`./${config.dir.input}/global.js`)
   eleventyConfig.addPassthroughCopy(`./${config.dir.input}/static`)
+  // only use for inling svgs
   eleventyConfig.addNunjucksAsyncShortcode("image", async (src, alt, sizes) => {
     const metadata = await Image(`./${config.dir.input}/assets/${src}`, {
       outputDir: `./${config.dir.output}/assets/`,
       urlPath: "/assets/",
-      formats: ["auto"],
+      formats: ["svg"],
       widths: ["auto"],
       dryRun: src.endsWith(".svg"),
     })
@@ -85,13 +92,30 @@ module.exports = function (eleventyConfig) {
     // You bet we throw an error on a missing alt (alt="" works okay)
     return Image.generateHTML(metadata, imageAttributes)
   })
+  // new recommended image config method
+  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+    // which file extensions to process
+    extensions: "html",
+
+    // optional, output image formats
+    formats: ["auto"],
+
+    // optional, output image widths
+    // widths: ["auto"],
+
+    // optional, attributes assigned on <img> override these values.
+    defaultAttributes: {
+      loading: "lazy",
+      decoding: "async",
+    },
+  })
 
   // custom collections
   eleventyConfig.addCollection("tagList", getAllTags)
 
   // template helpers (shortcodes and filters)
   eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`)
-  eleventyConfig.addShortcode("version", () => package.version)
+  eleventyConfig.addShortcode("version", () => packageJSON.version)
   eleventyConfig.addFilter("limit", (array, limit) => array.slice(0, limit))
   eleventyConfig.addFilter("timeToRead", getReadTime)
   eleventyConfig.addFilter("postDate", date =>

.github/workflows/main.yml

@@ -1,25 +1,25 @@
-name: Lighthouse CI for Netlify sites
-on:
-  pull_request:
-    branches:
-      - stable
-jobs:
-  build:
-    runs-on: ubuntu-latest
+# name: Lighthouse CI for Netlify sites
+# on:
+#   pull_request:
+#     branches:
+#       - stable
+# jobs:
+#   build:
+#     runs-on: ubuntu-latest
 
-    steps:
-      - uses: actions/checkout@v3
-      - name: Wait for the Netlify Preview
-        uses: jakepartusch/[email protected]
-        id: netlify
-        with:
-          site_name: "simpixelated"
-          max_timeout: 120
-      - name: Audit URLs using Lighthouse
-        uses: treosh/lighthouse-ci-action@v10
-        with:
-          urls: |
-            ${{ steps.netlify.outputs.url }}
-            ${{ steps.netlify.outputs.url }}/two-year-work-retrospective/
-          configPath: "./.github/lighthouserc.js"
-          temporaryPublicStorage: true
+#     steps:
+#       - uses: actions/checkout@v3
+#       - name: Wait for the Netlify Preview
+#         uses: jakepartusch/[email protected]
+#         id: netlify
+#         with:
+#           site_name: "simpixelated"
+#           max_timeout: 120
+#       - name: Audit URLs using Lighthouse
+#         uses: treosh/lighthouse-ci-action@v10
+#         with:
+#           urls: |
+#             ${{ steps.netlify.outputs.url }}
+#             ${{ steps.netlify.outputs.url }}/two-year-work-retrospective/
+#           configPath: "./.github/lighthouserc.js"
+#           temporaryPublicStorage: true

.nvmrc

@@ -1 +1 @@
-18.17
+20.9

CHANGELOG.md

@@ -11,6 +11,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## 2.3.7 - 2024-11-28
+
+### Changed
+
+- fixed typo on /now
+- updated dependencies
+- switched to esm for #277
+- added 11ty `<img />` support for #231
+
+---
+
 ## 2.3.6 - 2024-09-04
 
 ### Changed

package.json

@@ -1,6 +1,7 @@
 {
   "name": "simpixelated.com",
-  "version": "2.3.6",
+  "version": "2.3.7",
+  "type": "module",
   "description": "personal website and blog of Jordan Kohl (simpixelated)",
   "main": ".eleventy.js",
   "author": "Jordan Kohl",
@@ -23,10 +24,11 @@
     "@11ty/eleventy-plugin-rss": "^2.0.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "husky": "^9.1.7",
+    "luxon": "^3.5.0",
     "path": "^0.12.7",
     "prettier": "^3.4.1",
-    "puppeteer": "^22.15.0",
-    "sass": "^1.77.8"
+    "puppeteer": "^23.9.0",
+    "sass": "^1.81.0"
   },
   "repository": {
     "type": "git",