arian/eleventy-homepage
arian
/
eleventy-homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.eleventy.js
View File

@ -1,19 +1,40 @@
// Add Syntax Highlighting plugin // Add Syntax Highlighting plugin
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
// Add Inclusive Language plugin // Add Inclusive Language plugin
const inclusiveLangPlugin = require("@11ty/eleventy-plugin-inclusive-language"); // const inclusiveLangPlugin = require("@11ty/eleventy-plugin-inclusive-language");
// Add Naviagation plugin // Add Naviagation plugin
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation"); const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
// Add read time // Add read time
const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime"); 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) { module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight); // syntax highlighting eleventyConfig.addPlugin(syntaxHighlight); // syntax highlighting
eleventyConfig.addPlugin(inclusiveLangPlugin); // inclusive language // eleventyConfig.addPlugin(inclusiveLangPlugin); // inclusive language
eleventyConfig.addPlugin(eleventyNavigationPlugin); // navigation eleventyConfig.addPlugin(eleventyNavigationPlugin); // navigation
eleventyConfig.addPlugin(emojiReadTime, { eleventyConfig.addPlugin(emojiReadTime, {
emoji: "💠" emoji: "💠"
}); // read emojiReadTime }); // 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 // add stylesheet
eleventyConfig.addPassthroughCopy("_src/style.css"); eleventyConfig.addPassthroughCopy("_src/style.css");

15
_src/_includes/base.njk
View File

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

16
_src/style.css
View File

@ -105,6 +105,8 @@ h4::before, h5::before, h6::before {
.website-title { .website-title {
font-size: 40pt; font-size: 40pt;
color: #6272a4; color: #6272a4;
margin-top: 5px !important;
margin-bottom: 5px !important;
} }
.website-title::before { .website-title::before {
@ -270,3 +272,17 @@ hr {
.content strong { .content strong {
color: var(--highlight-cyan); 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);
}