feat: upgrade to 11ty 3.0.0@alpha

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}`
 }