From 46e031a087a17f15438343c5f2f0a7c6ebd8d831 Mon Sep 17 00:00:00 2001
From: Emiliano Bonilla <56323762+emilbon99@users.noreply.github.com>
Date: Sat, 14 Sep 2024 17:06:11 -0700
Subject: [PATCH] [docs/site] - added breadcrumbs and next and prev buttons to
 docs site

---
 docs/site/src/components/NextPrev.astro       | 72 ++++++++++++++++
 .../site/src/components/article/Article.astro | 38 ++++++++-
 .../src/components/article/Breadcrumb.astro   |  7 ++
 docs/site/src/layouts/MainLayout.astro        | 12 ++-
 docs/site/src/pages/index.mdx                 |  1 +
 .../pages/reference/cluster/cli-reference.mdx |  4 +
 .../src/pages/reference/cluster/index.astro   |  3 +
 .../pages/reference/cluster/installation.mdx  |  4 +
 .../pages/reference/cluster/production.mdx    |  4 +
 .../pages/reference/cluster/quick-start.mdx   |  5 +-
 .../pages/reference/cluster/requirements.mdx  |  4 +
 .../reference/cluster/systemd-service.mdx     |  2 +
 .../src/pages/reference/concepts/channels.mdx |  4 +
 .../reference/concepts/clusters-and-nodes.mdx |  4 +
 .../src/pages/reference/concepts/index.astro  |  3 +
 .../src/pages/reference/concepts/overview.mdx |  2 +
 .../src/pages/reference/concepts/ranges.mdx   |  4 +
 .../src/pages/reference/concepts/reads.mdx    |  4 +
 .../src/pages/reference/concepts/streams.mdx  |  2 +
 .../src/pages/reference/concepts/writes.mdx   |  4 +
 .../src/pages/reference/console/channels.mdx  |  4 +
 .../src/pages/reference/console/clusters.mdx  |  4 +
 .../pages/reference/console/get-started.mdx   |  2 +
 .../src/pages/reference/console/index.astro   |  3 +
 .../pages/reference/console/line-plots.mdx    |  4 +
 .../src/pages/reference/console/ranges.mdx    |  4 +
 .../pages/reference/console/schematics.mdx    |  2 +
 .../pages/reference/console/ui-overview.mdx   |  4 +
 .../pages/reference/console/workspaces.mdx    |  4 +
 .../src/pages/reference/control/examples.mdx  |  2 +
 .../pages/reference/control/get-started.mdx   |  4 +-
 .../src/pages/reference/control/index.astro   |  3 +
 .../reference/control/sequence-basics.mdx     |  4 +
 .../reference/device-drivers/get-started.mdx  |  2 +
 .../reference/device-drivers/index.astro      |  3 +
 .../device-drivers/ni/analog-read-task.mdx    |  4 +
 .../device-drivers/ni/configure-device.mdx    |  4 +
 .../device-drivers/ni/digital-read-task.mdx   |  2 +
 .../device-drivers/ni/digital-write-task.mdx  |  4 +
 .../device-drivers/ni/get-started.mdx         |  2 +
 .../reference/device-drivers/ni/index.astro   |  3 +
 .../device-drivers/opc-ua/connect-server.mdx  |  2 +
 .../device-drivers/opc-ua/index.astro         |  3 +
 .../device-drivers/opc-ua/read-task.mdx       |  4 +
 .../device-drivers/opc-ua/write-task.mdx      |  2 +
 .../src/pages/reference/pluto/example-app.mdx |  2 +
 .../src/pages/reference/pluto/get-started.mdx |  2 +
 .../src/pages/reference/pluto/index.astro     |  3 +
 .../src/pages/reference/pluto/line-plot.mdx   |  4 +
 .../reference/pluto/provider-and-canvas.mdx   |  4 +
 .../src/pages/reference/pluto/theming.mdx     |  4 +
 .../reference/python-client/channels.mdx      |  4 +
 .../reference/python-client/delete-data.mdx   |  4 +
 .../reference/python-client/examples.mdx      |  4 +
 .../reference/python-client/get-started.mdx   |  4 +-
 .../pages/reference/python-client/index.astro |  3 +
 .../pages/reference/python-client/ranges.mdx  |  4 +
 .../reference/python-client/read-data.mdx     |  4 +
 .../python-client/series-and-frames.mdx       |  4 +
 .../reference/python-client/stream-data.mdx   |  4 +
 .../python-client/troubleshooting.mdx         |  2 +
 .../reference/python-client/write-data.mdx    |  4 +
 .../reference/typescript-client/channels.mdx  |  4 +
 .../typescript-client/delete-data.mdx         |  4 +
 .../reference/typescript-client/examples.mdx  |  4 +
 .../typescript-client/get-started.mdx         |  2 +
 .../reference/typescript-client/index.astro   |  3 +
 .../reference/typescript-client/read-data.mdx |  4 +
 .../typescript-client/series-and-frames.mdx   |  4 +
 .../typescript-client/stream-data.mdx         |  4 +
 .../typescript-client/timestamps.mdx          |  4 +
 .../typescript-client/troubleshooting.mdx     |  2 +
 .../typescript-client/write-data.mdx          |  4 +
 pluto/src/breadcrumb/Breadcrumb.tsx           | 82 +++++++++++++++----
 x/ts/src/caseconv/caseconv.ts                 |  5 +-
 75 files changed, 423 insertions(+), 25 deletions(-)
 create mode 100644 docs/site/src/components/NextPrev.astro
 create mode 100644 docs/site/src/components/article/Breadcrumb.astro
 create mode 100644 docs/site/src/pages/reference/cluster/index.astro
 create mode 100644 docs/site/src/pages/reference/concepts/index.astro
 create mode 100644 docs/site/src/pages/reference/console/index.astro
 create mode 100644 docs/site/src/pages/reference/control/index.astro
 create mode 100644 docs/site/src/pages/reference/device-drivers/index.astro
 create mode 100644 docs/site/src/pages/reference/device-drivers/ni/index.astro
 create mode 100644 docs/site/src/pages/reference/device-drivers/opc-ua/index.astro
 create mode 100644 docs/site/src/pages/reference/pluto/index.astro
 create mode 100644 docs/site/src/pages/reference/python-client/index.astro
 create mode 100644 docs/site/src/pages/reference/typescript-client/index.astro

