Move visualiser to explorer folder and start working on account

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

@@ -0,0 +1,86 @@
+<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 route = useRoute();
+const tag = computed(() => {
+    return Array.isArray(route.params.slug) ? route.params.slug.join('/') : route.params.slug;
+});
+const descriptions = inject('tags/descriptions') as ParsedContent;
+
+function sluggify(s: string): string {
+    return s
+        .split("/")
+        .map((segment) => segment.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/^\d\. */g, '').replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").toLowerCase()) // slugify all segments
+        .filter(e => !!e)
+        .join("/") // always use / as sep
+        .replace(/\/$/, "")
+}
+function flatten(val: TocLink[]): TocLink[] {
+    return val.flatMap ? val?.flatMap((e: TocLink) => e.children ? [e, ...flatten(e.children)] : e) : val;
+}
+function getContent(content: ParsedContent)
+{
+    const body = JSON.parse(JSON.stringify(content.body)) as MarkdownRoot;
+    const id = flatten(body?.toc?.links ?? []).find(e => sluggify(e.id) === tag.value.replaceAll('/', ''));
+    const htag = `h${id?.depth ?? 0}`;
+
+    const startIdx = body.children.findIndex(e => e.tag === htag && e?.props?.id === id?.id) ?? 0;
+    const nbr = body.children.findIndex((e, i) => i > startIdx && e.tag?.match(new RegExp(`h[1-${id?.depth ?? 1}]`)));
+
+    body.children = [...body.children].splice(startIdx + 1, (nbr === -1 ? body.children.length : nbr) - (startIdx + 1));
+
+    return { ... content, body };
+}
+
+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);
+})
+</script>
+
+<style>
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+</style>
+
+<template>
+    <ContentList :query="{ where: { frontmatter: { tags: { $contains: tag }}}}">
+        <template #default="{ list }">
+            <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>#{{ tag }}</h1>
+                            <ContentRenderer :value="getContent(descriptions)" />
+                            <h2>Pages contenant le tag</h2>
+                            <div class="card-container">
+                                <NuxtLink :key="item._id" :href="'/explorer' + item._path" v-for="item of list" class="tag"> {{ item.title }} </NuxtLink>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #not-found>
+            <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>
+        </template>
+    </ContentList>
+</template>