diff --git a/.eleventy.js b/.eleventy.js index 604754f..f076907 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,19 +1,40 @@ // Add Syntax Highlighting plugin const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); // Add Inclusive Language plugin -const inclusiveLangPlugin = require("@11ty/eleventy-plugin-inclusive-language"); +// const inclusiveLangPlugin = require("@11ty/eleventy-plugin-inclusive-language"); // Add Naviagation plugin const eleventyNavigationPlugin = require("@11ty/eleventy-navigation"); // Add read time const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime"); +// make external links safer +const safeLinks = require('@sardine/eleventy-plugin-external-links'); +// add a read progress bar to the page +const readerBar = require('eleventy-plugin-reader-bar'); +// toc +const markdownIt = require('markdown-it'); +const markdownItAnchor = require('markdown-it-anchor'); +const pluginTOC = require('eleventy-plugin-toc') module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight); // syntax highlighting - eleventyConfig.addPlugin(inclusiveLangPlugin); // inclusive language + // eleventyConfig.addPlugin(inclusiveLangPlugin); // inclusive language eleventyConfig.addPlugin(eleventyNavigationPlugin); // navigation eleventyConfig.addPlugin(emojiReadTime, { emoji: "💠" }); // read emojiReadTime + eleventyConfig.addPlugin(safeLinks); // safeLinks plugin + eleventyConfig.addPlugin(readerBar); // progress bar + eleventyConfig.addPlugin(pluginTOC, { + tags: ['h1', 'h2', 'h3', 'h4', 'h5'], + wrapper: 'div', + ul: true + }) // Table of Contents + + // toc + eleventyConfig.setLibrary( + 'md', + markdownIt().use(markdownItAnchor) + ) // add stylesheet eleventyConfig.addPassthroughCopy("_src/style.css"); diff --git a/_src/_includes/base.njk b/_src/_includes/base.njk index 409f950..16fb0a6 100644 --- a/_src/_includes/base.njk +++ b/_src/_includes/base.njk @@ -21,7 +21,7 @@ {{ title }} - +

{{ title }}

@@ -33,10 +33,21 @@
+ {% if content | toc | safe %} +
+ Table of Contents +

+ {{ content | toc | safe}} +

+
+ {% endif %} + {{ content | safe}}
- + + {% readerBar 8px, "white" %} +
Dev @@ -68,6 +79,6 @@

© {{ year }} {{ site.author }}

- + \ No newline at end of file diff --git a/_src/style.css b/_src/style.css index bee3144..94a5acf 100644 --- a/_src/style.css +++ b/_src/style.css @@ -105,6 +105,8 @@ h4::before, h5::before, h6::before { .website-title { font-size: 40pt; color: #6272a4; + margin-top: 5px !important; + margin-bottom: 5px !important; } .website-title::before { @@ -269,4 +271,18 @@ hr { .content strong { color: var(--highlight-cyan); +} + +.content { + margin-top: 20px; +} + +.table-of-contents { + border: 1px solid white; + padding: 5px; +} + +.toc-header { + font-weight: bold; + color: var(--highlight-cyan); } \ No newline at end of file