Updated site to 11ty 2.0 release

Also updated to use the Chroma plugin I created. Lets see how long I use it for :) the .eleventy.js needs cleaned up and stuff removed, but it is what it is for now.

.eleventy.js

@@ -17,21 +17,24 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const UpgradeHelper = require("@11ty/eleventy-upgrade-help");
 const xmlFiltersPlugin = require("eleventy-xml-plugin");
 const yaml = require("js-yaml");
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+//const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-
+const syntaxHighlight = require("eleventy-plugin-syntaxhighlight-chroma");
+const highlight = require("chroma-highlight");
+const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");
 
 const inspect = require("node:util").inspect;
 
 // relativeURL
 const path = require("path");
 const urlFilter = require("@11ty/eleventy/src/Filters/Url");
+const { assert } = require("console");
 const indexify = (url) => url.replace(/(\/[^.]*)$/, "$1index.html");
 
 module.exports = function (eleventyConfig) {
     let pathPrefix = "/";
 
-    eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents));
+    eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
-    eleventyConfig.addDataExtension("yml", contents => yaml.load(contents));
+    eleventyConfig.addDataExtension("yml", (contents) => yaml.load(contents));
 
     eleventyConfig.addPlugin(pluginRss);
     //Blog excerpts
@@ -48,34 +51,55 @@ module.exports = function (eleventyConfig) {
     // TODO https://www.npmjs.com/package/eleventy-plugin-meta-generator
     // Eleventy Syntax Highlighting (https://www.11ty.dev/docs/plugins/syntaxhighlight/)
     // eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight"));
+
     eleventyConfig.addPlugin(syntaxHighlight, {
+        theme: "base16-snazzy",
 
-        alwaysWrapLineHighlights: true,
+        lexerOverrides: {
-                // Change which Eleventy template formats use syntax highlighters
+            njk: "vue",
-        // templateFormats: ["*"], // default
+            liquid: "vue",
-
-        // Use only a subset of template types (11ty.js added in v4.0.0)
-        // templateFormats: ["liquid", "njk", "md", "11ty.js"],
-
-        // init callback lets you customize Prism
-        // init: function({ Prism }) {
-        //   Prism.languages.myCustomLanguage = /* */;
-        // },
-
-        // Added in 3.1.1, add HTML attributes to the <pre> or <code> tags
-        preAttributes: {
-          tabindex: 0,
-
-          // Added in 4.1.0 you can use callback functions too
-          "data-language": function({ language, content, options }) {
-            return language;
-          }
         },
-        codeAttributes: {},
+    });
-      });
+
+    // eleventyConfig.addPlugin(syntaxHighlight, {
+
+    //     alwaysWrapLineHighlights: true,
+    //             // Change which Eleventy template formats use syntax highlighters
+    //     // templateFormats: ["*"], // default
+
+    //     // Use only a subset of template types (11ty.js added in v4.0.0)
+    //     // templateFormats: ["liquid", "njk", "md", "11ty.js"],
+
+    //     // init callback lets you customize Prism
+    //     // init: function({ Prism }) {
+    //     //   Prism.languages.myCustomLanguage = /* */;
+    //     // },
+
+    //     // Added in 3.1.1, add HTML attributes to the <pre> or <code> tags
+    //     preAttributes: {
+    //       tabindex: 0,
+
+    //       // Added in 4.1.0 you can use callback functions too
+    //       "data-language": function({ language, content, options }) {
+    //         return language;
+    //       }
+    //     },
+    //     codeAttributes: {},
+    //   });
+
+    // assert(typeof highlight === "function");
+    // eleventyConfig.addPlugin(highlight);
+
+    // eleventyConfig.addMarkdownHighlighter(
+    //     highlight(
+    //         `--formatter html --html-only --html-inline-styles --lexer typescript --style base16-snazzy`
+    //     )
+    // );
 
     eleventyConfig.addPlugin(xmlFiltersPlugin);
 
