Setup table of contents using Tocbot
MODIFY
website/.eleventy.js
website/.eleventy.js
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-
const CleanCSS = require("clean-css");
+const markdownIt = require("markdown-it");
+const markdownItAnchor = require('markdown-it-anchor');
module.exports = function(eleventyConfig) {
@@ -10,6 +11,14 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight);
+ let options = {
+ html: true,
+ linkify: true,
+ typographer: true,
+ };
+
+ eleventyConfig.setLibrary("md", markdownIt(options).use(markdownItAnchor, {}));
+
return {
dir: {
input: "src",

MODIFY
website/package.json
website/package.json
"dependencies": {
"@11ty/eleventy": "^0.11.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
- "clean-css": "^4.2.3"
+ "clean-css": "^4.2.3",
+ "markdown-it-anchor": "^5.3.0"
}
}

MODIFY
website/src/includes/layout.njk
website/src/includes/layout.njk
@@ -9,7 +9,8 @@ title: A JavaScript toolchain | Rome
</head>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" />
- <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
{% set css %}{% include 'styles.css' %}{% endset %}
@@ -33,5 +34,18 @@ title: A JavaScript toolchain | Rome
</div>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
+ <script>
+
+ tocbot.init({
+ tocSelector: '.table-of-contents',
+ contentSelector: '.content',
+ headingSelector: 'h1, h2, h3',
+ hasInnerContainers: true,
+ collapseDepth: 3,
+ });
+
+ </script>
+
</body>
</html>
\ No newline at end of file

MODIFY
website/src/includes/styles.css
website/src/includes/styles.css
margin: auto;
max-width: 1280px;
}
+
+.table-of-contents{
+ position: -webkit-sticky;
+ position: sticky;
+ top: 1em;
+ list-style: none;
+}
+
+.table-of-contents a{
+ text-decoration: none;
+}
+
+.table-of-contents li, .table-of-contents ul{
+ padding: 3px;
+}
+
+.table-of-contents li{
+ list-style-type: none;
+}
+

MODIFY
website/yarn.lock
website/yarn.lock
@@ -1839,6 +1839,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
+markdown-it-anchor@^5.3.0:
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.3.0.tgz#d549acd64856a8ecd1bea58365ef385effbac744"
+ integrity sha512-/V1MnLL/rgJ3jkMWo84UR+K+jF1cxNG1a+KwqeXqTIJ+jtA8aWSHuigx8lTzauiIjBDbwF3NcWQMotd0Dm39jA==
+
markdown-it@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"

Setup table of contents using Tocbot