From 2e9432181eeb3507b512742272d4d46447e4b418 Mon Sep 17 00:00:00 2001
From: Ole Eskild Steensen <ole.steensen@knowit.no>
Date: Thu, 10 Mar 2022 13:59:21 +0100
Subject: [PATCH] Added support for highlighted text and footnotes

---
 .eleventy.js                                 | 133 ++++++++++---------
 package-lock.json                            |  13 +-
 package.json                                 |   5 +-
 src/site/_includes/components/pageheader.njk |   7 +-
 4 files changed, 91 insertions(+), 67 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index eeab5d6cb..4dac6e9b8 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -5,76 +5,78 @@ const matter = require('gray-matter')
 module.exports = function(eleventyConfig) {
 
     let markdownLib = markdownIt({
-        breaks: true,
-        html: true
-    }).use(function(md) {
-        //https://github.com/DCsunset/markdown-it-mermaid-plugin
-        const origFenceRule = md.renderer.rules.fence || function(tokens, idx, options, env, self) {
-            return self.renderToken(tokens, idx, options, env, self);
-        };
-        md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
-            const token = tokens[idx];
-            if (token.info === 'mermaid') {
-                const code = token.content.trim();
-                return `<pre class="mermaid">${code}</pre>`;
-            }
-            if (token.info === 'transclusion') {
-                const code = token.content.trim();
-                return `<div class="transclusion">${md.render(code)}</div>`;
-            }
-            if (token.info.startsWith("ad-")) {
-                const code = token.content.trim();
-                return `<pre class="language-${token.info}">${md.render(code)}</pre>`;
-            }
-
-            // Other languages
-            return origFenceRule(tokens, idx, options, env, slf);
-        };
-
-
+            breaks: true,
+            html: true
+        })
+        .use(require("markdown-it-footnote"))
+        .use(function(md) {
+            //https://github.com/DCsunset/markdown-it-mermaid-plugin
+            const origFenceRule = md.renderer.rules.fence || function(tokens, idx, options, env, self) {
+                return self.renderToken(tokens, idx, options, env, self);
+            };
+            md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+                const token = tokens[idx];
+                if (token.info === 'mermaid') {
+                    const code = token.content.trim();
+                    return `<pre class="mermaid">${code}</pre>`;
+                }
+                if (token.info === 'transclusion') {
+                    const code = token.content.trim();
+                    return `<div class="transclusion">${md.render(code)}</div>`;
+                }
+                if (token.info.startsWith("ad-")) {
+                    const code = token.content.trim();
+                    return `<pre class="language-${token.info}">${md.render(code)}</pre>`;
+                }
 
-        const defaultImageRule = md.renderer.rules.image || function(tokens, idx, options, env, self) {
-            return self.renderToken(tokens, idx, options, env, self);
-        };
-        md.renderer.rules.image = (tokens, idx, options, env, self) => {
-            const imageName = tokens[idx].content;
-            const [fileName, width] = imageName.split("|");
-            if (width) {
-                const widthIndex = tokens[idx].attrIndex('width');
-                const widthAttr = `${width}px`;
-                if (widthIndex < 0) {
-                    tokens[idx].attrPush(['width', widthAttr]);
-                } else {
-                    tokens[idx].attrs[widthIndex][1] = widthAttr;
+                // Other languages
+                return origFenceRule(tokens, idx, options, env, slf);
+            };
+
+
+
+            const defaultImageRule = md.renderer.rules.image || function(tokens, idx, options, env, self) {
+                return self.renderToken(tokens, idx, options, env, self);
+            };
+            md.renderer.rules.image = (tokens, idx, options, env, self) => {
+                const imageName = tokens[idx].content;
+                const [fileName, width] = imageName.split("|");
+                if (width) {
+                    const widthIndex = tokens[idx].attrIndex('width');
+                    const widthAttr = `${width}px`;
+                    if (widthIndex < 0) {
+                        tokens[idx].attrPush(['width', widthAttr]);
+                    } else {
+                        tokens[idx].attrs[widthIndex][1] = widthAttr;
+                    }
                 }
-            }
 
-            return defaultImageRule(tokens, idx, options, env, self);
-        };
+                return defaultImageRule(tokens, idx, options, env, self);
+            };
 
 
-        const defaultLinkRule = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
-            return self.renderToken(tokens, idx, options, env, self);
-        };
-        md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
-            const aIndex = tokens[idx].attrIndex('target');
-            const classIndex = tokens[idx].attrIndex('class');
+            const defaultLinkRule = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+                return self.renderToken(tokens, idx, options, env, self);
+            };
+            md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
+                const aIndex = tokens[idx].attrIndex('target');
+                const classIndex = tokens[idx].attrIndex('class');
 
