Docs: Initial navigation sidebar.

NordcomInc · Sep 24, 2024 · 6ca666d · 6ca666d
1 parent 3b006f0
commit 6ca666d
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 35 deletions.
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -26,9 +26,7 @@ let config = {
     experimental: {
         appNavFailHandling: true,
         caseSensitiveRoutes: true,
-        mdxRs: {
-            mdxType: 'gfm'
-        },
+        mdxRs: true,
         optimizePackageImports: [],
         optimizeServerReact: true,
         parallelServerBuildTraces: true,

diff --git a/docs/src/app/docs/components/[name]/page.tsx b/docs/src/app/docs/components/[name]/page.tsx
@@ -21,7 +21,9 @@ export default async function ComponentDocsPage({ params: { name } }: { params:
 
     return (
         <>
-            <Heading level="h1">{name}</Heading>
+            <Heading level="h1" className="capitalize">
+                {name}
+            </Heading>
         </>
     );
 }
diff --git a/docs/src/app/docs/components/layout.tsx b/docs/src/app/docs/components/layout.tsx
@@ -1,6 +1,4 @@
-import { Card, Label } from '@nordcom/nordstar';
 import type { Metadata } from 'next';
-import Link from 'next/link';
 
 export const metadata: Metadata = {
     metadataBase: new URL(`https://nordstar.dev/docs/components/`),
@@ -11,28 +9,5 @@ export const metadata: Metadata = {
 };
 
 export default async function DocsLayout({ children }: { children: React.ReactNode }) {
-    return (
-        <div className="flex flex-col-reverse gap-3 md:grid md:grid-cols-[18rem_1fr]">
-            <Card className="[&>a]:transition-color font-extrabold [&>a]:block [&>a]:text-inherit [&>a]:hover:text-primary [&>a]:active:text-primary">
-                <Link href="/docs/">Overview</Link>
-
-                <Label className="pt-3">Components</Label>
-                <Link href="/docs/button/">Button</Link>
-                <Link href="/docs/card/">Card</Link>
-                <Link href="/docs/details/">Details</Link>
-                <Link href="/docs/input/">Input</Link>
-
-                <Label className="pt-3">Layout</Label>
-                <Link href="/docs/header/">Header</Link>
-                <Link href="/docs/view/">View</Link>
-
-                <Label className="pt-3">Typography</Label>
-                <Link href="/docs/accented/">Accented</Link>
-                <Link href="/docs/heading/">Heading</Link>
-                <Link href="/docs/label/">label</Link>
-            </Card>
-
-            <Card>{children}</Card>
-        </div>
-    );
+    return <>{children}</>;
 }
diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx
@@ -1,6 +1,8 @@
-import '@/styles/base.scss';
+import * as Nordstar from '@nordcom/nordstar';
+import { Label } from '@nordcom/nordstar';
 
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import type { ReactNode } from 'react';
 
 export const metadata: Metadata = {
@@ -11,6 +13,53 @@ export const metadata: Metadata = {
     }
 };
 
+function NavBlock({ label, href, children }: { label: string; href: string; children: ReactNode }) {
+    return (
+        <section className="flex flex-col gap-4">
+            <Label as={Link} href={href} className="block text-base leading-none text-foreground">
+                {label}
+            </Label>
+
+            <div className="flex flex-col gap-4 px-3 text-base font-normal leading-none text-foreground-highlight *:flex *:gap-3 *:text-inherit *:leading-none *:transition-colors *:before:block *:before:content-['•']">
+                {children}
+            </div>
+        </section>
+    );
+}
+
 export default function DocsLayout({ children }: { children: ReactNode }) {
-    return <>{children}</>;
+    return (
+        <div className="grid grid-cols-[18rem_1fr] gap-6">
+            <nav className="flex flex-col gap-6">
+                <NavBlock label="Guide" href="/docs/">
+                    <Link href="/docs/getting-started/" className="hover:text-primary">
+                        Introduction
+                    </Link>
+                    <Link href="/docs/installation/" className="hover:text-primary">
+                        Installation
+                    </Link>
+                </NavBlock>
+
+                <NavBlock label="Customization" href="/docs/customization/">
+                    <Link href="/docs/customization/theme/" className="hover:text-primary">
+                        Theme
+                    </Link>
+                    <Link href="/docs/customization/system/" className="hover:text-primary">
+                        System
+                    </Link>
+                </NavBlock>
+
+                <NavBlock label="Components" href="/docs/components/">
+                    {Object.keys(Nordstar)
+                        .filter((key) => (Nordstar as any)[key].displayName)
+                        .map((key) => (
+                            <Link key={key} href={`/docs/components/${key}/`} className="hover:text-primary">
+                                {key}
+                            </Link>
+                        ))}
+                </NavBlock>
+            </nav>
+            <section>{children}</section>
+        </div>
+    );
 }
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import '@/styles/base.scss';
+import '@/styles/globals.css';
 
 import { Providers } from '@/components/providers';
 import { Card, cn, Header, View } from '@nordcom/nordstar';

diff --git a/docs/src/styles/base.scss → docs/src/styles/globals.css b/docs/src/styles/base.scss → docs/src/styles/globals.css
diff --git a/packages/core/system/README.md b/packages/core/system/README.md
@@ -1,4 +1,4 @@
-# [@nordcom/nordstar-system](https://nordstar.dev/docs/system/?utm_source=nordstar&utm_campaign=oss)
+# [@nordcom/nordstar-system](https://nordstar.dev/docs/customization/system/?utm_source=nordstar&utm_campaign=oss)
 
 General utility libraries and tools used by all of the Nordstar components, hooks and packages. Also currently provides the theming for all components, which should be extracted to another package.
 

diff --git a/packages/core/system/package.json b/packages/core/system/package.json
@@ -66,7 +66,7 @@
     "bugs": {
         "url": "https://github.com/NordcomInc/nordstar/issues"
     },
-    "homepage": "https://nordstar.dev/docs/system/",
+    "homepage": "https://nordstar.dev/docs/customization/system/",
     "scripts": {
         "build": "vite build",
         "dev": "vite build --watch",