reworked part of the page
This commit is contained in:
parent
7920b68a2d
commit
79361b3c44
25
.eleventy.js
25
.eleventy.js
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>© {{ year }} {{ site.author }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 {
|
||||
|
|
@ -270,3 +272,17 @@ 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);
|
||||
}
|
||||
Loading…
Reference in New Issue