feat: adding dedicated story viewer page; updated packages

.vitepress/theme/index.js

@@ -18,6 +18,8 @@ export default {
       app.use(eodash);
       const jsonform = await import('@eox/jsonform');
       app.use(jsonform);
+      const eoxmap = await import('@eox/map');
+      app.use(eoxmap);
       const storytelling = await import('@eox/storytelling');
       app.use(storytelling);
     }

editor/index.md

@@ -6,5 +6,6 @@ layout: page
         top: 50px!important;
     }
 </style>
-<eox-storytelling style="margin-top: 50px;" markdown="## Start your journey here!" show-editor></eox-storytelling>
-
+<ClientOnly>
+    <eox-storytelling show-editor="open" style="margin-top: 50px;" markdown="## Start your journey here!"></eox-storytelling>
+</ClientOnly>

package.json

@@ -6,8 +6,9 @@
   },
   "devDependencies": {
     "@eodash/eodash": "^5.0.0-alpha.2.1",
-    "@eox/jsonform": "^0.6.2",
-    "@eox/storytelling": "^0.6.0",
+    "@eox/jsonform": "^0.7.0",
+    "@eox/storytelling": "^1.0.2",
+    "@eox/map": "^1.8.2",
     "vitepress": "^1.1.3",
     "vue": "^3.4.21"
   }

stories/index.md

@@ -2,23 +2,13 @@
 layout: page
 ---
 <script setup>
+    import { onMounted } from 'vue';
     import { data } from './config.data.js';
     import { withBase } from 'vitepress'
-    let storyid, storyurl;
-    if ('URLSearchParams' in window) {
-        const searchParams = new URLSearchParams(window.location.search);
-        storyid = searchParams.get('storyid');
-        if (storyid && storyid in data) {
-            storyurl = data[storyid].file;
-        }
-    }
 </script>
 
-<eox-storytelling v-if="storyurl" :markdown-url=withBase(storyurl)></eox-storytelling>
-<div v-else>
-    <h2 style="font-size: 40px; height: 50px; margin: 20px;"> Story gallery </h2>
-    <div v-for="key in Object.keys(data)">
-        <a style="color: blue; margin: 20px;" :href="'./?storyid='+key">{{data[key].title}}</a>
-    </div>
+<h2 style="font-size: 40px; height: 50px; margin: 20px;"> Story gallery </h2>
+<div v-for="key in Object.keys(data)">
+    <a style="color: blue; margin: 20px;" :href="'../storyviewer/?storyid='+key">{{data[key].title}}</a>
 </div>
 

storyviewer/index.md

@@ -0,0 +1,21 @@
+---
+layout: page
+---
+<script setup>
+    import { onMounted } from 'vue';
+    import { data } from '../stories/config.data.js';
+    import { withBase } from 'vitepress'
+
+    let storyid, storyurl;
+    if (typeof window !== 'undefined' && 'URLSearchParams' in window) {
+        const searchParams = new URLSearchParams(window.location.search);
+        storyid = searchParams.get('storyid');
+        if (storyid && storyid in data) {
+            storyurl = data[storyid].file;
+            console.log(storyurl);
+        }
+    }
+
+</script>
+
+<eox-storytelling v-if="storyurl" :markdown-url="storyurl"></eox-storytelling>