diff --git a/docs/site/src/components/NextPrev.astro b/docs/site/src/components/NextPrev.astro
new file mode 100644
index 0000000000..7baf310d67
--- /dev/null
+++ b/docs/site/src/components/NextPrev.astro
@@ -0,0 +1,72 @@
+---
+import { Icon } from "@synnaxlabs/media";
+import { Align, Button, Divider, Text } from "@synnaxlabs/pluto";
+const { next, prev, nextURL, prevURL } = Astro.props;
+---
+
+<Align.Space className="next-prev" empty>
+    {(next != null || prev != null) && <Divider.Divider direction="x" />}
+    <Align.Space direction="x" justify="spaceBetween">
+        <Align.Space direction="x" el="a" className="link" href={prevURL}>
+            {
+                prev != null && (
+                    <>
+                        <Icon.Caret.Left />
+                        <Align.Space direction="y" size="small">
+                            <Text.Text level="small" shade={7} weight={400}>
+                                Previous
+                            </Text.Text>
+                            <Text.Text level="p">{prev}</Text.Text>
+                        </Align.Space>
+                    </>
+                )
+            }
+        </Align.Space>
+        <Align.Space direction="x" el="a" className="link" href={nextURL}>
+            {
+                next != null && (
+                    <>
+                        <Align.Space direction="y" size="small">
+                            <Text.Text level="small" shade={7} weight={400}>
+                                Next
+                            </Text.Text>
+                            <Text.Text level="p">{next}</Text.Text>
+                        </Align.Space>
+                        <Icon.Caret.Right />
+                    </>
+                )
+            }
+        </Align.Space>
+    </Align.Space>
+</Align.Space>
+
+<style is:global>
+    .next-prev {
+        margin: 8rem 0;
+
+        .link {
+            cursor: pointer;
+            &:hover {
+                text-decoration: none !important;
+                .pluto-text {
+                    color: var(--pluto-gray-l10);
+                }
+                .synnax-icon {
+                    color: var(--pluto-gray-l10);
+                    transform: scale(1.2) !important;
+                }
+            }
+        }
+
+        .pluto-text {
+            color: var(--pluto-gray-l7);
+            font-weight: 400;
+        }
+        .synnax-icon {
+            transition: all 0.2s ease;
+            color: var(--pluto-gray-l7);
+            width: 3rem;
+            height: 3rem;
+        }
+    }
+</style>
diff --git a/docs/site/src/components/article/Article.astro b/docs/site/src/components/article/Article.astro
index 185f73e0be..128ad577ef 100644
--- a/docs/site/src/components/article/Article.astro
+++ b/docs/site/src/components/article/Article.astro
@@ -1,11 +1,15 @@
 ---
-const { title, description } = Astro.props;
+import Breadcrumb from "@/components/article/Breadcrumb.astro";
+import NextPrev from "@/components/NextPrev.astro";
+const { title, description, url, next, prev, nextURL, prevURL } = Astro.props;
 ---
 
 <article transition:animate="none">
+    <Breadcrumb url={url} />
     <h1 class="article-title">{title}</h1>
     <h4 class="article-description">{description}</h4>
     <slot />
+    <NextPrev prev={prev} next={next} prevURL={prevURL} nextURL={nextURL} />
 </article>
 
 <style is:global>
@@ -21,6 +25,36 @@ const { title, description } = Astro.props;
             width: fit-content;
         }
 
+        & .pluto-breadcrumb {
+            & .pluto-text-link {
+                &:last-child {
+                    & .pluto-text {
+                        color: var(--pluto-gray-l9);
+                    }
+                }
+                & .pluto-text {
+                    font-weight: 375;
+                    color: var(--pluto-gray-l6);
+                    &:hover {
+                        color: var(--pluto-gray-l9) !important;
+                    }
+                }
+                &:hover {
+                    text-decoration: none !important;
+                }
+            }
+        }
+
+        & .synnax-icon-caret-right {
+            transform: translateY(0px) !important;
+            width: 2rem;
+            height: 2rem;
+            color: var(--pluto-gray-l6);
+            &:first-child {
+                display: none;
+            }
+        }
+
         @media (max-width: 700px) {
             padding: 2rem;
         }
@@ -31,7 +65,7 @@ const { title, description } = Astro.props;
             width: 100px;
             margin-top: 2rem;
             height: 2px;
