Added a getting started page

apps/docs/.eslintrc.json

@@ -12,6 +12,8 @@
     },
     "globals": {
         "Card": true,
+        "Callout": true,
+        "Collapsible": true,
         "Table": true,
         "MotionPreview": true,
         "Footnote": true,

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

@@ -0,0 +1,43 @@
+import { notFound } from "next/navigation";
+import { allGettingStarteds } from "contentlayer/generated";
+
+import Aside from "@/app/ui/layout/aside/Aside.tsx";
+import Mdx from "@/components/mdx/Mdx.tsx";
+import getSectionLinks from "@/app/lib/getSectionLinks.ts";
+
+interface PageProps {
+    params: {
+        slug: string[];
+    };
+}
+
+export async function generateStaticParams() {
+    return allGettingStarteds.map(({ section }) => ({
+        slug: [section]
+    }));
+}
+
+export default function GettingStartedPage({ params }: PageProps) {
+    const [section] = params.slug;
+
+    const pages = allGettingStarteds.find(page => page.slug === section);
+
+
+    if (!pages) {
+        notFound();
+    }
+
+    const sectionLinks = getSectionLinks(pages);
+
+    return (
+        <div className="hd-container">
+            <Aside title="On this page" links={sectionLinks} />
+            <main>
+                <article className="hd-content" key={pages._id}>
+                    <h1 className="hd-title hd-title--level1">{pages.title}</h1>
+                    <Mdx code={pages.body.code} />
+                </article>
+            </main>
+        </div>
+    );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { allGettingStarteds } from "contentlayer/generated";
+import { useSelectedLayoutSegment } from "next/navigation";
+import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
+import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
+import getSectionLinks from "@/app/lib/getSectionLinks";
+import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
+
+export default function TokenLayout({ children }: { children: ReactNode }) {
+    const slug = useSelectedLayoutSegment();
+    const pageContent = allGettingStarteds.find(page => page.slug === slug);
+
+    if (!pageContent) {
+        return null;
+    }
+
+    const sectionLinks = getSectionLinks(pageContent);
+
+    return (
+        <>
+            <SidebarProvider>
+                <SubHeader links={sectionLinks} />
+                <div className="hd-wrapper hd-flex">
+                    <Sidebar data={allGettingStarteds} />
+                    {children}
+                </div>
+            </SidebarProvider>
+        </>
+    );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { allPages } from "contentlayer/generated";
+import Mdx from "@/components/mdx/Mdx";
+import { notFound } from "next/navigation";
+
+export default function IconPage() {
+    const page = allPages.find(iconPage => iconPage._id === "pages/icons.mdx");
+
+    if (!page) {
+        notFound();
+    }
+
+    return (
+        <div className="hd-wrapper hd-flex">
+            <main>
+                <article className="hd-content" key={page._id}>
+                    {page.body && <Mdx code={page.body.code} />}
+                </article>
+            </main>
+        </div>
+    );
+}

apps/docs/app/layout.css

@@ -53,7 +53,7 @@ p {
 }
 
 .hd-content p + * {
-    margin-block-start: var(--hd-space-3);
+    margin-block: var(--hd-space-3);
 }
 
 .hd-content ul li:not([class]) {

apps/docs/app/pages/getting-started/individual-packages/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { allPages } from "contentlayer/generated";
+import Mdx from "@/components/mdx/Mdx";
+import { notFound } from "next/navigation";
+import Aside from "@/app/ui/layout/aside/Aside.tsx";
+import getSectionLinks from "@/app/lib/getSectionLinks";
+
+export default function GettingStartedPage() {
+    const page = allPages.find(gettingStartedPage => gettingStartedPage._id === "pages/individual-packages.mdx");
+
+    if (!page) {
+        notFound();
+    }
+
+    const sectionLinks = getSectionLinks(page);
+
+    return (
+        <div className="hd-wrapper hd-flex">
+            <Aside title="On this page" links={sectionLinks} />
+            <main>
+                <article className="hd-content" key={page._id}>
+                    <h1 className="hd-title hd-title--level1">{page.title}</h1>
+                    {page.body && <Mdx code={page.body.code} />}
+                </article>
+            </main>
+        </div>
+    );
+}

apps/docs/app/pages/getting-started/javascript/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { allPages } from "contentlayer/generated";
+import Mdx from "@/components/mdx/Mdx";
+import { notFound } from "next/navigation";
+import Aside from "@/app/ui/layout/aside/Aside.tsx";
+import getSectionLinks from "@/app/lib/getSectionLinks";
+
+export default function GettingStartedPage() {
+    const page = allPages.find(gettingStartedPage => gettingStartedPage._id === "pages/javascript.mdx");
+
+    if (!page) {
+        notFound();
+    }
+
+    const sectionLinks = getSectionLinks(page);
+
+    return (
+        <div className="hd-wrapper hd-flex">
+            <Aside title="On this page" links={sectionLinks} />
+            <main>
+                <article className="hd-content" key={page._id}>
+                    <h1 className="hd-title hd-title--level1">{page.title}</h1>
+                    {page.body && <Mdx code={page.body.code} />}
+                </article>
+            </main>
+        </div>
+    );
+}

apps/docs/app/pages/getting-started/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { allPages } from "contentlayer/generated";
+import Mdx from "@/components/mdx/Mdx";
+import { notFound } from "next/navigation";
+import Aside from "@/app/ui/layout/aside/Aside.tsx";
+import getSectionLinks from "@/app/lib/getSectionLinks";
+
+export default function GettingStartedPage() {
+    const page = allPages.find(gettingStartedPage => gettingStartedPage._id === "pages/getting-started.mdx");
+
+    if (!page) {
+        notFound();
+    }
+
+    const sectionLinks = getSectionLinks(page);
+
+    return (
+        <div className="hd-wrapper hd-flex">
+            <Aside title="On this page" links={sectionLinks} />
+            <main>
+                <article className="hd-content" key={page._id}>
+                    <h1 className="hd-title hd-title--level1">{page.title}</h1>
+                    {page.body && <Mdx code={page.body.code} />}
+                </article>
+            </main>
+        </div>
+    );
+}

apps/docs/app/playground/headings-link/page.tsx

@@ -7,7 +7,7 @@ import Aside from "@/app/ui/layout/aside/Aside.tsx";
 import getSectionLinks from "@/app/lib/getSectionLinks";
 
 export default function HeadingsLinkPage() {
-    const page = allPages.find(iconPage => iconPage._id === "pages/playground-headings-links.mdx");
+    const page = allPages.find(playgroundPage => playgroundPage._id === "pages/playground/headings-links.mdx");
 
     if (!page) {
         notFound();

apps/docs/app/tokens.css

@@ -83,6 +83,7 @@
     --hd-color-neutral-border: var(--hd-neutral-75);
     --hd-color-neutral-border-weak: var(--hd-neutral-20);
     --hd-color-accent-text: var(--hd-accent-700);
+    --hd-color-accent-border: var(--hd-accent-700);
     --hd-color-accent-surface: var(--hd-accent-100);
     --hd-color-surface-neutral-gradient: linear-gradient(0deg, #151515 0%, #353434 100%);
     --hd-color-surface-neutral-gradient-hover: linear-gradient(0deg, #353434 0%, #151515 100%);
@@ -95,7 +96,7 @@
 [data-theme="dark"] {
     --hd-color-white-surface: var(--hd-neutral-800);
     --hd-color-neutral-surface: var(--hd-neutral-900);
-    --hd-color-neutral-surface-weak: var(--hd-neutral-900);
+    --hd-color-neutral-surface-weak: var(--hd-neutral-800);
     --hd-color-surface-neutral-selection: var(--hd-neutral-300);
     --hd-color-neutral-text: var(--hd-neutral-0);
     --hd-color-neutral-text-strong: var(--hd-neutral-900);
@@ -116,6 +117,7 @@
     --hd-color-neutral-icon-weak-hover: var(--hd-neutral-0);
     --hd-color-neutral-border: var(--hd-neutral-700);
     --hd-color-accent-text: var(--hd-accent-300);
+    --hd-color-accent-border: var(--hd-accent-700);
     --hd-color-accent-surface: var(--hd-accent-900);
     --hd-color-surface-neutral-gradient: linear-gradient(0deg, #F4F3EE 0%, var(--hd-neutral-0) 100%);
     --hd-color-surface-neutral-gradient-hover: linear-gradient(0deg, var(--hd-neutral-0) 0%, #F4F3EE 100%);

apps/docs/components/callout/Callout.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Callout from "./Callout.tsx";
+
+
+const meta = {
+    title: "components/Callout",
+    component: Callout
+} satisfies Meta<typeof Callout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: "Content of the callout"
+    }
+};

apps/docs/components/callout/Callout.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+import "./callout.css";
+
+export interface CalloutProps {
+    children: ReactNode;
+}
+
+const Callout = ({ children }: CalloutProps) => {
+    return (
+        <div className="hd-callout">
+            {children}
+        </div>
+    );
+};
+
+export default Callout;

apps/docs/components/callout/callout.css

@@ -0,0 +1,6 @@
+.hd-callout {
+    background-color: var(--hd-color-accent-surface);
+    border-radius: 0.25rem;
+    border-left: 0.25rem solid var(--hd-color-accent-border);
+    padding: 1rem;
+}

apps/docs/components/mdx/components.tsx

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from "react";
 import dynamic from "next/dynamic";
 
 import Card from "@/components/card/Card.tsx";
+import Callout from "@/components/callout/Callout.tsx";
 import NextImage from "@/components/image/Image.tsx";
 import Pre from "@/components/pre/Pre.tsx";
 import InlineCode from "@/components/code/InlineCode.tsx";
@@ -32,6 +33,7 @@ const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.
 export const components = {
     Card,
     code: InlineCode,
+    Callout: Callout,
     Image: NextImage,
     pre: Pre,
     MotionPreview: MotionPreview,

apps/docs/components/title/title.css

@@ -22,12 +22,12 @@
 }
 
 .hd-title--level4 {
-    font-size: 1em;
+    font-size: 1.125em;
     margin-block: 1.5rem 0.75rem;
 }
 
 .hd-title--level5 {
-    font-size: 0.825em;
+    font-size: 1rem;
     margin-block: 1rem 0.625rem;
 }