feat: integrate a "table of content"
parent
56fbb26827
commit
63aa82a960
|
|
@ -1,5 +1,6 @@
|
|||
const { DateTime } = require("luxon");
|
||||
const markdownItAnchor = require("markdown-it-anchor");
|
||||
const pluginTOC = require('eleventy-plugin-toc')
|
||||
const pluginRss = require("@11ty/eleventy-plugin-rss");
|
||||
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
|
||||
const pluginNavigation = require("@11ty/eleventy-navigation");
|
||||
|
|
@ -9,6 +10,7 @@ const htmlmin = require('html-minifier');
|
|||
|
||||
let options = {
|
||||
// whatever options you have set for the library here
|
||||
html: true,
|
||||
typographer: true,
|
||||
quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
|
||||
};
|
||||
|
|
@ -41,6 +43,11 @@ module.exports = function(eleventyConfig) {
|
|||
eleventyConfig.addPlugin(pluginSyntaxHighlight);
|
||||
eleventyConfig.addPlugin(pluginNavigation);
|
||||
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);
|
||||
|
||||
|
|
@ -109,11 +116,6 @@ module.exports = function(eleventyConfig) {
|
|||
// Customize Markdown library and settings:
|
||||
eleventyConfig.amendLibrary("md", mdLib => {
|
||||
mdLib.use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "direct-link",
|
||||
symbol: "#",
|
||||
}),
|
||||
level: [1,2,3,4],
|
||||
slugify: eleventyConfig.getFilter("slug")
|
||||
});
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -22,24 +22,24 @@
|
|||
"@11ty/eleventy-navigation": "^0.3.5",
|
||||
"@11ty/eleventy-plugin-rss": "^1.2.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/preset-env": "^7.18.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"babel-loader": "^8.2.5",
|
||||
"core-js": "^3.22.8",
|
||||
"css-loader": "^6.7.1",
|
||||
"css-minimizer-webpack-plugin": "^4.0.0",
|
||||
"eleventy-plugin-toc": "^1.1.5",
|
||||
"eslint": "^8.17.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.26.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",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"css-minimizer-webpack-plugin": "^4.0.0",
|
||||
"postcss-loader": "^7.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.52.2",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
layout: blog.njk
|
||||
templateClass: tmpl-post
|
||||
---
|
||||
{%- if toc %}
|
||||
<aside class="left-side">
|
||||
{{ content | toc | safe }}
|
||||
</aside>
|
||||
{%- endif %}
|
||||
<div class="main-content">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ body {
|
|||
font-family: var(--font-family);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -68,11 +69,52 @@ main {
|
|||
width: 1200px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
.left-side, .right-side {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
align-self: flex-start;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -285,12 +327,14 @@ figure figcaption {
|
|||
.post-tag a {
|
||||
color: var(--text-color);
|
||||
font-size: 0.8125rem; /* 13px /16 */
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Tags list */
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
font-size: 0.8125rem; /* 13px /16 */
|
||||
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 {
|
||||
align-items: center;
|
||||
background: var(--color-green-1);
|
||||
|
|
@ -473,9 +502,15 @@ pre[class*="language-diff-"] {
|
|||
max-width: 100%;
|
||||
}
|
||||
.right-side {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: 5rem;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
.left-side {
|
||||
position: relative;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
h1 + .post-metadata {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
Loading…
Reference in New Issue