Layouts, ProseA rework and PreviewContent creation. Trying to fix hydration by making better SSR.

components/explorer/ExplorerNavigation.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
+
+const { data: navigation, execute, status, error } = await useFetch(() => `/api/project/${project.value}/navigation`, {
+    immediate: false,
+});
+</script>
+
+<template>
+    <div class="site-body-left-column">
+        <div class="site-body-left-column-inner">
+            <div class="nav-view-outer">
+                <div class="nav-view">
+                    <div class="tree-item">
+                        <div class="tree-item-children">
+                            <NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

components/explorer/PreviewContent.client.vue

@@ -0,0 +1,76 @@
+<template>
+    <Teleport to="#teleports">
+        <div class="popover hover-popover" :class="{'is-loaded': pending === false && content !== ''}" :style="{'top': (pos?.y ?? 0) - 4, 'left': (pos?.y ?? 0) + 4}">
+            <template v-if="display">
+                <div v-if="pending" class="loading"></div>
+                <div class="markdown-embed" v-else-if="content !== ''">
+                    <div class="markdown-preview-view markdown-rendered">
+                        <div class="markdown-embed-content">
+                            <h1>{{ title }}</h1>
+                            <Markdown v-model="content"></Markdown>
+                        </div>
+                    </div>
+                </div>
+                <div class="not-found-container" v-else>
+                    <div class="not-found-image"></div>
+                    <div class="not-found-title">Impossible d'afficher (ou vide)</div>
+                    <div class="not-found-description">Cette page est actuellement vide ou impossible à traiter</div>
+                </div>
+            </template>
+        </div>
+    </Teleport>
+    <span ref="el" @mouseenter="show" @mouseleave="hide">
+        <slot></slot>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn as debounce } from '@vueuse/core';
+
+const props = defineProps({
+    project: {
+        type: Number,
+        required: true,
+    },
+    path: {
+        type: String,
+        required: true,
+    },
+    anchor: {
+        type: String,
+        required: false,
+    }
+})
+const content = ref(''), title = ref(''), display = ref(false), pending = ref(false);
+const el = ref(), pos = ref<DOMRect>();
+watch(display, () => display.value && !pending.value && content.value === '' && fetch());
+
+onMounted(() => {
+    if(el && el.value)
+    {
+        pos.value = (el.value as HTMLDivElement).getBoundingClientRect();
+        debugger;
+    }
+})
+
+async function fetch()
+{
+    pending.value = true;
+
+    const data = await $fetch(`/api/project/${props.project}/file`, {
+        method: 'get',
+        query: {
+            path: props.path,
+        },
+    });
+
+    pending.value = false;
+
+    if(data && data[0])
+    {
+        content.value = data[0].content;
+        title.value = data[0].title;
+    }
+}
+const show = debounce(() => display.value = true, 250), hide = debounce(() => display.value = false, 250);
+</script>

components/explorer/TocLink.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-interface TocItem {
-    text: string
-    id: string
-    children?: TocItem[]
-
-    [key: string]: any
-}
-interface Props {
-    link: TocItem;
-}
-
-const props = defineProps<Props>();
-const hasChildren = computed(() => {
-    return props.link && props.link.children && props.link.children.length > 0 || false;
-});
-</script>
-
-<template>
-    <div class="tree-item">
-        <div class="tree-item-self" :class="{'is-clickable': hasChildren}" data-path="{{ props.link.title }}">
-            <NuxtLink no-prefetch class="tree-item-inner" :to="{ hash: '#' + props.link.id, force: true }">{{ props.link.text }}</NuxtLink>
-        </div>
-        <div class="tree-item-children">
-            <TocLink v-if="hasChildren" v-for="link of props.link.children" :link="link" />
-        </div>
-    </div>
-</template>