[docs/site] - added breadcrumbs and next and prev buttons to docs site

synnaxlabs · Sep 15, 2024 · 46e031a · 46e031a
1 parent 1ca6e7b
commit 46e031a
Show file tree

Hide file tree

Showing 75 changed files with 423 additions and 25 deletions.
diff --git a/docs/site/src/components/NextPrev.astro 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";