Update Getting-Started, Icons, Tokens and Guides for a first preview release of the documentation

.gitignore

@@ -42,6 +42,7 @@ next-env.d.ts
 
 # storybook
 build-storybook.log
+storybook-static
 
 # storybook generated doc
 /packages/tokens/docs/

apps/docs/.eslintrc.json

@@ -11,13 +11,18 @@
     "globals": {
         "BreakpointTable": true,
         "Card": true,
+        "CardLink": true,
+        "CardLinkList": true,
         "Callout": true,
         "Collapsible": true,
+        "Expand": true,
         "TokenTable": true,
         "MotionPreview": true,
+        "Figure": true,
         "Footnote": true,
         "TypographyTable": true,
         "TypographyVariantTable": true,
+        "Tag": true,
         "Tabs": true,
         "TableSection": true,
         "SimpleTable": true,

apps/docs/app/404.css

@@ -0,0 +1,38 @@
+.hd-layout_404 {
+    text-align: center;
+}
+
+.hd-404__title {
+    font-weight: 400;
+    font-size: clamp(2rem, 5vw, 4rem);
+    margin-top: 1rem;
+    margin-bottom: 2rem
+}
+
+.hd-404__subtitle {
+    font-weight: 400;
+    font-size: clamp(1rem, 4vw, 1.825rem);
+    margin-bottom: 2rem;
+}
+
+.hd-404__button {
+    border: none;
+    border-radius: var(--hd-border-radius-md);
+    height: 3rem;
+    padding: 0 1rem;
+    font-size: 1.25rem;
+    text-align: center;
+    background-color: var(--hd-accent-700);
+    display: inline-flex;
+    align-items: center;
+    color: var(--hd-white);
+    margin-top: 2rem;
+}
+
+.hd-404__button:hover {
+    background-color: var(--hd-accent-900);
+}
+
+.hd-404__button:active {
+    background-color: var(--hd-accent-400);
+}

apps/docs/app/getting-started/[...slug]/page.tsx

@@ -1,9 +1,9 @@
-import { notFound } from "next/navigation";
 import { allGettingStarteds } from "contentlayer/generated";
+import { notFound } from "next/navigation";
 
+import getSectionLinks from "@/app/lib/getSectionLinks.ts";
 import Aside from "@/app/ui/layout/aside/Aside.tsx";
 import Mdx from "@/components/mdx/Mdx.tsx";
-import getSectionLinks from "@/app/lib/getSectionLinks.ts";
 import Title from "@/components/title/Title";
 
 interface PageProps {
@@ -19,9 +19,8 @@ export async function generateStaticParams() {
 }
 
 export default function IconPage({ params }: PageProps) {
-    const [slug] = params.slug;
-
-    const pages = allGettingStarteds.find(page => page.slug === slug);
+    const [section, type] = params.slug;
+    const pages = allGettingStarteds.find(page => page.slug === type && page.section === section);
 
     if (!pages) {
         notFound();

apps/docs/app/getting-started/layout.tsx

@@ -1,35 +1,36 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { allGettingStarteds } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import getPageLinks from "@/app/lib/getPageLinks";
+import getSectionLinks from "@/app/lib/getSectionLinks";
 import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
 import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
-import getSectionLinks from "@/app/lib/getSectionLinks";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
-import getPageLinks from "@/app/lib/getPageLinks";
+import { allGettingStarteds } from "contentlayer/generated";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
+import type { ReactNode } from "react";
 
-export default function TokenLayout({ children }: { children: ReactNode }) {
-    const slug = useSelectedLayoutSegment();
-    const pageContent = allGettingStarteds.find(page => page.slug === slug);
-    const allGettingStartedsLinks = getPageLinks(allGettingStarteds);
+export default function GettingStartedLayout({ children }: { children: ReactNode }) {
+    const selectedLayoutSegment = useSelectedLayoutSegment();
+    const [section, type] = selectedLayoutSegment?.split("/") ?? ["", ""];
 
+    const pageContent = allGettingStarteds.find(page => page.slug === type && page.section === section);
     if (!pageContent) {
-        return null;
+        return notFound();
     }
 
     const sectionLinks = getSectionLinks(pageContent);
+    const allGettingStartedsLinks = getPageLinks(allGettingStarteds, {
+        order: ["overview", "installation-path", "advanced-options", "guides"]
+    });
 
     return (
-        <>
-            <SidebarProvider>
-                <SubHeader links={sectionLinks} />
-                <Wrapper type="with-sidebar">
-                    <Sidebar links={allGettingStartedsLinks} />
-                    {children}
-                </Wrapper>
-            </SidebarProvider>
-        </>
+        <SidebarProvider>
+            <SubHeader links={sectionLinks} />
+            <Wrapper type="with-sidebar">
+                <Sidebar links={allGettingStartedsLinks} />
+                {children}
+            </Wrapper>
+        </SidebarProvider>
     );
 }

apps/docs/app/guides/[...slug]/page.tsx

@@ -7,19 +7,21 @@ import Mdx from "@/components/mdx/Mdx.tsx";
 
 interface PageProps {
     params: {
-        slug: string;
+        slug: string[];
     };
 }
 
 export async function generateStaticParams() {
-    return allGuides.map(({ slug, section }) => ({
-        slug: [section, slug]
-    }));
+    return allGuides.map(({ slug, section }) => {
+        return ({
+            slug: [slug, section]
+        });
+    });
 }
 
 export default function GuidePage({ params }: PageProps) {
-    const [section, type] = params.slug;
-    const guides = allGuides.find(icon => icon.slug === type && icon.section === section);
+    const [section, type] = params.slug.length === 1 ? ["guides", ...params.slug] : params.slug;
+    const guides = allGuides.find(guide => guide.slug === type && guide.section === section);
 
     if (!guides) {
         notFound();

apps/docs/app/guides/layout.tsx

@@ -1,37 +1,41 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { allGuides } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import getPageLinks from "@/app/lib/getPageLinks";
+import getSectionLinks from "@/app/lib/getSectionLinks";
 import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
-import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
 import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
-import getSectionLinks from "@/app/lib/getSectionLinks";
+import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
-import getPageLinks from "@/app/lib/getPageLinks";
+import { allGuides } from "contentlayer/generated";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
+import type { ReactNode } from "react";
 
-export default function TokenLayout({ children }: { children: ReactNode }) {
+export default function GuideLayout({ children }: { children: ReactNode }) {
     const selectedLayoutSegment = useSelectedLayoutSegment();
-    const [section, type] = selectedLayoutSegment?.split("/") ?? ["", ""];
+    let segments = selectedLayoutSegment?.split("/") ?? ["", ""];
+    if (segments.length === 1) {
+        segments = ["guides", ...segments];
+    }
+    const [section, type] = segments;
 
     const pageContent = allGuides.find(icon => icon.slug === type && icon.section === section);
 
     if (!pageContent) {
-        return null;
+        return notFound();
     }
 
     const sectionLinks = getSectionLinks(pageContent);
-    const allGuidesLinks = getPageLinks(allGuides);
+    const allGuidesLinks = getPageLinks(allGuides, {
+        order: ["overview", "guides"]
+    });
 
     return (
-        <>
-            <SidebarProvider>
-                <SubHeader links={sectionLinks} />
-                <Wrapper type="with-sidebar">
-                    <Sidebar links={allGuidesLinks} />
-                    {children}
-                </Wrapper>
-            </SidebarProvider>
-        </>
+        <SidebarProvider>
+            <SubHeader links={sectionLinks} />
+            <Wrapper type="with-sidebar">
+                <Sidebar links={allGuidesLinks} />
+                {children}
+            </Wrapper>
+        </SidebarProvider>
     );
 }

apps/docs/app/home.css

@@ -168,6 +168,16 @@ a.hd-home-sample__item:hover::after {
     transition: opacity 0.2s ease, transform 0.1s ease-in;
 }
 
+.hd-home-sample__title-tag {
+    align-self: center;
+    border-radius: var(--hd-border-radius-sm);
+    background-color: var(--hd-color-accent-surface-strong);
+    color: var(--hd-white);
+    font-size: 0.75rem;
+    font-weight: 400;
+    padding: var(--hd-space-05);
+}
+
 .hd-home-sample__tagline {
     color: var(--hd-color-neutral-text-weak);
     font-size: 1rem;

apps/docs/app/icons/layout.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { allIcons } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import getPageLinks from "@/app/lib/getPageLinks";
+import getSectionLinks from "@/app/lib/getSectionLinks";
 import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
 import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
-import getSectionLinks from "@/app/lib/getSectionLinks";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
-import getPageLinks from "@/app/lib/getPageLinks";
+import { allIcons } from "contentlayer/generated";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
+import type { ReactNode } from "react";
 
 export default function TokenLayout({ children }: { children: ReactNode }) {
     const selectedLayoutSegment = useSelectedLayoutSegment();
@@ -17,7 +17,7 @@ export default function TokenLayout({ children }: { children: ReactNode }) {
     const pageContent = allIcons.find(icon => icon.slug === type && icon.section === section);
 
     if (!pageContent) {
-        return null;
+        return notFound;
     }
 
     const sectionLinks = getSectionLinks(pageContent);

apps/docs/app/layout.css

@@ -88,6 +88,7 @@ main {
 .hd-content p a,
 .hd-content li a {
     text-decoration: underline;
+    color: var(--hd-color-accent-text)
 }
 
 /* reset the underline for the card */

apps/docs/app/not-found.tsx

@@ -1,8 +1,14 @@
+"use client";
+
+import "./404.css";
+
 export default function Custom404() {
     return (
-        <main className="hd-wrapper">
+        <main className="hd-layout__wrapper hd-layout_404">
             <article>
-                <h1>404 - Page Not Found</h1>
+                <h1 className="hd-404__title">Oops!</h1>
+                <h2 className="hd-404__subtitle">You hopped on the wrong side of the pond.</h2>
+                <a className="hd-404__button" href="/">Back to the shore</a>
             </article>
         </main>
     );