Convert Breadcrumb to server component

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -4,7 +4,7 @@ import { Param } from "../layout";
 
 import type { Metadata } from "next";
 import { getTableOfContents } from "next-docs/server";
-import { useMDXComponent } from "next-contentlayer/hooks";
+import { getMDXComponent } from "next-contentlayer/hooks";
 import { tree } from "@/utils/page-tree";
 import React from "react";
 import { Breadcrumb } from "@/components/breadcrumb";
@@ -22,12 +22,13 @@ export default async function Page({ params }: { params: Param }) {
         notFound();
     }
 
+    const pathname = path.length === 0 ? "/docs" : "/docs/" + path;
     const toc = await getTableOfContents(page.body.raw);
 
     return (
         <>
             <article className="flex flex-col gap-6 py-8 lg:py-16">
-                <Breadcrumb tree={tree} />
+                <Breadcrumb pathname={pathname} tree={tree} />
                 <h1 className="text-4xl font-bold">{page.title}</h1>
                 <div className="prose prose-text prose-pre:grid prose-pre:border-[1px] prose-code:bg-secondary prose-code:p-1 max-w-none">
                     <MdxContent code={page.body.code} />
@@ -46,7 +47,7 @@ export default async function Page({ params }: { params: Param }) {
 }
 
 function MdxContent({ code }: { code: string }) {
-    const MDX = useMDXComponent(code);
+    const MDX = getMDXComponent(code);
 
     return (
         <MDX

apps/docs/components/breadcrumb.tsx

@@ -1,16 +1,19 @@
-"use client";
 import type { TreeNode } from "next-docs/server";
 import { useBreadcrumb } from "next-docs/breadcrumb";
 import clsx from "clsx";
 import { ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 import { Fragment } from "react";
-import { usePathname } from "next/navigation";
 
 const itemStyles = "overflow-hidden overflow-ellipsis whitespace-nowrap";
 
-export function Breadcrumb({ tree }: { tree: TreeNode[] }) {
-    const pathname = usePathname();
+export function Breadcrumb({
+    pathname,
+    tree,
+}: {
+    pathname: string;
+    tree: TreeNode[];
+}) {
     const items = useBreadcrumb(pathname, tree);
 
     return (

apps/docs/components/toc.tsx

@@ -1,27 +1,27 @@
 "use client";
-import { TOCItem as BaseTOCItem, TOCProvider } from "next-docs/toc";
+import * as Primitive from "next-docs/toc";
 import type { TOCItemType } from "next-docs/server";
 
 export function TOC({ items }: { items: TOCItemType[] }) {
     return (
-        <TOCProvider toc={items}>
+        <Primitive.TOCProvider toc={items}>
             {items.map((item, i) => (
                 <TOCItem key={i} item={item} />
             ))}
-        </TOCProvider>
+        </Primitive.TOCProvider>
     );
 }
 
 function TOCItem({ item }: { item: TOCItemType }) {
     return (
         <div>
-            <BaseTOCItem
+            <Primitive.TOCItem
                 href={item.url}
                 item={item}
                 className="text-sm text-muted-foreground transition-colors data-[active=true]:font-semibold data-[active=true]:text-foreground"
             >
                 {item.title}
-            </BaseTOCItem>
+            </Primitive.TOCItem>
             <div className="flex flex-col pl-4">
                 {item.items?.map((item, i) => (
                     <TOCItem key={i} item={item} />