feat: integrate a "table of content"
parent
56fbb26827
commit
63aa82a960
|
@ -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")
|
||||||
});
|
});
|
||||||
|
|
10
package.json
10
package.json
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue