Upgraded project to newest Eleventy and refactored project from commonJS to ESM

- Updated packages
- Upgraded Eleventy to V3.0.0
- Replaced the svg-icon-sprite plugin with eleventy-plugin-icons
- Removed additional shortcode for the eleventy-img plugin
- Refactored collections, filters and eleventy config
- Added metadata to make the use of Eleventy detectable

.eleventy.js

@@ -1,81 +1,80 @@
-const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+import eleventyNavigationPlugin from "@11ty/eleventy-navigation"
-const pluginRss = require('@11ty/eleventy-plugin-rss')
+import pluginRss from "@11ty/eleventy-plugin-rss"
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"
+import pluginIcons from "eleventy-plugin-icons"
 
-const { 
+import {
   getAllPosts,
   getCategoryList,
-  getCategorisedPosts 
+  getCategorisedPosts,
-} = require('./config/collections')
+} from "./config/collections.js"
 
-const { 
+import { readableDate } from "./config/filters.js"
-  readableDate 
-} = require('./config/filters')
 
-const { 
+const imageConfig = {
-  imageShortcode 
+  extensions: "html",
-} = require('./config/shortcodes')
+  formats: ["webp"],
+  widths: [300, 600, 900, "auto"],
+  defaultAttributes: {
+    loading: "lazy",
+    decoding: "async",
+    sizes: "100vw",
+  },
+  urlPath: "/images/",
+}
 
 
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
-  
   /*================================*/
   /*   plugins and configurations   */
   /*================================*/
   eleventyConfig.addPlugin(eleventyNavigationPlugin)
   eleventyConfig.addPlugin(pluginRss)
+  eleventyConfig.addPlugin(eleventyImageTransformPlugin, imageConfig)
 
   eleventyConfig.setFrontMatterParsingOptions({
     excerpt: true,
     excerpt_separator: "<!-- excerpt -->",
-    excerpt_alias: 'excerpt'
+    excerpt_alias: "excerpt",
   })
 
+    eleventyConfig.addPlugin(pluginIcons, {
+      sources: [{ name: "custom", path: "./src/assets/icons" }],
+    })
+
   /*===================================================*/
   /* files that need to be copied to the build folder  */
   /*===================================================*/
-  eleventyConfig.addPassthroughCopy('./src/assets/social-image.jpg')
+  eleventyConfig.addPassthroughCopy("./src/assets/social-image.jpg")
-  eleventyConfig.addPassthroughCopy('./src/assets/icons')
+  eleventyConfig.addPassthroughCopy("./src/assets/icons")
-  eleventyConfig.addPassthroughCopy('./src/assets/sprite.svg')
+  eleventyConfig.addPassthroughCopy("./src/assets/sprite.svg")
-  eleventyConfig.addPassthroughCopy({
-      'node_modules/svg-icon-sprite/dist/svg-icon-sprite.js': 'assets/svg-icon-sprite.js'
-  })
-
 
   /*=================*/
   /*     Layouts     */
   /*=================*/
-  eleventyConfig.addLayoutAlias('page', 'layouts/page')
+  eleventyConfig.addLayoutAlias("page", "layouts/page")
-  eleventyConfig.addLayoutAlias('article', 'layouts/article')
+  eleventyConfig.addLayoutAlias("article", "layouts/article")
-
 
   /*=================*/
   /*   Collections   */
   /*=================*/
-  eleventyConfig.addCollection('blog', getAllPosts)
+  eleventyConfig.addCollection("blog", getAllPosts)
-  eleventyConfig.addCollection('categoryList', getCategoryList)
+  eleventyConfig.addCollection("categoryList", getCategoryList)
-  eleventyConfig.addCollection('categorisedPosts', getCategorisedPosts)
+  eleventyConfig.addCollection("categorisedPosts", getCategorisedPosts)
-
 
   /*=================*/
   /*     Filters     */
   /*=================*/
-  eleventyConfig.addFilter('readableDate', readableDate)
+  eleventyConfig.addFilter("readableDate", readableDate)
-
-
-  /*=================*/
-  /*    shortcodes   */
-  /*=================*/
-  eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode)
-
 
 
   return {
     dir: {
-      input: 'src',
+      input: "src",
-      output: '_site',
+      output: "_site",
-      includes: '_includes',
+      includes: "_includes",
-      data: '_data'
+      data: "_data",
     },
-    markdownTemplateEngine: 'njk'
+    markdownTemplateEngine: "njk",
-  }
+  };
 }

config/collections.js

