CHORE: tidy up markdownit plugins

.eleventy.js

@@ -1,11 +1,9 @@
 const { buildSrc, buildDest } = require("./paths");
 const markdownIt = require("markdown-it");
-const markdownItFootnote = require("markdown-it-footnote");
-const markdownItResponsive = require("@gerhobbelt/markdown-it-responsive");
-const mila = require("markdown-it-link-attributes");
+// const markdownItResponsive = require("@gerhobbelt/markdown-it-responsive");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const directoryOutputPlugin = require("@11ty/eleventy-plugin-directory-output");
+// const directoryOutputPlugin = require("@11ty/eleventy-plugin-directory-output");
 
 const filters = require("./utils/filters.js");
 const collections = require("./utils/collections.js");
@@ -57,24 +55,29 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
 
   // Override Markdown config
-  const options = {
+  const markdownItOptions = {
     html: true,
     breaks: true,
     linkify: true,
+    typographer: true,
   };
 
-  let markdownLibrary = markdownIt({
-    html: true,
-    breaks: true,
-    linkify: true,
-    typographer: true,
-  })
-    // .use(markdownItAnchor, {
-    //   permalink: true,
-    //   permalinkClass: "direct-link",
-    //   permalinkSymbol: "#",
-    // })
-    .use(markdownItFootnote);
+  let markdownLibrary = markdownIt(markdownItOptions);
+
+  const mdiLinkAttrsOpts = {
+    matcher(href) {
+      return href.match(/^https?:\/\//);
+    },
+    attrs: {
+      target: "_blank",
+      rel: "noopener",
+    },
+  };
+
+  markdownLibrary.use(require("markdown-it-footnote"));
+  markdownLibrary.use(require("markdown-it-link-attributes"), mdiLinkAttrsOpts);
+  markdownLibrary.use(require('markdown-it-anchor'));
+  markdownLibrary.use(require("markdown-it-table-of-contents"));
 
   markdownLibrary.renderer.rules.footnote_block_open = () => {
     return (
@@ -88,19 +91,6 @@ module.exports = function (eleventyConfig) {
     return "</ol>\n" + "</div>\n";
   };
 
-  const milaOptions = {
-    matcher(href) {
-      return href.match(/^https?:\/\//);
-    },
-    attrs: {
-      target: "_blank",
-      rel: "noopener",
-    },
-  };
-
-  markdownLibrary.use(mila, milaOptions)
-  markdownLibrary.use(require('markdown-it-named-headings'))
-
   eleventyConfig.setLibrary("md", markdownLibrary);
 
   eleventyConfig.setDataDeepMerge(true);

package.json

@@ -20,9 +20,10 @@
     "axios": "^1.6.0",
     "dayjs": "^1.11.10",
     "lite-youtube-embed": "^0.3.0",
+    "markdown-it-anchor": "^8.6.7",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-named-headings": "^1.1.0",
+    "markdown-it-table-of-contents": "^0.6.0",
     "url-slug": "^4.0.1"
   },
   "devDependencies": {

src/_assets/scss/_thoughts.scss

@@ -13,7 +13,17 @@
 
   .footnote-ref {
     vertical-align: super;
-    font-size: 0.5rem;
+    font-size: 50%;
+    margin-left: 5px;
+    letter-spacing: 3px;
+
+    a {
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--theme);
+    }
   }
 }
 

src/blog/2024/webcal.md

@@ -7,7 +7,7 @@ tags: ["tech"]
 
 Outlook, Google Calendar, Apple Calendar have functionality that allow you to subscribe to calendar feeds; add the URL of the feed, and then it will appear (and update) automatically in your calendar. There is a standardised format called `ical` [^ical], and it contains as you would expect – events on a calendar. This is useful to subscribing to public holiday calendar feeds, key dates within shared within your company, etc.
 
-[Skip to something to copy and paste…](#something-to-copy-and-paste)
+[[toc]]
 
 I'm currently using an iCal feed to power [The Globe Church public calendar](https://www.globe.church/calendar). Behind the scenes the events are stored in Microsoft365 which exposes an iCal feed, this is then imported to the website (via Eleventy, obviously… [have a look at the code if you want](https://github.com/theglobechurch/globe-static/blob/main/src/_data/events.js)), and then from there the feed is parsed, reformatted, and turned into a beautiful page.