Add tag page and fix mobile header

pages/[...slug].vue

@@ -1,3 +1,10 @@
+<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);
@@ -8,6 +15,10 @@ onMounted(() => {
             e.parentElement!.classList.toggle('is-collapsed');
         })
     })
+
+    icon = document.querySelector('.site-header .clickable-icon');
+    icon?.removeEventListener('click', toggleLeftPanel);
+    icon?.addEventListener('click', toggleLeftPanel);
 })
 </script>
 

pages/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="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>