Integrate Tufte 11ty theme

.eleventy.js

@@ -4,6 +4,13 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const Image = require("@11ty/eleventy-img");
 const htmlmin = require("html-minifier");
 const outdent = require("outdent");
+const pluginNavigation = require("@11ty/eleventy-navigation");
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const markdownItAnchor = require("markdown-it-anchor");
+const markdownItAttrs = require("markdown-it-attrs");
+const pluginTOC = require("eleventy-plugin-toc");
+const pluginFilters = require("./_config/filters.js");
+const pluginShortCodes = require("./_config/shortcode.js");
 
 /** Maps a config of attribute-value pairs to an HTML string
  * representing those same attribute-value pairs.
@@ -83,14 +90,61 @@ const imageShortcode = async (
 module.exports = function (eleventyConfig) {
     // 11ty plugins
     eleventyConfig.addPlugin(pluginRss);
-    eleventyConfig.addPlugin(Webmentions, {
-        domain: "benkutil.com",
-        token: process.env.WEBMENTIONS_TOKEN
+
+    // Only add Webmentions if token is provided
+    if (process.env.WEBMENTIONS_TOKEN) {
+        eleventyConfig.addPlugin(Webmentions, {
+            domain: "benkutil.com",
+            token: process.env.WEBMENTIONS_TOKEN
+        });
+    }
+
+    eleventyConfig.addPlugin(pluginNavigation);
+    eleventyConfig.addPlugin(pluginSyntaxHighlight, {
+        preAttributes: { tabindex: 0 }
+    });
+    eleventyConfig.addPlugin(pluginTOC, {
+        tags: ['h2', 'h3', 'h4', 'h5'],
+        ul: true,
+        flat: false,
+        wrapper: 'div'
     });
 
+    // Add Tufte filters and shortcodes
+    eleventyConfig.addPlugin(pluginFilters);
+    eleventyConfig.addPlugin(pluginShortCodes);
+
     // 11ty shortcodes
     eleventyConfig.addShortcode('image', imageShortcode);
 
+    // Configure markdown-it
+    const markdownIt = require("markdown-it");
+    let options = {
+        html: true,
+        breaks: true,
+        linkify: true,
+        typographer: true,
+    };
+    let markdownLib = markdownIt(options).use(markdownItAttrs);
+    eleventyConfig.setLibrary("md", markdownLib);
+
+    eleventyConfig.amendLibrary("md", mdLib => {
+        mdLib.use(markdownItAnchor, {
+            permalink: markdownItAnchor.permalink.ariaHidden({
+                placement: "after",
+                class: "header-anchor",
+                symbol: "",
+                ariaHidden: false,
+            }),
+            level: [1,2,3,4],
+            slugify: eleventyConfig.getFilter("slugify")
+        });
+    });
+
+    // Pass through Tufte CSS and fonts
+    eleventyConfig.addPassthroughCopy("src/css");
+    eleventyConfig.addPassthroughCopy("src/et-book");
+
     // run these configs in production only
     if (process.env.ELEVENTY_ENV === 'production') {
         eleventyConfig.addTransform("htmlmin", function (content, outputPath) {

.nvmrc

@@ -0,0 +1 @@
+20

Readme.md

@@ -4,4 +4,4 @@ Personal website using [11ty](https://11ty.dev) and [Cloudflare Pages](https://p
 ## Setup
 ### Environment variables
 - `ELEVENTY_ENV` is either `production` or `preview`. Defaults to not set.
-- In Cloudflare Pages, set `NODE_VERSION` to desired nodejs version. Currently set to `16.18` to match GitHub Codespace version.
+- Node version is set to `20` via `.nvmrc` file for compatibility with 11ty and dependencies.

_config/filters.js

@@ -0,0 +1,40 @@
+const { DateTime } = require("luxon");
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
+		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy");
+	});
+
+	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
+		// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
+	});
+
+	// Get the first `n` elements of a collection.
+	eleventyConfig.addFilter("head", (array, n) => {
+		if (!Array.isArray(array) || array.length === 0) {
+			return [];
+		}
+		if (n < 0) {
+			return array.slice(n);
+		}
+
+		return array.slice(0, n);
+	});
+
+	// Return the smallest number argument
+	eleventyConfig.addFilter("min", (...numbers) => {
+		return Math.min.apply(null, numbers);
+	});
+
+	// Return the keys used in an object
+	eleventyConfig.addFilter("getKeys", target => {
+		return Object.keys(target);
+	});
+
+	eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
+		return (tags || []).filter(tag => ["all", "posts"].indexOf(tag) === -1);
+	});
+
+};

_config/shortcode.js

@@ -0,0 +1,23 @@
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addShortcode("notes",(id,content) =>`<label for="${id}" class="margin-toggle">&#8853;</label><input type="checkbox" id="${id}" class="margin-toggle"/><span class="marginnote">${content}</span>`);
+
+	eleventyConfig.addShortcode("notesimage",(id,image,alt,content) =>`<label for="${id}" class="margin-toggle">&#8853;</label><input type="checkbox" id="${id}" class="margin-toggle"/><span class="marginnote"><img src="${image}" alt="${alt}"/>${content}</span>`);
+
+	eleventyConfig.addShortcode("fullimage",(image,alt) =>`<figure class="fullwidth"><img src="${image}" width="100%" alt="${alt}"/></figure>`);
+
+	eleventyConfig.addShortcode("videos",(video,title) =>`<figure class="iframe-wrapper"><iframe width="100%" height="auto" src="${video}" title="${title}" frameborder="0" allowfullscreen></iframe></figure>`);
+
+	eleventyConfig.addShortcode("sidenote",(id,title,sidenote,content) =>`<span class="newthought">${title}<label for="sn-${id}" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-${id}" class="margin-toggle"/><span class="sidenote"><a href="#sn-${id}" class="no-deco"><em>${sidenote}</em></a></span>, ${content}`);
+
+	eleventyConfig.addShortcode("sidenoteinternal",(id,title,sidenote,content) =>`<span class="newthought" id="sn-${id}" >${title}<label for="sn-${id}" class="margin-toggle sidenote-number"></label></span><input type="checkbox" class="margin-toggle"/><span class="sidenote"><a href="#sn-${id}" class="no-deco"><em>${sidenote}</em></a></span>, ${content}`);
+
+	eleventyConfig.addShortcode("sidenoteexternal",(id,title,sidenote,content,content_link,url) =>`<span class="newthought">${title}<label for="sn-${id}" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-${id}" class="margin-toggle"/><span class="sidenote"><em>${sidenote}</em> <a href="${url}">${content_link}</a></span>, ${content} `);
+
+	eleventyConfig.addShortcode("epigraph",(content,footer) =>`<div class="epigraph"><blockquote><p>${content}</p><footer>${footer}</footer></blockquote></div>`);
+
+	eleventyConfig.addShortcode("blockquote",(content,footer) =>`<blockquote><p>${content}</p><footer>${footer}</footer></blockquote>`);
+
+	eleventyConfig.addShortcode("epigraphlink",(content,footer,info,url) =>`<div class="epigraph"><blockquote><p>${content}</p><footer>${footer} <a href="${url}">${info}</a></footer></blockquote></div>`);
+
+	eleventyConfig.addShortcode("blockquotelink",(content,footer,info,url) =>`<blockquote><p>${content}</p><footer>${footer} <a href="${url}">${info}</a></footer></blockquote>`);
+};

package.json

@@ -22,13 +22,19 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.0-beta.3",
     "@11ty/eleventy-img": "^3.0.0",
+    "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "eleventy-plugin-webmentions": "^2.0.0",
     "html-minifier": "^4.0.0",
+    "luxon": "^3.5.0",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-attrs": "^4.3.1",
     "outdent": "^0.8.0"
   },
   "dependencies": {
     "@11ty/eleventy-upgrade-help": "^2.0.5",
-    "dotenv": "^16.0.3"
+    "dotenv": "^16.0.3",
+    "eleventy-plugin-toc": "^1.1.5"
   }
 }

src/_includes/layouts/base.njk

@@ -17,6 +17,9 @@
     <link rel="webmention" href="https://webmention.io/benkutil.com/webmention" />
     <link rel="pingback" href="https://webmention.io/benkutil.com/xmlrpc" />
 
+    <!-- Tufte CSS -->
+    <link rel="stylesheet" href="/css/tufte.css">
+
     <style type="text/css">
   	html { margin: 0; padding: 0; text-align: center; }
   	body {

src/_includes/layouts/content.njk

@@ -2,5 +2,4 @@
 layout: layouts/base.njk
 templateClass: tmpl-content
 ---
-{{ content | safe }}
-{%- set currentPostMentions = webmentions | webmentionsForPage -%}
+{{ content | safe }}