-            background: var(--pluto-primary-p1);
+            background: var(--pluto-primary-z);
         }
 
         .article-description {
diff --git a/docs/site/src/components/article/Breadcrumb.astro b/docs/site/src/components/article/Breadcrumb.astro
new file mode 100644
index 0000000000..171db04cc7
--- /dev/null
+++ b/docs/site/src/components/article/Breadcrumb.astro
@@ -0,0 +1,7 @@
+---
+import { Breadcrumb as B } from "@synnaxlabs/pluto";
+const { url } = Astro.props;
+console.log(url);
+---
+
+<B.URL hideFirst level="small" url={url.slice(1)} separator="/" />
diff --git a/docs/site/src/layouts/MainLayout.astro b/docs/site/src/layouts/MainLayout.astro
index 5af8392c0d..4a6d0c298b 100644
--- a/docs/site/src/layouts/MainLayout.astro
+++ b/docs/site/src/layouts/MainLayout.astro
@@ -10,7 +10,7 @@ import Footer from "@/components/Footer.astro";
 import Article from "@/components/article/Article.astro";
 const {
     headings,
-    frontmatter: { title, heading, description },
+    frontmatter: { title, heading, description, url, next, nextURL, prev, prevURL },
 } = Astro.props;
 ---
 
@@ -42,7 +42,15 @@ const {
     <main>
         <section>
             <PageNav />
-            <Article title={heading ?? title} description={description}>
+            <Article
+                url={url}
+                title={heading ?? title}
+                description={description}
+                next={next}
+                prev={prev}
+                nextURL={nextURL}
+                prevURL={prevURL}
+            >
                 <slot />
             </Article>
             <OnThisPage headings={headings} url={Astro.url} />
diff --git a/docs/site/src/pages/index.mdx b/docs/site/src/pages/index.mdx
index f82d980592..dbc50e1e71 100644
--- a/docs/site/src/pages/index.mdx
+++ b/docs/site/src/pages/index.mdx
@@ -47,6 +47,7 @@ The main components of the Synnax platform are:
 | [Console](/reference/console/get-started)                     | A desktop application for data-visualization, instrumentation management, and manual hardware operations.  |
 | [Python Client](/reference/python-client/get-started)         | Our Python library for interacting with a Synnax cluster.                                                  |
 | [TypeScript Client](/reference/typescript-client/get-started) | Our TypeScript library for interacting with a Synnax cluster.                                              |
+| [Control](/reference/control/get-started)                     | Automate control of hardware systems using control sequences.                                              |
 | [Pluto](/reference/pluto/get-started)                         | Our React-based component library for building applications.                                               |
 | [Device Drivers](/reference/device-drivers/get-started)       | Drivers for communicating with data acquisition and control devices.                                       |
 
diff --git a/docs/site/src/pages/reference/cluster/cli-reference.mdx b/docs/site/src/pages/reference/cluster/cli-reference.mdx
index 756f731138..c8663e6d16 100644
--- a/docs/site/src/pages/reference/cluster/cli-reference.mdx
+++ b/docs/site/src/pages/reference/cluster/cli-reference.mdx
@@ -2,6 +2,10 @@
 title: "CLI Reference"
 layout: "@/layouts/MainLayout.astro"
 description: "Find information about the Synnax Database CLI."
+next: "Systemd Service"
+nextURL: "/reference/cluster/systemd-service"
+prev: "Requirements"
+prevURL: "/reference/cluster/requirements"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/cluster/index.astro b/docs/site/src/pages/reference/cluster/index.astro
new file mode 100644
index 0000000000..00d80fb3a0
--- /dev/null
+++ b/docs/site/src/pages/reference/cluster/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/cluster/quick-start");
+---
diff --git a/docs/site/src/pages/reference/cluster/installation.mdx b/docs/site/src/pages/reference/cluster/installation.mdx
index 7e6cff605d..61cea1fafe 100644
--- a/docs/site/src/pages/reference/cluster/installation.mdx
+++ b/docs/site/src/pages/reference/cluster/installation.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Cluster Installation"
 description: "Install Synnax on a variety of operating systems."
+next: "Production"
+nextURL: "/reference/cluster/production"
+prev: "Quick Start"
+prevURL: "/reference/cluster/quick-start"
 ---
 import { Note } from "@synnaxlabs/pluto";
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/cluster/production.mdx b/docs/site/src/pages/reference/cluster/production.mdx
index 5f8822dd01..cb4a469415 100644
--- a/docs/site/src/pages/reference/cluster/production.mdx
+++ b/docs/site/src/pages/reference/cluster/production.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Deploy to Production"
 heading: "Deploying to Production"
 description: "Deploy a single node cluster to production."
+next: "Requirements"
+nextURL: "/reference/cluster/requirements"
+prev: "Installation"
+prevURL: "/reference/cluster/installation"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/cluster/quick-start.mdx b/docs/site/src/pages/reference/cluster/quick-start.mdx
index 294b4caea8..df38d3a557 100644
--- a/docs/site/src/pages/reference/cluster/quick-start.mdx
+++ b/docs/site/src/pages/reference/cluster/quick-start.mdx
@@ -2,8 +2,9 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Deploy"
 heading: "Deployment Quick Start"
-description: "Start a single node cluster for testing,
-learning, or development."
+description: "Start a single node cluster for testing, learning, or development."
+next: "Installation"
+nextURL: "/reference/cluster/installation"
 ---
 import { Note } from "@synnaxlabs/pluto";
 import { PlatformTabs } from "@/components/platform/PlatformTabs";
diff --git a/docs/site/src/pages/reference/cluster/requirements.mdx b/docs/site/src/pages/reference/cluster/requirements.mdx
index 017b17590d..70445ea00a 100644
--- a/docs/site/src/pages/reference/cluster/requirements.mdx
+++ b/docs/site/src/pages/reference/cluster/requirements.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Requirements"
 heading: "Deployment Requirements"
+next: "CLI Reference"
+nextURL: "/reference/cluster/cli-reference"
+prev: "Production"
+prevURL: "/reference/cluster/production"
 ---
 import Code from "@/components/code/Code.astro";
 export const components = { pre: Code };
diff --git a/docs/site/src/pages/reference/cluster/systemd-service.mdx b/docs/site/src/pages/reference/cluster/systemd-service.mdx
index 37d80f3eac..0847e1a8e1 100644
--- a/docs/site/src/pages/reference/cluster/systemd-service.mdx
+++ b/docs/site/src/pages/reference/cluster/systemd-service.mdx
@@ -2,6 +2,8 @@
 title: "Systemd Service"
 layout: "@/layouts/MainLayout.astro"
 description: "Manage Synnax using a systemd service."
+prev: "CLI Reference"
+prevURL: "/reference/cluster/cli-reference"
 ---
 import Code from "@/components/code/Code.astro";
 export const components = { pre: Code };
diff --git a/docs/site/src/pages/reference/concepts/channels.mdx b/docs/site/src/pages/reference/concepts/channels.mdx
index 372d6cab96..18582c3d1b 100644
--- a/docs/site/src/pages/reference/concepts/channels.mdx
+++ b/docs/site/src/pages/reference/concepts/channels.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Channels"
 description: "Learn how channels represent data in Synnax."
+next: "Ranges"
+nextURL: "/reference/concepts/ranges"
+prev: "Clusters and Nodes"
+prevURL: "/reference/concepts/clusters-and-nodes"
 ---
 
 import { Image } from "@/components/Media";
diff --git a/docs/site/src/pages/reference/concepts/clusters-and-nodes.mdx b/docs/site/src/pages/reference/concepts/clusters-and-nodes.mdx
index 83b8833d29..a8ce230aa1 100644
--- a/docs/site/src/pages/reference/concepts/clusters-and-nodes.mdx
+++ b/docs/site/src/pages/reference/concepts/clusters-and-nodes.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Clusters and Nodes"
 description: "Learn how clusters and nodes interact to form the Synnax database."
+next: "Channels"
+nextURL: "/reference/concepts/channels"
+prev: "Concepts Overview"
+prevURL: "/reference/concepts/overview"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 
diff --git a/docs/site/src/pages/reference/concepts/index.astro b/docs/site/src/pages/reference/concepts/index.astro
new file mode 100644
index 0000000000..c4edfed0cf
--- /dev/null
+++ b/docs/site/src/pages/reference/concepts/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/concepts/overview");
+---
diff --git a/docs/site/src/pages/reference/concepts/overview.mdx b/docs/site/src/pages/reference/concepts/overview.mdx
index 4348850e4d..9fb59d5cae 100644
--- a/docs/site/src/pages/reference/concepts/overview.mdx
+++ b/docs/site/src/pages/reference/concepts/overview.mdx
@@ -2,6 +2,8 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Concepts"
 description: "Learn about the core concepts of Synnax."
+next: "Clusters and Nodes"
+nextURL: "/reference/concepts/clusters-and-nodes"
 ---
 
 import { Image } from "@/components/Media";
diff --git a/docs/site/src/pages/reference/concepts/ranges.mdx b/docs/site/src/pages/reference/concepts/ranges.mdx
index 89b825d5f1..394a84b774 100644
--- a/docs/site/src/pages/reference/concepts/ranges.mdx
+++ b/docs/site/src/pages/reference/concepts/ranges.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Ranges"
 heading: "Ranges"
 description: "Learn how ranges organize your data."
+next: "Reads"
+nextURL: "/reference/concepts/reads"
+prev: "Channels"
+prevURL: "/reference/concepts/channels"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/concepts/reads.mdx b/docs/site/src/pages/reference/concepts/reads.mdx
index 5afad3ba53..d19f6cef27 100644
--- a/docs/site/src/pages/reference/concepts/reads.mdx
+++ b/docs/site/src/pages/reference/concepts/reads.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Reads"
 heading: "Reading Data"
 description: "Learn the process for reading data from a Synnax cluster."
+next: "Writes"
+nextURL: "/reference/concepts/writes"
+prev: "Ranges"
+prevURL: "/reference/concepts/ranges"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/concepts/streams.mdx b/docs/site/src/pages/reference/concepts/streams.mdx
index 2df5c6ba71..0ed3e47324 100644
--- a/docs/site/src/pages/reference/concepts/streams.mdx
+++ b/docs/site/src/pages/reference/concepts/streams.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "Streams"
 heading: "Streaming Data"
 description: "Learn the process for streaming data from a Synnax cluster."
+prev: "Writes"
+prevURL: "/reference/concepts/writes"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/concepts/writes.mdx b/docs/site/src/pages/reference/concepts/writes.mdx
index ba414fd7f9..c279d30d4f 100644
--- a/docs/site/src/pages/reference/concepts/writes.mdx
+++ b/docs/site/src/pages/reference/concepts/writes.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Writes"
 heading: "Writing Data"
 description: "Learn the process for writing data to a Synnax cluster."
+next: "Streams"
+nextURL: "/reference/concepts/streams"
+prev: "Reads"
+prevURL: "/reference/concepts/reads"
 ---
 
 import { Image } from "@/components/Media";
diff --git a/docs/site/src/pages/reference/console/channels.mdx b/docs/site/src/pages/reference/console/channels.mdx
index 4740881d9f..6df87a732b 100644
--- a/docs/site/src/pages/reference/console/channels.mdx
+++ b/docs/site/src/pages/reference/console/channels.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Channels"
 heading: "Channels"
 description: "Store data in channels."
+prev: "UI Overview"
+prevURL: "/reference/console/ui-overview"
+next: "Workspaces"
+nextURL: "/reference/console/workspaces"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/console/clusters.mdx b/docs/site/src/pages/reference/console/clusters.mdx
index 94544ce333..ddfd12649f 100644
--- a/docs/site/src/pages/reference/console/clusters.mdx
+++ b/docs/site/src/pages/reference/console/clusters.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Clusters"
 description: "Connect to clusters in the Synnax Console."
+prev: "Get Started"
+prevURL: "/reference/console/get-started"
+next: "UI Overview"
+nextURL: "/reference/console/ui-overview"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto";
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/console/get-started.mdx b/docs/site/src/pages/reference/console/get-started.mdx
index b0a631d64a..2905414f89 100644
--- a/docs/site/src/pages/reference/console/get-started.mdx
+++ b/docs/site/src/pages/reference/console/get-started.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "Console"
 heading: "The Synnax Console"
 description: "Install and use the Synnax Console."
+next: "Clusters"
+nextURL: "/reference/console/clusters"
 ---
 import { Align, Divider } from "@synnaxlabs/pluto";
 import { SynnaxConsoleDownloadButton } from "@/components/console/OSDownloadButton";
diff --git a/docs/site/src/pages/reference/console/index.astro b/docs/site/src/pages/reference/console/index.astro
new file mode 100644
index 0000000000..d67d3cc0b4
--- /dev/null
+++ b/docs/site/src/pages/reference/console/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/console/get-started");
+---
diff --git a/docs/site/src/pages/reference/console/line-plots.mdx b/docs/site/src/pages/reference/console/line-plots.mdx
index c3610507fe..a4e79c48c8 100644
--- a/docs/site/src/pages/reference/console/line-plots.mdx
+++ b/docs/site/src/pages/reference/console/line-plots.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Line Plots"
 description: "Graph data using line plots."
+prev: "Ranges"
+prevURL: "/reference/console/ranges"
+next: "Schematics"
+nextURL: "/reference/console/schematics"
 ---
 
 import { Icon } from "@synnaxlabs/media";
diff --git a/docs/site/src/pages/reference/console/ranges.mdx b/docs/site/src/pages/reference/console/ranges.mdx
index a34ca0859a..1b9c96ded7 100644
--- a/docs/site/src/pages/reference/console/ranges.mdx
+++ b/docs/site/src/pages/reference/console/ranges.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Ranges"
 heading: "Ranges"
 description: "Create, view, and manage ranges using the Console"
+prev: "Workspaces"
+prevURL: "/reference/console/workspaces"
+next: "Line Plots"
+nextURL: "/reference/console/line-plots"
 ---
 
 import { Icon } from "@synnaxlabs/media";
diff --git a/docs/site/src/pages/reference/console/schematics.mdx b/docs/site/src/pages/reference/console/schematics.mdx
index 4a4a13dd8a..f798500649 100644
--- a/docs/site/src/pages/reference/console/schematics.mdx
+++ b/docs/site/src/pages/reference/console/schematics.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "Schematics"
 heading: "Schematics"
 description: "Control hardware using schematics."
+prev: "Line Plots"
+prevURL: "/reference/console/line-plots"
 ---
 
 import { Icon } from "@synnaxlabs/media";
diff --git a/docs/site/src/pages/reference/console/ui-overview.mdx b/docs/site/src/pages/reference/console/ui-overview.mdx
index 39f4407e9f..94cb3262e4 100644
--- a/docs/site/src/pages/reference/console/ui-overview.mdx
+++ b/docs/site/src/pages/reference/console/ui-overview.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "UI Overview"
 heading: "Console UI Overview"
 description: "Navigate the Synnax Console UI."
+prev: "Clusters"
+prevURL: "/reference/console/clusters"
+next: "Channels"
+nextURL: "/reference/console/channels"
 ---
 import { Icon } from "@synnaxlabs/media";
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/console/workspaces.mdx b/docs/site/src/pages/reference/console/workspaces.mdx
index d1644fc178..18e8f93a8d 100644
--- a/docs/site/src/pages/reference/console/workspaces.mdx
+++ b/docs/site/src/pages/reference/console/workspaces.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Workspaces"
 heading: "Workspaces"
 description: "Organize and share console layouts with workspaces."
+prev: "Channels"
+prevURL: "/reference/console/channels"
+next: "Ranges"
+nextURL: "/reference/console/ranges"
 ---
 
 import { Image } from "@/components/Media";
diff --git a/docs/site/src/pages/reference/control/examples.mdx b/docs/site/src/pages/reference/control/examples.mdx
index 5c56c6e45c..a2d6e87512 100644
--- a/docs/site/src/pages/reference/control/examples.mdx
+++ b/docs/site/src/pages/reference/control/examples.mdx
@@ -2,6 +2,8 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Control"
 heading: "Control Hardware"
+prev: "Sequence Basics"
+prevURL: "/reference/control/sequence-basics"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/control/get-started.mdx b/docs/site/src/pages/reference/control/get-started.mdx
index 702f97b4ea..5e19011fee 100644
--- a/docs/site/src/pages/reference/control/get-started.mdx
+++ b/docs/site/src/pages/reference/control/get-started.mdx
@@ -2,6 +2,8 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Control"
 heading: "Control Hardware"
+next: "Sequence Basics"
+nextURL: "/reference/control/sequence-basics"
 ---
 import { Divider } from "@synnaxlabs/pluto";
 import { Image } from "@/components/Media";
@@ -14,7 +16,7 @@ Python control module.
 
 ## Using Channels for Control
 
-Synnax controls hardware through it's channel streaming system. In Synnax, channels are
+Synnax controls hardware through its channel streaming system. In Synnax, channels are
 simply pipes that pass samples from one place to another. Internally, Synnax treats 
 channels that are used for data acquisition and channels used for control the same way.
 While this may seem strange at first, it allows for high-degrees of flexibility in how
diff --git a/docs/site/src/pages/reference/control/index.astro b/docs/site/src/pages/reference/control/index.astro
new file mode 100644
index 0000000000..c55a7b2a35
--- /dev/null
+++ b/docs/site/src/pages/reference/control/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/control/get-started");
+---
diff --git a/docs/site/src/pages/reference/control/sequence-basics.mdx b/docs/site/src/pages/reference/control/sequence-basics.mdx
index eb741f9f0b..e0743845f8 100644
--- a/docs/site/src/pages/reference/control/sequence-basics.mdx
+++ b/docs/site/src/pages/reference/control/sequence-basics.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Control Sequences"
 heading: "Control Sequence Basics"
+prev: "Get Started"
+prevURL: "/reference/control/get-started"
+next: "Examples"
+nextURL: "/reference/control/examples"
 ---
 import { Divider } from "@synnaxlabs/pluto";
 import { Image } from "@/components/Media";
diff --git a/docs/site/src/pages/reference/device-drivers/get-started.mdx b/docs/site/src/pages/reference/device-drivers/get-started.mdx
index ff2cdb1f1e..973efcd6c0 100644
--- a/docs/site/src/pages/reference/device-drivers/get-started.mdx
+++ b/docs/site/src/pages/reference/device-drivers/get-started.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "Device Drivers"
 heading: "Device Drivers"
 description: "Browse available device drivers to connect your hardware."
+next: "OPC UA"
+nextURL: "/reference/device-drivers/opc-ua/connect-server"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 
diff --git a/docs/site/src/pages/reference/device-drivers/index.astro b/docs/site/src/pages/reference/device-drivers/index.astro
new file mode 100644
index 0000000000..cf940b5a12
--- /dev/null
+++ b/docs/site/src/pages/reference/device-drivers/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/device-drivers/get-started");
+---
diff --git a/docs/site/src/pages/reference/device-drivers/ni/analog-read-task.mdx b/docs/site/src/pages/reference/device-drivers/ni/analog-read-task.mdx
index 83a44e8f3d..8583a3d0ba 100644
--- a/docs/site/src/pages/reference/device-drivers/ni/analog-read-task.mdx
+++ b/docs/site/src/pages/reference/device-drivers/ni/analog-read-task.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "NI | Analog Read Task"
 heading: "NI Analog Read Task"
 description: "Learn how to create an analog read task for NI hardware."   
+next: "Digital Write Task"
+nextURL: "/reference/device-drivers/ni/digital-write-task"
+prev: "Configure Device"
+prevURL: "/reference/device-drivers/ni/configure-device"
 ---
 import { Icon } from "@synnaxlabs/media"
 import { Divider, Text, Note } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/device-drivers/ni/configure-device.mdx b/docs/site/src/pages/reference/device-drivers/ni/configure-device.mdx
index 84b5c27b9d..bd2b775b9f 100644
--- a/docs/site/src/pages/reference/device-drivers/ni/configure-device.mdx
+++ b/docs/site/src/pages/reference/device-drivers/ni/configure-device.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "NI | Configure Device"
 heading: "Configure an NI Device"
 description: "Learn how to connect and configure National Instruments modules."
+prev: "Get Started"
+prevURL: "/reference/device-drivers/ni/get-started"
+next: "Analog Read Task"
+nextURL: "/reference/device-drivers/ni/analog-read-task"
 ---
 
 import { StepText } from "@/components/StepText";
diff --git a/docs/site/src/pages/reference/device-drivers/ni/digital-read-task.mdx b/docs/site/src/pages/reference/device-drivers/ni/digital-read-task.mdx
index 57afe73c84..e65f56c4e1 100644
--- a/docs/site/src/pages/reference/device-drivers/ni/digital-read-task.mdx
+++ b/docs/site/src/pages/reference/device-drivers/ni/digital-read-task.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "NI | Digital Read Task"
 heading: "NI Digital Read Task"
 description: "Learn how to create a digital read task for NI hardware."   
+prev: "Digital Write Task"
+prevURL: "/reference/device-drivers/ni/digital-write-task"
 ---
 import { Icon } from "@synnaxlabs/media";
 import { Divider, Note } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/device-drivers/ni/digital-write-task.mdx b/docs/site/src/pages/reference/device-drivers/ni/digital-write-task.mdx
index aaf530bbda..5dbfb05383 100644
--- a/docs/site/src/pages/reference/device-drivers/ni/digital-write-task.mdx
+++ b/docs/site/src/pages/reference/device-drivers/ni/digital-write-task.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "NI | Digital Write Task"
 heading: "NI Digital Write Task"
 description: "Learn how to create a digital write task for NI hardware."
+prev: "Analog Read Task"
+prevURL: "/reference/device-drivers/ni/analog-read-task"
+next: "Digital Read Task"
+nextURL: "/reference/device-drivers/ni/digital-read-task"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto";
 import { StepText } from "@/components/StepText";
diff --git a/docs/site/src/pages/reference/device-drivers/ni/get-started.mdx b/docs/site/src/pages/reference/device-drivers/ni/get-started.mdx
index 4188e12ff9..47a40f6d55 100644
--- a/docs/site/src/pages/reference/device-drivers/ni/get-started.mdx
+++ b/docs/site/src/pages/reference/device-drivers/ni/get-started.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "NI | Get Started"
 heading: "National Instruments Device Driver"
 description: "Learn how to acquire data from and control National Instruments hardware using Synnax."
+next: "Configure a Device"
+nextURL: "/reference/device-drivers/ni/configure-device"
 ---
 
 import { Divider, Note } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/device-drivers/ni/index.astro b/docs/site/src/pages/reference/device-drivers/ni/index.astro
new file mode 100644
index 0000000000..862d2d484e
--- /dev/null
+++ b/docs/site/src/pages/reference/device-drivers/ni/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/device-drivers/ni/get-started");
+---
diff --git a/docs/site/src/pages/reference/device-drivers/opc-ua/connect-server.mdx b/docs/site/src/pages/reference/device-drivers/opc-ua/connect-server.mdx
index 9cc40ddd9b..efe3f2fee4 100644
--- a/docs/site/src/pages/reference/device-drivers/opc-ua/connect-server.mdx
+++ b/docs/site/src/pages/reference/device-drivers/opc-ua/connect-server.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "OPC UA | Connect Server"
 heading: "Connect to an OPC UA Server"
 description: "Connect to an OPC UA server using Synnax."
+next: "Read Task"
+nextURL: "/reference/device-drivers/opc-ua/read-task"
 ---
 import { Divider } from "@synnaxlabs/pluto";
 import { Video } from "@/components/Media";
diff --git a/docs/site/src/pages/reference/device-drivers/opc-ua/index.astro b/docs/site/src/pages/reference/device-drivers/opc-ua/index.astro
new file mode 100644
index 0000000000..9af55197d3
--- /dev/null
+++ b/docs/site/src/pages/reference/device-drivers/opc-ua/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/device-drivers/opc-ua/connect-server");
+---
diff --git a/docs/site/src/pages/reference/device-drivers/opc-ua/read-task.mdx b/docs/site/src/pages/reference/device-drivers/opc-ua/read-task.mdx
index 772bd76a78..7f0b8f1b88 100644
--- a/docs/site/src/pages/reference/device-drivers/opc-ua/read-task.mdx
+++ b/docs/site/src/pages/reference/device-drivers/opc-ua/read-task.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "OPC UA | Read Task"
 heading: "OPC UA Read Task"
 description: "Read data from OPC UA servers with read tasks."
+next: "Write Task"
+nextURL: "/reference/device-drivers/opc-ua/write-task"
+prev: "Connect Server"
+prevURL: "/reference/device-drivers/opc-ua/connect-server"
 ---
 import { Icon } from "@synnaxlabs/media";
 import { Divider, Note } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/device-drivers/opc-ua/write-task.mdx b/docs/site/src/pages/reference/device-drivers/opc-ua/write-task.mdx
index dbd8f8ee7e..97852e7941 100644
--- a/docs/site/src/pages/reference/device-drivers/opc-ua/write-task.mdx
+++ b/docs/site/src/pages/reference/device-drivers/opc-ua/write-task.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "OPC UA | Write Task"
 heading: "OPC UA Write Task"
 description: "Write data to OPC UA servers with write tasks."
+prev: "Read Task"
+prevURL: "/reference/device-drivers/opc-ua/read-task"
 ---
 
 import { Icon } from "@synnaxlabs/media";
diff --git a/docs/site/src/pages/reference/pluto/example-app.mdx b/docs/site/src/pages/reference/pluto/example-app.mdx
index 1975d2b54b..8e8205a321 100644
--- a/docs/site/src/pages/reference/pluto/example-app.mdx
+++ b/docs/site/src/pages/reference/pluto/example-app.mdx
@@ -2,6 +2,8 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Pluto Example App"
 description: "Run an example visualization UI built with Pluto."
+prev: "Line Plot"
+prevURL: "/reference/pluto/line-plot"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import { RealTimePlot, HistoricalPlot } from "@/components/pluto/Plot"
diff --git a/docs/site/src/pages/reference/pluto/get-started.mdx b/docs/site/src/pages/reference/pluto/get-started.mdx
index b7e0150858..2b489fbe70 100644
--- a/docs/site/src/pages/reference/pluto/get-started.mdx
+++ b/docs/site/src/pages/reference/pluto/get-started.mdx
@@ -2,6 +2,8 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Pluto Components"
 description: "Use Pluto components to build custom user interfaces."
+next: "Provider and Canvas"
+nextURL: "/reference/pluto/provider-and-canvas"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto";
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/pluto/index.astro b/docs/site/src/pages/reference/pluto/index.astro
new file mode 100644
index 0000000000..eadc17452e
--- /dev/null
+++ b/docs/site/src/pages/reference/pluto/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/pluto/get-started");
+---
diff --git a/docs/site/src/pages/reference/pluto/line-plot.mdx b/docs/site/src/pages/reference/pluto/line-plot.mdx
index d7ef0f15fd..8083352873 100644
--- a/docs/site/src/pages/reference/pluto/line-plot.mdx
+++ b/docs/site/src/pages/reference/pluto/line-plot.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Line Plot"
 description: "Use the Line Plot component to display real-time or historical data."
+prev: "Theming"
+prevURL: "/reference/pluto/theming"
+next: "Example App"
+nextURL: "/reference/pluto/example-app"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import { RealTimePlot, HistoricalPlot } from "@/components/pluto/Plot"
diff --git a/docs/site/src/pages/reference/pluto/provider-and-canvas.mdx b/docs/site/src/pages/reference/pluto/provider-and-canvas.mdx
index 3c7d689fc3..a3ee878e6f 100644
--- a/docs/site/src/pages/reference/pluto/provider-and-canvas.mdx
+++ b/docs/site/src/pages/reference/pluto/provider-and-canvas.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Provider and Canvas"
 description: "Configure the Pluto Provider and Canvas components."
+prev: "Get Started"
+prevURL: "/reference/pluto/get-started"
+next: "Theming"
+nextURL: "/reference/pluto/theming"
 ---
 import { Divider } from "@synnaxlabs/pluto";
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/pluto/theming.mdx b/docs/site/src/pages/reference/pluto/theming.mdx
index 404065362a..3158d360fd 100644
--- a/docs/site/src/pages/reference/pluto/theming.mdx
+++ b/docs/site/src/pages/reference/pluto/theming.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Theming"
 description: "Configure the appearance of Pluto components."
+next: "Line Plot"
+nextURL: "/reference/pluto/line-plot"
+prev: "Provider and Canvas"
+prevURL: "/reference/pluto/provider-and-canvas"
 ---
 import { Divider } from "@synnaxlabs/pluto";
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/python-client/channels.mdx b/docs/site/src/pages/reference/python-client/channels.mdx
index 7eafc599ec..2eca8274ad 100644
--- a/docs/site/src/pages/reference/python-client/channels.mdx
+++ b/docs/site/src/pages/reference/python-client/channels.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Channels"
 description: "Create, retrieve, and delete channels using the Synnax Python client."
+next: "Ranges"
+nextURL: "/reference/python-client/ranges"
+prev: "Get Started"
+prevURL: "/reference/python-client/get-started"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/python-client/delete-data.mdx b/docs/site/src/pages/reference/python-client/delete-data.mdx
index b6298a7b61..28bce4b578 100644
--- a/docs/site/src/pages/reference/python-client/delete-data.mdx
+++ b/docs/site/src/pages/reference/python-client/delete-data.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Delete Data"
 description: "Use the Python client to delete data from a Synnax cluster."
+next: "Series and Frames"
+nextURL: "/reference/python-client/series-and-frames"
+prev: "Stream Data"
+prevURL: "/reference/python-client/stream-data"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro"
diff --git a/docs/site/src/pages/reference/python-client/examples.mdx b/docs/site/src/pages/reference/python-client/examples.mdx
index 85a4f40fb1..a77fb74045 100644
--- a/docs/site/src/pages/reference/python-client/examples.mdx
+++ b/docs/site/src/pages/reference/python-client/examples.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Python Examples"
 description: "View examples for using the Synnax Python client."
+next: "Troubleshooting"
+nextURL: "/reference/python-client/troubleshooting"
+prev: "Series and Frames"
+prevURL: "/reference/python-client/series-and-frames"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/python-client/get-started.mdx b/docs/site/src/pages/reference/python-client/get-started.mdx
index 7d1df3a8de..5df9992191 100644
--- a/docs/site/src/pages/reference/python-client/get-started.mdx
+++ b/docs/site/src/pages/reference/python-client/get-started.mdx
@@ -2,7 +2,9 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Python Client"
 heading: "The Synnax Python Client"
-description: "Use the Synnax Python client to connect with a Synnax cluster."
+description: "Use the Synnax Python client to interact with a Synnax cluster."
+next: "Channels"
+nextURL: "/reference/python-client/channels"
 ---
 
 import { Divider, Note } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/python-client/index.astro b/docs/site/src/pages/reference/python-client/index.astro
new file mode 100644
index 0000000000..d51fe89d98
--- /dev/null
+++ b/docs/site/src/pages/reference/python-client/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/python-client/get-started");
+---
diff --git a/docs/site/src/pages/reference/python-client/ranges.mdx b/docs/site/src/pages/reference/python-client/ranges.mdx
index 0ee1959b83..d6a73e88a2 100644
--- a/docs/site/src/pages/reference/python-client/ranges.mdx
+++ b/docs/site/src/pages/reference/python-client/ranges.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Ranges"
 description: "Categorize your data with ranges."
+next: "Read Data"
+nextURL: "/reference/python-client/read-data"
+prev: "Channels"
+prevURL: "/reference/python-client/channels"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/python-client/read-data.mdx b/docs/site/src/pages/reference/python-client/read-data.mdx
index 2cd5a6145c..d26b84eb14 100644
--- a/docs/site/src/pages/reference/python-client/read-data.mdx
+++ b/docs/site/src/pages/reference/python-client/read-data.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Read Data"
 description: "Use the Python client to read from a Synnax cluster."
+next: "Write Data"
+nextURL: "/reference/python-client/write-data"
+prev: "Ranges"
+prevURL: "/reference/python-client/ranges"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/python-client/series-and-frames.mdx b/docs/site/src/pages/reference/python-client/series-and-frames.mdx
index 9a04e79f5c..38b569722f 100644
--- a/docs/site/src/pages/reference/python-client/series-and-frames.mdx
+++ b/docs/site/src/pages/reference/python-client/series-and-frames.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Series and Frames"
 description: "Learn how to use series and frames in the Python client."
+next: "Examples"
+nextURL: "/reference/python-client/examples"
+prev: "Delete Data"
+prevURL: "/reference/python-client/delete-data"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/python-client/stream-data.mdx b/docs/site/src/pages/reference/python-client/stream-data.mdx
index 7f533957f3..33ca28ec0e 100644
--- a/docs/site/src/pages/reference/python-client/stream-data.mdx
+++ b/docs/site/src/pages/reference/python-client/stream-data.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Stream Data"
 heading: "Stream Data"
 description: "Use the Python client to stream data from a Synnax cluster."
+next: "Delete Data"
+nextURL: "/reference/python-client/delete-data"
+prev: "Write Data"
+prevURL: "/reference/python-client/write-data"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/python-client/troubleshooting.mdx b/docs/site/src/pages/reference/python-client/troubleshooting.mdx
index 052f7a07b7..2e6a4a0ef4 100644
--- a/docs/site/src/pages/reference/python-client/troubleshooting.mdx
+++ b/docs/site/src/pages/reference/python-client/troubleshooting.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "Troubleshooting"
 heading: "Troubleshooting Guide"
 description: "Solve common issues when working with Synnax in Python."
+prev: "Examples"
+prevURL: "/reference/python-client/examples"
 ---
 import Code from "@/components/code/Code.astro";
 export const components = { pre: Code };
diff --git a/docs/site/src/pages/reference/python-client/write-data.mdx b/docs/site/src/pages/reference/python-client/write-data.mdx
index dba440c6ba..54c077a4d6 100644
--- a/docs/site/src/pages/reference/python-client/write-data.mdx
+++ b/docs/site/src/pages/reference/python-client/write-data.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Write Data"
 description: "Use the Python client to write to a Synnax cluster."
+next: "Stream Data"
+nextURL: "/reference/python-client/stream-data"
+prev: "Read Data"
+prevURL: "/reference/python-client/read-data"
 ---
 
 import { Divider } from "@synnaxlabs/pluto";
diff --git a/docs/site/src/pages/reference/typescript-client/channels.mdx b/docs/site/src/pages/reference/typescript-client/channels.mdx
index d7056403fc..d1537501b2 100644
--- a/docs/site/src/pages/reference/typescript-client/channels.mdx
+++ b/docs/site/src/pages/reference/typescript-client/channels.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Channels"
 description: "Learn how to work with channels using the Synnax TypeScript client."
+next: "Read Data"
+nextURL: "/reference/typescript-client/read-data"
+prev: "Get Started"
+prevURL: "/reference/typescript-client/get-started"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/typescript-client/delete-data.mdx b/docs/site/src/pages/reference/typescript-client/delete-data.mdx
index 4fdb09d034..42e3d1b867 100644
--- a/docs/site/src/pages/reference/typescript-client/delete-data.mdx
+++ b/docs/site/src/pages/reference/typescript-client/delete-data.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Delete Data"
 description: "Use the TypeScript client to delete data from a Synnax cluster."
+next: "Series and Frames"
+nextURL: "/reference/typescript-client/series-and-frames"
+prev: "Stream Data"
+prevURL: "/reference/typescript-client/stream-data"
 ---
 import { Divider, Note } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro"
diff --git a/docs/site/src/pages/reference/typescript-client/examples.mdx b/docs/site/src/pages/reference/typescript-client/examples.mdx
index 4faa48f81f..cd1e587331 100644
--- a/docs/site/src/pages/reference/typescript-client/examples.mdx
+++ b/docs/site/src/pages/reference/typescript-client/examples.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "TS Examples"
 heading: "TypeScript Examples"
 description: "Examples for using the Synnax TypeScript client."
+next: "Troubleshooting"
+nextURL: "/reference/typescript-client/troubleshooting"
+prev: "Timestamps"
+prevURL: "/reference/typescript-client/timestamps"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 
diff --git a/docs/site/src/pages/reference/typescript-client/get-started.mdx b/docs/site/src/pages/reference/typescript-client/get-started.mdx
index 1abe59beca..3b14845894 100644
--- a/docs/site/src/pages/reference/typescript-client/get-started.mdx
+++ b/docs/site/src/pages/reference/typescript-client/get-started.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "TypeScript - Get Started"
 heading: "The Synnax TypeScript Client"
 description: "Learn how to use our TypeScript client to interact with a Synnax cluster."
+next: "Channels"
+nextURL: "/reference/typescript-client/channels"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/typescript-client/index.astro b/docs/site/src/pages/reference/typescript-client/index.astro
new file mode 100644
index 0000000000..8527130852
--- /dev/null
+++ b/docs/site/src/pages/reference/typescript-client/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.rewrite("/reference/typescript-client/get-started");
+---
diff --git a/docs/site/src/pages/reference/typescript-client/read-data.mdx b/docs/site/src/pages/reference/typescript-client/read-data.mdx
index 27d0bd5326..28d7c98666 100644
--- a/docs/site/src/pages/reference/typescript-client/read-data.mdx
+++ b/docs/site/src/pages/reference/typescript-client/read-data.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Read Data"
 description: "Use the TypeScript Client to read from a Synnax cluster."
+next: "Write Data"
+nextURL: "/reference/typescript-client/write-data"
+prev: "Channels"
+prevURL: "/reference/typescript-client/channels"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/typescript-client/series-and-frames.mdx b/docs/site/src/pages/reference/typescript-client/series-and-frames.mdx
index 40366828ab..f78536b4e7 100644
--- a/docs/site/src/pages/reference/typescript-client/series-and-frames.mdx
+++ b/docs/site/src/pages/reference/typescript-client/series-and-frames.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Series and Frames"
 heading: "Series and Frames"
 description: "Work with series and frames to access and manipulate data."
+next: "Timestamps"
+nextURL: "/reference/typescript-client/timestamps"
+prev: "Delete Data"
+prevURL: "/reference/typescript-client/delete-data"
 ---
 import { Divider } from "@synnaxlabs/pluto"
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/typescript-client/stream-data.mdx b/docs/site/src/pages/reference/typescript-client/stream-data.mdx
index 0e188a6786..311927fd79 100644
--- a/docs/site/src/pages/reference/typescript-client/stream-data.mdx
+++ b/docs/site/src/pages/reference/typescript-client/stream-data.mdx
@@ -3,6 +3,10 @@ layout: "@/layouts/MainLayout.astro"
 title: "Stream Data"
 heading: "Stream Data"
 description: "Use the TypeScript client to stream data from a Synnax cluster."
+next: "Delete Data"
+nextURL: "/reference/typescript-client/delete-data"
+prev: "Write Data"
+prevURL: "/reference/typescript-client/write-data"
 ---
 import Code from "@/components/code/Code.astro";
 export const components = { pre: Code };
diff --git a/docs/site/src/pages/reference/typescript-client/timestamps.mdx b/docs/site/src/pages/reference/typescript-client/timestamps.mdx
index fafbce95cc..29516c5ca8 100644
--- a/docs/site/src/pages/reference/typescript-client/timestamps.mdx
+++ b/docs/site/src/pages/reference/typescript-client/timestamps.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Timestamps"
 description: "Learn how to work effectively with timestamps in the Synnax TypeScript client."
+next: "Examples"
+nextURL: "/reference/typescript-client/examples"
+prev: "Series and Frames"
+prevURL: "/reference/typescript-client/series-and-frames"
 ---
 import Code from "@/components/code/Code.astro";
 export const components = { pre: Code };
diff --git a/docs/site/src/pages/reference/typescript-client/troubleshooting.mdx b/docs/site/src/pages/reference/typescript-client/troubleshooting.mdx
index 0d19f03b21..f2f2e8385b 100644
--- a/docs/site/src/pages/reference/typescript-client/troubleshooting.mdx
+++ b/docs/site/src/pages/reference/typescript-client/troubleshooting.mdx
@@ -3,6 +3,8 @@ layout: "@/layouts/MainLayout.astro"
 title: "Troubleshooting"
 heading: "Troubleshooting"
 description: "Solve common issues with the TypeScript client."
+prev: "Examples"
+prevURL: "/reference/typescript-client/examples"
 ---
 
 import Code from "@/components/code/Code.astro";
diff --git a/docs/site/src/pages/reference/typescript-client/write-data.mdx b/docs/site/src/pages/reference/typescript-client/write-data.mdx
index 421f3ce402..72dcdbeb7d 100644
--- a/docs/site/src/pages/reference/typescript-client/write-data.mdx
+++ b/docs/site/src/pages/reference/typescript-client/write-data.mdx
@@ -2,6 +2,10 @@
 layout: "@/layouts/MainLayout.astro"
 title: "Write Data"
 description: "Use the TypeScript client to write to a Synnax cluster."
+next: "Stream Data"
+nextURL: "/reference/typescript-client/stream-data"
+prev: "Read Data"
+prevURL: "/reference/typescript-client/read-data"
 ---
 
 import Code from "@/components/code/Code.astro";
diff --git a/pluto/src/breadcrumb/Breadcrumb.tsx b/pluto/src/breadcrumb/Breadcrumb.tsx
index 6e24c7213c..2abf6e9053 100644
--- a/pluto/src/breadcrumb/Breadcrumb.tsx
+++ b/pluto/src/breadcrumb/Breadcrumb.tsx
@@ -8,7 +8,7 @@
 // included in the file licenses/APL.txt.
 
 import { Icon } from "@synnaxlabs/media";
-import { deep, Optional, toArray } from "@synnaxlabs/x";
+import { caseconv, deep, Optional, toArray } from "@synnaxlabs/x";
 import { FC, ReactElement } from "react";
 
 import { Align } from "@/align";
@@ -30,12 +30,32 @@ export type BreadcrumbProps<
   icon?: string;
   /** The breadcrumb items, either a single string or an array of strings. */
   children: string | string[];
+  url?: string | string[];
   /** Separator to use between breadcrumb items. Defaults to ".". */
   separator?: string;
   /** Whether to hide the first breadcrumb item. */
   hideFirst?: boolean;
 };
 
+const getContent = (children: string | string[], separator: string, shade: number) => {
+  const split = toArray(children)
+    .map((el) => el.split(separator))
+    .flat();
+  const content: (ReactElement | string)[] = split
+    .map((el, index) => [
+      <Icon.Caret.Right
+        key={`${el}-${index}`}
+        style={{
+          transform: "scale(0.8) translateY(1px)",
+          color: CSS.shade(shade),
+        }}
+      />,
+      el,
+    ])
+    .flat();
+  return content;
+};
+
 /**
  * Breadcrumb component for displaying a breadcrumb navigation.
  *
@@ -54,12 +74,14 @@ export const Breadcrumb = <
   shade = 7,
   weight = 450,
   size = 0.5,
+  url,
   level = "p",
   separator = ".",
   className,
   hideFirst = false,
   ...props
 }: BreadcrumbProps<E, L>): ReactElement => {
+  if (url != null) children = url;
   let iconC: ReactElement | undefined = undefined;
   if (icon) {
     if (isValidElement(icon)) iconC = icon;
@@ -68,21 +90,7 @@ export const Breadcrumb = <
       iconC = <IconC />;
     }
   }
-  const split = toArray(children)
-    .map((el) => el.split(separator))
-    .flat();
-  const content: (ReactElement | string)[] = split
-    .map((el, index) => [
-      <Icon.Caret.Right
-        key={`${el}-${index}`}
-        style={{
-          transform: "scale(0.8) translateY(1px)",
-          color: CSS.shade(shade),
-        }}
-      />,
-      el,
-    ])
-    .flat();
+  const content = getContent(children, separator, shade);
   if (hideFirst) content.shift();
   return (
     <Text.WithIcon
@@ -98,3 +106,45 @@ export const Breadcrumb = <
     </Text.WithIcon>
   );
 };
+
+export interface URLProps extends Omit<BreadcrumbProps, "children" | "url"> {
+  url: string;
+}
+
+export const URL = ({
+  url,
+  className,
+  level = "p",
+  separator = ".",
+  shade = 7,
+}: URLProps) => {
+  const content = getContent(url, separator, shade);
+  return (
+    <Align.Space
+      className={CSS(className, CSS.B("breadcrumb"))}
+      direction="x"
+      size="small"
+      align="center"
+    >
+      {content.map((el, index) => {
+        if (isValidElement(el)) return el;
+        if (el == null) return null;
+        const split = url.split(separator);
+        const idx = split.indexOf(el);
+        let href = url
+          .split(separator)
+          .slice(0, idx + 1)
+          .join("/");
+        href = "/" + href;
+        return (
+          <Text.Link level={level} key={index} href={href}>
+            {el
+              .split("-")
+              .map((el) => caseconv.capitalize(el))
+              .join(" ")}
+          </Text.Link>
+        );
+      })}
+    </Align.Space>
+  );
+};
diff --git a/x/ts/src/caseconv/caseconv.ts b/x/ts/src/caseconv/caseconv.ts
index b860088086..29405d3075 100644
--- a/x/ts/src/caseconv/caseconv.ts
+++ b/x/ts/src/caseconv/caseconv.ts
@@ -89,7 +89,10 @@ export const camelToSnake = createConverter(camelToSnakeStr);
  * @param str - The string to capitalize.
  * @returns The string with the first character capitalized.
  */
-export const capitalize = (str: string): string => str[0].toUpperCase() + str.slice(1);
+export const capitalize = (str: string): string => {
+  if (str.length === 0) return str;
+  return str[0].toUpperCase() + str.slice(1);
+};
 
 /**
  * Options parameter for convert function