Big rework to include OPFS API for local edits. Big components rework in vanilla JS to optimize. Unfinished, DO NOT SHIP YET !

composables/useContent.ts

@@ -1,40 +1,45 @@
+import { Content } from '~/shared/content.util';
 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,
-  }
+    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) {
+async function fetch(force: boolean = false) {
     const content = useContentState();
     if(content.value.length === 0 || force)
         content.value = await useRequestFetch()('/api/file/overview');
 }
 
-async function get(path: string) {
+async function get(path: string, force: boolean = false): Promise<ExploreContent | undefined> {
     const content = useContentState()
     const value = content.value;
     const item = value.find(e => e.path === path);
-    if(item)
+
+    if(item && !item.content)
     {
         item.content = await useRequestFetch()(`/api/file/content/${encodeURIComponent(path)}`);
     }
 
     content.value = value;
+
+    return item;
 }
 
 function addChild(arr: TreeItem[], e: ExploreContent): void {

composables/useMarkdown.ts

@@ -8,9 +8,14 @@ import RemarkGfm from 'remark-gfm';
 import RemarkBreaks from 'remark-breaks';
 import RemarkFrontmatter from 'remark-frontmatter';
 
-export default function useMarkdown(): (md: string) => Root
+interface Parser
 {
-    let processor: Processor;
+    parse: (md: string) => Promise<Root>;
+    parseSync: (md: string) => Root
+}
+export default function useMarkdown(): Parser
+{
+    let processor: Processor, processorSync: Processor;
 
     const parse = (markdown: string) => {
         if (!processor) 
@@ -19,9 +24,20 @@ export default function useMarkdown(): (md: string) => Root
             processor.use(RemarkRehype);
         }
 
+        const processed = processor.run(processor.parse(markdown)) as Promise<Root>;
+        return processed;
+    }
+
+    const parseSync = (markdown: string) => {
+        if (!processor) 
+        {
+            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter]);
+            processor.use(RemarkRehype);
+        }
+
         const processed = processor.runSync(processor.parse(markdown)) as Root;
         return processed;
     }
 
-    return parse;
+    return { parse, parseSync };
 }

composables/useUserSession.ts

@@ -1,9 +1,7 @@
 import type { UserSession, UserSessionComposable } from '~/types/auth'
-import { useContent } from './useContent'
 
 const useSessionState = () => useState<UserSession>('nuxt-session', () => ({}))
 const useAuthReadyState = () => useState('nuxt-auth-ready', () => false)
-const useContentFetch = (force: boolean) => useContent().fetch(force);
 
 /**
  * Composable to get back the user session and utils around it.