New useContent composable to store global navigation state. Fixes for Markdown and Canvas

composables/useContent.ts

@@ -0,0 +1,59 @@
+import type { ExploreContent, ContentComposable, TreeItem } from '~/types/content';
+
+const useContentState = () => useState<ExploreContent[]>('content', () => []);
+
+export function useContent(): ContentComposable {
+  const contentState = useContentState();
+  return {
+    content: contentState,
+    tree: computed(() => {
+        const arr: TreeItem[] = [];
+        for(const element of contentState.value)
+        {
+            addChild(arr, element);
+        }
+        return arr;
+    }),
+    fetch,
+    get,
+  }
+}
+
+async function fetch(force: boolean) {
+    const content = useContentState();
+    if(content.value.length === 0 || force)
+        content.value = await $fetch('/api/file/overview');
+}
+
+async function get(path: string) {
+    const content = useContentState()
+    const value = content.value;
+    const item = value.find(e => e.path === path);
+    if(item)
+    {
+        item.content = await $fetch(`/api/file/content/${encodeURIComponent(path)}`);
+    }
+
+    content.value = value;
+}
+
+function addChild(arr: TreeItem[], e: ExploreContent): void {
+    const parent = arr.find(f => e.path.startsWith(f.path));
+
+    if(parent)
+    {
+        if(!parent.children)
+            parent.children = [];
+
+        addChild(parent.children, e);
+    }
+    else
+    {
+        arr.push({ ...e });
+        arr.sort((a, b) => {
+            if(a.order !== b.order)
+                return a.order - b.order;
+            return a.title.localeCompare(b.title);
+        });
+    }
+}