improve loading of tags + metadata

ServiceStack · Mar 28, 2024 · 6414048 · 6414048
1 parent 6606b10
commit 6414048
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/MyApp/wwwroot/lib/js/default.js b/MyApp/wwwroot/lib/js/default.js
@@ -0,0 +1,32 @@
+window.hljs?.highlightAll()
+
+if (!localStorage.getItem('data:tags.txt'))
+{
+    fetch('/data/tags.txt')
+        .then(r => r.text())
+        .then(txt => localStorage.setItem('data:tags.txt', txt));
+}
+
+function metadataDate(metadataJson) {
+    try {
+        if (metadataJson) {
+            return new Date(parseInt(metadataJson.match(/Date\((\d+)\)/)[1]))
+        }
+    } catch{}
+    return new Date() - (24 * 60 * 60 * 1000) 
+}
+
+const metadataJson = localStorage.getItem('/metadata/app.json')
+const oneHourAgo = new Date() - 60 * 60 * 1000
+const clearMetadata = !metadataJson
+    || location.search.includes('clear=metadata')
+    || metadataDate(metadataJson) < oneHourAgo 
+
+if (clearMetadata) {
+    fetch('/metadata/app.json')
+        .then(r => r.text())
+        .then(json => {
+            console.log('updating /metadata/app.json...')
+            localStorage.setItem('/metadata/app.json', json)
+        })
+}
diff --git a/MyApp/wwwroot/mjs/app.mjs b/MyApp/wwwroot/mjs/app.mjs
@@ -15,7 +15,7 @@ const CustomElements = [
     'lite-youtube'
 ]
 
-const alreadyMounted = el => el.__vue_app__ 
+export const alreadyMounted = el => el.__vue_app__ 
 
 const mockArgs = { attrs:{}, slots:{}, emit:() => {}, expose: () => {} }
 function hasTemplate(el,component) {

diff --git a/MyApp/wwwroot/pages/Questions/Answer.mjs b/MyApp/wwwroot/pages/Questions/Answer.mjs
@@ -6,8 +6,7 @@ import { AnswerQuestion, PreviewMarkdown } from "dtos.mjs"
 export default {
     template:`
         <div v-if="user?.userName">
-            <AutoForm ref="autoform" type="AnswerQuestion" v-model="request" header-class="" submit-label="Submit Answer" 
-                :configureField="configureField" @success="onSuccess">
+            <AutoForm ref="autoform" type="AnswerQuestion" v-model="request" header-class="" submit-label="Submit Answer" @success="onSuccess">
                 <template #heading>
                     <div class="pt-4 px-6 flex justify-between">
                         <h3 class="text-2xl font-semibold">Your Answer</h3>
@@ -17,9 +16,12 @@ export default {
                     </div>
                 </template>
             </AutoForm>
-            <div v-if="request.body" class="pb-40">
-                <h3 class="my-4 text-xl font-semibold">Preview</h3>
-                <div class="border-t border-gray-200 pt-4">
+            <div v-if="previewHtml">
+                <h3 class="my-4 select-none text-xl font-semibold flex items-center cursor-pointer" @click="expandPreview=!expandPreview">
+                    <svg :class="['w-4 h-4 inline-block mr-1 transition-all',!expandPreview ? '-rotate-90' : '']" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569z"/></svg>
+                    Preview
+                </h3>
+                <div v-if="expandPreview" class="border-t border-gray-200 pt-4">
                     <div id="question" class="flex-grow prose" v-html="previewHtml"></div>
                 </div>
             </div>
@@ -36,26 +38,23 @@ export default {
             </div>
         </div>
     `,
-    props:['id'],
+    props:['id','title','body','refId'],
     setup(props) {
 
         const { user } = useAuth()
         const client = useClient()
         const autoform = ref()
-        const request = ref(new AnswerQuestion())
+        const request = ref(new AnswerQuestion(props))
         const qs = queryString(location.search)
         request.value.postId = props.id
         if (qs.title) request.value.title = qs.title
         if (qs.body) request.value.body = qs.body
-        if (qs.tags) request.value.tags = qs.tags.split(',')
         if (qs.refId || qs.refid) request.value.refId = qs.refId || qs.refid
         const previewHtml = ref('')
-        let allTags = localStorage.getItem('data:tags.txt')?.split('\n') || []
+        const expandPreview = ref(true)
 
         const { createDebounce } = useUtils()
         let lastBody = ''
-        let i = 0
-        let tagsInput = null
 
         const debounceApi = createDebounce(async markdown => {
             if (lastBody === request.value.body) return
@@ -75,27 +74,8 @@ export default {
             location.reload()
         }
 
-        onMounted(async () => {
-            if (allTags.length === 0) {
-                const txt = await (await fetch('/data/tags.txt')).text()
-                localStorage.setItem('data:tags.txt', txt)
-                allTags = txt.split('\n')
-                // TODO doesn't work
-                if (tagsInput != null) {
-                    tagsInput.allowableValues = allTags
-                }
-            }
-        })
-
-        function configureField(inputProp) {
-            if (inputProp.type === 'tag') {
-                tagsInput = inputProp
-                inputProp.allowableValues = allTags
-            }
-        }
-
         const signInUrl = () => `/Account/Login?ReturnUrl=${location.pathname}`
 
-        return { user, request, previewHtml, autoform, signInUrl, configureField, onSuccess }
+        return { user, request, previewHtml, expandPreview, autoform, signInUrl, onSuccess }
     }
 }