Fix RSS feed generation to use correct image sources and other bugs (#51

) * refactor: clean up how tag pages are generated * fix: lots of things #50 - Remove the eleventy image transform plugin - Use markdown eleventy-img plugin - Fix issue with css getting overwritten with og css file on changes - Change passthrough copy options to not copy unoptimized images - Revert back to stable eleventy and eleventy-img packages to fix template render error on changes (and not needed for tranform plugin) - Remove eleventyImport options in templates (I don't think it did anything) - Code cleanup and removal of unnecessary files
sphars · May 9, 2024 · b5ce5d2 · b5ce5d2
1 parent 3b4d95a
commit b5ce5d2
Show file tree

Hide file tree

Showing 14 changed files with 985 additions and 732 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -1,19 +1,12 @@
 const { DateTime } = require("luxon");
 const readingTime = require("eleventy-plugin-reading-time");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
-const { eleventyImageTransformPlugin } = require("@11ty/eleventy-img");
 const safeLinks = require("@sardine/eleventy-plugin-external-links");
 const htmlmin = require("html-minifier-terser");
 const fs = require("node:fs");
 const path = require("node:path");
-// configure markdown plugins
-const markdownIt = require("markdown-it");
-const markdownItFootnote = require("markdown-it-footnote");
-const markdownItImageFigures = require("markdown-it-image-figures");
-const markdownItAnchor = require("markdown-it-anchor");
-const markdownItAttrs = require("markdown-it-attrs");
-
-// const { imageHeaderShortcode, imageMetaShortcode, imageMetaTWShortcode } = require("./utils/imageGen");
+
+// Custom scripts
 const { generateMetaImages } = require("./utils/generateMetaImages.js");
 const metadata = require("./src/_data/metadata.json");
 
