Database and markdown refactoring

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const route = useRoute();
+const path = unifySlug(route.params.slug);
+
+//const dummy = await useFetch(`/api/project`);
+const { data: content } = await useFetch(`/api/project/${route.params.projectId}/file`, {
+    query: {
+        path: path
+    }
+});
+</script>
+
+<template>
+    <div class="site-body-center-column">
+        <div class="render-container">
+            <template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
+                <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>{{ content[0].title }}</h1>
+                                <Markdown :content="content[0].content" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <RightComponent :id="content[0].id" />
+            </template>
+            <CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)" />
+            <div v-else-if="!!content && content[0]">
+                <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/[projectId]/tags/[...slug].vue

@@ -0,0 +1,87 @@
+<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>
+    <LeftComponent />
+    <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>