diff --git a/.eleventy.js b/.eleventy.js index 14fb3f20..4c24608a 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -3,6 +3,7 @@ const pluginNavigation = require("@11ty/eleventy-navigation") const pluginSvgSprite = require("eleventy-plugin-svg-sprite") const pluginPageAssets = require("eleventy-plugin-page-assets") const markdownIt = require("markdown-it") +const markdownItFootnote = require("markdown-it-footnote") const lodash = require("lodash") const filters = require("./utils/filters.js") @@ -58,7 +59,7 @@ module.exports = function (config) { breaks: true, linkify: true, typographer: true - }) + }).use(markdownItFootnote) ) // Layouts diff --git a/package-lock.json b/package-lock.json index e8279753..2eb72a7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "lodash": "^4.17.21", "luxon": "^2.1.1", "markdown-it": "^12.2.0", + "markdown-it-footnote": "^4.0.0", "memfs": "^3.4.0", "netlify-cli": "^17.23.1", "node-fetch": "^3.3.1", @@ -7455,6 +7456,11 @@ "markdown-it": "bin/markdown-it.js" } }, + "node_modules/markdown-it-footnote": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz", + "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==" + }, "node_modules/markdown-it/node_modules/entities": { "version": "2.1.0", "license": "BSD-2-Clause", diff --git a/package.json b/package.json index a2db22a7..fc88d9c2 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "lodash": "^4.17.21", "luxon": "^2.1.1", "markdown-it": "^12.2.0", + "markdown-it-footnote": "^4.0.0", "memfs": "^3.4.0", "netlify-cli": "^17.23.1", "node-fetch": "^3.3.1", diff --git a/src/assets/styles/components/_content.scss b/src/assets/styles/components/_content.scss index eba76a22..e168eba2 100644 --- a/src/assets/styles/components/_content.scss +++ b/src/assets/styles/components/_content.scss @@ -108,6 +108,31 @@ } } + .footnotes-sep { + margin-top: 2.75rem; + margin-bottom: 2.75rem; + } + + .footnotes { + ol { + font-size: 0.875rem; + line-height: 1.2rem; + font-weight: 520; + letter-spacing: -0.01rem; + } + + .footnote-backref { + text-decoration: none; + } + } + + .footnote-ref { + a { + text-decoration: none; + font-weight: 520; + } + } + code { font-weight: 600; }