Move visualiser to explorer folder and start working on account

components/LeftComponent.vue

@@ -1,15 +1,9 @@
 <template>
     <div class="site-body-left-column">
         <div class="site-body-left-column-inner">
-            <NuxtLink class="site-body-left-column-site-name" aria-label="Accueil" :href="'/'">Système Aspect</NuxtLink>
-            <ThemeSwitch />
-            <SearchView />
             <div class="nav-view-outer">
                 <div class="nav-view">
                     <div class="tree-item">
-                        <div class="tree-item-self mod-root is-clickable" data-path="">
-                            <div class="tree-item-inner"></div>
-                        </div>
                         <div class="tree-item-children">
                             <ContentNavigation v-slot="{ navigation }">
                                 <NavigationLink v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />

components/MainComponent.vue

@@ -1,16 +0,0 @@
-<template>
-    <div class="site-body-center-column">
-        <div class="site-header">
-            <div class="clickable-icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-menu">
-                    <line x1="4" y1="12" x2="20" y2="12"></line>
-                    <line x1="4" y1="6" x2="20" y2="6"></line>
-                    <line x1="4" y1="18" x2="20" y2="18"></line>
-                </svg>
-            </div>
-        </div>
-        <div class="render-container">
-            <NuxtPage />
-        </div>
-    </div>
-</template>

components/SearchView.client.vue

@@ -30,8 +30,8 @@ const results = computed(() => {
         </div>
     </div>
     <Teleport to="body" v-if="input !== ''">
-        <div class="search-results" :style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px'}">
-            <div class="suggestion-item" v-if="results.length > 0" v-for="result of results" :key="result._path" @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')" @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')" @mousedown="navigateTo(result._path); input = ''">
+        <div class="search-results" :style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
+            <div class="suggestion-item" v-if="results.length > 0" v-for="result of results" :key="result._path" @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')" @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')" @mousedown="navigateTo('/explorer' + result._path); input = ''">
                 <div class="suggestion-content">
                     <div class="suggestion-title">
                         {{ result.title.substring(0, clear(result.title).indexOf(clear(input))) }}<span class="suggestion-highlight">{{ result.title.substring(clear(result.title).indexOf(clear(input)), clear(result.title).indexOf(clear(input)) + clear(input).length + 1) }}</span>{{ result.title.substring(clear(result.title).indexOf(clear(input)) + clear(input).length + 1) }}

components/content/prose/ProseA.vue

@@ -2,6 +2,8 @@
 import type { MarkdownRoot, ParsedContent, TocLink } from '@nuxt/content/dist/runtime/types';
 import type { Canvas, CanvasContent } from '~/types/canvas';
 
+import { stringifyParsedURL, type ParsedURL } from 'ufo';
+
 interface ParsedContentExtended extends Omit<ParsedContent, 'body'> {
     body: MarkdownRoot | CanvasContent | null;
 }
@@ -31,6 +33,7 @@ function flatten(val: TocLink[]): TocLink[] {
     return val.flatMap ? val?.flatMap((e: TocLink) => e.children ? [e, ...flatten(e.children)] : e) : val;
 }
 function handleResult(result: ParsedContentExtended, tag: boolean = false) {
+    console.log();
     loading.value = false;
     let body: MarkdownRoot | CanvasContent | null = JSON.parse(JSON.stringify(result.body));
 
@@ -120,9 +123,9 @@ function hidePreview(e: Event) {
 
 <template >
     <template v-if="href !== ''">
-        <NuxtLink custom no-prefetch v-slot="{ href: hrefSlot, navigate }" :href="isTag ? { path: '/tags/' + anchor.substring(1) } : { path: content?._path ?? link, hash: anchor }" :target="target">
-            <a :href="hrefSlot" @click="navigate" @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview" v-bind="$attrs"><slot></slot></a>
-        </NuxtLink>
+        <a @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview" v-bind="$attrs" :href="stringifyParsedURL({ host: '/explorer', pathname: content?._path ?? href, hash: anchor, search: '' })" :target="target">
+            <slot></slot>
+        </a>
         <Teleport to="body" v-if="hovered && (loading || !!content)">
             <div class="popover hover-popover is-loaded" :style="pos" @mouseenter="(e) => showPreview(e, false)" @mouseleave="hidePreview">
                 <template v-if="!!content">

components/explorer/NavigationLink.vue

@@ -5,8 +5,6 @@ interface NavItem {
     _id?: string
     _draft?: boolean
     children?: NavItem[]
-
-    [key: string]: any
 }
 interface Props {
     link: NavItem;
@@ -29,6 +27,11 @@ if(hasChildren.value)
 }
 
 const collapsed = ref(!useRoute().path.startsWith(props.link._path));
+
+function hideLeftPanel(_: Event)
+{
+    document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
+}
 </script>
 
 <template>
@@ -48,8 +51,8 @@ const collapsed = ref(!useRoute().path.startsWith(props.link._path));
                 <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l"/>
             </div>
         </template>
-        <NuxtLink v-else class="tree-item-self" :to="link._path" :active-class="'mod-active'">
-            <div class="tree-item-inner">{{ link.title }}<span v-if="link"></span></div>
+        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="'/explorer' + link._path" :active-class="'mod-active'">
+            <div class="tree-item-inner">{{ link.title }}</div>
         </NuxtLink>
     </div>
 </template>

components/explorer/RightComponent.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { toc } = useContent()
+interface Props
+{
+    toc: Toc;
+}
+const props = defineProps<Props>();
 </script>
 
 <template>