Merge pull request #399 from RyanCoulsonCA/fix-245

fix logo not displaying when configFileStructure is provided

src/components/story/introduction.vue

@@ -1,11 +1,6 @@
 <template>
     <div class="py-24 mx-auto text-center max-w-9xl" id="intro">
-        <img
-            v-if="config.logo && config.logo.src"
-            class="inline-block"
-            :src="config.logo.src"
-            :alt="config.logo.altText"
-        />
+        <img v-if="!!state.logo" class="inline-block" :src="state.logo" :alt="config.logo.altText" />
 
         <h1 class="m-10 text-5xl font-bold text-gray-800">
             {{ config.title }}
@@ -75,7 +70,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { getCurrentInstance, onMounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 import { ConfigFileStructure, Intro } from '@storylines/definitions';
 
 const props = defineProps({
@@ -91,7 +86,13 @@ const props = defineProps({
     }
 });
 
+const state = reactive({
+    logo: ''
+});
+
 onMounted(() => {
+    state.logo = props.config.logo ? props.config.logo.src : '';
+
     // obtain logo from ZIP file if it exists
     if (props.configFileStructure) {
         const logo = props.config.logo?.src;
@@ -101,8 +102,7 @@ onMounted(() => {
             const logoFile = props.configFileStructure.zip.file(logoSrc);
             if (logoFile) {
                 logoFile.async('blob').then((res: Blob) => {
-                    props.config.logo.src = URL.createObjectURL(res);
-                    getCurrentInstance()?.proxy?.$forceUpdate();
+                    state.logo = props.config.logo.src = URL.createObjectURL(res);
                 });
             }
         }

vue.config.js

@@ -1,4 +1,19 @@
 const path = require('path');
+const crypto = require('crypto');
+
+/**
+ * The MD4 algorithm is not available anymore in Node.js 17+ (because of library SSL 3).
+ * In that case, silently replace MD4 by the MD5 algorithm.
+ */
+try {
+    crypto.createHash('md4');
+} catch (e) {
+    console.warn('Crypto "MD4" is not supported anymore by this Node.js version');
+    const origCreateHash = crypto.createHash;
+    crypto.createHash = (alg, opts) => {
+        return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
+    };
+}
 
 module.exports = {
     pages: {