config changes

config/collections/index.js

@@ -9,7 +9,20 @@ const onlyMarkdown = collection => {
   return collection.getFilteredByGlob('./src/**/*.md');
 };
 
+/** All tags from all posts as a collection. */
+const tagList = collection => {
+  const tagsSet = new Set();
+  collection.getAll().forEach(item => {
+    if (!item.data.tags) return;
+    item.data.tags
+      .filter(tag => !['posts', 'all'].includes(tag))
+      .forEach(tag => tagsSet.add(tag));
+  });
+  return Array.from(tagsSet).sort();
+};
+
 module.exports = {
   getAllPosts,
-  onlyMarkdown
+  onlyMarkdown,
+  tagList
 };

config/events/index.js

@@ -5,15 +5,15 @@ const fs = require('fs');
 const Image = require('@11ty/eleventy-img');
 
 const svgToJpeg = function () {
-  const socialPreviewImagesDir = 'dist/assets/images/social-preview/';
-  fs.readdir(socialPreviewImagesDir, (err, files) => {
+  const ogImagesDir = 'dist/assets/og-images/';
+  fs.readdir(ogImagesDir, (err, files) => {
     if (!!files && files.length > 0) {
       files.forEach(fileName => {
         if (fileName.endsWith('.svg')) {
-          let imageUrl = socialPreviewImagesDir + fileName;
+          let imageUrl = ogImagesDir + fileName;
           Image(imageUrl, {
             formats: ['jpeg'],
-            outputDir: './' + socialPreviewImagesDir,
+            outputDir: './' + ogImagesDir,
             filenameFormat: function (id, src, width, format, options) {
               let outputFileName = fileName.substring(0, fileName.length - 4);
               return `${outputFileName}.${format}`;

config/filters/index.js

@@ -1,27 +1,8 @@
-const lodash = require('lodash');
 const dayjs = require('dayjs');
 const CleanCSS = require('clean-css');
-const markdownLib = require('../plugins/markdown');
 const site = require('../../src/_data/meta');
 const {throwIfNotType} = require('../utils');
-const md = require('markdown-it')();
-
-/** Returns the first `limit` elements of the the given array. */
-const limit = (array, limit) => {
-  if (limit < 0) {
-    throw new Error(`Negative limits are not allowed: ${limit}.`);
-  }
-  return array.slice(0, limit);
-};
-
-/** Returns all entries from the given array that match the specified key:value pair. */
-const where = (arrayOfObjects, keyPath, value) =>
-  arrayOfObjects.filter(object => lodash.get(object, keyPath) === value);
-
-/** Converts the given markdown string to HTML, returning it as a string. */
-const toHtml = markdownString => {
-  return markdownLib.renderInline(markdownString);
-};
+const esbuild = require('esbuild');
 
 /** Removes all tags from an HTML string. */
 const stripHtml = str => {
@@ -71,34 +52,6 @@ const minifyJs = async (code, ...rest) => {
   }
 };
 
-/**
- * Render content as inline markdown if single line, or full
- * markdown if multiline. for md in yaml
- * @param {string} [content]
- * @param {import('markdown-it').Options} [opts]
- * @return {string|undefined}
- */
-
-const mdInline = (content, opts) => {
-  if (!content) {
-    return;
-  }
-
-  if (opts) {
-    md.set(opts);
-  }
-
-  let inline = !content.includes('\n');
-
-  // If there's quite a bit of content, we want to make sure
-  // it's marked up for readability purposes
-  if (inline && content.length > 200) {
-    inline = false;
-  }
-
-  return inline ? md.renderInline(content) : md.render(content);
-};
-
 // source: https://github.com/bnijenhuis/bnijenhuis-nl/blob/main/.eleventy.js
 const splitlines = (input, maxCharLength) => {
   const parts = input.split(' ');
@@ -122,15 +75,11 @@ const splitlines = (input, maxCharLength) => {
 };
 
 module.exports = {
-  limit,
-  toHtml,
-  where,
   toISOString,
   formatDate,
   toAbsoluteUrl,
   stripHtml,
   minifyCss,
   minifyJs,
-  mdInline,
   splitlines
 };

config/shortcodes/index.js

@@ -1,8 +1,8 @@
-const imageShortcodePlaceholder = require('./imagePlaceholder');
+const imageShortcode = require('./image');
 const includeRaw = require('./includeRaw');
 const liteYoutube = require('./youtube-lite');
 module.exports = {
-  imageShortcodePlaceholder,
+  imageShortcode,
   includeRaw,
   liteYoutube
 };

config/template-languages/css-config.js

@@ -4,6 +4,7 @@ const postcss = require('postcss');
 const postcssImport = require('postcss-import');
 const postcssImportExtGlob = require('postcss-import-ext-glob');
 const tailwindcss = require('tailwindcss');
+const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 
@@ -22,6 +23,7 @@ module.exports = eleventyConfig => {
           postcssImportExtGlob,
           postcssImport,
           tailwindcss,
+          postcssRelativeColorSyntax({preserve: true}),
           autoprefixer,
           cssnano
         ]).process(content, {

config/template-languages/js-config.js

@@ -1,5 +1,3 @@
-// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/
-
 const esbuild = require('esbuild');
 
 module.exports = eleventyConfig => {
@@ -8,7 +6,18 @@ module.exports = eleventyConfig => {
   eleventyConfig.addExtension('js', {
     outputFileExtension: 'js',
     compile: async (content, path) => {
-      if (path !== './src/assets/scripts/app.js') {
+      if (!path.startsWith('./src/assets/scripts/')) {
+        return;
+      }
+
+      if (path === './src/assets/scripts/theme-toggle.js') {
+        await esbuild.build({
+          target: 'es2020',
+          entryPoints: [path],
+          outfile: './src/_includes/theme-toggle-inline.js',
+          bundle: true,
+          minify: true
+        });
         return;
       }
 

config/utils/index.js

@@ -4,7 +4,7 @@ const slugify = require('slugify');
 const slugifyString = str => {
   return slugify(str, {
     replacement: '-',
-    remove: /[#,&,+()$~%.'":*?<>{}]/g,
+    remove: /[#,&,+()$~%.'":*¿?¡!<>{}]/g,
     lower: true
   });
 };