Set markdown renderer as client only to fix hydration issues. Will later try to improve it and set it back as normal

components/explorer/PreviewContent.vue

@@ -54,9 +54,9 @@ async function fetch()
     fetched.value = true;
     pending.value = true;
 
-    const { data } = await useFetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
+    const data = await $fetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
 
     pending.value = false;
-    file.value = data.value;
+    file.value = data;
 }
 </script>

components/prose/ProseA.vue

@@ -48,6 +48,7 @@ const { data, status, execute } = await useFetch(`/api/project/${project.value}/
     key: key.value,
     ignoreResponseError: true,
     immediate: false,
+    server: false,
     dedupe: 'defer'
 });
 

components/prose/ProseTag.vue

@@ -1,8 +1,8 @@
 <template>
-    <HoverPopup class="mw-[400px]">
+    <HoverPopup class="mw-[400px]" @before-show="fetch">
         <template #content>
             <Suspense>
-                <div v-if="status === 'pending'" class="loading w-[400px] h-[150px]"></div>
+                <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
                 <template v-else-if="!!data">
                     <div v-if="data.description" class="pb-4 pt-3 px-8">
                         <span class="text-2xl font-semibold">#{{ data.tag }}</span>
@@ -28,6 +28,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Tag } from '~/types/api';
+
 const { tag } = defineProps({
     tag: {
         type: String,
@@ -35,7 +37,15 @@ const { tag } = defineProps({
     }
 });
 
+const data = ref<Tag>(), fetched = ref(false);
 const route = useRoute();
 const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const { data, status } = useLazyFetch(`/api/project/${project.value}/tags/${tag}`);
+async function fetch()
+{
+    if(fetched.value)
+        return;
+
+    data.value = await $fetch(`/api/project/${project.value}/tags/${encodeURIComponent(tag)}`);
+    fetched.value = true;
+}
 </script>

components/standard/HoverPopup.vue

@@ -1,6 +1,6 @@
 <template>
-    <Teleport to="#teleports" v-if="display">
+    <Teleport to="#teleports">
-        <div :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
+        <div v-show="display" :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
             @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
             <slot name="content"></slot>
         </div>

components/standard/Markdown.vue

@@ -1,7 +1,7 @@
 <template>
   <template
     v-if="content && content.length > 0">
-    <Suspense>
+    <Suspense :timeout="0">
       <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
       <template #fallback><div class="loading"></div></template>
     </Suspense>

pages/explorer/[projectId]/[...slug].vue

@@ -4,7 +4,7 @@ definePageMeta({
 })
 
 const route = useRoute();
-const { data, status } = await useFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
+const { data, status } = await useLazyFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
 </script>
 
 <template>
@@ -12,7 +12,8 @@ const { data, status } = await useFetch(`/api/project/${route.params.projectId}/
         <Title v-if="data">{{ data.title }}</Title>
     </Head>
     <div class="flex-1 flex overflow-hidden">
-        <template v-if="!!data && data.type == 'Markdown' && !!data.content">
+        <template v-if="status === 'pending'"><div class="loading"></div></template>
+        <template v-else-if="!!data && data.type == 'Markdown' && !!data.content">
             <div class="md:px-24 ps-8 my-1 whitespace-break-spaces">
                 <ProseH1>{{ data.title }}</ProseH1>
                 <Markdown :content="data.content"></Markdown>

server/api/project/[projectId]/tags/[tag].get.ts

@@ -5,8 +5,7 @@ export default defineCachedEventHandler(async (e) => {
     try
     {
         const project = getRouterParam(e, "projectId");
-        const tag = getRouterParam(e, "tag");
+        const tag = decodeURIComponent(getRouterParam(e, "tag") ?? '');
-        const query = getQuery(e);
 
         if(!project)
         {
@@ -24,6 +23,8 @@ export default defineCachedEventHandler(async (e) => {
 
         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)

server/api/users/[id].get.ts

@@ -0,0 +1,16 @@
+import useDatabase from "~/composables/useDatabase";
+import type { User } from "~/types/auth";
+
+export default defineEventHandler((e) => {
+    const id = getRouterParam(e, 'id');
+
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const db = useDatabase();
+    
+    return db.query(`SELECT id, usernamme, email, state FROM users WHERE id = ?1`).get(id) as User;
+});