Docs - Layout and responsive navigation (#270)

Co-authored-by: Barnaby Bishop <barneyb@gmail.com>

docs/package.json

@@ -23,6 +23,7 @@
     "next": "^13.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-focus-lock": "^2.9.4",
     "shiki": "^0.14.2",
     "typescript": "^5.0.2"
   },

docs/src/app/docs/[slug]/page.tsx → docs/src/app/(public)/docs/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import { createReader } from '@keystatic/core/reader';
-import DocumentRenderer from '../../../components/document-renderer';
-import keystaticConfig from '../../../../keystatic.config';
+import DocumentRenderer from '../../../../components/document-renderer';
+import keystaticConfig from '../../../../../keystatic.config';
 
 const reader = createReader('', keystaticConfig);
 

docs/src/app/(public)/docs/layout.tsx

@@ -0,0 +1,55 @@
+import '../../../styles/global.css';
+import { SideNav } from '../../../components/navigation/side-nav';
+import { NavGroup } from '../../../components/navigation/nav-group';
+import { NavItem } from '../../../components/navigation/nav-item';
+import { DocsFooter } from '../../../components/footer';
+import { TableOfContents } from '../../../components/navigation/toc';
+import { getNavigationMap } from '../../../utils/reader';
+
+export const metadata = {
+  title: 'Keystatic - Docs',
+  description: 'Documentation for Keystatic.',
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const navigationMap = await getNavigationMap();
+
+  return (
+    <div className="max-w-7xl min-h-screen mx-auto">
+      <SideNav>
+        {navigationMap?.map(({ groupName, items }) => (
+          <NavGroup key={groupName} title={groupName}>
+            {items.map(({ label, href, title }) => (
+              <NavItem
+                key={href}
+                label={label}
+                href={href}
+                title={title}
+                level="sub"
+              />
+            ))}
+          </NavGroup>
+        ))}
+      </SideNav>
+
+      {/** CONTENT */}
+      <div className="px-6 flex-1 lg:pl-60 lg:pt-24">
+        <div className="py-10 lg:pl-12">
+          <main className="flex gap-8">
+            {/** INNER CONTENT */}
+            <div className="flex-1">{children}</div>
+
+            {/** TOCs */}
+            <TableOfContents />
+          </main>
+
+          <DocsFooter />
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/app/docs/page.tsx → docs/src/app/(public)/docs/page.tsx

@@ -1,25 +1,9 @@
-import Button from '../../components/button';
+import Button from '../../../components/button';
 
 export default function Docs() {
   return (
     <>
-      <h2 className="text-3xl font-bold sm:text-4xl">
-        Welcome to Keystatic{' '}
-        <span className="relative">
-          <svg
-            className="absolute -right-2 bottom-2 w-[115%]"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 392 92"
-          >
-            <path
-              fill="#F7DE5B"
-              d="m4.239.201 92.684 2.883 100.722 7.097 99.043 7.211 94.363 2.77-21.813 9.088 14.042 9.919 2.873 8.7-14.795 6.043 7.844 5.477 7.843 5.476-14.691 6.037 11.104 9.535 3.927 10.77-93.59-1.7-100.082-5.647-116.75-3.055-76.39-9.559 12.857-8.312-11.94-9.45 5.534-10.258-4.618-7.502 16.812-1.055L7.21 20.478l5.332-11.703L4.239.201Z"
-            />
-          </svg>
-          <span className="relative">Docs</span>
-        </span>
-      </h2>
+      <h1 className="text-3xl font-bold sm:text-4xl">Keystatic Docs</h1>
 
       <p className="mt-6 text-lg text-stone-600">
         Keystatic is a new project from

docs/src/app/layout.tsx → docs/src/app/(public)/layout.tsx

@@ -1,10 +1,12 @@
 import Head from 'next/head';
 import { Analytics } from '@vercel/analytics/react';
 
-import '../styles/global.css';
+import '../../styles/global.css';
+import { HeaderNav } from '../../components/navigation/header-nav';
+import { getNavigationMap } from '../../utils/reader';
 
 export const metadata = {
-  title: 'Meet Keystatic',
+  title: 'Keystatic',
   description:
     "Keystatic is a new tool from Thinkmill Labs that opens up your code-based content (written in Markdown, JSON or YAML) to contributors who aren't technical.",
   openGraph: {
@@ -26,11 +28,13 @@ export const metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const navigationMap = await getNavigationMap();
+
   return (
     <html lang="en">
       <Head>
@@ -56,7 +60,14 @@ export default function RootLayout({
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="theme-color" content="#ffffff" />
       </Head>
-      <body>{children}</body>
+
+      <body>
+        <div className="min-h-screen">
+          <HeaderNav navigationMap={navigationMap} />
+          {children}
+        </div>
+      </body>
+
       <Analytics />
     </html>
   );

docs/src/app/(public)/page.tsx

@@ -0,0 +1,21 @@
+import Hero from '../../components/hero';
+import Intro from '../../components/intro';
+import Templates from '../../components/templates';
+import MailingList from '../../components/mailing-list';
+import CallToAction from '../../components/call-to-action';
+import Footer from '../../components/footer';
+
+export default function Homepage() {
+  return (
+    <>
+      <main>
+        <Hero />
+        <Intro />
+        <Templates />
+        <MailingList />
+        <CallToAction />
+      </main>
+      <Footer />
+    </>
+  );
+}

docs/src/app/(public)/privacy-policy/page.tsx

@@ -0,0 +1,13 @@
+import PrivacyPolicy from '../../../components/privacy-policy';
+import Footer from '../../../components/footer';
+
+export default function PrivacyPolicyPage() {
+  return (
+    <>
+      <main>
+        <PrivacyPolicy />
+      </main>
+      <Footer />
+    </>
+  );
+}

docs/src/app/thank-you/page.tsx → docs/src/app/(public)/thank-you/page.tsx

@@ -1,11 +1,9 @@
-import Navigation from '../../components/navigation';
-import Footer from '../../components/footer';
+import Footer from '../../../components/footer';
 
-export default function Index() {
+export default function ThankYouPage() {
   return (
-    <div className="flex min-h-screen flex-col">
-      <Navigation />
-      <main className="flex-1">
+    <>
+      <main>
         <div className="mx-auto max-w-6xl px-6 py-32">
           <div className="max-w-2xl">
             <h1 className="text-4xl font-bold sm:text-5xl md:text-6xl lg:text-7xl">
@@ -34,6 +32,6 @@ export default function Index() {
         </div>
       </main>
       <Footer />
-    </div>
+    </>
   );
 }

docs/src/components/button.tsx

@@ -11,11 +11,11 @@ type ButtonProps = {
 } & AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>;
 
 const baseClasses =
-  'block rounded-lg px-5 py-3 text-center font-semibold leading-none border';
+  'block rounded-lg px-5 py-3 text-center font-semibold leading-none border transition-colors';
 const impactClasses: Record<ButtonProps['impact'] & {}, string> = {
   bold: 'rounded-lg bg-black px-5 py-3 text-center font-semibold leading-none text-white hover:bg-stone-800 border-transparent',
   light:
-    'rounded-lg bg-transparent border-black text-black px-5 py-3 text-center font-semibold leading-none hover:bg-stone-800/10',
+    'rounded-lg bg-transparent border-black text-black px-5 py-3 text-center font-semibold leading-none hover:bg-stone-800/10 active:bg-stone-800/20',
 };
 
 // ----------