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/**/*")
@@ -113,7 +137,6 @@ module.exports = function (eleventyConfig) {
             .sort((a, b) => a.data.weight - b.data.weight)
     );
 
-
     eleventyConfig.addCollection("tags", (collection) => {
         let tags = new Set();
 
@@ -201,7 +224,7 @@ module.exports = function (eleventyConfig) {
         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] }],
         []
-    )
+    );
 }
-

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",

src/_data/site.json

@@ -19,7 +19,8 @@
   "words_per_minute": 200,
   "head_scripts": [
     "/assets/js/progress.js",
-    "/assets/js/scroll-to-top.js"
+    "/assets/js/scroll-to-top.js",
+    "/assets/js/copy-code-button.js"
   ],
   "comments": {
     "provider": "disqus",

src/_includes/comments-providers/scripts.html

@@ -1,7 +1,6 @@
 {% if site.comments.provider and comments or site.defaults.posts.comments %}
 {% case site.comments.provider %}
   {% when "disqus" %}
-  bing
     {% include comments-providers/disqus.html %}
   {% when "discourse" %}
     {% include comments-providers/discourse.html %}

src/_includes/layouts/single.html

@@ -40,7 +40,20 @@ layout: default
             </nav>
           </aside>
         {% endif %}
-        {{ content }}
+
+        {% assign Content = content %}
+        {% assign withoutDivStart = '<pre ' %}
+        {% assign withDivStart = '<div class="highlight codeblock"><pre ' %}
+        {% assign withoutDivEnd = '</code></pre>' %}
+        {% assign withDivEnd = '</code></pre></div>' %}
+
+        {% if content contains withoutDivStart %}
+          {% assign Content = content | replace: withoutDivStart, withDivStart %}
+          {% assign Content = Content | replace: withoutDivEnd, withDivEnd %}
+        {% endif %}
+    
+        {{ Content }}
+
         {% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
       </section>
 

src/_pages/404.md

@@ -6,12 +6,24 @@ layout: default
 permalink: /404.html
 ---
 
-Sorry, but the page you were trying to view does not exist --- perhaps you can try searching for it below.
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
 
-<script type="text/javascript">
+<div class="container">
-  var GOOG_FIXURL_LANG = 'en';
+  <h1>404</h1>
-  var GOOG_FIXURL_SITE = '{{ site.url }}'
+
-</script>
+  <p><strong>😬 Page not found 😬</strong></p>
-<script type="text/javascript"
+  <p>Sadly the requested page could not be found.</p>
-  src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
+  <p><a href="./">Maybe via the home page?</a></p>
-</script>
+</div>

src/_posts/2022-10-15-frontend-mentor-challenge-deployment.md

@@ -55,7 +55,7 @@ Each section is generated from a json file I created ([src/_data/webprojects.jso
 When the 11ty build occurs, it takes two nunjucks snippets then first takes the service section and fills out the details:
 
 {% raw %}
-```liquid
+```njk
 {% for service in webprojects.services %}
     <div class="projectsDiv {{service.cssClass}}">
         <div class="alignedHeader">
@@ -161,7 +161,7 @@ Having a static site where I can quickly add a challenge to the front page witho
 
 My Github 11ty build action
 
-```
+```yaml
 name: Build Eleventy
 
 on:

src/_sass/minimal-mistakes/_forms.scss

@@ -17,7 +17,7 @@ form {
     display: block;
     width: 100%;
     margin-bottom: 5px * 2;
-    *margin-left: -7px;
+    margin-left: -7px;
     padding: 0;
     color: $text-color;
     border: 0;
@@ -25,7 +25,7 @@ form {
   }
 
   p {
-    margin-bottom: (5px / 2);
+    margin-bottom: calc(5px / 2);
   }
 
   ul {
@@ -45,7 +45,7 @@ button,
 select,
 textarea {
   vertical-align: baseline;
-  *vertical-align: middle;
+  /*vertical-align: middle; */
 }
 
 input,
@@ -102,7 +102,7 @@ input[type="radio"] {
   height: auto;
   padding: 0;
   margin: 3px 0;
-  *margin-top: 0;
+ /* *margin-top: 0; */
   line-height: normal;
   cursor: pointer;
   border-radius: 0;
@@ -114,8 +114,8 @@ input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box;
   padding: 0;
-  *width: 13px;
+/*  *width: 13px; */
-  *height: 13px;
+/*  *height: 13px; */
 }
 
 input[type="image"] {
@@ -138,12 +138,12 @@ input[type="submit"] {
   width: auto;
   height: auto;
   cursor: pointer;
-  *overflow: visible;
+/*  *overflow: visible; */
 }
 
 select,
 input[type="file"] {
-  *margin-top: 4px;
+/*  *margin-top: 4px; */
 }
 
 select {

src/_sass/minimal-mistakes/_mixins.scss

@@ -15,7 +15,7 @@
    ========================================================================== */
 
 @function em($target, $context: $doc-font-size) {
-  @return ($target / $context) * 1em;
+  @return (calc($target / $context)) * 1em;
 }
 
 
@@ -65,7 +65,7 @@
   $green: green($color);
   $blue: blue($color);
 
-  $yiq: (($red*299)+($green*587)+($blue*114))/1000;
+  $yiq: calc((($red * 299) + ($green * 587) + ($blue * 114)) / 1000);
 
   @if $yiq-debug { @debug $yiq, $threshold; }
 

src/_sass/minimal-mistakes/_reset.scss

@@ -64,8 +64,8 @@ audio,
 canvas,
 video {
   display: inline-block;
-  *display: inline;
+/*  display: inline; */
-  *zoom: 1;
+/*  zoom: 1; */
 }
 
 /* Prevents modern browsers from displaying 'audio' without controls */
@@ -142,7 +142,7 @@ textarea {
 
 button,
 input {
-  *overflow: visible; /* inner spacing ie IE6/7*/
+/*  *overflow: visible; */ /* inner spacing ie IE6/7*/
   line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
 }
 

src/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss

@@ -25,16 +25,16 @@
   $unit: unit($value);
 
   @if $unit == 'px' {
-    @return $value / 16px * 1em;
+    @return calc($value / 16px * 1em);
   }
   @else if $unit == '%' {
-    @return $value / 100% * 1em;
+    @return calc($value / 100% * 1em);
   }
   @else if $unit == 'em' {
     @return $value;
   }
   @else if $unit == 'pt' {
-    @return $value / 12pt * 1em;
+    @return calc($value / 12pt * 1em);
   }
   @else {
     @return $value;

src/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss

@@ -52,7 +52,7 @@ $mfp-include-iframe-type:             true !default;
 $mfp-iframe-padding-top:              40px !default;
 $mfp-iframe-background:               #000 !default;
 $mfp-iframe-max-width:                900px !default;
-$mfp-iframe-ratio:                    9/16 !default;
+$mfp-iframe-ratio:                    calc(9/16) !default;
 
 // Image-type options
 $mfp-include-image-type:              true !default;

src/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss

@@ -28,7 +28,7 @@ $mfp-include-iframe-type:             true;                       // Enable Ifra
 $mfp-iframe-padding-top:              40px;                       // Iframe padding top
 $mfp-iframe-background:               #000;                       // Background color of iframes
 $mfp-iframe-max-width:                900px;                      // Maximum width of iframes
-$mfp-iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
+$mfp-iframe-ratio:                    calc(9/16);                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
 
 // Image-type options
 $mfp-include-image-type:              true;                       // Enable Image-type popups

src/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss

@@ -90,7 +90,7 @@
   @if unitless($span-width) {
     $container-spread: su-valid-spread($container-spread);
     $container: _su-sum($columns, $gutters, $container-spread, $validate: false);
-    @return percentage($span-width / $container);
+    @return percentage(calc($span-width / $container));
   }
 
   @return $span-width;
@@ -141,7 +141,7 @@
   }
 
   $container: _su-sum($columns, $gutters, $container-spread);
-  @return percentage($gutters / $container);
+  @return percentage(calc($gutters / $container));
 }
 
 

src/assets/css/main.scss.liquid

@@ -143,6 +143,63 @@ pre {
 
 $github-color: #fff !default;
 
+div.highlight {
+	position: relative;
+}
+
+.codeblock {
+  outline: 4px #7e1c1c solid;
+  border-radius: 5px;
+}
+
+// === for copy-code-to-clipboard
+
+// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+
+.clipboard-button {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	padding: 6px 8px 4px 8px;
+	margin: 5px;
+//	color: gray-500;
+//	border-color: gray-500;
+//	background-color: gray-100;
+	border: 1px solid;
+	border-radius: 6px;
+	font-size: 0.8em;
+	z-index: 1;
+	opacity: 0;
+	transition: 0.1s;
+}
+.clipboard-button > svg {
+//	fill: gray-500;
+}
+.clipboard-button:hover {
+	cursor: pointer;
+	border-color: #01b139;
+	background-color: #87d09e;
+	opacity: 1;
+}
+.clipboard-button:hover > svg {
+	fill: #1900ff;
+}
+.clipboard-button:focus {
+	outline: 0;
+}
+// .highlight {
+//   position: relative;
+// }
+.highlight:hover > .clipboard-button {
+	opacity: 1;
+	transition: 0.2s;
+}
+
+.highlight {
+	line-height: 1.5;
+}
+
+
 //@import "progress.css"; // for progress bar
 //@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes/skins/_{{ site.minimal_mistakes_skin | default: 'default' }}.scss"; // skin

src/assets/js/copy-code-button.js

@@ -0,0 +1,57 @@
+/*
+h/t to...
+- https://www.brycewray.com/posts/2023/02/code-copying-code-eleventy-edition/ & Bryce's gitrepo
+- https://github.com/brycewray/eleventy_site/blob/main/src/assets/js/copy-code-button.js
+- https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/
+- https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/
+- https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+- https://digitaldrummerj.me/hugo-add-copy-code-snippet-button/
+*/
+
+const svgCopy =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg><span class="sr-only"> Click to copy code</span>';
+const svgCheck =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(25, 0, 255)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg><span class="sr-only"> Copied!</span>';
+
+const addCopyButtons = (clipboard) => {
+    // 1. Look for pre > code elements in the DOM
+    document.querySelectorAll("pre > code").forEach((codeBlock) => {
+        // 2. Create a button that will trigger a copy operation
+        const button = document.createElement("button");
+        button.className = "clipboard-button";
+        button.type = "button";
+        button.innerHTML = svgCopy;
+        button.addEventListener("click", () => {
+            clipboard.writeText(codeBlock.innerText).then(
+                () => {
+                    button.blur();
+                    button.innerHTML = svgCheck;
+                    setTimeout(() => (button.innerHTML = svgCopy), 2000);
+                },
+                (error) => (button.innerHTML = "Error")
+            );
+        });
+        // 3. Append the button directly before the pre tag
+        //    (with content-searching fix in place for Prism)
+        const pre = codeBlock.parentNode;
+        pre.parentNode.insertBefore(button, pre);
+    });
+};
+
+function addCopyButtonsAfterLoad() {
+    console.log("Loaded");
+    if (navigator && navigator.clipboard) {
+        addCopyButtons(navigator.clipboard);
+    } else {
+        const script = document.createElement("script");
+        script.src =
+            "https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js";
+        script.integrity =
+            "sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=";
+        script.crossOrigin = "anonymous";
+        script.onload = () => addCopyButtons(clipboard);
+        document.body.appendChild(script);
+    }
+}
+
+window.addEventListener("load", addCopyButtonsAfterLoad);