fix: improve rendering of narratives

.vitepress/components/NarrativeGallery.vue

@@ -1,18 +1,24 @@
 <script setup>
 import { data as narratives } from "../narratives.data.js";
+
+const narrativesExcerpts = narratives.map((n) => {
+  const el = document.createElement("html");
+  el.innerHTML = n.html;
+  return (
+    el.querySelector("h1")?.textContent ||
+    n.url.replace("/narratives/", "").replace(".html", "")
+  );
+});
 </script>
 
 <template>
   <div class="gallery">
-    <a v-for="narrative in narratives" class="narrative" :href="narrative.url">
-      <p
-        v-html="
-          narrative.src.substring(
-            narrative.src.indexOf('#') + 2,
-            Math.max(narrative.src.indexOf('\n'), 150),
-          )
-        "
-      ></p>
+    <a
+      v-for="(narrative, index) in narratives"
+      class="narrative"
+      :href="narrative.url"
+    >
+      <p>{{ narrativesExcerpts[index] }}</p>
     </a>
   </div>
 </template>

.vitepress/narratives.data.js

@@ -2,6 +2,7 @@ import { createContentLoader } from "vitepress";
 
 export default createContentLoader("narratives/*.md", {
   includeSrc: true,
+  render: true,
   transform(rawData) {
     return rawData.filter(
       (d) => d.url !== "/narratives/" && d.url !== "/narratives/README.html",

.vitepress/theme/Narrative.vue

@@ -8,3 +8,10 @@ const { page } = useData();
     <eox-storytelling .markdown="page.content"></eox-storytelling>
   </ClientOnly>
 </template>
+
+<style>
+eox-storytelling {
+  --header-font-family: Poppins, sans-serif;
+  --body-font-family: Poppins, sans-serif;
+}
+</style>

package.json

@@ -19,6 +19,6 @@
   },
   "dependencies": {
     "@eox/map": "^1.17.0",
-    "@eox/storytelling": "^1.3.0"
+    "@eox/storytelling": "^1.4.1"
   }
 }