@@ -1,4 +1,4 @@
-const slugify = require('slugify')
+import slugify from 'slugify'
 
 /* Creating a collection containing all blogposts by filtering based on folder and filetype */
 const getAllPosts = (collectionApi) => {
@@ -21,12 +21,11 @@ const getCategoryList = (collectionApi) => {
   temp.forEach((category) => {
     const slug = strToSlug(category);
     
-    if(slug !== 'in-the-spotlight') {
+    catPages.push({
-      catPages.push({
+      'key': slug,
-        'key': slug,
+      'name': category 
-        'name': category 
+    })
-      })
+    
-    }
   })
 
   return catPages
@@ -54,7 +53,7 @@ const getCategorisedPosts = (collectionApi) => {
   return categorisedPosts
 }
 
-module.exports = {
+export {
   getAllPosts,
   getCategoryList,
   getCategorisedPosts

config/filters.js

@@ -1,4 +1,4 @@
-const { DateTime } = require('luxon')
+import { DateTime } from 'luxon'
 
 const readableDate = (dateObj) => {
   return DateTime.fromJSDate(dateObj, {
@@ -6,6 +6,6 @@ const readableDate = (dateObj) => {
   }).setLocale('en').toLocaleString(DateTime.DATE_FULL)
 }
 
-module.exports = {
+export {
   readableDate
 }

config/shortcodes.js

@@ -1,30 +0,0 @@
-const Image = require('@11ty/eleventy-img')
-
-const imageShortcode = async (imageObj = {}) => {
-  const widths = imageObj.widths || [300, 600, 900, 1200]
-  const className = imageObj.className || "image"
-
-  const sizes = "(min-width: 100px) 50vw, 100vw"
-  const metadata =  await Image(imageObj.src, {
-      formats: ["webp"],
-      outputDir: "./_site/assets/images/generated/",
-      urlPath: "/assets/images/generated/",
-      widths: widths
-  })
-  const alt = imageObj.alt;
-
-  const imageAttributes = {
-      class: className,
-      alt,
-      sizes,
-      loading: "lazy",
-      decoding: "async",
-  }
-
-  return Image.generateHTML(metadata, imageAttributes)
-}
-
-
-module.exports = {
-  imageShortcode
-}

package.json

@@ -3,13 +3,13 @@
   "version": "1.0.0",
   "description": "A not so minimal starter for building a website + blog using the Eleventy static site generator.",
   "main": "index.md",
+  "type": "module",
   "scripts": {
-    "generate:sprite": "svg-icon-generate --folder=src/assets/icons --output=src/assets/sprite.svg",
     "watch:eleventy": "eleventy --serve",
     "watch:sass": "sass --watch src/assets/theming:_site/assets",
     "build:eleventy": "eleventy",
     "build:sass": "sass  --no-source-map --style=compressed src/assets/theming:_site/assets",
-    "start": "npm-run-all build:sass generate:sprite --parallel watch:*",
+    "start": "npm-run-all build:sass --parallel watch:*",
     "build": "npm-run-all build:*",
     "debug": "DEBUG=* npx eleventy"
   },
@@ -19,13 +19,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0",
+    "@11ty/eleventy": "^3.0.0",
-    "@11ty/eleventy-img": "^3.0.0",
+    "@11ty/eleventy-img": "^5.0.0",
     "@11ty/eleventy-navigation": "^0.3.5",
-    "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@11ty/eleventy-plugin-rss": "^2.0.2",
+    "@11ty/eleventy-upgrade-help": "^3.0.1",
     "luxon": "^3.2.1",
     "npm-run-all": "^4.1.5",
     "sass": "^1.58.3",
-    "svg-icon-sprite": "^1.1.1"
+    "eleventy-plugin-icons": "^4.5.1"
   }
 }

src/_includes/components/footer.njk

@@ -3,13 +3,7 @@
     <a class="social-media__link"
       href="https://twitter.com/claudia_rndrs"
       target="_blank">
-      <svg-icon
+      {% icon "custom:twitter", class="icon" %}
-          src="/assets/sprite.svg#twitter"
-          width="16px"
-          viewBox="0 0 32 32"
-          aria-hidden="true"
-          focusable="false"
-      ></svg-icon>
 
       <span class="sr-only">Twitter</span>
     </a>

src/_includes/components/metadata.njk

@@ -3,6 +3,7 @@
   
 <meta name="description" content="{{ metadata.description }}">
 <meta name="author" content="{{ metadata.author.name }}">
+<meta name="generator" content="{{ eleventy.generator }}">
 
 <meta property="og:title" content="{{ title }}">
 <meta property="og:type" content="website">

src/assets/sprite.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
-<symbol id="twitter"
-   
-    width="32" 
-    height="32" 
-    viewBox="0 0 32 32">
-    <title>twitter</title>
-    <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
-</symbol>
-
-</svg>

src/blog/article1.md

@@ -8,5 +8,5 @@ category: "cat1"
 Having landed on this Eleventy starter, you probably are no stranger to Eleventy. But if you are, you should definitely check out its benefits. Getting started with Eleventy is quick and easy.
 <!-- excerpt -->
 
-{% image {src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c", alt: "A laptop with some lines of code on the screen", className: "image", widths: [300, 600] } %}
+<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c" alt="A laptop with some lines of code on the screen" />
 

src/index.md

@@ -12,7 +12,7 @@ This eleventy starter already includes:
 - Basic site navigation with eleventy-navigation
 - Blog categories & category based navigation
 - Image optimisation with Eleventy-img
-- SVG icons with svg-icon-sprite
+- SVG icons with Eleventy-plugin-icon
 - SEO (sitemap, metadata, robots.txt)
 - RSS feed
 - Luxon for handling dates & times