Database and markdown refactoring

components/explorer/NavigationLink.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content';
+import type { Navigation } from '~/server/api/project/[projectId]/navigation.get';
 
 interface Props {
-    link: NavItem;
+    link: Navigation;
+    project?: number;
 }
 
 const props = defineProps<Props>();
@@ -13,15 +14,17 @@ const hasChildren = computed(() => {
 if(hasChildren.value)
 {
     props.link.children?.sort((a, b) => {
-        if(a._path === props.link._path)
+        if(a.order && b.order)
+            return a.order - b.order;
+        if(a.path === props.link.path)
             return -1;
-        if(b._path === props.link._path)
+        if(b.path === props.link.path)
             return 1;
         return 0;
     });
 }
 
-const collapsed = ref(!useRoute().path.startsWith('/explorer' + props.link._path));
+const collapsed = ref(!useRoute().path.startsWith('/explorer' + props.link.path));
 
 function hideLeftPanel(_: Event)
 {
@@ -30,7 +33,7 @@ function hideLeftPanel(_: Event)
 </script>
 
 <template>
-    <div class="tree-item">
+    <div class="tree-item" v-if="project && !isNaN(project)">
         <template v-if="hasChildren">
             <div class="tree-item-self" :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }" data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
                 <div v-if="hasChildren" class="tree-item-icon collapse-icon">
@@ -43,10 +46,10 @@ function hideLeftPanel(_: Event)
                 <div class="tree-item-inner">{{ link.title }}</div>
             </div>
             <div v-if="!collapsed" class="tree-item-children">
-                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l"/>
+                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project"/>
             </div>
         </template>
-        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="'/explorer' + link._path" :active-class="'mod-active'" >
+        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="`/explorer/${project}${link.path}`" :active-class="'mod-active'" >
             <div class="tree-item-inner">{{ link.title }}</div>
         </NuxtLink>
     </div>

components/explorer/RightComponent.vue

@@ -1,26 +1,19 @@
 <script setup lang="ts">
 interface Props
 {
-    toc: Toc;
-    comments?: Comment[];
+    id: number;
 }
 const props = defineProps<Props>();
+
+const { data: comments } = await useFetch(`/api/project/1/file/${props.id}/comment`);
 </script>
 
 <template>
-    <div class="site-body-right-column">
+    <div v-if="comments !== undefined && comments !== null" class="site-body-right-column">
         <div class="site-body-right-column-inner">
-            <div v-if="comments !== undefined">
+            <div>
                 {{ comments.length }} commentaire{{ comments.length === 1 ? '' : 's' }}
             </div>
-            <div v-if="!!toc" class="outline-view-outer node-insert-event">
-                <div class="list-item published-section-header">
-                    <span>Sur cette page</span>
-                </div>
-                <div class="outline-view">
-                    <TocLink v-for="link of toc.links" :link="link"/>
-                </div>
-            </div>
         </div>
     </div>
 </template>