Add static page generation

docs/docs.trychroma.com/app/[...slug]/page.tsx

@@ -1,7 +1,33 @@
 import React from "react";
 import MarkdocRenderer from "@/components/markdoc/markdoc-renderer";
+import sidebarConfig from "@/markdoc/content/sidebar-config";
+import { AppSection } from "@/lib/content";
 
-// TODO: Add page metadata for SEO
+export const generateStaticParams = async () => {
+  const slugs: string[][] = [];
+
+  const traverseSection = (section: AppSection, path: string[] = []) => {
+    if (section.pages) {
+      section.pages.forEach((page) => {
+        slugs.push([...path, page.id]);
+      });
+    }
+
+    if (section.subsections) {
+      section.subsections.forEach((subsection) => {
+        traverseSection(subsection, [...path, subsection.id]);
+      });
+    }
+  };
+
+  sidebarConfig.forEach((section) => {
+    traverseSection(section, [section.id]);
+  });
+
+  return slugs.map((slug) => ({
+    slug,
+  }));
+};
 
 const Page: React.FC<{ params: { slug: string[] } }> = ({ params }) => {
   const { slug } = params;

docs/docs.trychroma.com/app/cloud/page.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Sidebar from "@/components/sidebar/sidebar";
+
+const CloudPage: React.FC = () => {
+  return (
+    <div className="flex h-full flex-grow overflow-hidden pb-5">
+      <Sidebar path={["cloud"]} />
+      <div className="flex-grow overflow-y-auto">
+        <iframe
+          className="airtable-embed"
+          src="https://airtable.com/embed/appG6DhLoDUnTawwh/shrOAiDUtS2ILy5vZ"
+          width="100%"
+          height="100%"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default CloudPage;

docs/docs.trychroma.com/components/markdoc/markdoc-page.tsx

@@ -1,15 +1,17 @@
 "use client";
 
-import React from "react";
+import React, { Suspense } from "react";
 import { AppContextProvider } from "@/context/app-context";
 
 const MarkdocPage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
-    <AppContextProvider>
-      <div className="w-full max-w-full h-full overflow-y-scroll py-10 pb-40 px-14 pl-20 prose dark:prose-invert xl:pr-[calc((100vw-1256px)/2)]">
-        <div>{children}</div>
-      </div>
-    </AppContextProvider>
+    <Suspense>
+      <AppContextProvider>
+        <div className="w-full max-w-full h-full overflow-y-scroll py-10 pb-40 px-14 pl-20 prose dark:prose-invert xl:pr-[calc((100vw-1256px)/2)]">
+          <div>{children}</div>
+        </div>
+      </AppContextProvider>
+    </Suspense>
   );
 };
 

docs/docs.trychroma.com/components/sidebar/cloud-icon.tsx

@@ -0,0 +1,30 @@
+import React, {
+  ForwardRefExoticComponent,
+  RefAttributes,
+  forwardRef,
+} from "react";
+
+const CloudIcon: ForwardRefExoticComponent<
+  React.SVGProps<SVGSVGElement> & RefAttributes<SVGSVGElement>
+> = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className="size-6"
+      ref={ref}
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z"
+      />
+    </svg>
+  );
+});
+
+export default CloudIcon;

docs/docs.trychroma.com/components/sidebar/page-index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Playfair_Display } from "next/font/google";
 import PageLink from "@/components/sidebar/page-link";
 
@@ -25,13 +25,14 @@ const PageIndex: React.FC<{
       )}
       <div className="flex flex-col">
         {pages.map((page) => (
-          <PageLink
-            key={page.id}
-            id={page.id}
-            name={page.name}
-            path={`${path}/${page.id}`}
-            sectionPage={name !== undefined}
-          />
+          <Suspense key={page.id}>
+            <PageLink
+              id={page.id}
+              name={page.name}
+              path={`${path}/${page.id}`}
+              sectionPage={name !== undefined}
+            />
+          </Suspense>
         ))}
       </div>
     </div>

docs/docs.trychroma.com/lib/content.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from "lucide-react";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
 
 export interface AppPage {
   id: string;
@@ -11,7 +11,7 @@ export interface AppSection {
   id: string;
   name: string;
   default?: string;
-  icon?: LucideIcon;
+  icon?: ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
   pages?: AppPage[];
   generatePages?: boolean;
   subsections?: AppSection[];

docs/docs.trychroma.com/markdoc/content/sidebar-config.ts

@@ -7,6 +7,7 @@ import {
   WrenchIcon,
 } from "lucide-react";
 import { AppSection } from "@/lib/content";
+import CloudIcon from "@/components/sidebar/cloud-icon";
 
 const sidebarConfig: AppSection[] = [
   {
@@ -85,6 +86,12 @@ const sidebarConfig: AppSection[] = [
       },
     ],
   },
+  {
+    id: "cloud",
+    name: "Chroma Cloud",
+    icon: CloudIcon,
+    subsections: [],
+  },
   {
     id: "production",
     name: "Production",

docs/docs.trychroma.com/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.8.0",
+    "@heroicons/react": "^2.2.0",
     "@markdoc/markdoc": "latest",
     "@markdoc/next.js": "^0.3.7",
     "@matejmazur/react-katex": "^3.1.3",