Fix tags, some parts of the markdown hydration, change how icon works

components/standard/HoverPopup.vue

@@ -6,7 +6,7 @@
         </div>
     </Teleport>
     <span ref="el" @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
-        <slot></slot>
+        <slot name="default"></slot>
     </span>
 </template>
 

components/standard/Icon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+interface Prop
+{
+    icon: string;
+    width: number;
+    height: number;
+}
+defineProps<Prop>();
+</script>
+
+<template>
+    <span :class="$attrs.class" class="inline-block bg-light-100 dark:bg-dark-100 [mask-size:100%] [mask-repeat:no-repeat] [mask-position:center]"  :style="`width: ${width}px; height: ${height}px; mask-image: url(/${icon}.svg)`"></span>
+</template>

components/standard/Markdown.vue

@@ -1,6 +1,6 @@
 <template>
   <template
-    v-if="model && model.length > 0">
+    v-if="content && content.length > 0">
     <Suspense>
       <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
       <template #fallback><div class="loading"></div></template>
@@ -10,20 +10,15 @@
 
 <script setup lang="ts">
 import { hash } from 'ohash'
-import { watch, computed } from 'vue'
-import type { Root } from 'hast';
 
-const model = defineModel<string>();
+const { content } = defineProps({
+  content: {
+    type: String,
+    required: true,
+  }
+})
 
 const parser = useMarkdown();
-const key = computed(() => hash(model.value));
-
-const node = ref<Root>();
-
-watch(model, async () => {
-  if(model.value && model.value)
-  {
-    node.value = parser(model.value);
-  }
-}, { immediate: true });
+const key = computed(() => hash(content));
+const node = computed(() => content ? parser(content) : undefined);
 </script>

components/standard/MarkdownRenderer.vue

@@ -70,14 +70,6 @@ export default defineComponent({
             default: () => ({})
         }
     },
-    watch: {
-        node: {
-            handler: function(val, old) {
-
-            },
-            deep: true,
-        }
-    },
     async setup(props) {
         if(props.proses)
         {
@@ -111,8 +103,7 @@ function renderNode(node: RootContent, tags: Record<string, any>): VNode | undef
     }
     else if(node.type === 'element')
     {
-        node.tagName === 'tag' && console.log(node);
-        return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, {default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e)});
+        return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, { default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e) });
     }
 
     return undefined;

components/standard/NavBar.vue

@@ -2,6 +2,7 @@
 import { useTemplateRef } from 'vue';
 
 const containerRef = useTemplateRef("container");
+const { loggedIn, user } = useUserSession();
 const { direction } = useSwipe(window, { threshold: 150 });
 
 watch(direction, () => {
@@ -55,7 +56,13 @@ onUnmounted(() => {
                     <NuxtLink @click="hideNavigation" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
                     <div class="flex gap-4 items-center">
                         <ThemeSwitch />
-                        <NuxtLink @click="hideNavigation" class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
+                        <NuxtLink @click="hideNavigation" class="" :to="{ path: '/user/profile', force: true }"><div class=" hover:border-opacity-70 flex border p-px border-light-70 dark:border-dark-70">
+                            <Icon v-if="!loggedIn" icon="icons/user-login" :width=28 :height=28 />
+                            <picture v-else :width=28 :height=28 class="flex" >
+                                <source :src="`/users/${user?.id}/small.jpg`" :width=28 :height=28 />
+                                <Icon :icon="`users/unknown`" :width=28 :height=28 ></Icon>
+                            </picture>
+                        </div></NuxtLink>
                     </div>
                 </div>
                 <div class="flex"><SearchView @navigate="hideNavigation" /></div>