Access direct access to FAQ/README/NEWS from the WebUI.

frontend/components/Markdown.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="content" v-html="content"></div>
+</template>
+
+<script setup>
+import {useStorage} from "@vueuse/core"
+import {marked} from 'marked'
+import {baseUrl} from 'marked-base-url'
+
+const props = defineProps({
+  file: {
+    type: String,
+    required: true,
+  },
+});
+
+const content = ref('')
+const api_url = useStorage('api_url', '')
+
+onMounted(() => fetch(`${api_url.value}${props.file}`).then(response => response.text()).then(text => {
+  marked.use(baseUrl(api_url.value))
+  marked.use({gfm: true})
+  content.value = marked.parse(text)
+}));
+
+</script>

frontend/components/Overlay.vue

@@ -1,17 +1,29 @@
 <template>
-  <div class="modal">
+  <div class="modal is-active">
     <div class="modal-background"></div>
     <div class="modal-card" style="min-width: calc(100% - 30%);">
       <header class="modal-card-head">
-        <p class="modal-card-title el" id="modal-head"></p>
+        <p class="modal-card-title" v-text="model_title"></p>
         <button class="delete" @click="closeOverLay"></button>
       </header>
-      <slot></slot>
+      <div class="modal-card-body">
+        <slot/>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 const emit = defineEmits(['closeOverlay']);
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const model_title = ref(props.title.replace(/^\//g, ''));
+
 const closeOverLay = () => emit('closeOverlay');
 </script>