From 65500427517dfd1f3dd28025e483cf35ba284ee1 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 9 Sep 2024 16:32:11 +0200
Subject: [PATCH] Finally (???) fix the hydration issues with a markdown
 renderer in SSR

---
 components/explorer/PreviewContent.vue        |  4 +--
 components/prose/ProseA.vue                   | 36 ++++++-------------
 ...nderer.client.vue => MarkdownRenderer.vue} |  0
 .../api/project/[projectId]/tags/[tag].get.ts |  3 --
 4 files changed, 13 insertions(+), 30 deletions(-)
 rename components/standard/{MarkdownRenderer.client.vue => MarkdownRenderer.vue} (100%)

diff --git a/components/explorer/PreviewContent.vue b/components/explorer/PreviewContent.vue
index 4d782d8..74b9f1a 100644
--- a/components/explorer/PreviewContent.vue
+++ b/components/explorer/PreviewContent.vue
@@ -1,7 +1,7 @@
 <template>
     <HoverPopup @before-show="fetch" :class="[{'is-loaded': fetched}, file?.type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']">
         <template #content>
-            <Suspense>
+            <Suspense suspensible>
                 <div v-if="pending" class="loading w-[550px] h-[450px]"></div>
                 <template v-else-if="!!file">
                     <div v-if="file.type === 'Markdown'" class="p-6 ms-6">
@@ -22,7 +22,7 @@
                 </div>
             </Suspense>
         </template>
-        <slot></slot>
+        <template #default><slot name="default"></slot></template>
     </HoverPopup>
 </template>
 
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index 1d43ae5..cdf9c39 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -1,13 +1,13 @@
 <template>
-    <Suspense>
-        <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0] && status !== 'pending'"
+    <Suspense suspensible>
+        <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
         :to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
             <PreviewContent :project="project" :path="data[0].path" :anchor="hash">
-                <div class="inline-flex items-center">
+                <template #default>
                     <slot v-bind="$attrs"></slot>
                     <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
                         :icon="`icons/link-${data[0].type.toLowerCase()}`" />
-                </div>
+                </template>
             </PreviewContent>
         </NuxtLink>
         <NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
@@ -33,32 +33,18 @@ const props = defineProps({
     }
 });
 
-const nuxt = useNuxtApp();
 const route = useRoute();
 const { hash, pathname, protocol } = parseURL(props.href);
 const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const key = computed(() => `file:${project.value}:%${pathname}`);
-
-const { data, status, execute } = await useFetch(`/api/project/${project.value}/file`, {
-    method: 'GET',
-    query: {
-        search: `%${pathname}`
-    },
-    transform: (data) => data?.map(e => ({ path: e.path, type: e.type })),
-    key: key.value,
-    ignoreResponseError: true,
-    immediate: false,
-    server: false,
-    dedupe: 'defer'
-});
+const data = ref();
 
 if(!!pathname && !protocol)
 {
-    await execute();
-    if(data.value === null && status.value === 'idle')
-    {
-        data.value = nuxt.payload.data[key.value] ?? nuxt.static.data[key.value];
-        status.value = 'success';
-    }
+    data.value = await $fetch(`/api/project/${project.value}/file`, {
+        query: {
+            search: `%${pathname}`
+        },
+        ignoreResponseError: true,
+    });
 }
 </script>
\ No newline at end of file
diff --git a/components/standard/MarkdownRenderer.client.vue b/components/standard/MarkdownRenderer.vue
similarity index 100%
rename from components/standard/MarkdownRenderer.client.vue
rename to components/standard/MarkdownRenderer.vue
diff --git a/server/api/project/[projectId]/tags/[tag].get.ts b/server/api/project/[projectId]/tags/[tag].get.ts
index a8fe618..4b9f359 100644
--- a/server/api/project/[projectId]/tags/[tag].get.ts
+++ b/server/api/project/[projectId]/tags/[tag].get.ts
@@ -22,9 +22,6 @@ export default defineCachedEventHandler(async (e) => {
         const criteria: Record<string, any> = { $project: project, $tag: tag };
 
         const db = useDatabase();
-
-        console.log(`SELECT * FROM explorer_tags WHERE ${where.join(" and ")}`, criteria);
-
         const content = db.query(`SELECT * FROM explorer_tags WHERE ${where.join(" and ")}`).get(criteria) as Tag;
 
         if(content !== undefined)