Merge pull request #35 from madrilene/docs-page

Docs page
2024-02-07 12:35:44 +01:00 · 2024-02-07 12:35:44 +01:00 · f69b6e84b3
commit f69b6e84b3
parent 0883c3dabd 81f2ab5dee
47 changed files with 579 additions and 307 deletions
--- a/config/plugins/markdown.js
+++ b/config/plugins/markdown.js
@ -4,10 +4,12 @@ const markdownItAnchor = require('markdown-it-anchor');
 const markdownItClass = require('@toycode/markdown-it-class');
 const markdownItLinkAttributes = require('markdown-it-link-attributes');
 const markdownItEmoji = require('markdown-it-emoji').full;
+const markdownItEleventyImg = require('markdown-it-eleventy-img');
 const markdownItFootnote = require('markdown-it-footnote');
 const markdownitMark = require('markdown-it-mark');
 const markdownitAbbr = require('markdown-it-abbr');
 const {slugifyString} = require('../utils');
+const path = require('path');

 const markdownLib = markdownIt({
  html: true,
@ -42,6 +44,23 @@ const markdownLib = markdownIt({
    }
  ])
  .use(markdownItEmoji)
+  .use(markdownItEleventyImg, {
+    imgOptions: {
+      widths: [440, 880],
+      urlPath: '/assets/images/',
+      outputDir: './dist/assets/images/',
+      formats: ['webp', 'jpeg']
+    },
+    globalAttributes: {
+      loading: 'lazy',
+      decoding: 'async',
+      sizes: '90vw'
+    },
+		// prepend src for markdown images
+    resolvePath: (filepath, env) => {
+      return path.join('src', filepath);
+    }
+  })
  .use(markdownItFootnote)
  .use(markdownitMark)
  .use(markdownitAbbr);
--- a/config/shortcodes/image/index.js
+++ b/config/shortcodes/image/index.js
@ -18,7 +18,7 @@ const imageShortcode = async (
  loading = 'lazy',
  className,
  sizes = '90vw',
-  widths = [320, 570, 880, 1024, 1248],
+  widths = [440, 880, 1360],
  formats = ['avif', 'webp', 'jpeg']
 ) => {
  const metadata = await Image(src, {
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "eleventy-excellent",
-  "version": "2.0.1",
+  "version": "2.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "eleventy-excellent",
-      "version": "2.0.1",
+      "version": "2.1.0",
      "license": "ISC",
      "dependencies": {
        "@11ty/eleventy": "^2.0.1",
@ -33,6 +33,7 @@
        "markdown-it": "^14.0.0",
        "markdown-it-abbr": "^2.0.0",
        "markdown-it-anchor": "^8.6.5",
+        "markdown-it-eleventy-img": "^0.10.1",
        "markdown-it-emoji": "^3.0.0",
        "markdown-it-footnote": "^4.0.0",
        "markdown-it-link-attributes": "^4.0.1",
@ -1165,13 +1166,16 @@
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
    "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
      "dev": true,
      "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@ -1202,17 +1206,18 @@
      }
    },
    "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
-      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
      "dev": true,
      "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
        "is-shared-array-buffer": "^1.0.2"
      },
      "engines": {
@ -1283,9 +1288,9 @@
      }
    },
    "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
+      "integrity": "sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==",
      "dev": true,
      "engines": {
        "node": ">= 0.4"
@ -1295,9 +1300,9 @@
      }
    },
    "node_modules/b4a": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
-      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw=="
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.6.tgz",
+      "integrity": "sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg=="
    },
    "node_modules/babel-walk": {
      "version": "3.0.0-canary-5",
@ -1487,13 +1492,17 @@
      "dev": true
    },
    "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz",
+      "integrity": "sha512-Mj50FLHtlsoVfRfnHaZvyrooHcrlceNZdL/QBvJJVd9Ta55qCQK0gs4ss2oZDeV9zFCs6ewzYgVE5yfVmfFpVg==",
      "dependencies": {
+        "es-errors": "^1.3.0",
        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.3",
+        "set-function-length": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@ -1530,9 +1539,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001581",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz",
-      "integrity": "sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==",
+      "version": "1.0.30001585",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001585.tgz",
+      "integrity": "sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==",
      "dev": true,
      "funding": [
        {
@ -1573,15 +1582,9 @@
      }
    },
    "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@ -1594,6 +1597,9 @@
      "engines": {
        "node": ">= 8.10.0"
      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
      "optionalDependencies": {
        "fsevents": "~2.3.2"
      }
@ -2034,13 +2040,14 @@
      }
    },
    "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.2.tgz",
+      "integrity": "sha512-SRtsSqsDbgpJBbW3pABMCOt6rQyeM8s8RiyeSN8jYG8sYmt/kGJejbydttUsnDs1tadr19tvhT4ShwMyoqAm4g==",
      "dependencies": {
-        "get-intrinsic": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.2",
        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.1"
      },
      "engines": {
        "node": ">= 0.4"
@ -2216,9 +2223,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.651",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.651.tgz",
-      "integrity": "sha512-jjks7Xx+4I7dslwsbaFocSwqBbGHQmuXBJUK9QBZTIrzPq3pzn6Uf2szFSP728FtLYE3ldiccmlkOM/zhGKCpA==",
+      "version": "1.4.659",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.659.tgz",
+      "integrity": "sha512-sRJ3nV3HowrYpBtPF9bASQV7OW49IgZC01Xiq43WfSE3RTCkK0/JidoCmR73Hyc1mN+l/H4Yqx0eNiomvExFZg==",
      "dev": true
    },
    "node_modules/emoji-regex": {
@ -2326,6 +2333,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/es-set-tostringtag": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
@ -2396,9 +2411,9 @@
      }
    },
    "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
      "dev": true,
      "engines": {
        "node": ">=6"
@ -2483,9 +2498,9 @@
      "dev": true
    },
    "node_modules/fastq": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.0.tgz",
-      "integrity": "sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==",
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
      "dependencies": {
        "reusify": "^1.0.4"
      }
