From ab8563386f3e6d6d11593b7bafa2a7f6761ea759 Mon Sep 17 00:00:00 2001 From: arne Date: Tue, 4 Oct 2022 09:16:37 +0200 Subject: [PATCH] Add TOC to posts --- .eleventy.js | 8 ++- package.json | 2 + pnpm-lock.yaml | 118 +++++++++++++++++++++++++++++++++++++++- src/_includes/posts.njk | 2 + src/assets/style.scss | 35 +++++++++++- 5 files changed, 160 insertions(+), 5 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index f9bc27a..83326e6 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,13 +1,18 @@ const pluginRss = require('@11ty/eleventy-plugin-rss') +const pluginToc = require('eleventy-plugin-nesting-toc') + +// extra features for markdown const markdownIt = require('markdown-it') -const footnotes = require('markdown-it-footnote') +const anchors = require('markdown-it-anchor') const abbrs = require('markdown-it-abbr') +const footnotes = require('markdown-it-footnote') const { DateTime } = require('luxon') const header = require('./src/_includes/filters/header') module.exports = function (config) { config.addPlugin(pluginRss) + config.addPlugin(pluginToc) config.setBrowserSyncConfig({ files: './_site/assets/*.css' @@ -25,6 +30,7 @@ module.exports = function (config) { config.setLibrary("md", markdownIt(mdOptions) + .use(anchors) .use(footnotes) .use(abbrs) ) diff --git a/package.json b/package.json index d079e01..6a21dd7 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,9 @@ "dependencies": { "@11ty/eleventy-plugin-rss": "^1.1.2", "@remy/webmention": "^1.4.5", + "eleventy-plugin-nesting-toc": "^1.3.0", "markdown-it-abbr": "^1.0.4", + "markdown-it-anchor": "^8.6.5", "markdown-it-footnote": "^3.0.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cba8f5a..dabf56d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,16 +5,20 @@ specifiers: '@11ty/eleventy-plugin-rss': ^1.1.2 '@remy/webmention': ^1.4.5 '@thi.ng/hiccup': 3.6.22 + eleventy-plugin-nesting-toc: ^1.3.0 lodash: ^4.17.21 luxon: ^2.3.0 markdown-it-abbr: ^1.0.4 + markdown-it-anchor: ^8.6.5 markdown-it-footnote: ^3.0.3 seedrandom: ^3.0.5 dependencies: '@11ty/eleventy-plugin-rss': 1.1.2 '@remy/webmention': 1.4.5 + eleventy-plugin-nesting-toc: 1.3.0 markdown-it-abbr: 1.0.4 + markdown-it-anchor: 8.6.5 markdown-it-footnote: 3.0.3 devDependencies: @@ -380,7 +384,7 @@ packages: dev: false /boolbase/1.0.0: - resolution: {integrity: sha1-aN/1++YMUes3cl6p4+0xDcwed24=} + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} dev: false /brace-expansion/1.1.11: @@ -516,6 +520,17 @@ packages: is-regex: 1.1.4 dev: true + /cheerio-select/2.1.0: + resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} + dependencies: + boolbase: 1.0.0 + css-select: 5.1.0 + css-what: 6.1.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.0.1 + dev: false + /cheerio/0.22.0: resolution: {integrity: sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=} engines: {node: '>= 0.6'} @@ -538,6 +553,19 @@ packages: lodash.some: 4.6.0 dev: false + /cheerio/1.0.0-rc.12: + resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==} + engines: {node: '>= 6'} + dependencies: + cheerio-select: 2.1.0 + dom-serializer: 2.0.0 + domhandler: 5.0.3 + domutils: 3.0.1 + htmlparser2: 8.0.1 + parse5: 7.1.1 + parse5-htmlparser2-tree-adapter: 7.0.0 + dev: false + /chokidar/3.5.3: resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} engines: {node: '>= 8.10.0'} @@ -672,7 +700,7 @@ packages: dev: true /css-select/1.2.0: - resolution: {integrity: sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=} + resolution: {integrity: sha512-dUQOBoqdR7QwV90WysXPLXG5LO7nhYBgiWVfxF80DKPF8zx1t/pUd2FYy73emg3zrjtM6dzmYgbHKfV2rxiHQA==} dependencies: boolbase: 1.0.0 css-what: 2.1.3 @@ -680,10 +708,25 @@ packages: nth-check: 1.0.2 dev: false + /css-select/5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.0.1 + nth-check: 2.1.1 + dev: false + /css-what/2.1.3: resolution: {integrity: sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==} dev: false + /css-what/6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + dev: false + /d/0.1.1: resolution: {integrity: sha1-2hhMU10Y2O57oqoim5FACfrhEwk=} dependencies: @@ -798,6 +841,14 @@ packages: entities: 2.1.0 dev: false + /dom-serializer/2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.4.0 + dev: false + /domelementtype/1.3.1: resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==} dev: false @@ -819,8 +870,15 @@ packages: domelementtype: 2.3.0 dev: false + /domhandler/5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: false + /domutils/1.5.1: - resolution: {integrity: sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=} + resolution: {integrity: sha512-gSu5Oi/I+3wDENBsOWBiRK1eoGxcywYSqg3rR960/+EfY0CF4EX1VPkgHOZ3WiS/Jg2DtliF6BhWcHlfpYUcGw==} dependencies: dom-serializer: 0.1.1 domelementtype: 1.3.1 @@ -841,6 +899,14 @@ packages: domhandler: 4.3.1 dev: false + /domutils/3.0.1: + resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==} + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dev: false + /easy-extender/2.3.4: resolution: {integrity: sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==} engines: {node: '>= 4.0.0'} @@ -877,6 +943,12 @@ packages: jake: 10.8.5 dev: true + /eleventy-plugin-nesting-toc/1.3.0: + resolution: {integrity: sha512-WZzVkz28nw3A0DpJFQWXZzQxniyjvOZKxVix5x7WVAS0H1OD1hYJbR0go/Lr1kK2SrmxfbsUHUlekR+mQPvqMA==} + dependencies: + cheerio: 1.0.0-rc.12 + dev: false + /emoji-regex/8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} dev: true @@ -936,6 +1008,11 @@ packages: /entities/2.1.0: resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==} + /entities/4.4.0: + resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==} + engines: {node: '>=0.12'} + dev: false + /errno/0.1.8: resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} hasBin: true @@ -1260,6 +1337,15 @@ packages: entities: 2.1.0 dev: false + /htmlparser2/8.0.1: + resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.0.1 + entities: 4.4.0 + dev: false + /http-equiv-refresh/1.0.0: resolution: {integrity: sha1-jsU4hmBCvl8/evpzfRmNlL6xsHs=} engines: {node: '>= 0.10'} @@ -1609,6 +1695,13 @@ packages: resolution: {integrity: sha512-ZeA4Z4SaBbYysZap5iZcxKmlPL6bYA8grqhzJIHB1ikn7njnzaP8uwbtuXc4YXD5LicI4/2Xmc0VwmSiFV04gg==} dev: false + /markdown-it-anchor/8.6.5: + resolution: {integrity: sha512-PI1qEHHkTNWT+X6Ip9w+paonfIQ+QZP9sCeMYi47oqhH+EsW8CrJ8J7CzV19QVOj6il8ATGbK2nTECj22ZHGvQ==} + peerDependencies: + '@types/markdown-it': '*' + markdown-it: '*' + dev: false + /markdown-it-footnote/3.0.3: resolution: {integrity: sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==} dev: false @@ -1805,6 +1898,12 @@ packages: boolbase: 1.0.0 dev: false + /nth-check/2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + dependencies: + boolbase: 1.0.0 + dev: false + /nunjucks/3.2.3_chokidar@3.5.3: resolution: {integrity: sha512-psb6xjLj47+fE76JdZwskvwG4MYsQKXUtMsPh6U0YMvmyjRtKRFcxnlXGWglNybtNTNVmGdp94K62/+NjF5FDQ==} engines: {node: '>= 6.9.0'} @@ -1861,6 +1960,19 @@ packages: resolution: {integrity: sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=} dev: false + /parse5-htmlparser2-tree-adapter/7.0.0: + resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==} + dependencies: + domhandler: 5.0.3 + parse5: 7.1.1 + dev: false + + /parse5/7.1.1: + resolution: {integrity: sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==} + dependencies: + entities: 4.4.0 + dev: false + /parseurl/1.3.3: resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} engines: {node: '>= 0.8'} diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk index f907d4e..a383407 100644 --- a/src/_includes/posts.njk +++ b/src/_includes/posts.njk @@ -10,5 +10,7 @@ {% endblock %} {% block sidebar %} +

