Sync completed + Navigation links improved

components/EditableMarkdown.vue

@@ -44,7 +44,7 @@ import LiveBlockquote from "~/components/prose/ProseBlockquote.vue";
 import { hash } from 'ohash'
 import { watch, computed } from 'vue'
 import type { Root, Node } from 'hast';
-import { diffLines as diff } from 'diff';
+/* import { diffLines as diff } from 'diff'; */
 
 const model = defineModel<string>();
 
@@ -61,7 +61,7 @@ async function update(value: string | undefined, old: string | undefined) {
   {
     if(node.value)
     {
-      const differences = diff(old, value, {
+      /* const differences = diff(old, value, {
         newlineIsToken: true,
       });
 
@@ -108,11 +108,10 @@ async function update(value: string | undefined, old: string | undefined) {
         newNodes = parser(value.substring(newStart ?? 0, (newEnd ?? 0) + lengthDiff));
 
         const root = node.value;
-        //root.position?.end.offset
 
         node.value = parser(value);
-      }
-      console.log(node.value);
+      } */
+      node.value = parser(value);
     }
     else
     {

components/MarkdownRenderer.vue

@@ -111,10 +111,6 @@ function renderNode(node: RootContent, tags: Record<string, any>): VNode | undef
     {
         return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, {default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e)});
     }
-    else if(node.type === 'raw')
-    {
-        console.warn("???");
-    }
 
     return undefined;
 }

components/explorer/NavigationLink.vue

@@ -11,25 +11,7 @@ const hasChildren = computed(() => {
     return props.link && props.link.children && props.link.children.length > 0 || false;
 });
 
-if(hasChildren.value)
-{
-    props.link.children?.sort((a, b) => {
-        if(a.order && b.order)
-            return a.order - b.order;
-        if(a.path === props.link.path)
-            return -1;
-        if(b.path === props.link.path)
-            return 1;
-        return 0;
-    });
-}
-
-const collapsed = ref(!useRoute().path.startsWith('/explorer' + props.link.path));
-
-function hideLeftPanel(_: Event)
-{
-    document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
-}
+const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
 </script>
 
 <template>
@@ -37,7 +19,8 @@ function hideLeftPanel(_: Event)
         <template v-if="hasChildren">
             <div class="tree-item-self"
                 :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
-                data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
+                data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
+                :data-type="link.private ? 'privé' : undefined">
                 <div v-if="hasChildren" class="tree-item-icon collapse-icon">
                     <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"
@@ -51,8 +34,8 @@ function hideLeftPanel(_: Event)
                 <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
             </div>
         </template>
-        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="{ path: `/explorer/${project}${link.path}`, force: true }"
-            :active-class="'mod-active'" :data-type="link.type === 'Canvas' ? 'graph' : undefined">
+        <NuxtLink v-else class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
+            :active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
             <div class="tree-item-inner">{{ link.title }}</div>
         </NuxtLink>
     </div>

components/prose/ProseA.vue

@@ -1,6 +1,6 @@
 <template>
     <NuxtLink class="preview-link" v-if="data && data[0] && status !== 'pending'"
-        :to="{ path: `/explorer/${project}${data[0].path}`, hash: hash }" :class="class">
+        :to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
         <PreviewContent :project="project" :path="data[0].path" :anchor="hash">
             <slot v-bind="$attrs"></slot>
             <ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"

components/prose/ProseBlockquote.vue

@@ -1,5 +1,23 @@
 <template>
-  <blockquote>
+  <blockquote ref="el">
     <slot />
   </blockquote>
 </template>
+
+<script setup lang="ts">
+const attrs = useAttrs(), el = ref<HTMLQuoteElement>(), title = ref<Element | null>(null);
+
+onMounted(() => {
+  if(el && el.value && attrs.hasOwnProperty("dataCalloutFold"))
+  {
+    title.value = el.value.querySelector('.callout-title');
+    title.value?.addEventListener('click', toggle);
+  }
+});
+onUnmounted(() => {
+  title.value?.removeEventListener('click', toggle);
+})
+function toggle() {
+  el.value?.classList?.toggle('is-collapsed');
+}
+</script>

components/prose/ProseH4.vue

@@ -6,6 +6,4 @@
 
 <script setup lang="ts">
 const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
 </script>