-            if (aIndex < 0) {
-                tokens[idx].attrPush(['target', '_blank']);
-            } else {
-                tokens[idx].attrs[aIndex][1] = '_blank';
-            }
+                if (aIndex < 0) {
+                    tokens[idx].attrPush(['target', '_blank']);
+                } else {
+                    tokens[idx].attrs[aIndex][1] = '_blank';
+                }
 
-            if (classIndex < 0) {
-                tokens[idx].attrPush(['class', 'external-link']);
-            } else {
-                tokens[idx].attrs[classIndex][1] = 'external-link';
-            }
+                if (classIndex < 0) {
+                    tokens[idx].attrPush(['class', 'external-link']);
+                } else {
+                    tokens[idx].attrs[classIndex][1] = 'external-link';
+                }
 
-            return defaultLinkRule(tokens, idx, options, env, self);
-        };
-    });
+                return defaultLinkRule(tokens, idx, options, env, self);
+            };
+        });
 
     eleventyConfig.setLibrary("md", markdownLib);
 
@@ -99,6 +101,13 @@ module.exports = function(eleventyConfig) {
         });
     })
 
+    eleventyConfig.addTransform('highlight', function(str) {
+        //replace ==random text== with <mark>random text</mark>
+        return str && str.replace(/\=\=(.*?)\=\=/g, function(match, p1) {
+            return `<mark>${p1}</mark>`;
+        });
+    });
+
     return {
         dir: {
             input: "src/site",
diff --git a/package-lock.json b/package-lock.json
index bf9a63a3b..dd4d9cec6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
                 "@sindresorhus/slugify": "^1.1.0",
                 "dotenv": "^10.0.0",
                 "gray-matter": "^4.0.3",
-                "markdown-it": "^12.3.2"
+                "markdown-it": "^12.3.2",
+                "markdown-it-footnote": "^3.0.3"
             },
             "devDependencies": {
                 "@11ty/eleventy": "^1.0.0",
@@ -2628,6 +2629,11 @@
                 "markdown-it": "bin/markdown-it.js"
             }
         },
+        "node_modules/markdown-it-footnote": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz",
+            "integrity": "sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w=="
+        },
         "node_modules/markdown-it/node_modules/argparse": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -6910,6 +6916,11 @@
                 }
             }
         },
+        "markdown-it-footnote": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz",
+            "integrity": "sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w=="
+        },
         "maximatch": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
diff --git a/package.json b/package.json
index 345d3ff3b..c7b8ca1eb 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "@sindresorhus/slugify": "^1.1.0",
         "dotenv": "^10.0.0",
         "gray-matter": "^4.0.3",
-        "markdown-it": "^12.3.2"
+        "markdown-it": "^12.3.2",
+        "markdown-it-footnote": "^3.0.3"
     }
-}
\ No newline at end of file
+}
diff --git a/src/site/_includes/components/pageheader.njk b/src/site/_includes/components/pageheader.njk
index e64911682..7680773a9 100644
--- a/src/site/_includes/components/pageheader.njk
+++ b/src/site/_includes/components/pageheader.njk
@@ -1,6 +1,9 @@
 <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
 <script>
-    mermaid.initialize({startOnLoad: true});
+    mermaid.initialize({
+        startOnLoad: true,
+        theme: "forest"
+    });
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -14,4 +17,4 @@
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
\ No newline at end of file
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">