feat: integrate a "table of content"

pull/6/head
Nicolas Doby 2022-12-04 19:52:12 +01:00
parent 56fbb26827
commit 63aa82a960
4 changed files with 70 additions and 28 deletions

View File

@ -1,5 +1,6 @@
const { DateTime } = require("luxon"); const { DateTime } = require("luxon");
const markdownItAnchor = require("markdown-it-anchor"); const markdownItAnchor = require("markdown-it-anchor");
const pluginTOC = require('eleventy-plugin-toc')
const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginNavigation = require("@11ty/eleventy-navigation"); const pluginNavigation = require("@11ty/eleventy-navigation");
@ -9,6 +10,7 @@ const htmlmin = require('html-minifier');
let options = { let options = {
// whatever options you have set for the library here // whatever options you have set for the library here
html: true,
typographer: true, typographer: true,
quotes: ['«\xA0', '\xA0»', '\xA0', '\xA0'], quotes: ['«\xA0', '\xA0»', '\xA0', '\xA0'],
}; };
@ -41,6 +43,11 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.addPlugin(EleventyHtmlBasePlugin); eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h2', 'h3'],
wrapperClass: 'table-of-contents',
ul: true,
});
eleventyConfig.addFilter("env", (key, def="NOT DEFINED") => process.env[key] || def); eleventyConfig.addFilter("env", (key, def="NOT DEFINED") => process.env[key] || def);
@ -109,11 +116,6 @@ module.exports = function(eleventyConfig) {
// Customize Markdown library and settings: // Customize Markdown library and settings:
eleventyConfig.amendLibrary("md", mdLib => { eleventyConfig.amendLibrary("md", mdLib => {
mdLib.use(markdownItAnchor, { mdLib.use(markdownItAnchor, {
permalink: markdownItAnchor.permalink.ariaHidden({
placement: "after",
class: "direct-link",
symbol: "#",
}),
level: [1,2,3,4], level: [1,2,3,4],
slugify: eleventyConfig.getFilter("slug") slugify: eleventyConfig.getFilter("slug")
}); });

View File

@ -22,24 +22,24 @@
"@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-navigation": "^0.3.5",
"@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-rss": "^1.2.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
"markdown-it-anchor": "^8.6.4",
"markdown-it-image-figures": "^2.1.0",
"luxon": "^3.0.4",
"@babel/core": "^7.18.2", "@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2", "@babel/preset-env": "^7.18.2",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"core-js": "^3.22.8", "core-js": "^3.22.8",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"eleventy-plugin-toc": "^1.1.5",
"eslint": "^8.17.0", "eslint": "^8.17.0",
"eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0", "eslint-plugin-import": "^2.26.0",
"html-minifier": "^4.0.0", "html-minifier": "^4.0.0",
"luxon": "^3.0.4",
"markdown-it-anchor": "^8.6.4",
"markdown-it-image-figures": "^2.1.0",
"md5-file": "^5.0.0", "md5-file": "^5.0.0",
"mini-css-extract-plugin": "^2.6.0", "mini-css-extract-plugin": "^2.6.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"css-minimizer-webpack-plugin": "^4.0.0",
"postcss-loader": "^7.0.0", "postcss-loader": "^7.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"sass": "^1.52.2", "sass": "^1.52.2",

View File

@ -2,6 +2,11 @@
layout: blog.njk layout: blog.njk
templateClass: tmpl-post templateClass: tmpl-post
--- ---
{%- if toc %}
<aside class="left-side">
{{ content | toc | safe }}
</aside>
{%- endif %}
<div class="main-content"> <div class="main-content">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>

View File

@ -55,6 +55,7 @@ body {
font-family: var(--font-family); font-family: var(--font-family);
color: var(--text-color); color: var(--text-color);
background-color: var(--background-color); background-color: var(--background-color);
scroll-behavior: smooth;
} }
main { main {
@ -68,11 +69,52 @@ main {
width: 1200px; width: 1200px;
} }
.right-side { .left-side, .right-side {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
align-self: flex-start; align-self: flex-start;
width: 320px; width: 320px;
}
.left-side {
padding-right: 60px;
}
.table-of-contents {
background: var(--color-gray-20);
border-radius: 5px;
padding: 15px 5px;
}
.table-of-contents ul {
list-style: none;
margin: 0;
padding: 0;
li {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
a {
font-weight: bold;
font-size: 0.8125rem;
margin: 5px;
color: var(--text-color);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.table-of-contents > ul ul li {
a {
font-weight: normal;
}
}
.right-side {
padding-left: 60px; padding-left: 60px;
} }
@ -285,12 +327,14 @@ figure figcaption {
.post-tag a { .post-tag a {
color: var(--text-color); color: var(--text-color);
font-size: 0.8125rem; /* 13px /16 */ font-size: 0.8125rem; /* 13px /16 */
font-weight: 700;
text-decoration: none; text-decoration: none;
} }
/* Tags list */ /* Tags list */
.post-metadata { .post-metadata {
display: flex; display: flex;
flex-direction: column;
gap: .5em; gap: .5em;
font-size: 0.8125rem; /* 13px /16 */ font-size: 0.8125rem; /* 13px /16 */
color: var(--text-color-sub); color: var(--text-color-sub);
@ -350,21 +394,6 @@ h1 + .post-metadata {
} }
} }
/* Direct Links / Markdown Headers */
.direct-link {
font-family: sans-serif;
text-decoration: none;
font-style: normal;
margin-left: .1em;
}
a[href].direct-link {
color: transparent;
}
a[href].direct-link:focus,
:hover > a[href].direct-link {
color: var(--color-gray-50);
}
.main-footer { .main-footer {
align-items: center; align-items: center;
background: var(--color-green-1); background: var(--color-green-1);
@ -473,9 +502,15 @@ pre[class*="language-diff-"] {
max-width: 100%; max-width: 100%;
} }
.right-side { .right-side {
position: relative;
width: 100%; width: 100%;
padding-left: 0; padding: 5rem 0;
padding-top: 5rem; }
.left-side {
position: relative;
order: 2;
width: 100%;
padding-right: 0;
} }
h1 + .post-metadata { h1 + .post-metadata {
flex-direction: column; flex-direction: column;