Move visualiser to explorer folder and start working on account

pages/[...slug].vue

@@ -1,63 +1,11 @@
-<script lang="ts">
-let icon: HTMLDivElement | null;
-function toggleLeftPanel(_: Event) {
-    icon!.parentElement!.parentElement!.parentElement!.parentElement!.classList.toggle('is-left-column-open');
-}
-</script>
-
-<script setup lang="ts">
-const { page } = useContent()
-useContentHead(page);
-
-onMounted(() => {
-    document.querySelectorAll('.callout.is-collapsible .callout-title').forEach(e => {
-        e.addEventListener('click', (_) => {
-            e.parentElement!.classList.toggle('is-collapsed');
-        })
-    })
-
-    icon = document.querySelector('.site-header .clickable-icon');
-    icon?.removeEventListener('click', toggleLeftPanel);
-    icon?.addEventListener('click', toggleLeftPanel);
-
-    document.querySelector(".published-container")?.classList.toggle('is-readable-line-width', !page.value || page.value._type !== 'canvas');
-})
-</script>
-
 <template>
-    <template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">
-        <div class="render-container-inner">
-            <div class="publish-renderer">
-                <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
-                    <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
-                        <h1 v-if="!(page as MarkdownParsedContent).body.children.find((e: MarkdownNode) => e.tag === 'h1')">{{(page as MarkdownParsedContent).title}}</h1>
-                        <ContentRenderer :key="page._id" :value="page" />
-                    </div>
-                </div>
-                <div class="extra-title">
-                    <span class="extra-title-text">Home</span>
-                    <span aria-label="Close page" role="button">
-                        <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-x">
-                            <line x1="18" y1="6" x2="6" y2="18"></line>
-                            <line x1="6" y1="6" x2="18" y2="18"></line>
-                        </svg>
-                    </span>
-                </div>
+    <div class="site-body-center-column">
+        <div class="render-container">
+            <div class="not-found-container">
+                <div class="not-found-image"></div>
+                <div class="not-found-title">Introuvable</div>
+                <div class="not-found-description">Cette page n'existe pas</div>
             </div>
         </div>
-        <RightComponent />
-    </template>
-    <CanvasRenderer v-else-if="!!page && page._type == 'canvas'" :key="page._id" :canvas="page" />
-    <div v-else-if="!!page">
-        <div class="not-found-container">
-            <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>
-    </div>
-    <div v-else class="not-found-container">
-        <div class="not-found-image"></div>
-        <div class="not-found-title">Introuvable</div>
-        <div class="not-found-description">Cette page n'existe pas</div>
     </div>
 </template>

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+let icon: HTMLDivElement | null;
+function toggleLeftPanel(_: Event) {
+    icon!.parentElement!.parentElement!.parentElement!.parentElement!.classList.toggle('is-left-column-open');
+}
+</script>
+
+<script setup lang="ts">
+const { hash, path } = useRoute();
+
+const { data: page } = await useAsyncData('home', queryContent(path.substring(path.indexOf('/explorer') + '/explorer'.length)).findOne);
+
+if(page.value)
+    useContentHead(page.value!);
+
+if(hash)
+{
+    console.log(document.getElementById(hash.substring(1)));
+    document.getElementById(hash.substring(1))?.scrollTo({ behavior: 'smooth', top: 100 });
+}
+
+onMounted(() => {
+    document.querySelectorAll('.callout.is-collapsible .callout-title').forEach(e => {
+        e.addEventListener('click', (_) => {
+            e.parentElement!.classList.toggle('is-collapsed');
+        })
+    })
+
+    document.querySelector(".published-container")?.classList.toggle('is-readable-line-width', !page.value || page.value._type !== 'canvas');
+})
+</script>
+
+<template>
+    <LeftComponent />
+    <div class="site-body-center-column">
+        <div class="render-container">
+            <template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">
+                <div class="render-container-inner">
+                    <div class="publish-renderer">
+                        <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
+                            <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
+                                <h1 v-if="!(page as MarkdownParsedContent).body.children.find((e: MarkdownNode) => e.tag === 'h1')">{{(page as MarkdownParsedContent).title}}</h1>
+                                <ContentRenderer :key="page._id" :value="page" />
+                            </div>
+                        </div>
+                        <div class="extra-title">
+                            <span class="extra-title-text">Home</span>
+                            <span aria-label="Close page" role="button">
+                                <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-x">
+                                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                                </svg>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <RightComponent v-if="page.body?.toc" :toc="page?.body?.toc" />
+            </template>
+            <CanvasRenderer v-else-if="!!page && page._type == 'canvas'" :key="page._id" :canvas="page" />
+            <div v-else-if="!!page">
+                <div class="not-found-container">
+                    <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>
+            </div>
+            <div v-else class="not-found-container">
+                <div class="not-found-image"></div>
+                <div class="not-found-title">Introuvable</div>
+                <div class="not-found-description">Cette page n'existe pas</div>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -68,7 +68,7 @@ onMounted(() => {
                             <ContentRenderer :value="getContent(descriptions)" />
                             <h2>Pages contenant le tag</h2>
                             <div class="card-container">
-                                <NuxtLink :key="item._id" :href="item._path" v-for="item of list" class="tag"> {{ item.title }} </NuxtLink>
+                                <NuxtLink :key="item._id" :href="'/explorer' + item._path" v-for="item of list" class="tag"> {{ item.title }} </NuxtLink>
                             </div>
                         </div>
                     </div>

pages/user/login.vue

@@ -0,0 +1 @@
+<template></template>

pages/user/logout.vue

@@ -0,0 +1 @@
+<template></template>

pages/user/profile.vue

@@ -0,0 +1 @@
+<template></template>

pages/user/signin.vue

@@ -0,0 +1 @@
+<template></template>