@@ -48,13 +41,17 @@ module.exports = function (eleventyConfig) {
 
   // passthrough copying of assets files
   eleventyConfig.addPassthroughCopy({
-    "src/assets": "assets/",
+    "src/assets/scripts/": "assets/scripts/",
+    "src/assets/favicons/": "assets/favicons/",
     "src/assets/favicons/favicon.ico": "/favicon.ico",
     "node_modules/@fontsource/atkinson-hyperlegible/": "assets/fonts/atkinson-hyperlegible/",
     "node_modules/@fontsource/cousine/": "assets/fonts/cousine/",
     "node_modules/@tabler/icons-sprite/dist/tabler-sprite.svg": "assets/img/icons/tabler-sprite.svg"
   });
 
+  // copy img/ but not img/content - will be handled by markdown plugin & eleventy-img plugin
+  eleventyConfig.addPassthroughCopy({"src/assets/img/*[!content]": "assets/img/"});
+
   // add watch target for css and tailwind
   eleventyConfig.addWatchTarget("./src/assets/css/");
 
@@ -65,7 +62,7 @@ module.exports = function (eleventyConfig) {
 
   // get a count of non-draft files
   const postsPath = path.join(__dirname, "src/posts");
-  const postsFiles = fs.readdirSync(postsPath).filter(file => file.endsWith(".md"));
+  const postsFiles = fs.readdirSync(postsPath, {recursive: true,}).filter(file => !file.includes("draft") && file.endsWith(".md"));
   eleventyConfig.addGlobalData("postCount", postsFiles.length);
 
   // filter to return a date as an ISO string
@@ -74,13 +71,6 @@ module.exports = function (eleventyConfig) {
     return result;
   });
 
-  // filter to return a date as a pretty string, like April 1, 2022
-  // eleventyConfig.addFilter("dateReadable", (dateObj) => {
-  //   // console.log(JSON.stringify(metadata));
-  //   let result = DateTime.fromJSDate(dateObj, { zone: "utc" }).setZone(metadata.timezone, { keepLocalTime: true }).toLocaleString(DateTime.DATE_FULL);
-  //   return result;
-  // });
-
   // shortcode to return a readable date (like April, 1 2022) or with time (April 1, 2022 at 12:12 PM MST)
   eleventyConfig.addShortcode("dateReadable", (dateObj, withTime) => {
     let result = DateTime.fromJSDate(dateObj, { zone: "utc" }).setZone(metadata.timezone, { keepLocalTime: true }).toLocaleString( withTime ? DateTime.DATETIME_FULL : DateTime.DATE_FULL);
@@ -127,6 +117,11 @@ module.exports = function (eleventyConfig) {
     return collection.filter((entry) => DateTime.fromJSDate(entry.date).year == year);
   });
 
+  // filter collection by tag
+  eleventyConfig.addFilter("postsByTag", (collection, tag) => {
+    return collection.filter((entry) => entry.data.tags.includes(tag));
+  });
+
   // shortcodes
   // shortcode for returning a github link to the current page's source code
   eleventyConfig.addNunjucksShortcode("page_source_link", function (inner_text) {
@@ -143,21 +138,19 @@ module.exports = function (eleventyConfig) {
     return `<svg class="tabler-icon" width="${size}" height="${size}"><use xlink:href="/assets/img/icons/tabler-sprite.svg#tabler-${iconName}" /></svg>`;
   });
 
-  // eleventyConfig.addNunjucksAsyncShortcode("imageHeader", imageHeaderShortcode);
-  // eleventyConfig.addNunjucksAsyncShortcode("imageMeta", imageMetaShortcode);
-  // eleventyConfig.addNunjucksAsyncShortcode("imageMetaTW", imageMetaTWShortcode);
+  // shortcode for handling generation of meta images
   eleventyConfig.addNunjucksAsyncShortcode("metaImages", generateMetaImages);
 
   // collection of all posts
-  eleventyConfig.addCollection("posts", (collection) => {
-    return collection.getFilteredByGlob(["./src/posts/**/*.md"]);
+  eleventyConfig.addCollection("posts", (collectionApi) => {
+    return collectionApi.getFilteredByGlob(["./src/posts/**/*.md"]);
   });
 
   // get a collection of all tags of a collection
-  eleventyConfig.addCollection("tagList", (collection) => {
+  eleventyConfig.addCollection("tagList", (collectionApi) => {
     let uniqueTags = new Set(); //sets only allow unique items
 
-    collection.getAllSorted().forEach(function (item) {
+    collectionApi.getAllSorted().forEach(function (item) {
       // skip item if there is no tags key
       if (!("tags" in item.data)) return;
 
@@ -172,10 +165,10 @@ module.exports = function (eleventyConfig) {
   });
 
   // get a collection of years from a collection
-  eleventyConfig.addCollection("yearList", (collection) => {
+  eleventyConfig.addCollection("yearList", (collectionApi) => {
     let uniqueYears = new Set();
 
-    collection.getAllSorted().forEach((item) => {
+    collectionApi.getAllSorted().forEach((item) => {
       if(!("date" in item.data)) return;
 
       // get the year of the post
@@ -187,6 +180,16 @@ module.exports = function (eleventyConfig) {
   });
 
   // configure markdown library
+
+  // markdown plugins
+  const markdownIt = require("markdown-it");
+  const markdownItFootnote = require("markdown-it-footnote");
+  const markdownItImageFigures = require("markdown-it-image-figures");
+  const markdownItAnchor = require("markdown-it-anchor");
+  const markdownItAttrs = require("markdown-it-attrs");
+  const markdownItEleventyImg = require("markdown-it-eleventy-img");
+
+  // markdown plugin options
   let markdownItOptions = {
     html: true
   };
@@ -195,11 +198,31 @@ module.exports = function (eleventyConfig) {
     level: [2,3]
   };
 
+  let markdownItEleventyImgOptions = {
+    imgOptions: {
+      widths: [480, 720, 1000],
+      formats: ["webp", "jpeg"],
+      urlPath: "/assets/img/content",
+      outputDir: "./dist/assets/img/content",
+      filenameFormat: (id, src, width, format) => {
+        const { name } = path.parse(src);
+        return `${name}-${width}w.${format}`;  
+      }
+    },
+    globalAttributes: {
+      decoding: "async",
+      loading: "lazy",
+      sizes: "100vw"
+    },
+    resolvePath: (filepath, env) => path.join(path.dirname(env.page.inputPath), filepath)
+  };
+
   let markdownLib = markdownIt(markdownItOptions)
     .use(markdownItFootnote)
     .use(markdownItAnchor, markdownItAnchorOptions)
     .use(markdownItAttrs)
-    .use(markdownItImageFigures, { figcaption: true, lazy: true, async: true }); // could be replaced with the image transform plugin below
+    .use(markdownItImageFigures, { figcaption: true }) // could be replaced with the image transform plugin below
+    .use(markdownItEleventyImg, markdownItEleventyImgOptions);
 
   eleventyConfig.setLibrary("md", markdownLib);
 
@@ -208,23 +231,6 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(safeLinks);
 
-  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-    extensions: "html",
-    formats: ["webp", "jpeg"],
-    widths: [480, 720, 1000],
-    defaultAttributes: {
-      loading: "lazy",
-      decoding: "async",
-      sizes: "90vw",
-    },
-    outputDir: "./dist/assets/img/content", // relative to repo root
-    urlPath: "/assets/img/content", // path prefix, e.g. `/img/` for `<img src="/img/MY_IMAGE.jpeg">`.
-    filenameFormat: (id, src, width, format) => {
-      const { name } = path.parse(src);
-      return `${name}-${width}w.${format}`;  
-    }
-  });
-
   return {
     dir: {
       input: "src",