@ -2728,15 +2743,19 @@
      }
    },
    "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
      "dependencies": {
+        "es-errors": "^1.3.0",
        "function-bind": "^1.1.2",
        "has-proto": "^1.0.1",
        "has-symbols": "^1.0.3",
        "hasown": "^2.0.0"
      },
+      "engines": {
+        "node": ">= 0.4"
+      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -2754,13 +2773,13 @@
      }
    },
    "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.1.tgz",
+      "integrity": "sha512-KmuibvwbWaM4BHcBRYwJfZ1JxyJeBwB8ct9YYu67SvYdbEIlcQ2e56dHxfbobqW38GXo8/zDFqJeGtHiVbWyQw==",
      "dev": true,
      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0"
      },
      "engines": {
        "node": ">= 0.4"
@ -2989,11 +3008,11 @@
      }
    },
    "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
      "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
      },
      "engines": {
        "node": ">= 0.4"
@ -3097,9 +3116,9 @@
      ]
    },
    "node_modules/ignore": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
-      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
      "dev": true,
      "engines": {
        "node": ">= 4"
@ -3139,12 +3158,12 @@
      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
    },
    "node_modules/internal-slot": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
-      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
      "dev": true,
      "dependencies": {
-        "get-intrinsic": "^1.2.2",
+        "es-errors": "^1.3.0",
        "hasown": "^2.0.0",
        "side-channel": "^1.0.4"
      },
@ -3175,14 +3194,16 @@
      }
    },
    "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@ -3436,12 +3457,12 @@
      }
    },
    "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
      "dev": true,
      "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
      },
      "engines": {
        "node": ">= 0.4"
@ -3756,6 +3777,21 @@
        "markdown-it": "*"
      }
    },
+    "node_modules/markdown-it-eleventy-img": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-eleventy-img/-/markdown-it-eleventy-img-0.10.1.tgz",
+      "integrity": "sha512-MaPM7M1qFzbMj1kUeOiC4ZKICO+543bCDyCd7X3PvUdKwIX1dLFv00jO4D6rJPhiJTW7iFdHkRATuvgUdYCE2w==",
+      "dev": true,
+      "dependencies": {
+        "@11ty/eleventy-img": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14.15"
+      },
+      "peerDependencies": {
+        "markdown-it": ">= 9.0.0"
+      }
+    },
    "node_modules/markdown-it-emoji": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-3.0.0.tgz",
@ -4587,9 +4623,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.33",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
-      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+      "version": "8.4.34",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.34.tgz",
+      "integrity": "sha512-4eLTO36woPSocqZ1zIrFD2K1v6wH7pY1uBh0JIM2KKfrVtGvPFiAku6aNOP0W1Wr9qwnaCsF0Z+CrVnryB2A8Q==",
      "funding": [
        {
          "type": "opencollective",
@ -5766,13 +5802,13 @@
      ]
    },
    "node_modules/safe-regex-test": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.2.tgz",
-      "integrity": "sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
      "dev": true,
      "dependencies": {
-        "call-bind": "^1.0.5",
-        "get-intrinsic": "^1.2.2",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
        "is-regex": "^1.1.4"
      },
      "engines": {
@ -5871,9 +5907,9 @@
      }
    },
    "node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
      "dependencies": {
        "lru-cache": "^6.0.0"
      },
@ -5901,13 +5937,14 @@
      }
    },
    "node_modules/set-function-length": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.0.tgz",
-      "integrity": "sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
+      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
      "dependencies": {
-        "define-data-property": "^1.1.1",
+        "define-data-property": "^1.1.2",
+        "es-errors": "^1.3.0",
        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.2",
+        "get-intrinsic": "^1.2.3",
        "gopd": "^1.0.1",
        "has-property-descriptors": "^1.0.1"
      },
@ -5980,14 +6017,18 @@
      }
    },
    "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
+      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
      "dev": true,
      "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@ -6174,9 +6215,9 @@
      }
    },
    "node_modules/streamx": {
-      "version": "2.15.6",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.6.tgz",
-      "integrity": "sha512-q+vQL4AAz+FdfT137VF69Cc/APqUbxy+MDOImRrMvchJpigHj9GksgDU2LYbO9rx7RX6osWgxJB2WxhYv4SZAw==",
+      "version": "2.15.7",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.7.tgz",
+      "integrity": "sha512-NPEKS5+yjyo597eafGbKW5ujh7Sm6lDLHZQd/lRSz6S0VarpADBJItqfB4PnwpS+472oob1GX5cCY9vzfJpHUA==",
      "dependencies": {
        "fast-fifo": "^1.1.0",
        "queue-tick": "^1.0.1"
@ -6717,14 +6758,14 @@
      }
    },
    "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.1.tgz",
+      "integrity": "sha512-RSqu1UEuSlrBhHTWC8O9FnPjOduNs4M7rJ4pRKoEjtx1zUNOPN2sSXHLDX+Y2WPbHIxbvg4JFo2DNAEfPIKWoQ==",
      "dev": true,
      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
      },
      "engines": {
        "node": ">= 0.4"
@ -6941,16 +6982,16 @@
      }
    },
    "node_modules/which-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
-      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.14.tgz",
+      "integrity": "sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==",
      "dev": true,
      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.4",
