reworked part of the page

This commit is contained in:
Arian Furrer 2024-05-25 14:08:35 +02:00
parent 7920b68a2d
commit 79361b3c44
3 changed files with 53 additions and 5 deletions

View File

@ -1,19 +1,40 @@
// Add Syntax Highlighting plugin
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
// Add Inclusive Language plugin
const inclusiveLangPlugin = require("@11ty/eleventy-plugin-inclusive-language");
// const inclusiveLangPlugin = require("@11ty/eleventy-plugin-inclusive-language");
// Add Naviagation plugin
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
// Add read time
const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
// make external links safer
const safeLinks = require('@sardine/eleventy-plugin-external-links');
// add a read progress bar to the page
const readerBar = require('eleventy-plugin-reader-bar');
// toc
const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');
const pluginTOC = require('eleventy-plugin-toc')
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight); // syntax highlighting
eleventyConfig.addPlugin(inclusiveLangPlugin); // inclusive language
// eleventyConfig.addPlugin(inclusiveLangPlugin); // inclusive language
eleventyConfig.addPlugin(eleventyNavigationPlugin); // navigation
eleventyConfig.addPlugin(emojiReadTime, {
emoji: "💠"
}); // read emojiReadTime
eleventyConfig.addPlugin(safeLinks); // safeLinks plugin
eleventyConfig.addPlugin(readerBar); // progress bar
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h1', 'h2', 'h3', 'h4', 'h5'],
wrapper: 'div',
ul: true
}) // Table of Contents
// toc
eleventyConfig.setLibrary(
'md',
markdownIt().use(markdownItAnchor)
)
// add stylesheet
eleventyConfig.addPassthroughCopy("_src/style.css");

View File

@ -21,7 +21,7 @@
<title>{{ title }}</title>
</head>
<body class="page--{% if page.fileSlug %}{{ page.fileSlug }}{% endif %}">
<div class="reader-bar-start">
<div class="header">
<h1 class="website-title"><i>{{ title }}</i></h1>
</div>
@ -33,10 +33,21 @@
</div>
<div class="column right content">
{% if content | toc | safe %}
<details class="table-of-contents">
<summary class="toc-header">Table of Contents</summary>
<p>
{{ content | toc | safe}}
</p>
</details>
{% endif %}
{{ content | safe}}
</div>
</div>
{% readerBar 8px, "white" %}
<div class="footer">
<div class="f-table-td">
<strong>Dev</strong>
@ -68,6 +79,6 @@
<p>&copy; {{ year }} {{ site.author }}</p>
</div>
</div>
</div>
</body>
</html>

View File

@ -105,6 +105,8 @@ h4::before, h5::before, h6::before {
.website-title {
font-size: 40pt;
color: #6272a4;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.website-title::before {
@ -269,4 +271,18 @@ hr {
.content strong {
color: var(--highlight-cyan);
}
.content {
margin-top: 20px;
}
.table-of-contents {
border: 1px solid white;
padding: 5px;
}
.toc-header {
font-weight: bold;
color: var(--highlight-cyan);
}