From 318795ef5d8104a7eb4d5cc05d91dd2186422fce Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Tue, 15 Oct 2024 17:08:44 +0200 Subject: [PATCH] feat: :sparkles: add table of contents to posts --- eleventy.config.js | 6 +- package-lock.json | 160 ++++++++++++++++++++++++++++++++++++++- package.json | 2 + src/css/style.css | 6 +- src/layouts/blogpost.njk | 78 ++++++++++--------- tailwind.config.js | 8 +- 6 files changed, 218 insertions(+), 42 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index f074d0b..deecc37 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -2,7 +2,6 @@ import fs from 'node:fs'; import { env } from 'node:process'; import { eleventyImageTransformPlugin } from '@11ty/eleventy-img'; import { feedPlugin } from '@11ty/eleventy-plugin-rss'; -import { IdAttributePlugin } from '@11ty/eleventy'; import eleventyPluginCiu from '@alexcarpenter/eleventy-plugin-caniuse'; import eleventyPluginEmbedEverything from 'eleventy-plugin-embed-everything'; import eleventyPluginLucideIcons from '@grimlink/eleventy-plugin-lucide-icons'; @@ -12,7 +11,9 @@ import eleventyPluginOgImage from 'eleventy-plugin-og-image'; import eleventyPluginReadingTime from '@myxotod/eleventy-plugin-readingtime'; import eleventyPluginRobotsTxt from 'eleventy-plugin-robotstxt'; import eleventyPluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'; +import eleventyPluginTOC from '@thedigitalman/eleventy-plugin-toc-a11y'; import markdownItAbbr from 'markdown-it-abbr'; +import markdownItAnchor from 'markdown-it-anchor' import markdownItCallouts from 'markdown-it-obsidian-callouts'; import markdownItCollapsible from 'markdown-it-collapsible'; import markdownItFootnote from 'markdown-it-footnote'; @@ -31,13 +32,13 @@ export default async function (eleventyConfig) { return collection.getFilteredByGlob('./src/posts/*.md'); }); - eleventyConfig.addPlugin(IdAttributePlugin); eleventyConfig.addPlugin(eleventyPluginCiu); eleventyConfig.addPlugin(eleventyPluginEmbedEverything); eleventyConfig.addPlugin(eleventyPluginLucideIcons); eleventyConfig.addPlugin(eleventyPluginMetagen); eleventyConfig.addPlugin(eleventyPluginNavigation); eleventyConfig.addPlugin(eleventyPluginReadingTime); + eleventyConfig.addPlugin(eleventyPluginTOC); eleventyConfig.addPlugin(eleventyPluginRobotsTxt, { sitemapURL: 'https://blog.sebin-nyshkim.net/sitemap.xml', shouldBlockAIRobots: true, @@ -94,6 +95,7 @@ export default async function (eleventyConfig) { eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCollapsible)); eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCallouts)); eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItFootnote)); + eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItAnchor)); eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`); diff --git a/package-lock.json b/package-lock.json index 34a6921..ccb6afd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,12 +19,14 @@ "@myxotod/eleventy-plugin-readingtime": "^2.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@tailwindcss/typography": "^0.5.15", + "@thedigitalman/eleventy-plugin-toc-a11y": "^2.1.0", "eleventy-google-fonts": "^0.1.0", "eleventy-plugin-embed-everything": "^1.19.0", "eleventy-plugin-metagen": "^1.8.3", "eleventy-plugin-og-image": "^4.0.0", "eleventy-plugin-robotstxt": "^1.0.0", "markdown-it-abbr": "^2.0.0", + "markdown-it-anchor": "^9.2.0", "markdown-it-collapsible": "^2.0.2", "markdown-it-footnote": "^4.0.0", "markdown-it-obsidian-callouts": "^0.3.0", @@ -1303,6 +1305,14 @@ "node": ">=4" } }, + "node_modules/@thedigitalman/eleventy-plugin-toc-a11y": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@thedigitalman/eleventy-plugin-toc-a11y/-/eleventy-plugin-toc-a11y-2.1.0.tgz", + "integrity": "sha512-vbLulpUjH+AIPFxmmLxtiTnQqfaSyCBWSLXzrrPL9Nq7//OhLBX+r28XKMi1ZX3eEnPfG7ZU0Nrny7FFoQlZDQ==", + "dependencies": { + "cheerio": "1.0.0-rc.10" + } + }, "node_modules/@types/babel-types": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.15.tgz", @@ -1333,6 +1343,28 @@ "@types/node": "*" } }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "peer": true + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "peer": true, + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "peer": true + }, "node_modules/@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", @@ -1703,6 +1735,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2122,6 +2159,67 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz", "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ==" }, + "node_modules/cheerio": { + "version": "1.0.0-rc.10", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz", + "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==", + "dependencies": { + "cheerio-select": "^1.5.0", + "dom-serializer": "^1.3.2", + "domhandler": "^4.2.0", + "htmlparser2": "^6.1.0", + "parse5": "^6.0.1", + "parse5-htmlparser2-tree-adapter": "^6.0.1", + "tslib": "^2.2.0" + }, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/cheeriojs/cheerio?sponsor=1" + } + }, + "node_modules/cheerio-select": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.6.0.tgz", + "integrity": "sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==", + "dependencies": { + "css-select": "^4.3.0", + "css-what": "^6.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.3.1", + "domutils": "^2.8.0" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/cheerio/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/cheerio/node_modules/htmlparser2": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", + "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.0.0", + "domutils": "^2.5.2", + "entities": "^2.0.0" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -2502,6 +2600,21 @@ "node": ">=16" } }, + "node_modules/css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-to-react-native": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", @@ -2513,6 +2626,17 @@ "postcss-value-parser": "^4.0.2" } }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -5145,6 +5269,15 @@ "integrity": "sha512-of7C8pXSjXjDojW4neNP+jD7inUYH/DO0Ca+K/4FUEccg0oHAEX/nfscw0jfz66PJbYWOAT9U8mjO21X5p6aAw==", "license": "MIT" }, + "node_modules/markdown-it-anchor": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz", + "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==", + "peerDependencies": { + "@types/markdown-it": "*", + "markdown-it": "*" + } + }, "node_modules/markdown-it-collapsible": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/markdown-it-collapsible/-/markdown-it-collapsible-2.0.2.tgz", @@ -5474,6 +5607,17 @@ "node": ">=0.10.0" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nunjucks": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz", @@ -5663,6 +5807,19 @@ "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==" }, + "node_modules/parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" + }, + "node_modules/parse5-htmlparser2-tree-adapter": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz", + "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==", + "dependencies": { + "parse5": "^6.0.1" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -7518,8 +7675,7 @@ "node_modules/tslib": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", - "optional": true + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/ua-parser-js": { "version": "1.0.39", diff --git a/package.json b/package.json index 15bbfb6..5709997 100644 --- a/package.json +++ b/package.json @@ -26,12 +26,14 @@ "@myxotod/eleventy-plugin-readingtime": "^2.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@tailwindcss/typography": "^0.5.15", + "@thedigitalman/eleventy-plugin-toc-a11y": "^2.1.0", "eleventy-google-fonts": "^0.1.0", "eleventy-plugin-embed-everything": "^1.19.0", "eleventy-plugin-metagen": "^1.8.3", "eleventy-plugin-og-image": "^4.0.0", "eleventy-plugin-robotstxt": "^1.0.0", "markdown-it-abbr": "^2.0.0", + "markdown-it-anchor": "^9.2.0", "markdown-it-collapsible": "^2.0.2", "markdown-it-footnote": "^4.0.0", "markdown-it-obsidian-callouts": "^0.3.0", diff --git a/src/css/style.css b/src/css/style.css index 3db77db..b61e81a 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -35,7 +35,11 @@ a:not(.nav-link, .read-more-button) { } .blogpost { - @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl; + @apply prose prose-slate md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl; +} + +.nav-toc { + @apply sticky top-0 right-0 prose prose-sm; } .footnote-item:target p { diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk index 4f96749..74a75e1 100644 --- a/src/layouts/blogpost.njk +++ b/src/layouts/blogpost.njk @@ -2,40 +2,48 @@ layout: base.njk --- -
-

{{ title }}

- - - {% if image and image.src != '' %} - {{ image.alt }} +
+ {% if toc %} + {% endif %} - {{ content | safe }} -
+
+

{{ title }}

+ + + {% if image and image.src != '' %} + {{ image.alt }} + {% endif %} + + {{ content | safe }} +
+ diff --git a/tailwind.config.js b/tailwind.config.js index 0d2c97f..d590926 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,11 @@ export default { content: ['./src/**/*.{html,md,njk,ejs,pug}'], theme: { - extend: {} + extend: { + gridTemplateColumns: { + content: '20rem minmax(0, 1fr)' + } + } }, - plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")] + plugins: [require('@tailwindcss/typography'), require('tailwindcss-safe-area')] };