diff --git a/docs/docs.trychroma.com/app/[...slug]/page.tsx b/docs/docs.trychroma.com/app/[...slug]/page.tsx index 298384066d1..4c59efdd015 100644 --- a/docs/docs.trychroma.com/app/[...slug]/page.tsx +++ b/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; diff --git a/docs/docs.trychroma.com/app/cloud/page.tsx b/docs/docs.trychroma.com/app/cloud/page.tsx new file mode 100644 index 00000000000..784625c9d3f --- /dev/null +++ b/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 ( +
+ +
+ +
+
+ ); +}; + +export default CloudPage; diff --git a/docs/docs.trychroma.com/components/markdoc/markdoc-page.tsx b/docs/docs.trychroma.com/components/markdoc/markdoc-page.tsx index 807ebb6bcab..57eb53bf1cf 100644 --- a/docs/docs.trychroma.com/components/markdoc/markdoc-page.tsx +++ b/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 ( - -
-
{children}
-
-
+ + +
+
{children}
+
+
+
); }; diff --git a/docs/docs.trychroma.com/components/sidebar/cloud-icon.tsx b/docs/docs.trychroma.com/components/sidebar/cloud-icon.tsx new file mode 100644 index 00000000000..8db6c25bb8d --- /dev/null +++ b/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 & RefAttributes +> = forwardRef>((props, ref) => { + return ( + + + + ); +}); + +export default CloudIcon; diff --git a/docs/docs.trychroma.com/components/sidebar/page-index.tsx b/docs/docs.trychroma.com/components/sidebar/page-index.tsx index 1a30aaa5e15..9756d5490d2 100644 --- a/docs/docs.trychroma.com/components/sidebar/page-index.tsx +++ b/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<{ )}
{pages.map((page) => ( - + + + ))}
diff --git a/docs/docs.trychroma.com/lib/content.ts b/docs/docs.trychroma.com/lib/content.ts index 62291aaedd8..f809225eea1 100644 --- a/docs/docs.trychroma.com/lib/content.ts +++ b/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>; pages?: AppPage[]; generatePages?: boolean; subsections?: AppSection[]; diff --git a/docs/docs.trychroma.com/markdoc/content/sidebar-config.ts b/docs/docs.trychroma.com/markdoc/content/sidebar-config.ts index ea683869762..aa23f15c250 100644 --- a/docs/docs.trychroma.com/markdoc/content/sidebar-config.ts +++ b/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", diff --git a/docs/docs.trychroma.com/package.json b/docs/docs.trychroma.com/package.json index 67934fda2e2..b19d75c6cf5 100644 --- a/docs/docs.trychroma.com/package.json +++ b/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",