feat: add fondue logo to docs

Frontify · Feb 8, 2024 · 7972e2c · 7972e2c
1 parent 53659bd
commit 7972e2c
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 31 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,11 +1,5 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href=/nook.svg />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Documentation — Fondue</title>
-    </head>
     <body>
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>

diff --git a/docs/src/assets/images/fondue_logo.png b/docs/src/assets/images/fondue_logo.png
diff --git a/docs/public/nook.svg → docs/src/assets/images/nook.svg b/docs/public/nook.svg → docs/src/assets/images/nook.svg
diff --git a/docs/src/pages/+Head.tsx b/docs/src/pages/+Head.tsx
@@ -0,0 +1,12 @@
+import nookFaviconUrl from '../assets/images/nook.svg';
+
+export const Head = () => {
+    return (
+        <>
+            <meta charSet="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <link rel="icon" href={nookFaviconUrl} />
+            <title>Documentation — Fondue</title>
+        </>
+    );
+};
diff --git a/docs/src/pages/+Layout.tsx b/docs/src/pages/+Layout.tsx
@@ -3,31 +3,35 @@
 import '../renderer/index.css';
 import { type ReactNode } from 'react';
 
-import { allComponents } from '#contentlayer/generated';
+import fondueLogo from '../assets/images/fondue_logo.png';
 
 export const Layout = ({ children }: { children: ReactNode }) => {
     return (
-        <main className="tw-grid tw-grid-cols-[auto_1fr] tw-grid-rows-[auto_1fr] tw-h-screen">
-            <header className="tw-col-start-1 tw-col-span-2 tw-bg-box-neutral tw-border-line tw-border-b-2 tw-px-8 tw-py-4">
-                <a className="tw-font-bold tw-text-xl" href="/">
-                    Fondue
+        <main className="tw-h-dvh tw-flex tw-flex-col">
+            <header className="tw-px-4 tw-flex tw-items-center tw-h-16">
+                <a className="tw-p-1 tw-h-8" href="/">
+                    <img className="tw-h-full tw-object-contain" src={fondueLogo} alt="Fondue Logo" />
                 </a>
-            </header>
 
-            <nav className="tw-col-start-1 tw-bg-box-neutral tw-p-8 tw-border-line tw-border-r-2">
-                <span className="tw-text-lg tw-font-bold">Components</span>
-                <ul className="tw-mt-4 tw-list-disc">
-                    {allComponents.map((component) => {
-                        return (
-                            <li key={component._id}>
-                                <a href={`/component/${component.route}`}>{component.title}</a>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </nav>
+                <nav className="tw-w-full">
+                    <ul className="tw-w-full tw-items-center tw-justify-center tw-flex tw-gap-4">
+                        <li>
+                            <a href="/getting-started">Getting Started</a>
+                        </li>
+                        <li>
+                            <a href="/tokens">Tokens</a>
+                        </li>
+                        <li>
+                            <a href="/components">Components</a>
+                        </li>
+                        <li>
+                            <a href="/icons">Icons</a>
+                        </li>
+                    </ul>
+                </nav>
+            </header>
 
-            <div className="tw-col-start-2 tw-p-8">{children}</div>
+            <div className="tw-h-full tw-flex">{children}</div>
         </main>
     );
 };
diff --git a/docs/src/pages/+config.h.ts b/docs/src/pages/+config.h.ts
@@ -3,6 +3,5 @@
 import vikeReact from 'vike-react/config';
 
 export default {
-    title: 'Documentation — Fondue',
     extends: vikeReact,
 };
diff --git a/docs/src/pages/components/+Layout.tsx b/docs/src/pages/components/+Layout.tsx
@@ -0,0 +1,34 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ReactNode } from 'react';
+
+import { allComponents } from '#contentlayer/generated';
+
+import { Layout as RootLayout } from '../+Layout';
+
+export const Layout = ({ children }: { children: ReactNode }) => {
+    return (
+        <RootLayout>
+            <div className="tw-h-full tw-flex tw-w-full">
+                <nav className="tw-p-8 lg:tw-flex tw-hidden tw-flex-col tw-w-72 tw-shrink-0">
+                    <span className="tw-text-lg tw-font-bold">Components</span>
+                    <ul className="tw-mt-4">
+                        {allComponents.map((component) => (
+                            <li key={component._id}>
+                                <a href={`/components/${component.route}`}>{component.title}</a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+
+                <div className="tw-p-8 tw-w-full tw-flex tw-justify-center">
+                    <div className="tw-max-w-[856px] tw-w-full">{children}</div>
+                </div>
+
+                <aside className="tw-p-8 2xl:tw-flex tw-hidden tw-flex-col tw-w-72 tw-shrink-0">
+                    <span className="tw-text-lg tw-font-bold">Table of content</span>
+                </aside>
+            </div>
+        </RootLayout>
+    );
+};
diff --git a/docs/src/pages/component/+Page.tsx → docs/src/pages/components/+Page.tsx b/docs/src/pages/component/+Page.tsx → docs/src/pages/components/+Page.tsx
@@ -8,7 +8,7 @@ export const Page = () => {
     const { data } = usePageContext();
 
     if (!data) {
-        return null;
+        return <h1 className="tw-text-3xl tw-font-bold tw-mb-8">Components</h1>;
     }
 
     return (

diff --git a/docs/src/pages/component/+data.ts → docs/src/pages/components/+data.ts b/docs/src/pages/component/+data.ts → docs/src/pages/components/+data.ts
@@ -1,6 +1,5 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { render } from 'vike/abort';
 import { type PageContextServer } from 'vike/types';
 
 import { allComponents } from '#contentlayer/generated';
@@ -15,7 +14,7 @@ export const data = (pageContext: PageContextServer) => {
     });
 
     if (!component) {
-        throw render(404, "This component doesn't exist");
+        return null;
     }
 
     return { component };

diff --git a/...ages/component/+onBeforePrerenderStart.ts → ...ges/components/+onBeforePrerenderStart.ts b/...ages/component/+onBeforePrerenderStart.ts → ...ges/components/+onBeforePrerenderStart.ts
@@ -3,5 +3,5 @@
 import { allComponents } from '#contentlayer/generated';
 
 export const onBeforePrerenderStart = () => {
-    return allComponents.map((component) => `/component/${component.route}`);
+    return ['/components', ...allComponents.map((component) => `/components/${component.route}`)];
 };
diff --git a/docs/src/pages/component/+route.ts → docs/src/pages/components/+route.ts b/docs/src/pages/component/+route.ts → docs/src/pages/components/+route.ts
diff --git a/docs/src/pages/getting-started/+Page.tsx b/docs/src/pages/getting-started/+Page.tsx
@@ -0,0 +1,9 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const Page = () => {
+    return (
+        <div className="tw-p-8">
+            <h1 className="tw-text-3xl tw-font-bold">Getting Started</h1>
+        </div>
+    );
+};
diff --git a/docs/src/pages/icons/+Page.tsx b/docs/src/pages/icons/+Page.tsx
@@ -0,0 +1,9 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const Page = () => {
+    return (
+        <div className="tw-p-8">
+            <h1 className="tw-text-3xl tw-font-bold">Icons</h1>
+        </div>
+    );
+};
diff --git a/docs/src/pages/index/+Page.tsx b/docs/src/pages/index/+Page.tsx
@@ -1,5 +1,9 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 export const Page = () => {
-    return <h1 className="tw-font-bold">Welcome to Fondue</h1>;
+    return (
+        <div className="tw-p-8">
+            <h1 className="tw-text-3xl tw-font-bold">Welcome to Fondue</h1>
+        </div>
+    );
 };
diff --git a/docs/src/pages/tokens/+Page.tsx b/docs/src/pages/tokens/+Page.tsx
@@ -0,0 +1,9 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const Page = () => {
+    return (
+        <div className="tw-p-8">
+            <h1 className="tw-text-3xl tw-font-bold">Tokens</h1>
+        </div>
+    );
+};