+        "available-typed-arrays": "^1.0.6",
+        "call-bind": "^1.0.5",
        "for-each": "^0.3.3",
        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.1"
      },
      "engines": {
        "node": ">= 0.4"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "eleventy-excellent",
-  "version": "2.0.2",
+  "version": "2.1.0",
  "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
  "author": "Lene Saile",
  "license": "ISC",
@ -44,6 +44,7 @@
    "markdown-it": "^14.0.0",
    "markdown-it-abbr": "^2.0.0",
    "markdown-it-anchor": "^8.6.5",
+    "markdown-it-eleventy-img": "^0.10.1",
    "markdown-it-emoji": "^3.0.0",
    "markdown-it-footnote": "^4.0.0",
    "markdown-it-link-attributes": "^4.0.1",
--- a/readme.md
+++ b/readme.md
@ -8,15 +8,15 @@ Easy to use Eleventy starter, based on the workflow suggested by Andy Bell's [bu
 If you end up using this starter, feel free to send me a link, I'd love to see it!

 - [Eleventy Excellent](#eleventy-excellent)
-  - [Preview](#preview)
-  - [Features](#features)
-  - [First steps](#first-steps)
-  - [Development](#development)
-    - [Install dependencies](#install-dependencies)
-    - [Working locally](#working-locally)
-    - [Creating a production build](#creating-a-production-build)
-  - [Built with Eleventy Excellent](#built-with-eleventy-excellent)
-  - [Credits and Thank yous](#credits-and-thank-yous)
+	- [Preview](#preview)
+	- [Features](#features)
+	- [First steps](#first-steps)
+	- [Development](#development)
+		- [Install dependencies](#install-dependencies)
+		- [Working locally](#working-locally)
+		- [Creating a production build](#creating-a-production-build)
+	- [Built with Eleventy Excellent](#built-with-eleventy-excellent)
+	- [Credits and Thank yous](#credits-and-thank-yous)

 ## Preview

@ -36,14 +36,14 @@ https://eleventy-excellent.netlify.app/
 - 301 redirects for Netlify _([see blog post](https://eleventy-excellent.netlify.app/blog/post-with-301-redirects/))_
 - Automatically generated Open Graph images for blog posts _([see blog post](https://eleventy-excellent.netlify.app/blog/open-graph-images/))_
 - How Tailwind CSS is used here _([see blog post](https://eleventy-excellent.netlify.app/blog/what-is-tailwind-css-doing-here/))_
- SEO basics (XML-sitemap, metadata)
+- XML-sitemap
 - dayjs handling dates & times
 - Bundling via esbuild
 - RSS feed (now you can add more than one)
- Links to services and social media profiles
+- Links to platforms and social media profiles
 - Mastodon domain verification snippet
 - carbon.txt - to show that their digital infrastructure runs on green electricity
- dark and light mode based on user preference and custom toggle
+- Accessible dark and light mode based on user preference and custom toggle
 - Tags in blog posts
 - Accessible blog pagination
 - A styleguide™
@ -121,6 +121,10 @@ Also have a look at those codepens!
 - https://ryanmulligan.dev/
 - https://codepen.io/hexagoncircle/

+**Steven Woodson**
+
+The style guide was inspired by a [great talk on the Eleventy Meetup](https://www.youtube.com/watch?v=3mhA2bH6q8s). Steven also wrote a [blog post](https://stevenwoodson.com/blog/eleventy-style-guide-generator-step-by-step-guide-adding-to-an-existing-site/) about that.
+
 **Aleksandr Hovhannisyan**

 Aleksandr seems to value a well-structured project just as much as I do. It was the repo from aleksandrhovhannisyan.com that inspired me to write the article [Organizing the Eleventy config file](https://www.lenesaile.com/en/blog/organizing-the-eleventy-config-file/). The 301 redirect solution I'm using is from Aleksandr's article.
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@ -42,13 +42,14 @@ module.exports = {
  navigation: {
    ariaTop: 'Main',
    ariaBottom: 'Complementary',
-    ariaSocial: 'Social',
+    ariaPlatforms: 'Platforms',
    closedText: 'Menu'
  },
  themeSwitch: {
    title: 'Theme',
    light: 'light',
-    dark: 'dark'
+    dark: 'dark',
+    initial: 'select'
  },
  greenweb: {
    // this goues into src/common/greenweb.njk
--- a/src/_data/personal.yaml
+++ b/src/_data/personal.yaml
@ -4,7 +4,7 @@ address: |-
  Your street
  12345, city
  Tel: +34 928231911
-social:
+platforms:
  github: 'https://github.com/madrilene/eleventy-excellent'
  mastodon: 'https://front-end.social/@lene'
  bluesky: 'https://bsky.app/profile/lenesaile.com'
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@ -1,10 +1,8 @@
-{% set activePage = page.url | url %}
-
 <footer class="site-foot">
  <div class="wrapper">
    <div class="site-foot__inner">
      <nav class="site-foot__inner text-step-0" aria-label="{{ meta.navigation.ariaBottom }}">
-        &copy; {% year %} <a href="/" {% if activePage === '/' %} aria-current="page" {% endif %}>{{ meta.siteName }} <small>{{ pkg.version }}</small>  </a>
+        &copy; {% year %} <a href="/"{% if page.url == "/" %} aria-current="page"{% endif %}>{{ meta.siteName }} <small>{{ pkg.version }}</small>  </a>

        {% for item in navigation.bottom %}
        <a
@ -20,9 +18,7 @@
        {% endfor %}
      </nav>

-				<nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaSocial }}">
-
-
+				<nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaPlatforms }}">

 							<!-- gets the first item from the feed loop set in meta -->
 							<a href="{{ meta.blog.feedLinks[0].url }}" rel="alternate" type="{{ meta.blog.feedLinks[0].type }}">
@ -30,12 +26,12 @@
 								<div aria-hidden="true">{% include 'svg/rss.svg' %}</div>
 							</a>

-							{% for key, value in personal.social %}
+							{% for key, value in personal.platforms %}
 							{% if value != "" %}
-								<!-- regular social networks -->
+								<!-- regular platforms -->
 							<a href="{{ value }}" rel="me">
 								<span class="visually-hidden">{{ key | capitalize }}</span>
-								<div aria-hidden="true">{% include 'svg/social-' + key + '.svg' %}</div>
+								<div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
 							</a>
 							{% endif %}

@ -58,7 +54,7 @@
 				class="button"
 				theme-toggle
 			>
-				<span id="theme-switcher-value"></span>
+				<span id="theme-switcher-value">{{ meta.themeSwitch.initial }}</span>
 			</button>

 		</div>
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@ -2,8 +2,7 @@

 <header class="wrapper">
  <div class="repel ontop" style="--gap: 0;">
-    {% set activePage = page.url | url %}
-			<a href="/" class="logo | cluster" {% if activePage === '/' %} aria-current="page" {% endif %}>
+			<a href="/" class="logo | cluster"{% if page.url == "/" %} aria-current="page"{% endif %}>
 			{% include "svg/star.svg" %}
 			<span>{{ meta.siteName }}</span>
 			</a>
--- a/src/_includes/svg/platform-bluesky.svg
+++ b/src/_includes/svg/platform-bluesky.svg
--- a/src/_includes/svg/platform-github.svg
+++ b/src/_includes/svg/platform-github.svg
--- a/src/_includes/svg/platform-gitlab.svg
+++ b/src/_includes/svg/platform-gitlab.svg
--- a/src/_includes/svg/platform-instagram.svg
+++ b/src/_includes/svg/platform-instagram.svg
--- a/src/_includes/svg/platform-kofi.svg
+++ b/src/_includes/svg/platform-kofi.svg
--- a/src/_includes/svg/platform-linkedin.svg
+++ b/src/_includes/svg/platform-linkedin.svg
--- a/src/_includes/svg/platform-mastodon.svg
+++ b/src/_includes/svg/platform-mastodon.svg
--- a/src/_includes/svg/platform-pinterest.svg
+++ b/src/_includes/svg/platform-pinterest.svg
--- a/src/_includes/svg/platform-tiktok.svg
+++ b/src/_includes/svg/platform-tiktok.svg
--- a/src/_includes/svg/platform-youtube.svg
+++ b/src/_includes/svg/platform-youtube.svg
--- a/src/_includes/svg/star.svg
+++ b/src/_includes/svg/star.svg
@ -4,6 +4,8 @@
  width="1em"
  height="1em"
  fill="currentColor"
+	aria-hidden="true"
+	focusable="false"
 >
  <path
    fill-rule="evenodd"
--- a/src/_includes/theme-toggle-inline.js
+++ b/src/_includes/theme-toggle-inline.js
@ -0,0 +1 @@
+(()=>{var r="theme-preference",l="{{ meta.themeSwitch.light }}",o="{{ meta.themeSwitch.dark }}",h=()=>{e.value=e.value==="light"?"dark":"light",document.querySelector("[theme-toggle]").querySelector("span").innerHTML=e.value==="light"?l:o,n()},i=()=>localStorage.getItem(r)?localStorage.getItem(r):window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",n=()=>{localStorage.setItem(r,e.value),c()},c=()=>{document.firstElementChild.setAttribute("data-theme",e.value)},e={value:i()};c();window.onload=()=>{let t=document.querySelector("[theme-toggle]"),a=document.querySelector("[data-theme-switcher]");a&&(a.removeAttribute("hidden"),c(),t.addEventListener("click",h),t.querySelector("span").innerHTML=e.value==="light"?l:o)};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:t})=>{e.value=t?"dark":"light",n()});})();
--- a/src/assets/css/blocks/card.css
+++ b/src/assets/css/blocks/card.css
@ -1,6 +1,6 @@
 .card {
  background-color: var(--color-bg-accent);
-  border: 3px solid var(--color-bg-accent);
+  border: 4px solid var(--color-bg-accent);
  color: var(--color-text);
  padding: var(--space-s-m);
  border-radius: var(--border-radius);
@ -25,7 +25,7 @@

 .card:hover,
 .card:focus-within {
-  border: 3px solid var(--color-primary);
+  border: 4px solid var(--color-primary);
 }

 /* 'clickable' */
--- a/src/assets/css/blocks/code.css
+++ b/src/assets/css/blocks/code.css
@ -1,7 +1,5 @@
 code {
-  --color-code-red: var(--color-primary);
  --color-code-orange: hsl(30, 70%, 60%);
-  --color-code-yellow: var(--color-terriary);
  --color-code-blue: var(--color-secondary);
  --color-code-indigo: hsl(260, 48%, 56%);
  --color-code-violet: hsl(314, 70%, 60%);
@ -86,7 +84,7 @@ pre[class*='language-'] {
 .language-css > code,
 .language-sass > code,
 .language-scss > code {
-  color: var(--color-code-violet);
+  color: var(--color-text);
 }

 [class*='language-'] .namespace {
@ -94,15 +92,15 @@ pre[class*='language-'] {
 }

 .token.atrule {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
 }

 .token.attr-name {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.attr-value {
-  color: var(--color-code-blue);
+  color: var(--color-text);
 }

 .token.attribute {
@ -110,11 +108,11 @@ pre[class*='language-'] {
 }

 .token.boolean {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
 }

 .token.builtin {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.cdata {
@ -126,15 +124,15 @@ pre[class*='language-'] {
 }

 .token.class {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.class-name {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.color {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.comment {
@ -142,7 +140,7 @@ pre[class*='language-'] {
 }

 .token.constant {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
 }

 .token.deleted {
@ -158,20 +156,20 @@ pre[class*='language-'] {
 }

 .token.function {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
 }

 .token.hexcode {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.id {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
  font-weight: bold;
 }

 .token.important {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
  font-weight: bold;
 }

@ -180,16 +178,16 @@ pre[class*='language-'] {
 }

 .token.keyword {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
  font-style: italic;
 }

 .token.number {
-  color: var(--color-code-violet);
+  color: var(--color-text);
 }

 .token.operator {
-  color: var(--color-code-indigo);
+  color: var(--color-code-gray);
 }

 .token.prolog {
@ -209,11 +207,11 @@ pre[class*='language-'] {
 }

 .token.punctuation {
-  color: var(--color-code-indigo);
+  color: var(--color-code-gray);
 }

 .token.regex {
-  color: var(--color-code-yellow);
+  color: var(--color-code-orange);
 }

 .token.selector {
@ -221,11 +219,11 @@ pre[class*='language-'] {
 }

 .token.string {
-  color: var(--color-code-blue);
+  color: var(--color-text);
 }

 .token.symbol {
-  color: var(--color-code-red);
+  color: var(--color-code-pink);
 }

 .token.tag {
--- a/src/assets/css/blocks/details.css
+++ b/src/assets/css/blocks/details.css
@ -0,0 +1,58 @@
+details > * + * {
+  margin-block-start: var(--flow-space, 1em);
+}
+
+details > p:last-child {
+  margin-block-end: var(--space-l-xl);
+}
+
+summary {
+  grid-column: content;
+}
+
+summary {
+  display: flex;
+  align-items: baseline;
+  line-height: 1.2;
+  gap: 0 1ch;
+  cursor: pointer;
+  list-style: none;
+  font-weight: bold;
+  font-size: var(--size-step-1);
+}
+
+summary:hover,
+summary:focus-visible {
+  color: var(--color-primary);
+}
+
+summary::before {
+  content: '+';
+  display: block;
+  color: var(--color-primary);
+  font-family: var(--font-mono);
+  font-size: var(--size-step-0);
+  font-weight: normal;
+  line-height: 0.5;
+  transform: scale(1.4);
+  transform-origin: right bottom;
+}
+
+[open] summary::before {
+  content: '-';
+}
+
+/* Hide default marker */
+summary::-webkit-details-marker,
+summary::marker {
+  content: '';
+  display: none;
+}
+
+summary + * {
+  margin-block-start: var(--space-s-m);
+}
+
+details > * + * {
+  margin-inline-start: 2ch;
+}
--- a/src/assets/css/blocks/gallery.css
+++ b/src/assets/css/blocks/gallery.css
@ -13,3 +13,9 @@ dialog::backdrop {
  opacity: 0.85;
  filter: brightness(50%);
 }
+
+/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */
+
+html:has(dialog[open]:modal) {
+  overflow: hidden;
+}
--- a/src/assets/css/blocks/footnotes.css
+++ b/src/assets/css/blocks/footnotes.css
@ -0,0 +1,21 @@
+.footnotes {
+  font-size: var(--size-step-min-1);
+}
+
+.footnote-ref {
+  font-size: var(--size-step-min-1);
+  vertical-align: super;
+  margin-inline-start: var(--space-xs);
+  color: var(--color-secondary);
+}
+
+.footnote-backref {
+  text-decoration: none;
+  background-color: var(--color-bg-accent);
+  border-radius: var(--border-radius);
+  padding-inline: var(--space-xs);
+}
+
+.footnote-backref:hover {
+  color: var(--color-primary);
+}
--- a/src/assets/css/blocks/prose.css
+++ b/src/assets/css/blocks/prose.css
@ -4,13 +4,14 @@
 }

 .prose :is(pre, pre + *, figure, figure + *) {
-  --flow-space: var(--space-s-m);
+  --flow-space: var(--space-m-l);
 }

 .prose figcaption {
  font-size: var(--size-step-min-1);
  text-align: center;
  padding-block-end: var(--space-xs);
+  margin-block-end: var(--space-s);
  border-bottom: 1px solid var(--color-bg-accent);
 }

--- a/src/assets/css/blocks/site-foot.css
+++ b/src/assets/css/blocks/site-foot.css
@ -16,10 +16,6 @@
  padding: var(--space-xs);
 }

-:not(nav#social).site-foot__inner {
-  flex-wrap: wrap;
-}
-
 .site-foot svg {
  inline-size: 1.1em;
  block-size: 1em;
--- a/src/assets/css/global/global-styles.css
+++ b/src/assets/css/global/global-styles.css
@ -90,6 +90,10 @@ hr {
  padding: 0;
 }

+ol li::marker {
+  color: var(--color-primary);
+}
+
 /* Base interactive elements */

 a {
--- a/src/assets/css/global/reset.css
+++ b/src/assets/css/global/reset.css
@ -41,6 +41,11 @@ html:focus-within {
  scroll-behavior: smooth;
 }

+/* Make gutter area stable and present on both edges of the scrollbar */
+html {
+  scrollbar-gutter: stable both-edges;
+}
+
 /* Set core body defaults */
 body {
  min-height: 100vh;
--- a/src/assets/images/blog/og-preview.jpeg
+++ b/src/assets/images/blog/og-preview.jpeg
--- a/src/docs/css.md
+++ b/src/docs/css.md
@ -0,0 +1,7 @@
+---
+title: CSS
+---
+
+Add and delete your custom block stylesheets in `src/assets/css/blocks/*.css`, they get pulled in your output stylesheet automatically.
+
+The methodology used is [CUBE CSS.](https://cube.fyi/)
--- a/src/docs/delete.md
+++ b/src/docs/delete.md
@ -0,0 +1,15 @@
+---
+title: What can be deleted
+---
+
+You can delete the following files and archives (the theme may break though, if there are still references to them):
+
+- `github.js` in `src/_data/`
+- `builtwith.json` in `src/_data/`
+- all the blog posts, as these serve only as an example
+- the directoy and all files in `src/docs`
+- all pages in `src/pages`, though you might want to keep `index.njk` as a starting point
+- You can delete `screenshots`, `blog` and `gallery` in `src/assets/images`.
+  Keep the `favicon` and `template` folders though.
+
+If you don't want to feature any code examples, you may delete the whole stylesheet for syntax highlighting: `src/assets/css/blocks/code.css`.
--- a/src/docs/design-tokens.md
+++ b/src/docs/design-tokens.md
@ -0,0 +1,11 @@
+---
+title: Design tokens
+---
+
+Edit all your preferences (colors, fluid text sizes etc.) in `src/_data/designTokens/*.json`.
+
+Additional colors, variants and gradients for custom properties are automatically created in `src/assets/css/global/variables.css` based on the colors set in `colors.json`. If you change names you should edit `variables.css` as well and check if the names are used elsewhere in the template.
+
+In the [style guide](/styleguide/) you can see how everything turns out.
+
+Please note that adjustments in `viewports.json` only affect your utility classes and custom properties, but do not change the dimensions of your page. You can control this using the custom property `--wrapper-width`.
--- a/src/docs/docs.json
+++ b/src/docs/docs.json
@ -0,0 +1,4 @@
+{
+	"tags": "docs",
+  "permalink": false
+}
--- a/src/docs/fonts.md
+++ b/src/docs/fonts.md
@ -0,0 +1,13 @@
+---
+title: Fonts
+---
+
+This starter uses three fonts, Red Hat Display, Figtree and Roboto Mono. You can add or delete fonts in `src/assets/fonts`.
+
+You can create font subsets for a better performance, for example using the [Fontsquirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).
+
+Next, edit `src/assets/css/global/fonts.css`.
+
+Add your new font aliases in `src/_data/designTokens/fonts.json`.
+
+Finally, in `src/_layouts/base.njk` edit the font preloads. Roboto Mono is only used for code blocks. Its preload is set directly in the post layout: `src/_layouts/post.njk`.
--- a/src/docs/open-graph.md
+++ b/src/docs/open-graph.md
@ -0,0 +1,37 @@
+---
+title: Open Graph images
+---
+
+You can see a [preview of the OG images in a blog post](/blog/open-graph-images/).
+
+They are referenced in `meta-info.njk`:
+
+{% raw %}
+
+```html
+<meta
+  property="og:image"
+  content="{{ meta.url }}
+  {% if (layout == 'post') %}/assets/og-images/{{ title | slugify }}-preview.jpeg
+  {% else %}{{ meta.opengraph_default }}
+  {% endif %}"
+/>
+```
+
+{% endraw %}
+
+To change the look and behaviour of those images and replace the SVG background edit `src/common/og-images.njk`.
+
+The implementation is based on [Bernard Nijenhuis article.](https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/)
+
+If you want to be inspired, have a look at [what Lea does here.](https://github.com/learosema/lea-codes/blob/main/src/opengraph-default.njk)
+
+Previously the images were created at build time, but this leads to not rendering the font - if the system executing the build has not installed it, it will not be generated.
+
+A solution would be to always build the page yourself and then place it on the server directly. Or, as [Sophie Koonin does](https://github.com/sophiekoonin/localghost/blob/main/eleventy.config.js#L45-L47), explicitly specify the system to be used for the build and select a font that this system has installed by default.
+
+At the moment I have relocated the creation of the images in the development process, so that the font only needs to be installed on your own system. The images are located in `src/assets/og-images` and are comitted.
+
+This is fine as long as you only work with markdown and the font is always installed on your system, how this works with a CMS workflow remains to be seen.
+
+Let me know if you encounter any problems.
--- a/src/docs/platforms.md
+++ b/src/docs/platforms.md
@ -0,0 +1,10 @@
+---
+title: Platforms (icons)
+---
+
+Find available social media / platform icons in `src/_includes/svg` (prefixed with `platform-`).
+If you add new icons they too must be prefixed with "platform-".
+
+In `personal.yaml` you can add new platforms and their URLs. The key must be the same as the prefix of the icon.
+
+https://simpleicons.org/ features a great variety of free SVG icons for popular brands.
--- a/src/docs/tags.md
+++ b/src/docs/tags.md
@ -0,0 +1,50 @@
+---
+title: Tags
+---
+
+This was probably the most opinionated decision: tags have been integrated since version 2.0.
+
+In several places you will find a code block that looks like this:
+
+{% raw %}
+
+```html
+<!-- loop posts -->
+{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
+<!-- activate tags -->
+{% set activateTags = true %}
+<!-- set heading context -->
+{% set headingContext = "h3" %}
+<!-- card -->
+{% include 'components/card.njk' %} {% endfor %}
+```
+
+{% endraw %}
+
+Here `card.njk` is imported as a component, and some settings are made beforehand. In connection with tags, ` {% set activateTags = true %}` is important, because here you can switch off the display of tags in this card instance.
+
+The tags are in your collection items in the front matter with the syntax
+
+{% raw %}
+
+```md
+tags:
+  - image
+  - feature
+```
+
+{% endraw %}
+
+or
+
+{% raw %}
+
+```md
+tags: ['markdown', 'feature']
+```
+
+{% endraw %}
+
+are entered.
+
+If you generally do not want any tags to show, it is probably easiest to not create any at all.
--- a/src/docs/theme.md
+++ b/src/docs/theme.md
@ -0,0 +1,13 @@
+---
+title: Theme (dark / light mode)
+---
+
+With version 2.0 I introduced dark and light mode. This is not intended to be a gimmick, but to support the accessibility of the site. And I tend to read blog posts at night, and if there is no dark mode then I leave the tab for later, and we all know how that ends.
+
+Dark and light mode respects the user agent or operating system settings using the `prefers-color-scheme` CSS media feature. But there is also a switch in the `<footer>`.
+
+If you want to change something here, for example replace the button with a classic sun/moon icon, make sure to preserve accessibility. The accessible name ("Theme dark" or "Theme light") results from two IDs:
+
+`aria-labelledby="theme-switcher-label theme-switcher-value"`
+
+If you remove the text content of the `<button>`, the value for `theme-switcher-value` must therefore be obtained differently.
--- a/src/pages/get-started.md
+++ b/src/pages/get-started.md
@ -1,77 +0,0 @@
---
-title: Get started
-permalink: /get-started/index.html
-description: Websites built with this starter
-layout: page
-preloads:
-  href: '/assets/fonts/robotomono/robotomono-regular.woff2'
-  as: 'font'
-  type: 'font/woff2'
-  crossorigin: true
---
-
-You can use this starter as a template for your blog and you are ready to go! But there are some adjustments you have to make, most of them in `src/_data/meta.js`. It sets different "hard coded" text values all over the template, you can change the language, etc.
-
-Also, edit personal your details and social media in `src/_data/personal.yaml`.
-
-Find available social media / service icons in `src/_includes/svg` (prefixed with "social-").
-If you add new icons they too must be prefixed with "social-".
-
-Open `src/assets/css/blocks/external-link.css`. Replace "eleventy-excellent.netlify.app" with your own domain. This is about the external link indicators, they are matched with your domain. If you don't want to use external link indicators, feel free to delete the whole style rule. You can also add the class `no-indicator` to any anchor element you want to except from this rule.
-
-Edit your navigation items in `src/_data/navigation.js`.
-
-Add your custom (favicon) icons in `src/assets/images/favicon`.
-
-Not required, but recommended: you can delete the following files and archives (the theme may break though, if there are still references to them):
-
- `github.js` in `src/_data/`
- `builtwith.json` in `src/_data/`
- all the blog posts, as these serve only as an example
- all pages in `src/pages`, though you might want to keep `index.njk` as a starting point
- image folders "screenshots", "blog" and "gallery" in `src/assets/images`
-
-If you don't want to feature any code examples, you may delete the whole stylesheet for syntax highlighting: `src/assets/css/blocks/code.css`.
-
-## Change fonts
-
-This starter uses three fonts, Red Hat Display, Figtree and Roboto Mono. You can add or delete fonts in `src/assets/fonts`.
-
-You can create font subsets for a better performance, for example using the [Fontsquirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).
-
-Next, edit `src/assets/css/global/fonts.css`.
-
-Add your new font aliases in `src/_data/designTokens/fonts.json`.
-
-Finally, in `src/_layouts/base.njk` edit the font preloads. Roboto Mono is only used for code blocks. Its preload is set directly in the post layout: `src/_layouts/post.njk`.
-
-## Edit the design tokens
-
-Edit all your preferences (colors, fluid text sizes etc.) in `src/_data/designTokens/*.json`.
-
-Additional colors, variants and gradients for custom properties are automatically created in `src/assets/css/global/variables.css` based on the colors set in `colors.json`. If you change names you should edit `variables.css` as well and check if the names are used elsewhere in the template.
-
-In the [style guide](/styleguide/) you can see how everything turns out.
-
-Please note that adjustments in `viewports.json` only affect your utility classes and custom properties, but do not change the dimensions of your page. You can control this using the custom property `--wrapper-width`.
-
-## Further adjustments
-
-Optional: rename `.env-sample` to `.env`. You may set a custom URL for local development and add your own variables.
-
-Add and delete your custom block stylesheets in `src/assets/css/blocks/*.css`, they get pulled in your output stylesheet automatically.
-
-If you are working with **VS Code** I recommend installing the "Tailwind CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you will find that Tailwind CSS does not work as you might expect. I exlain this in [one of the blog posts](/blog/what-is-tailwind-css-doing-here/).
-
-## More features
-
-The [blog posts](/blog/) explain / show some basic features that aren't covered here:
-
- [Galleries](/blog/post-with-a-gallery/)
- [Open Graph images](/blog/open-graph-images/)
- [Markdown](/blog/post-with-all-the-markdown/)
- [Youtube](/blog/post-with-a-video/)
- [Using the image plugin](/blog/post-with-an-image/)
- [Syntax highlighting](/blog/post-with-some-code/)
- [301 redirects](/blog/post-with-301-redirects/)
- [Fetch content](/blog/post-with-fetched-content/)
--- a/src/pages/get-started.njk
+++ b/src/pages/get-started.njk
@ -0,0 +1,48 @@
+---
+title: Get started
+permalink: /get-started/index.html
+description: Websites built with this starter
+layout: page
+preloads:
+  href: '/assets/fonts/robotomono/robotomono-regular.woff2'
+  as: 'font'
+  type: 'font/woff2'
+  crossorigin: true
+---
+
+<p>
+  You can use this starter as a template for your blog and you are ready to go! But there
+  are some <strong>adjustments you have to make</strong>.
+</p>
+
+<ul>
+  <li>
+    <code>src/_data/meta.js</code> - sets different "hard coded" text values all over the
+    template, you can change the language, etc.
+  </li>
+  <li>
+    edit your personal details and social media in <code>src/_data/personal.yaml</code>.
+  </li>
+  <li>
+    Open <code>src/assets/css/blocks/external-link.css</code>. Replace
+    "eleventy-excellent.netlify.app" with your own domain. This is about the external link
+    indicators, they are matched with your domain. If you don't want to use external link
+    indicators, feel free to delete the whole style rule. You can also add the class
+    <code>no-indicator</code> to any anchor element you want to except from this rule.
+  </li>
+  <li>Edit your navigation items in <code>src/_data/navigation.js</code>.</li>
+</ul>
+
+
+<p>If you are working with <strong>VS Code</strong> I recommend installing the "Tailwind CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you will find that Tailwind CSS does not work as you might expect. I explain this in <a href="/blog/what-is-tailwind-css-doing-here/">one of the blog posts</a>.</p>
+
+<p>The <a href="/blog/page-0/">blog posts</a> also explain / show some basic features that aren't covered here.</p>
+
+<h2 id="docs">"Docs" lol</h2>
+
+{%- for entry in collections.docs -%}
+<details id="{{ entry.data.title | slugify }}">
+  <summary>{{ entry.data.title }}</summary>
+  {{ entry.templateContent | safe }}
+</details>
+{%- endfor -%}
--- a/src/pages/styleguide.njk
+++ b/src/pages/styleguide.njk
@ -48,7 +48,7 @@ customGradients:
        {%- endfor %}
      </ul>

-      <h3 class="heading-line | mt-l-xl">Custom created colors</h3>
+      <h3 class="heading-line | mt-l-xl">Custom colors</h3>
      <p>in <code>variables.css</code>. Some only change for dark theme.</p>

      <ul role="list">
--- a/src/posts/2022-09-01-post-with-code.md
+++ b/src/posts/2022-09-01-post-with-code.md
@ -32,7 +32,7 @@ cards.forEach(card => {
  margin-inline: auto;
 }

-/* © Stephanie Exkles, https://smolcss.dev/ */
+/* © Stephanie Eckles, https://smolcss.dev/ */
 ```

 Edit styles in `css/blocks/code.css`
--- a/src/posts/2022-11-02-markdown.md
+++ b/src/posts/2022-11-02-markdown.md
@ -5,11 +5,13 @@ date: 2022-11-02
 tags: ['markdown', 'feature']
 ---

-A lot of markdown packages are installed to help you write your posts. You can configure them in `config/plugins/markdown.js`.
+A lot of markdown packages are installed to help you write your posts.
+You can configure them in `config/plugins/markdown.js`.

-As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (lenesaile.com) and the automatic addition of `target: '_blank'` and `rel: 'noreferrer noopener'` for external links (all links with the pattern`/^https?:/`).
+As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (www.lenesaile.com) and the automatic addition of and `rel: 'noopener'` for external links (all links with the pattern`/^https?:/`).

-This is a small pitfall! Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
+**This is a tiny pitfall!**
+Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:

 ```
 An internal link to the [about page](/about/)
@ -75,12 +77,16 @@ _This is italic text_

 Syntax highlighting

-```js
-var foo = function (bar) {
-  return bar++;
-};
+```css
+.back-top-top {
+  padding: 10px;
+  background: white;
+  margin-top: 110vh;
+  position: sticky;
+  bottom: 0;
+}

-console.log(foo(5));
+/* by David Darnes */
 ```

 ## Tables
@ -93,27 +99,29 @@ console.log(foo(5));

 ## Links

-`rel="noreferrer noopener"` and `target="_blank"` is added automatically to external links. So is an indicator icon, see global-styles.css
-[link text](http://dev.nodeca.com)
-[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
+[Read all those articles](https://moderncss.dev/)
+Autoconverted link https://every-layout.dev/ (enabled via linkify)

-Autoconverted link https://github.com/nodeca/pica (enabled via linkify)
+## Emojis

-### Emojis
+**Literal:**
+🤩 💯 💚 👻 👾

-Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
-Shortcuts (emoticons): :-) :-( 8-) ;)
+**Classic markup:**
+:cry: :poop: :fire: :laughing: :christmas_tree:
+([A reference for emoji markup](https://gist.github.com/rxaviers/7360908))

-### mark
+**Shortcuts (emoticons)**:
+:-) :-( 8-) ;)
+
+## mark

 ==Marked text==

-### Footnotes
+## Footnotes

 Footnote 1 link[^first].
 Footnote 2 link[^second].
-Inline footnote^[Text of inline footnote] definition.
-Duplicated footnote reference[^second].

 [^first]:
    Footnote **can have markup**
@ -122,3 +130,9 @@ Duplicated footnote reference[^second].
 [^second]: Footnote text.

 \*[HTML]: Hyper Text Markup Language
+
+## Images
+
+Consider that `src` is already prepended in the settings.
+
+![](/assets/images/gallery/asturias-4.jpg)
--- a/src/posts/2023-01-25-opengraph-images.md
+++ b/src/posts/2023-01-25-opengraph-images.md
@ -9,38 +9,12 @@ tags:

 When you share your blog posts, a thumbnail image may appear - the image we define in our meta data as an Open Graph Image (`og:image`).

-This starter generates these images for your blog posts automatically.
+This starter generates these images for your blog posts automatically. They take in the title and date of the post.
+
+{% eleventyImage "./src/assets/images/blog/og-preview.jpeg", "Open Graph image preview of a blog Post. 'Eleventy Excellent 2.0' is written as a large title in the center, the date is shown above and the name and URL of the website is seen on the bottom. The backgrpund consists of layered pink color areas resembling a city skyline", "This is what an OG image for a blog posts looks right now" %}

 The fallback and default image for all other pages is the image set as `opengraph_default` in the `meta.js` global data file.

-`meta-info.njk`
+{% eleventyImage "./src/" + meta.opengraph_default, meta.opengraph_default_alt, "This is what the general OG image for non-blog posts looks like" %}

-{% raw %}
-
-```html
-<meta
-  property="og:image"
-  content="{{ meta.url }}
-  {% if (layout == 'post') %}/assets/og-images/{{ title | slugify }}-preview.jpeg
-  {% else %}{{ meta.opengraph_default }}
-  {% endif %}"
-/>
-```
-
-{% endraw %}
-
-To change the look and behaviour of those images and replace the SVG background edit `src/common/og-images.njk`. The implementation is based on [Bernard Nijenhuis article](https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/).
-
-## Recommendation
-
-If you want to get a little more creative, have a look at[ what Lea does here](https://github.com/learosema/lea-codes/blob/main/src/opengraph-default.njk).
-
-## v2.0 update
-
-Previously the images were created at build time, but this leads to problems with the set font - if the system executing the build has not installed it, it will not be generated.
-
-The solution is to always build the page yourself and then place it on the server directly. Or, as [Sophie Koonin does](https://github.com/sophiekoonin/localghost/blob/main/eleventy.config.js#L45-L47), explicitly specify the system to be used for the build and select a font that this system has installed by default.
-
-At the moment I have relocated the creation of the images in the development process, so that the font only needs to be installed on your own system. The images are located in `src/assets/og-images` and are comitted.
-
-This is fine as long as you only work with markdown and the font is always installed on your system, how this works with a CMS workflow remains to be seen. Please let me know if you encounter any problems.
+A more detailed explanation can be found in the [docs](/get-started/#docs).
--- a/src/posts/2023-10-30-demos.md
+++ b/src/posts/2023-10-30-demos.md
@ -4,7 +4,7 @@ description: 'As of version 2.0, the demos featured here are all directly built
 date: 2023-10-30
 demos:
  - title: Gallery
-    description: 'A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.'
+    description: 'A gallery with good old "popup" functionality inside a dialog element and a regular loop over images.'
    preview: '/blog/post-with-a-gallery/'
  - title: Pagination
    description: 'The blog collection with a pagination. To work with visual current page indication, :has() pseudo-class support is required.'
				`@ -0,0 +1 @@`
				(()=>{var r="theme-preference",l="{{ meta.themeSwitch.light }}",o="{{ meta.themeSwitch.dark }}",h=()=>{e.value=e.value==="light"?"dark":"light",document.querySelector("[theme-toggle]").querySelector("span").innerHTML=e.value==="light"?l:o,n()},i=()=>localStorage.getItem(r)?localStorage.getItem(r):window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",n=()=>{localStorage.setItem(r,e.value),c()},c=()=>{document.firstElementChild.setAttribute("data-theme",e.value)},e={value:i()};c();window.onload=()=>{let t=document.querySelector("[theme-toggle]"),a=document.querySelector("[data-theme-switcher]");a&&(a.removeAttribute("hidden"),c(),t.addEventListener("click",h),t.querySelector("span").innerHTML=e.value==="light"?l:o)};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:t})=>{e.value=t?"dark":"light",n()});})();