From d624a0111e1802e6f6e09cfe97544c29da4b4d82 Mon Sep 17 00:00:00 2001
From: silvester-pari <silvester.pari@eox.at>
Date: Thu, 14 Nov 2024 18:41:51 +0100
Subject: [PATCH] fix: improve rendering of narratives

---
 .vitepress/components/NarrativeGallery.vue | 24 ++++++++++++++--------
 .vitepress/narratives.data.js              |  1 +
 .vitepress/theme/Narrative.vue             |  7 +++++++
 package-lock.json                          | 15 +++++++++-----
 package.json                               |  2 +-
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/.vitepress/components/NarrativeGallery.vue b/.vitepress/components/NarrativeGallery.vue
index ded4982..558860f 100644
--- a/.vitepress/components/NarrativeGallery.vue
+++ b/.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>
diff --git a/.vitepress/narratives.data.js b/.vitepress/narratives.data.js
index 3b60789..4454061 100644
--- a/.vitepress/narratives.data.js
+++ b/.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",
diff --git a/.vitepress/theme/Narrative.vue b/.vitepress/theme/Narrative.vue
index 6080253..627dc7e 100644
--- a/.vitepress/theme/Narrative.vue
+++ b/.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>
diff --git a/package-lock.json b/package-lock.json
index c0b910a..f563926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@eox/map": "^1.17.0",
-        "@eox/storytelling": "^1.3.0"
+        "@eox/storytelling": "^1.4.1"
       },
       "devDependencies": {
         "@eox/eslint-config": "^2.0.0",
@@ -401,11 +401,11 @@
       "dev": true
     },
     "node_modules/@eox/storytelling": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@eox/storytelling/-/storytelling-1.3.0.tgz",
-      "integrity": "sha512-uX85+BuOuhQ+qPtvkuimLzxa7idb9r0AtntlcfYDO6nH5oFcd2AC5B21Dcyqb52L6D9452HB18rm1QMaU5N8tg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eox/storytelling/-/storytelling-1.4.1.tgz",
+      "integrity": "sha512-RN7kIdTJYpO97I0tLQs8XpLvHvgo7pGfoQJ6p+7C5j9XVjWPsKIXYoHMsaacaHJb3YowSwiVkS9IhvEYb9YFUg==",
       "dependencies": {
-        "@eox/elements-utils": "^0.0.1",
+        "@eox/elements-utils": "^0.1.1",
         "@sindresorhus/slugify": "^2.2.1",
         "glightbox": "^3.3.0",
         "isomorphic-dompurify": "^2.4.0",
@@ -423,6 +423,11 @@
         "@eox/jsonform": "*"
       }
     },
+    "node_modules/@eox/storytelling/node_modules/@eox/elements-utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@eox/elements-utils/-/elements-utils-0.1.1.tgz",
+      "integrity": "sha512-D2Mxr0OEeQGnXUnZ4VdHExHzhNI0WcyaO0RmALYCrJstbVxk58Q65RfuH7MwW94XXUS24TgyXWT3jKU1GlUWPg=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
diff --git a/package.json b/package.json
index 103f7e8..f69c2fe 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,6 @@
   },
   "dependencies": {
     "@eox/map": "^1.17.0",
-    "@eox/storytelling": "^1.3.0"
+    "@eox/storytelling": "^1.4.1"
   }
 }