Content

+{{ content | toc | safe }} Go Back Home {% endblock %} diff --git a/src/assets/style.scss b/src/assets/style.scss index 6c8228f..ac463ba 100644 --- a/src/assets/style.scss +++ b/src/assets/style.scss @@ -9,6 +9,10 @@ $highlight: #ff005f; $highlight-1: #ff005f11; $highlight-2: #ff005f22; +$alternative-links: #444; +$alternative-links-1: #44444411; +$alternative-links-2: #44444422; + $reduced: #888; $reduced-1: #88888811; $reduced-2: #88888822; @@ -65,7 +69,7 @@ a { // multi-line padded background box-decoration-break: clone; - border-bottom: 1px dotted $highlight; + border-bottom: 1px dotted currentColor; transition: .2s ease-in background; @@ -244,6 +248,19 @@ footer { article { display: none; } } +.posts { + aside { + a { + color: $alternative-links; + font-size: 14px; + + &:hover { + background: $alternative-links-1; + } + } + } +} + footer { a { color: inherit; @@ -260,3 +277,19 @@ footer { color: $reduced; } } + +.toc { + ol { + list-style: none; + padding: 0; + margin: 0 0 32px; + + li { + margin-bottom: 6px; + + @media screen and (max-width: 768px) { + margin-bottom: 12px; + } + } + } +}