Add tag page and fix mobile header

app.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const { data: tags } = await useAsyncData('tags', queryContent('/tags').findOne);
+const { data: tags } = await useAsyncData('descriptions', queryContent('/tags').findOne);
 
-provide('tags', tags);
+provide('tags/descriptions', tags);
 </script>
 
 <template>

components/CanvasRenderer.client.vue

@@ -68,6 +68,7 @@ const onPointerUp = (event: PointerEvent) => {
     dragging = false;
     document.removeEventListener('pointermove', onPointerMove);
     document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerUp);
 }
 
 const onWheel = (event: WheelEvent) => {
@@ -79,7 +80,7 @@ const onWheel = (event: WheelEvent) => {
         zoom.value = minZoom.value;
 }
 
-const reset = (event: PointerEvent) => {
+const reset = (_: MouseEvent) => {
     zoom.value = minZoom.value; 
     dispX.value = -(maxX.value + minX.value) / 2; 
     dispY.value = -(maxY.value + minY.value) / 2;

components/content/prose/ProseA.vue

@@ -6,7 +6,7 @@ interface ParsedContentExtended extends Omit<ParsedContent, 'body'> {
     body: MarkdownRoot | CanvasContent | null;
 }
 
-const tags = inject('tags') as ParsedContent;
+const tags = inject('tags/descriptions') as ParsedContent;
 const props = defineProps({
     href: {
         type: String,
@@ -109,6 +109,10 @@ function showPreview(e: Event, bbox: boolean) {
     if(content.value === null)
         loadContent();
 }
+function showTag(e: Event)
+{
+    //e.preventDefault();
+}
 function hidePreview(e: Event) {
     timeout = setTimeout(() => hovered.value = false, 300);
 }
@@ -116,8 +120,8 @@ function hidePreview(e: Event) {
 
 <template >
     <template v-if="href !== ''">
-        <NuxtLink custom no-prefetch v-slot="{ href: hrefSlot, navigate }" :href="isTag ? undefined : { path: content?._path ?? link, hash: anchor }" :target="target">
-            <a :href="hrefSlot" @click="(isTag ? (e: Event) => e.preventDefault() : navigate)" @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview" v-bind="$attrs"><slot ></slot></a>
+        <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>
         <Teleport to="body" v-if="hovered && (loading || !!content)">
             <div class="popover hover-popover is-loaded" :style="pos" @mouseenter="(e) => showPreview(e, false)" @mouseleave="hidePreview">

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>