Add support for code syntax highlighting

.eleventy.js

@@ -1,4 +1,5 @@
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const eleventySyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const eleventySass = require("eleventy-sass");
 const mdDefList = require("markdown-it-deflist");
 
@@ -7,10 +8,13 @@ module.exports = function (eleventyConfig) {
 		files: "./_site/css/**/*.css",
 	});
 	eleventyConfig.addPassthroughCopy({
+		"node_modules/prismjs/themes/prism.min.css": "css/prism.min.css",
+		"node_modules/prismjs/themes/prism-tomorrow.min.css": "css/prism-tomorrow.min.css",
 		"node_modules/feather-icons/dist/feather-sprite.svg": "images/feather-sprite.svg",
 		"src/js/site.js": "js/site.js"
 	});
 	eleventyConfig.addPlugin(eleventyNavigationPlugin);
+	eleventyConfig.addPlugin(eleventySyntaxHighlight);
 	eleventyConfig.addPlugin(eleventySass, {
 		sass: {
 			loadPaths: ["node_modules"],
@@ -41,9 +45,7 @@ module.exports = function (eleventyConfig) {
 		collection.sort((a, b) => a.data.sectionOrder - b.data.sectionOrder)
 	);
 	eleventyConfig.addFilter("filterDrafts", collection => {
-		if (process.env.BUILD_DRAFTS === true) {
+		if (process.env.BUILD_DRAFTS) {
-			console.log("Skipping filtering drafts");
-
 			return collection;
 		}
 

.nova/Tasks/Eleventy.json

@@ -14,7 +14,7 @@
     }
   },
   "environment" : {
-    "BUILD_DRAFTS" : "false"
+    "BUILD_DRAFTS" : "true"
   },
   "openLogOnRun" : "fail",
   "persistent" : true

package-lock.json

@@ -10,11 +10,13 @@
       "license": "ISC",
       "dependencies": {
         "feather-icons": "^4.29.0",
-        "normalize.css": "^8.0.1"
+        "normalize.css": "^8.0.1",
+        "prismjs": "^1.29.0"
       },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.0",
         "@11ty/eleventy-navigation": "^0.3.5",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "eleventy-sass": "^2.2.3",
         "markdown-it-deflist": "^2.1.0"
       }
@@ -123,6 +125,19 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+      "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+      "dev": true,
+      "dependencies": {
+        "prismjs": "^1.29.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/eleventy-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
@@ -1865,6 +1880,14 @@
         "node": ">= 4"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -2513,6 +2536,15 @@
         "dependency-graph": "^0.11.0"
       }
     },
+    "@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+      "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+      "dev": true,
+      "requires": {
+        "prismjs": "^1.29.0"
+      }
+    },
     "@11ty/eleventy-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
@@ -3804,6 +3836,11 @@
         "promise-each": "^2.2.0"
       }
     },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",

package.json

@@ -14,11 +14,13 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.0",
     "@11ty/eleventy-navigation": "^0.3.5",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "eleventy-sass": "^2.2.3",
     "markdown-it-deflist": "^2.1.0"
   },
   "dependencies": {
     "feather-icons": "^4.29.0",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "prismjs": "^1.29.0"
   }
 }

src/_includes/layouts/layout.njk

@@ -14,6 +14,8 @@
 		{% endif %}
 	</title>
 
+	<link rel="stylesheet" href="{{ '/css/prism.min.css' }}" media="(prefers-color-scheme: light)">
+	<link rel="stylesheet" href="{{ '/css/prism-tomorrow.min.css' }}" media="(prefers-color-scheme: dark)">
 	<link rel="stylesheet" href="{{ '/css/site.css' | url }}">
 </head>
 <body>

src/css/Components/_base.scss

@@ -35,6 +35,7 @@ header {
 
 main {
 	width: 100%;
+	min-width: 0px;
 	max-width: 70em;
 	padding: 2rem;
 	margin-left: auto;

src/css/Components/_code.scss

@@ -17,3 +17,17 @@ code {
 	border: solid 1px var(--primary-border-color);
 	border-radius: calc(var(--main-border-radius) / 2);
 }
+
+pre {
+	background: var(--code-background);
+	padding: 1em;
+	border: solid 1px var(--primary-border-color);
+	border-radius: calc(var(--main-border-radius) / 2);
+
+	code {
+		background: unset;
+		padding: unset;
+		border: unset;
+		border-radius: unset;
+	}
+}

src/posts/index.njk

@@ -11,6 +11,9 @@ eleventyNavigation:
 		<section>
 			<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
 			<div>
+				<svg class="icon">
+					<use href="/images/feather-sprite.svg#clock" />
+				</svg>
 				{{ post.date.toLocaleDateString("en-US") }}
 			</div>
 			<p>{{ post.data.description }}</p>

src/posts/posts.11tydata.json

@@ -1,3 +1,4 @@
 {
-	"tags": [ "posts" ]
+	"tags": [ "posts" ],
+	"date": "git Created"
 }