+    // eleventyConfig.addPlugin(eleventySass);
+
     // Custom Collections
     eleventyConfig.addCollection("pages", (collection) =>
         collection.getFilteredByGlob("./src/_pages/**/*")
@@ -108,11 +132,10 @@ module.exports = function (eleventyConfig) {
     // });
 
     eleventyConfig.addCollection("drafts", (collection) =>
-    collection
+        collection
-        .getFilteredByGlob("./src/_drafts/**/*")
+            .getFilteredByGlob("./src/_drafts/**/*")
-        .sort((a, b) => a.data.weight - b.data.weight)
+            .sort((a, b) => a.data.weight - b.data.weight)
-)   ;
+    );
-
 
     eleventyConfig.addCollection("tags", (collection) => {
         let tags = new Set();
@@ -136,7 +159,7 @@ module.exports = function (eleventyConfig) {
         collection.getAll().forEach((item) => {
             if ("category" in item.data) {
                 if (item.data.category != undefined) {
-                     for (const category of item.data.category) {
+                    for (const category of item.data.category) {
                         categories.add(category);
                     }
                 }
@@ -198,10 +221,10 @@ module.exports = function (eleventyConfig) {
     });
 
     eleventyConfig.addFilter("inspect", function (obj = {}) {
-        return inspect(obj, {sorted: true});
+        return inspect(obj, { sorted: true });
-      });
+    });
 
-    eleventyConfig.addFilter('group_by', groupBy)
+    eleventyConfig.addFilter("group_by", groupBy);
 
     eleventyConfig.addLayoutAlias(
         "archive-taxonomy",
@@ -265,23 +288,31 @@ module.exports = function (eleventyConfig) {
     // Set section
 
     // Configure BrowserSync to serve the 404 page for missing files
-    eleventyConfig.setBrowserSyncConfig({
+    // eleventyConfig.setBrowserSyncConfig({
-        callbacks: {
+    //     callbacks: {
-            ready: (_err, browserSync) => {
+    //         ready: (_err, browserSync) => {
-                const content_404 = fs.readFileSync("dist/404.html");
+    //             const content_404 = fs.readFileSync("dist/404.html");
 
-                browserSync.addMiddleware("*", (_req, res) => {
+    //             browserSync.addMiddleware("*", (_req, res) => {
-                    // render the 404 content instead of redirecting
+    //                 // render the 404 content instead of redirecting
-                    res.write(content_404);
+    //                 res.write(content_404);
-                    res.end();
+    //                 res.end();
-                });
+    //             });
-            },
+    //         },
-        },
+    //     },
+    // });
+
+    eleventyConfig.setServerOptions({
+        // Default values are shown:
+
+        // Whether the live reload snippet is used
+        liveReload: true,
+        watch: ["dist/assets/css/main.css"],
     });
 
-    eleventyConfig.setBrowserSyncConfig({
+    // eleventyConfig.setBrowserSyncConfig({
-        files: "./dist/assets/styles/**/*.css",
+    //     files: "./dist/assets/css/*.css",
-    });
+    // });
 
     // Merge Data (https://www.11ty.dev/docs/data-deep-merge/)
     eleventyConfig.setDataDeepMerge(true);
@@ -360,6 +391,8 @@ module.exports = function (eleventyConfig) {
     //     }
     // );
 
+    // eleventyConfig.addWatchTarget("dist/assets/css/*.css");
+
     eleventyConfig.addFilter("relative_url", relativeURLALT);
     eleventyConfig.addFilter("absolute_url", absoluteUrl);
 
@@ -476,29 +509,28 @@ function relativeURLALT(url, pathPrefix = undefined) {
 
 function absoluteUrl(url) {
     if (url !== undefined) {
-        return siteURL + url
+        return siteURL + url;
     } else {
-        return siteURL
+        return siteURL;
     }
 }
 
 function groupBy(array, key) {
-    const get = entry => key.split('.').reduce((acc, key) => acc[key], entry)
+    const get = (entry) => key.split(".").reduce((acc, key) => acc[key], entry);
 
     const map = array.reduce((acc, entry) => {
-      const value = get(entry)
+        const value = get(entry);
 
-      if (typeof acc[value] === 'undefined') {
+        if (typeof acc[value] === "undefined") {
-        acc[value] = []
+            acc[value] = [];
-      }
+        }
 
-      acc[value].push(entry)
+        acc[value].push(entry);
-      return acc
+        return acc;
-    }, {})
+    }, {});
 
     return Object.keys(map).reduce(
-      (acc, key) => [...acc, { name: key, items: map[key] }],
+        (acc, key) => [...acc, { name: key, items: map[key] }],
-      []
+        []
-    )
+    );
-  }
+}
-

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "build:sass": "sass --load-path=src/_sass --style=compressed dist/assets/css/tocompile.scss dist/assets/css/main.css",
-    "watch:eleventy": "eleventy --serve",
+    "watch:sass": "npm run build:sass -- --watch",
+    "watch:eleventy": "eleventy --serve --ignore-initial --incremental",
     "build:eleventy": "eleventy",
     "clean": "rm -rf dist",
     "postbuild": "",
@@ -26,14 +27,16 @@
   "author": "Robert McGovern et all",
   "license": "MIT",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.0-beta.1"
+    "@11ty/eleventy": "^2.0.0"
   },
   "dependencies": {
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
     "@11ty/eleventy-upgrade-help": "^2.0.5",
+    "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0",
     "autoprefixer": "^10.4.13",
+    "chroma-highlight": "^2.4.2",
     "const": "^1.0.0",
     "eleventy-load": "^0.3.1",
     "eleventy-load-css": "^0.3.0",
@@ -41,6 +44,7 @@
     "eleventy-load-html": "^0.1.1",
     "eleventy-load-sass": "^0.1.2",
     "eleventy-plugin-description": "^0.1.5",
+    "eleventy-plugin-syntaxhighlight-chroma": "^0.0.1",
     "eleventy-plugin-toc": "^1.1.5",
     "eleventy-xml-plugin": "^0.1.0",
     "fs-extra": "^11.1.0",
@@ -59,4 +63,4 @@
     "sass": "^1.57.1",
     "slugify": "^1.6.5"
   }
-}
+}