add support for (accessible) footnotes
parent
8166ac6c68
commit
347b7e55c2
|
@ -8,6 +8,7 @@ const related = require("eleventy-plugin-related");
|
||||||
const markdownIt = require("markdown-it");
|
const markdownIt = require("markdown-it");
|
||||||
const markdownItAnchor = require("markdown-it-anchor");
|
const markdownItAnchor = require("markdown-it-anchor");
|
||||||
const sass = require("sass");
|
const sass = require("sass");
|
||||||
|
const footnotes = require('eleventy-plugin-footnotes');
|
||||||
|
|
||||||
const figure = require('./src/_includes/components/figure.js');
|
const figure = require('./src/_includes/components/figure.js');
|
||||||
const bounce = require('./src/_includes/components/bounce.js');
|
const bounce = require('./src/_includes/components/bounce.js');
|
||||||
|
@ -37,6 +38,10 @@ module.exports = function (eleventyConfig) {
|
||||||
eleventyConfig.addPlugin(syntaxHighlight);
|
eleventyConfig.addPlugin(syntaxHighlight);
|
||||||
eleventyConfig.addPlugin(timeToRead);
|
eleventyConfig.addPlugin(timeToRead);
|
||||||
eleventyConfig.addPlugin(safeLinks);
|
eleventyConfig.addPlugin(safeLinks);
|
||||||
|
eleventyConfig.addPlugin(footnotes, {
|
||||||
|
"title": "footnotes",
|
||||||
|
"baseClass": "footnotes"
|
||||||
|
});
|
||||||
|
|
||||||
eleventyConfig.addShortcode('figure', figure(md));
|
eleventyConfig.addShortcode('figure', figure(md));
|
||||||
eleventyConfig.addShortcode('bounce', bounce);
|
eleventyConfig.addShortcode('bounce', bounce);
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
|
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
|
||||||
"@sardine/eleventy-plugin-external-links": "^1.4.0",
|
"@sardine/eleventy-plugin-external-links": "^1.4.0",
|
||||||
|
"eleventy-plugin-footnotes": "^0.11.0",
|
||||||
"eleventy-plugin-related": "^1.0.6",
|
"eleventy-plugin-related": "^1.0.6",
|
||||||
"eleventy-plugin-time-to-read": "^1.3.0",
|
"eleventy-plugin-time-to-read": "^1.3.0",
|
||||||
"markdown-it": "^13.0.2",
|
"markdown-it": "^13.0.2",
|
||||||
|
@ -583,6 +584,14 @@
|
||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/clsx": {
|
||||||
|
"version": "1.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
||||||
|
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
@ -788,6 +797,14 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/eleventy-plugin-footnotes": {
|
||||||
|
"version": "0.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/eleventy-plugin-footnotes/-/eleventy-plugin-footnotes-0.11.0.tgz",
|
||||||
|
"integrity": "sha512-NQd6jNPekxIhESIIWPKUv2XXoYYknfDG8KjCdftSMGquncu1u9StVIDPmBinPChl4l68d8qTgmMXyM7kRxwGsg==",
|
||||||
|
"dependencies": {
|
||||||
|
"clsx": "^1.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/eleventy-plugin-related": {
|
"node_modules/eleventy-plugin-related": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-related/-/eleventy-plugin-related-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/eleventy-plugin-related/-/eleventy-plugin-related-1.0.6.tgz",
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
|
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
|
||||||
"@sardine/eleventy-plugin-external-links": "^1.4.0",
|
"@sardine/eleventy-plugin-external-links": "^1.4.0",
|
||||||
|
"eleventy-plugin-footnotes": "^0.11.0",
|
||||||
"eleventy-plugin-related": "^1.0.6",
|
"eleventy-plugin-related": "^1.0.6",
|
||||||
"eleventy-plugin-time-to-read": "^1.3.0",
|
"eleventy-plugin-time-to-read": "^1.3.0",
|
||||||
"markdown-it": "^13.0.2",
|
"markdown-it": "^13.0.2",
|
||||||
|
|
|
@ -40,6 +40,7 @@ subhead: blog
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
{% footnotes %}
|
||||||
<a class="banner-link" href="https://ko-fi.com/nyancrimew">
|
<a class="banner-link" href="https://ko-fi.com/nyancrimew">
|
||||||
<div class="kofi-banner">
|
<div class="kofi-banner">
|
||||||
if you enjoyed this or any of my other work feel free to support me on my <span class="like-a">ko-fi</span>. this is my only real source of income so anything goes a long way,
|
if you enjoyed this or any of my other work feel free to support me on my <span class="like-a">ko-fi</span>. this is my only real source of income so anything goes a long way,
|
||||||
|
|
|
@ -72,6 +72,7 @@ footer,
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
padding-bottom: 2em;
|
padding-bottom: 2em;
|
||||||
|
counter-reset: footnotes;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
|
@ -292,4 +293,48 @@ blockquote.greentext::after {
|
||||||
.sleepy-zone-webring-next-site a::after {
|
.sleepy-zone-webring-next-site a::after {
|
||||||
content: "→";
|
content: "→";
|
||||||
margin-inline-start: 1ch;
|
margin-inline-start: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inline footnotes references
|
||||||
|
* 1. Increment the counter at each new reference
|
||||||
|
* 2. Reset link styles to make it appear like regular text
|
||||||
|
*/
|
||||||
|
a[aria-describedby="footnotes-label"] {
|
||||||
|
counter-increment: footnotes; /* 1 */
|
||||||
|
text-decoration: none; /* 2 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
cursor: default; /* 2 */
|
||||||
|
outline: none; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Actual numbered references
|
||||||
|
* 1. Display the current state of the counter (e.g. `[1]`)
|
||||||
|
* 2. Align text as superscript
|
||||||
|
* 3. Make the number smaller (since it's superscript)
|
||||||
|
* 4. Slightly offset the number from the text
|
||||||
|
* 5. Reset link styles on the number to show it's usable
|
||||||
|
*/
|
||||||
|
a[aria-describedby="footnotes-label"]::after {
|
||||||
|
content: '[' counter(footnotes) ']'; /* 1 */
|
||||||
|
vertical-align: super; /* 2 */
|
||||||
|
font-size: 0.85em; /* 3 */
|
||||||
|
margin-left: 2px; /* 4 */
|
||||||
|
color: $accent; /* 5 */
|
||||||
|
text-decoration: underline; /* 5 */
|
||||||
|
cursor: pointer; /* 5 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resetting the default focused styles on the number
|
||||||
|
*/
|
||||||
|
a[aria-describedby="footnotes-label"]:focus::after {
|
||||||
|
outline: thin dotted;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnotes {
|
||||||
|
text-align: unset;
|
||||||
|
padding-top: initial;
|
||||||
}
|
}
|
Loading…
Reference in New Issue