Database and markdown refactoring

components/LeftComponent.vue

@@ -3,22 +3,22 @@ function hideLeftPanel(_: Event)
 {
     document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
 }
+
+const route = useRoute();
+
+const project = parseInt(Array.isArray(route.params.projectId) ? '' : route.params.projectId);
+
+const { data: navigation } = await useFetch(() => isNaN(project) ? '' : `/api/project/${project}/navigation`);
 </script>
 
 <template>
-    <div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column">
+    <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">
-                            <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'"
-                                :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
-                            <ContentNavigation v-slot="{ navigation }" queryContent="/">
-                                <NavigationLink :class="{'hidden': !$route.path.startsWith('/explorer')}" v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
-                            </ContentNavigation>
-                            <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'"
-                                :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
+                            <NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
                         </div>
                     </div>
                 </div>

components/Markdown.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  content: string
+}>();
+const { data: ast, status } = await useAsyncData(`markdown`, () => parseMarkdown(props.content, {}));
+</script>
+
+<template>
+    <div v-if="status === 'pending'" class="loading-circle"></div>
+    <MDCRenderer v-else-if="status === 'success'" :body="ast?.body" :data="ast?.data" />
+    <div v-else>Impossible de traiter le contenu.</div>
+</template>

components/SearchView.client.vue

@@ -3,8 +3,7 @@ const { data: nav } = await useAsyncData('search', () => fetchContentNavigation(
 const input = ref('');
 const pos = ref<DOMRect>();
 
-function getPos(e: Event)
-{
+function getPos(e: Event) {
     pos.value = (e.currentTarget as HTMLElement)?.getBoundingClientRect();
 }
 function flatten(val: NavItem[]): NavItem[] {

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>