feat: Implement FlatESLint

docs/.eleventy.js

@@ -156,7 +156,35 @@ module.exports = function(eleventyConfig) {
         headingTag: "h2" // Heading tag when showing heading above the wrapper element
     });
 
-    // add IDs to the headers
+    /** @typedef {import("markdown-it/lib/token")} MarkdownItToken A MarkdownIt token. */
+
+    /**
+     * Generates HTML markup for an inline alert.
+     * @param {"warning"|"tip"|"important"} type The type of alert to create.
+     * @param {Array<MarkdownItToken>} tokens Array of MarkdownIt tokens to use.
+     * @param {number} index The index of the current token in the tokens array.
+     * @returns {string} The markup for the alert.
+     */
+    function generateAlertMarkup(type, tokens, index) {
+        if (tokens[index].nesting === 1) {
+            return `
+                <aside role="note" class="alert alert--${type}">
+                    <svg class="alert__icon" aria-hidden="true" focusable="false" width="19" height="20" viewBox="0 0 19 20" fill="none">
+                        <path d="M9.49999 6.66667V10M9.49999 13.3333H9.50832M17.8333 10C17.8333 14.6024 14.1024 18.3333 9.49999 18.3333C4.89762 18.3333 1.16666 14.6024 1.16666 10C1.16666 5.39763 4.89762 1.66667 9.49999 1.66667C14.1024 1.66667 17.8333 5.39763 17.8333 10Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                    <div class="alert__content">
+                        <span class="alert__type">${type[0].toUpperCase()}${type.slice(1)}</span>
+                        <div class="alert__text">
+            `.trim();
+        }
+
+        return `
+                        </div>
+                    </div>
+                </aside>
+        `.trim();
+    }
+
     const markdownIt = require("markdown-it");
 
     eleventyConfig.setLibrary("md",
@@ -166,6 +194,21 @@ module.exports = function(eleventyConfig) {
             })
             .use(markdownItContainer, "correct", {})
             .use(markdownItContainer, "incorrect", {})
+            .use(markdownItContainer, "warning", {
+                render(tokens, idx) {
+                    return generateAlertMarkup("warning", tokens, idx);
+                }
+            })
+            .use(markdownItContainer, "tip", {
+                render(tokens, idx) {
+                    return generateAlertMarkup("tip", tokens, idx);
+                }
+            })
+            .use(markdownItContainer, "important", {
+                render(tokens, idx) {
+                    return generateAlertMarkup("important", tokens, idx);
+                }
+            })
             .disable("code"));
 
     //------------------------------------------------------------------------------

docs/package.json

@@ -23,6 +23,7 @@
         "@11ty/eleventy-navigation": "^0.3.2",
         "@11ty/eleventy-plugin-rss": "^1.1.1",
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
+        "@types/markdown-it": "^12.2.3",
         "algoliasearch": "^4.12.1",
         "dom-parser": "^0.1.6",
         "eleventy-plugin-nesting-toc": "^1.3.0",

docs/src/assets/scss/components/alert.scss

@@ -66,6 +66,9 @@
     offset-block-start: 2px;
 }
 
+.alert__text > p {
+    margin: 0;
+}
 
 .alert__type {
     display: block;

docs/src/assets/scss/foundations.scss

@@ -159,6 +159,7 @@ hr {
 code,
 pre {
     font-family: var(--mono-font);
+    font-variant-ligatures: none;
 }
 
 code {