From e284972969ab4bb684560f71d6f8619f30ed5eab Mon Sep 17 00:00:00 2001 From: Neil Brommer Date: Fri, 7 Jul 2023 22:16:57 -0700 Subject: [PATCH] Add support for code syntax highlighting --- .eleventy.js | 8 ++++--- .nova/Tasks/Eleventy.json | 2 +- package-lock.json | 39 +++++++++++++++++++++++++++++++- package.json | 4 +++- src/_includes/layouts/layout.njk | 2 ++ src/css/Components/_base.scss | 1 + src/css/Components/_code.scss | 14 ++++++++++++ src/posts/index.njk | 3 +++ src/posts/posts.11tydata.json | 3 ++- 9 files changed, 69 insertions(+), 7 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 782bb7a..fd5dcc7 100644 --- a/.eleventy.js +++ b/.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) { - console.log("Skipping filtering drafts"); - + if (process.env.BUILD_DRAFTS) { return collection; } diff --git a/.nova/Tasks/Eleventy.json b/.nova/Tasks/Eleventy.json index 993b2fc..3e80069 100644 --- a/.nova/Tasks/Eleventy.json +++ b/.nova/Tasks/Eleventy.json @@ -14,7 +14,7 @@ } }, "environment" : { - "BUILD_DRAFTS" : "false" + "BUILD_DRAFTS" : "true" }, "openLogOnRun" : "fail", "persistent" : true diff --git a/package-lock.json b/package-lock.json index 12f2588..3978504 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5d6bc5e..eab8516 100644 --- a/package.json +++ b/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" } } diff --git a/src/_includes/layouts/layout.njk b/src/_includes/layouts/layout.njk index ca37873..84ae78e 100644 --- a/src/_includes/layouts/layout.njk +++ b/src/_includes/layouts/layout.njk @@ -14,6 +14,8 @@ {% endif %} + + diff --git a/src/css/Components/_base.scss b/src/css/Components/_base.scss index dbdac79..ce0d1a8 100644 --- a/src/css/Components/_base.scss +++ b/src/css/Components/_base.scss @@ -35,6 +35,7 @@ header { main { width: 100%; + min-width: 0px; max-width: 70em; padding: 2rem; margin-left: auto; diff --git a/src/css/Components/_code.scss b/src/css/Components/_code.scss index 2d58bb2..35d12fb 100644 --- a/src/css/Components/_code.scss +++ b/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; + } +} diff --git a/src/posts/index.njk b/src/posts/index.njk index db200ef..4a193b1 100644 --- a/src/posts/index.njk +++ b/src/posts/index.njk @@ -11,6 +11,9 @@ eleventyNavigation:

{{ post.data.title }}

+ + + {{ post.date.toLocaleDateString("en-US") }}

{{ post.data.description }}

diff --git a/src/posts/posts.11tydata.json b/src/posts/posts.11tydata.json index 5d113c3..9ed3e4e 100644 --- a/src/posts/posts.11tydata.json +++ b/src/posts/posts.11tydata.json @@ -1,3 +1,4 @@ { - "tags": [ "posts" ] + "tags": [ "posts" ], + "date": "git Created" }