Documentation Updates (#79)

* Docs: Added Shadcn sidebar; added algorithm to automatically infer parents without needing to specify it.
* Extracted Markdoc compilation in a separate file
* Site Navigation: simplify nav by removing the border
* Docs Navigation: added TOC; improved layout on mobile

apps/web/app/(marketing)/docs/layout.tsx

@@ -1,56 +1,24 @@
-import { Cms } from '@kit/cms';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 
 // local imports
 import { DocsNavigation } from './_components/docs-navigation';
 import { getDocs } from './_lib/server/docs.loader';
+import { buildDocumentationTree } from './_lib/utils';
 
 async function DocsLayout({ children }: React.PropsWithChildren) {
   const { resolvedLanguage } = await createI18nServerInstance();
-  const pages = await getDocs(resolvedLanguage);
+  const docs = await getDocs(resolvedLanguage);
+  const tree = buildDocumentationTree(docs);
 
   return (
-    <div className={'md:container flex'}>
-      <DocsNavigation pages={buildDocumentationTree(pages)} />
+    <SidebarProvider className={'lg:container'}>
+      <DocsNavigation pages={tree} />
 
       {children}
-    </div>
+    </SidebarProvider>
   );
 }
 
 export default DocsLayout;
-
-// we want to place all the children under their parent
-// based on the property parentId
-function buildDocumentationTree(pages: Cms.ContentItem[]) {
-  const tree: Cms.ContentItem[] = [];
-  const map: Record<string, Cms.ContentItem> = {};
-
-  pages.forEach((page) => {
-    map[page.id] = page;
-  });
-
-  pages.forEach((page) => {
-    if (page.parentId) {
-      const parent = map[page.parentId];
-
-      if (!parent) {
-        return;
-      }
-
-      if (!parent.children) {
-        parent.children = [];
-      }
-
-      parent.children.push(page);
-
-      // sort children by order
-      parent.children.sort((a, b) => a.order - b.order);
-    } else {
-      tree.push(page);
-    }
-  });
-
-  return tree.sort((a, b) => a.order - b.order);
-}