[DOC]: Fix broken Next/Prev link buttons (#4310)

## Description of changes

Fixes #4215 

On certain pages, specifically those that had a top section with no
subsection, the Next/Prev functionality was sometimes breaking. This was
due to the way the links and the slugs were connected and from the
configuration of the Sidebar and the its components.

## Fixes

It turns out that `path` can be computed from `slug` by just prepending
a `/`, so I removed the `path` property and refactored it to add some
small logic to convert slug to path, simplifying the component
properties.

In addition, I found that some links to the python-thin-client were
broken, due to using relative paths, so I just did a quick fix by using
the absolute path instead. The only downside is that if you are working
in an IDE, the absolute link won't work within the IDE. There are ways
to patch this, or configure editors to find the right path, if people
think this is worth addressing.

## Test plan
*How are these changes tested?*

Run the app locally, validate the cases that are mentioned as breaking
in the Issue referenced above are working now, check other links for
sanity, check links to python-thin-clint, check links to "Edit this page
on GitHub".

Built the app locally and no failures or problems.

- [ ] Tests pass locally with `pytest` for python, `yarn test` for js,
`cargo test` for rust

## Documentation Changes
*Are all docstrings for user-facing APIs updated if required? Do we need
to make documentation changes in the [docs
repository](https://github.com/chroma-core/docs)?*

---------

Co-authored-by: Really Him <[email protected]>

Author: hesreallyhim

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

@@ -31,41 +31,41 @@ const MarkdocRenderer: React.FC<{ slug: string[] }> = ({ slug }) => {
   function extractToc(ast) {
     // @ts-expect-error - This is a private function
     const toc = [];
-  
+
     // @ts-expect-error - This is a private function
     function traverse(node) {
       if (!node) return;
-  
+
       if (node.type === "heading") {
         const title = node.children[0].children[0].attributes.content;
         const id =
           node.attributes.id ||
           title.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, ""); // Generate an ID if missing
-  
+
         toc.push({
           level: node.attributes.level, // Heading level (1, 2, 3...)
           title: title.trim(),
           id: id.trim(),
         });
       }
-  
+
       // Recursively traverse children
       if (node.children) {
         for (const child of node.children) {
           traverse(child);
         }
       }
     }
-  
+
     traverse(ast);
     // @ts-expect-error - This is a private function
     return toc;
   }
-  
+
   // Extracts text recursively from children nodes
   // function extractText(node) {
   //   if (!node || !node.children) return "";
-  
+
   //   return node.children
   //     .map((child) => {
   //       if (child.type === "text") return child.content || ""; // Direct text content
@@ -100,12 +100,12 @@ const MarkdocRenderer: React.FC<{ slug: string[] }> = ({ slug }) => {
         {output}
         <div className="flex items-center justify-between mt-5">
           {prev ? (
-            <PageNav path={prev.path || ""} name={prev.name} type="prev" />
+            <PageNav slug={prev.slug || ""} name={prev.name} type="prev" />
           ) : (
             <div />
           )}
           {next ? (
-            <PageNav path={next.path || ""} name={next.name} type="next" />
+            <PageNav slug={next.slug || ""} name={next.name} type="next" />
           ) : (
             <div />
           )}
@@ -137,4 +137,3 @@ const MarkdocRenderer: React.FC<{ slug: string[] }> = ({ slug }) => {
 };
 
 export default MarkdocRenderer;
-

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

@@ -3,15 +3,16 @@
 import React from "react";
 import Link from "next/link";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import { slugToPath } from "@/lib/content";
 
 const PageNav: React.FC<{
-  path: string;
+  slug: string;
   name: string;
   type: "prev" | "next";
-}> = ({ path, name, type }) => {
+}> = ({ slug, name, type }) => {
   return (
     <Link
-      href={path}
+      href={slugToPath(slug)}
       onClick={() => {
         sessionStorage.removeItem("sidebarScrollPosition");
       }}

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

@@ -10,11 +10,11 @@ const playfairDisplay = Playfair_Display({
 });
 
 const PageIndex: React.FC<{
-  path: string;
+  basePath: string;
   pages: { id: string; name: string }[];
   name?: string;
   index: number;
-}> = ({ path, pages, name, index }) => {
+}> = ({ basePath, pages, name, index }) => {
   const className = index === 0 ? "" : "border-t-2 pt-6 dark:border-t-gray-700";
 
   return (
@@ -34,7 +34,7 @@ const PageIndex: React.FC<{
             <PageLink
               id={page.id}
               name={page.name}
-              path={`${path}/${page.id}`}
+              slug={`${basePath}/${page.id}`}
               sectionPage={name !== undefined}
             />
           </Suspense>

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

@@ -3,15 +3,17 @@
 import React from "react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
+import { slugToPath } from "@/lib/content";
 
 const PageLink: React.FC<{
   id: string;
   name: string;
-  path: string;
+  slug: string;
   sectionPage: boolean;
-}> = ({ id, name, path, sectionPage = true }) => {
+}> = ({ id, name, slug, sectionPage = true }) => {
   const pathName = usePathname();
   const searchParams = useSearchParams();
+  const path = slugToPath(slug);
   const active = pathName === path;
   const lang = searchParams?.get("lang");
 

docs/docs.trychroma.com/components/sidebar/sidebar.tsx

@@ -66,7 +66,7 @@ const Sidebar: React.FC<{ path: string[]; mobile?: boolean }> = ({
           {currentSection.pages && (
             <div className="flex flex-col gap-2">
               <PageIndex
-                path={`/${currentSection.id}`}
+                basePath={`${currentSection.id}`}
                 pages={currentSection.pages}
                 index={0}
               />
@@ -77,7 +77,7 @@ const Sidebar: React.FC<{ path: string[]; mobile?: boolean }> = ({
               key={subsection.id}
               index={index}
               name={subsection.name}
-              path={`/${currentSection.id}/${subsection.id}`}
+              basePath={`${currentSection.id}/${subsection.id}`}
               pages={
                 subsection.generatePages
                   ? generatePages([currentSection.id, subsection.id])

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

@@ -4,7 +4,6 @@ export interface AppPage {
   id: string;
   name: string;
   slug?: string;
-  path?: string;
 }
 
 export interface AppSection {
@@ -31,21 +30,21 @@ export const getAllPages = (sidebarConfig: AppSection[], sectionId: string) => {
 
   pages.push(
     ...(section.pages?.map((page) => {
+      const pageSlug = `${section.id}/${page.id}`;
       return {
         ...page,
-        slug: `${section.id}/${page.id}`,
-        path: `./${page.slug}`,
+        slug: pageSlug,
       };
     }) || []),
   );
 
   section.subsections?.forEach((subsection) => {
     pages.push(
       ...(subsection.pages?.map((page) => {
+        const pageSlug = `${section.id}/${subsection.id}/${page.id}`;
         return {
           ...page,
-          slug: `${section.id}/${subsection.id}/${page.id}`,
-          path: `../${subsection.id}/${page.id}`,
+          slug: pageSlug,
         };
       }) || []),
     );
@@ -54,6 +53,11 @@ export const getAllPages = (sidebarConfig: AppSection[], sectionId: string) => {
   return pages;
 };
 
+// Helper function to convert slug to path
+export const slugToPath = (slug: string): string => {
+  return `/${slug}`;
+};
+
 export const getPagePrevNext = (
   slug: string[],
   pages: AppPage[],

docs/docs.trychroma.com/markdoc/content/production/chroma-server/client-server-mode.md

@@ -38,7 +38,7 @@ async def main():
 asyncio.run(main())
 ```
 
-If you intend to deploy your Chroma server, you may want to consider our [thin-client package](./thin-client) for client-side interactions.
+If you intend to deploy your Chroma server, you may want to consider our [thin-client package](/production/chroma-server/python-thin-client) for client-side interactions.
 
 {% /Tab %}
 
@@ -57,4 +57,4 @@ const client = new ChromaClient();
 
 {% /Tab %}
 
-{% /Tabs %}
+{% /Tabs %}

docs/docs.trychroma.com/markdoc/content/production/cloud-providers/aws.md

@@ -138,7 +138,7 @@ aws cloudformation create-stack --stack-name my-chroma-stack --template-url http
 
 Once your EC2 instance is up and running with Chroma, all
 you need to do is configure your `HttpClient` to use the server's IP address and port
-`8000`. Since you are running a Chroma server on AWS, our [thin-client package](../chroma-server/python-thin-client) may be enough for your application.
+`8000`. Since you are running a Chroma server on AWS, our [thin-client package](/production/chroma-server/python-thin-client) may be enough for your application.
 
 {% TabbedCodeBlock %}
 

docs/docs.trychroma.com/markdoc/content/production/cloud-providers/azure.md

@@ -99,7 +99,7 @@ terraform output -raw public_ip_address
 
 Once your Azure VM instance is up and running with Chroma, all
 you need to do is configure your `HttpClient` to use the server's IP address and port
-`8000`. Since you are running a Chroma server on Azure, our [thin-client package](../chroma-server/python-thin-client) may be enough for your application.
+`8000`. Since you are running a Chroma server on Azure, our [thin-client package](/production/chroma-server/python-thin-client) may be enough for your application.
 
 {% TabbedCodeBlock %}
 

docs/docs.trychroma.com/markdoc/content/production/cloud-providers/gcp.md

@@ -126,7 +126,7 @@ terraform output -raw chroma_instance_ip
 
 Once your Compute Engine instance is up and running with Chroma, all
 you need to do is configure your `HttpClient` to use the server's IP address and port
-`8000`. Since you are running a Chroma server on GCP, our [thin-client package](../chroma-server/python-thin-client) may be enough for your application.
+`8000`. Since you are running a Chroma server on GCP, our [thin-client package](/production/chroma-server/python-thin-client) may be enough for your application.
 
 {% TabbedCodeBlock %}