feat: add md footnote support (#1617)

Author: silvester-pari

elements/storytelling/package.json

@@ -42,7 +42,8 @@
     "js-yaml": "^4.1.0",
     "lit": "^3.2.0",
     "lodash.debounce": "^4.0.8",
-    "markdown-it": "^14.0.0"
+    "markdown-it": "^14.0.0",
+    "markdown-it-footnote": "^4.0.0"
   },
   "peerDependencies": {
     "@eox/jsonform": "*"

elements/storytelling/src/helpers/render-html-string.js

@@ -1,4 +1,5 @@
 import { EVENT_REQ_MODES } from "../enums/index.js";
+import { scrollIntoView } from "./misc.js";
 import GLightbox from "glightbox";
 
 // Set up empty Lightbox
@@ -27,7 +28,17 @@ export function renderHtmlString(htmlString, sections, initDispatchFunc, that) {
 
   // Open all links inside story in a new tab
   const anchorTagsArr = doc.querySelectorAll("a");
-  anchorTagsArr.forEach((anchor) => (anchor.target = "_blank"));
+  anchorTagsArr.forEach((anchor) => {
+    if (!anchor.getAttribute("href")?.startsWith("#")) {
+      anchor.target = "_blank";
+    } else {
+      anchor.addEventListener("click", () => {
+        setTimeout(() => {
+          scrollIntoView(that);
+        });
+      });
+    }
+  });
 
   // Disconnecting old observers to create new empty Observers
   sectionObservers.forEach((observer) => observer?.disconnect());

elements/storytelling/src/main.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import { when } from "lit/directives/when.js";
 import markdownit from "markdown-it";
+import markdownitFootnote from "markdown-it-footnote";
 import {
   getCustomEleHandling,
   loadMarkdownURL,
@@ -32,6 +33,7 @@ const md = /** @type {import("./types").CustomMarkdownIt} */ (
 );
 
 md.use(markdownItDecorateImproved).use(markdownItConfig);
+md.use(markdownitFootnote);
 /**
  * Manage drawn features on a map
  *

elements/storytelling/src/style.eox.js

@@ -176,6 +176,13 @@ ${slider}
     text-underline-offset: 4px;
     font-size: var(--font-size)
   }
+  .story-telling sup a {
+    font-size: smaller;
+  }
+  .story-telling sup a,
+  .story-telling a.footnote-backref {
+    text-decoration: none;
+  }
   .story-telling a:hover {
     --bg-hover-transparency: 10%;
     background-color: color-mix(

elements/storytelling/stories/markdown-editor.js

@@ -14,6 +14,10 @@ export const MarkdownEditor = {
 
 Storytelling is crucial in the realm of science because scientific data, while rich in information, can often be complex and challenging to communicate. By framing data within narratives, storytelling makes scientific concepts accessible, engaging, and memorable to a wider audience. It bridges the gap between the technical details of research and the public's understanding, fostering appreciation, curiosity, and ultimately, a deeper connection to the wonders of science.
 
+Specifically, **scrolly**telling[^1] adds another layer of engagement, which allows the user to interact with the website by simply scrolling through it.
+
+[^1]: Blend of *scroll* + *storytelling*. [Storytelling enriched with multimedial elements triggered while scrolling down a webpage](https://en.wiktionary.org/wiki/scrollytelling).
+
 ## How do I get started?
 ### Story editor and live preview
 The main view of this page shows the live preview of the finished story. Floating above that you can see the story editor, which you can show and hide using the toggle: