refactor(docs): upgrade versions and overhaul structure and content (CopilotKit#2120)

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

CopilotKit/packages/react-core/src/components/copilot-provider/copilotkit-props.tsx

@@ -88,7 +88,7 @@ export interface CopilotKitProps {
    * }
    * ```
    *
-   * **Note**: The `authorization` property is automatically forwarded to LangGraph agents. See the [LangGraph Agent Authentication Guide](/coagents/shared-guides/langgraph-platform-authentication) for details.
+   * **Note**: The `authorization` property is automatically forwarded to LangGraph agents. See the [LangGraph Agent Authentication Guide](/coagents/shared/guides/langgraph-platform-authentication) for details.
    */
   properties?: Record<string, any>;
 

docs/app/(home)/[[...slug]]/page.tsx

@@ -10,8 +10,6 @@ import { notFound } from "next/navigation";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import { Badge } from "@/components/ui/badge";
 import { CloudIcon } from "lucide-react";
-import { getImageMeta } from "fumadocs-ui/og";
-
 import { Tabs, Tab } from "@/components/react/tabs";
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { TypeTable } from "fumadocs-ui/components/type-table";
@@ -25,6 +23,7 @@ import { InsecurePasswordProtected } from "@/components/react/insecure-password-
 import { LinkToCopilotCloud } from "@/components/react/link-to-copilot-cloud";
 import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
 import { NavigationLink } from "@/components/react/subdocs-menu";
+import { getSnippetTOCForPage } from "@/lib/snippet-toc";
 
 /**
  * TODO: This should be dynamic, but it's not working.
@@ -68,59 +67,88 @@ const mdxComponents = {
 export default async function Page({
   params,
 }: {
-  params: { slug?: string[] };
+  params: Promise<{ slug?: string[] }>;
 }) {
-  const page = source.getPage(params.slug);
+  const resolvedParams = await params;
+  const page = source.getPage(resolvedParams.slug);
   if (!page) notFound();
   const MDX = page.data.body;
   const cloudOnly = cloudOnlyFeatures.includes(page.data.title);
+  
   // Consider a page "Premium" if its slug path contains a "premium" segment OR title matches known premium features OR frontmatter premium flag
   const bySlugPremium = Array.isArray(page.slugs) ? page.slugs.includes("premium") : false;
   const byTitlePremium = premiumFeatureTitles.includes(page.data.title || "");
   const byFrontmatterPremium = Boolean((page as any).data?.premium);
   const isPremium = bySlugPremium || byTitlePremium || byFrontmatterPremium;
   // Compute premium overview href based on current section (first slug segment)
   const baseSegment = Array.isArray(page.slugs) && page.slugs.length ? `/${page.slugs[0]}` : "/";
-  const premiumOverviewHref = baseSegment === "/" ? "/(root)/premium/overview" : `${baseSegment}/premium/overview`;
-
+  const premiumOverviewHref =
+    baseSegment === "/" ? "/premium/overview" : `${baseSegment}/premium/overview`;
+  
+  // Check if the page should hide the header or TOC
+  const hideHeader = (page.data as any).hideHeader || false;
+  const hideTOC = (page.data as any).hideTOC || false;
+  
+  // Get TOC from imported snippets and merge with page TOC (only if TOC is not hidden)
+  // Use try-catch to handle build-time issues gracefully
+  let snippetTOC: any[] = [];
+  if (!hideTOC) {
+    try {
+      snippetTOC = await getSnippetTOCForPage(resolvedParams.slug);
+    } catch (error) {
+      console.warn('Failed to load snippet TOC:', error);
+      snippetTOC = [];
+    }
+  }
+  const combinedTOC = hideTOC ? [] : [...(page.data.toc || []), ...snippetTOC];
+  
   return (
     <DocsPage
-      toc={[]}
+      toc={combinedTOC}
       full={page.data.full}
+      tableOfContent={{
+        style:"clerk",
+      }}
     >
-      <div className="flex items-center gap-3">
-        <DocsTitle className="flex items-center">
-          {page.data.title}
-          {cloudOnly && (
-            <Badge
-              variant="secondary"
-              className="ml-3 mt-1 inline-flex items-center gap-1.5 py-1.5 px-3 bg-indigo-600/90 text-white hover:bg-indigo-600 border-0 rounded-md transition-colors"
-            >
-              <CloudIcon className="w-3 h-3" />
-              <span className="text-xs">Cloud Only</span>
-            </Badge>
-          )}
-          {isPremium && (
-            <a href={premiumOverviewHref} className="ml-3 mt-1">
-              <Badge
-                variant="secondary"
-                className="inline-flex items-center gap-2 py-2 px-3.5 bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200 hover:bg-indigo-200 border-0 rounded-md transition-colors"
-              >
-                <img
-                  src="https://cdn.copilotkit.ai/docs/copilotkit/images/copilotkit-logo.svg"
-                  alt="CopilotKit"
-                  className="w-5 h-5"
-                />
-                <span className="text-sm font-semibold tracking-tight">Premium</span>
-              </Badge>
-            </a>
-          )}
-        </DocsTitle>
+      <div className={hideHeader ? "" : "min-h-screen"}>
+        {!hideHeader && (
+          <>
+            <div className="flex items-center gap-3">
+              <DocsTitle className="flex items-center mb-2">
+                {page.data.title}
+                {cloudOnly && (
+                  <Badge
+                    variant="secondary"
+                    className="ml-3 mt-1 inline-flex items-center gap-1.5 py-1.5 px-3 bg-indigo-600/90 text-white hover:bg-indigo-600 border-0 rounded-md transition-colors"
+                  >
+                    <CloudIcon className="w-3 h-3" />
+                    <span className="text-xs">Cloud Only</span>
+                  </Badge>
+                )}
+                {isPremium && (
+                  <a href={premiumOverviewHref} className="ml-3">
+                    <Badge
+                      variant="secondary"
+                      className="inline-flex items-center gap-2 py-2 px-3.5 bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200 hover:bg-indigo-200 border-0 rounded-md transition-colors"
+                    >
+                      <img
+                        src="https://cdn.copilotkit.ai/docs/copilotkit/icons/copilotkit-color.svg"
+                        alt="CopilotKit"
+                        className="w-4 h-4"
+                      />
+                      <span className="text-sm font-semibold tracking-tight">Premium</span>
+                    </Badge>
+                  </a>
+                )}
+              </DocsTitle>
+            </div>
+            <DocsDescription>{page.data.description}</DocsDescription>
+          </>
+        )}
+        <DocsBody>
+          <MDX components={mdxComponents} />
+        </DocsBody>
       </div>
-      <DocsDescription>{page.data.description}</DocsDescription>
-      <DocsBody>
-        <MDX components={mdxComponents} renderSmth={() => <div>test</div>} />
-      </DocsBody>
     </DocsPage>
   );
 }
@@ -129,21 +157,13 @@ export async function generateStaticParams() {
   return source.generateParams();
 }
 
-export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-  const page = source.getPage(params.slug);
+export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) {
+  const resolvedParams = await params;
+  const page = source.getPage(resolvedParams.slug);
   if (!page) notFound();
 
-  const image = getImageMeta("og", page.slugs);
-
   return {
     title: page.data.title,
     description: page.data.description,
-    openGraph: {
-      images: image,
-    },
-    twitter: {
-      images: image,
-      card: "summary_large_image",
-    },
   } satisfies Metadata;
 }

docs/app/(home)/layout.tsx

@@ -1,11 +1,10 @@
-import { DocsLayout } from "fumadocs-ui/layout";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import type { ReactNode } from "react";
 import { baseOptions } from "../layout.config";
 import { source } from "@/app/source";
 import { SubdocsMenu } from "@/components/react/subdocs-menu";
-import { TerminalIcon, RocketIcon, BoxesIcon } from "lucide-react";
+import { TerminalIcon, RocketIcon, CloudIcon } from "lucide-react";
 import { SiCrewai } from "@icons-pack/react-simple-icons";
-import { TopBar } from "@/components/layout/top-bar";
 import { SiLangchain } from "react-icons/si";
 import {
   AG2Icon,
@@ -18,12 +17,11 @@ import {
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <>
-      <TopBar />
       <DocsLayout
         tree={source.pageTree}
-        {...baseOptions}
+        searchToggle={{ enabled: true }}
         sidebar={{
-          hideSearch: true,
+          tabs: false, // Disable default tab picker to rely on root folders
           banner: (
             <SubdocsMenu
               options={[
@@ -37,18 +35,7 @@ export default function Layout({ children }: { children: ReactNode }) {
                   selectedStyle: "ring-blue-500/70 ring-2 rounded-sm",
                 },
                 {
-                  title: "API Reference",
-                  description: "API Reference",
-                  url: "/reference",
-                  icon: <TerminalIcon className="w-4 h-4" />,
-                  bgGradient:
-                    "bg-gradient-to-b from-teal-700 to-teal-400 text-teal-100",
-                  selectedStyle: "ring-teal-500/70 ring-2 rounded-sm",
-                },
-                { type: "separator" },
-                { type: "label", text: "Choose Agent Integration" },
-                {
-                  title: "LLM or Agent Framework",
+                  title: "Integrations",
                   options: [
                     {
                       title: "Direct to LLM",
@@ -153,19 +140,31 @@ export default function Layout({ children }: { children: ReactNode }) {
                     },
                   ],
                 },
-                // {
-                //   title: "Chat with our docs",
-                //   description: "Chat with our docs",
-                //   url: "https://entelligence.ai/CopilotKit&CopilotKit",
-                //   icon: <CircleArrowOutUpRight className="w-4 h-4" />,
-                //   bgGradient:
-                //     "bg-gradient-to-b from-purple-700 to-purple-400 text-purple-100",
-                //   selectedBorder: "ring-teal-500/70",
-                // },
+                {
+                  title: "Copilot Cloud",
+                  description: "Copilot Cloud",
+                  href: "https://cloud.copilotkit.ai",
+                  url: "https://cloud.copilotkit.ai",
+                  icon: <CloudIcon className="w-4 h-4" />,
+                  bgGradient:
+                    "bg-gradient-to-b from-blue-700 to-blue-400 text-blue-100",
+                  selectedStyle: "ring-blue-500/70 ring-2 rounded-sm",
+                },
+                {
+                  title: "API Reference",
+                  description: "API Reference",
+                  url: "/reference",
+                  icon: <TerminalIcon className="w-4 h-4" />,
+                  bgGradient:
+                    "bg-gradient-to-b from-teal-700 to-teal-400 text-teal-100",
+                  selectedStyle: "ring-teal-500/70 ring-2 rounded-sm",
+                },
               ]}
+              
             />
           ),
         }}
+        {...baseOptions}
       >
         {children}
       </DocsLayout>