Docs - Layout and responsive navigation

docs/package.json

@@ -22,6 +22,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/layout.tsx

@@ -1,93 +1,55 @@
-import Link from 'next/link';
-import Navigation from '../../components/navigation';
-import { NavContainer, NavList, NavItem } from '../../components/sidenav';
 import '../../styles/global.css';
-import keystaticConfig from '../../../keystatic.config';
-import { createReader } from '@keystatic/core/reader';
-
-const reader = createReader('', keystaticConfig);
+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',
+  title: 'Keystatic - Docs',
+  description: 'Documentation for Keystatic.',
 };
 
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const navigation = await reader.singletons.navigation.read();
-  const pages = await reader.collections.pages.all();
-
-  const pagesBySlug = Object.fromEntries(pages.map(page => [page.slug, page]));
-
-  const navigationMap = navigation?.navGroups.map(({ groupName, items }) => ({
-    groupName,
-    items: items.map(({ label, link }) => {
-      const { discriminant, value } = link;
-      const page = discriminant === 'page' && value ? pagesBySlug[value] : null;
-      const url = discriminant === 'url' ? value : `/docs/${page?.slug}`;
-      return {
-        label: label || page?.entry.title || '',
-        href: url || '',
-        title: page?.entry.title,
-      };
-    }),
-  }));
+  const navigationMap = await getNavigationMap();
 
   return (
-    <div>
-      {/** TOP NAV */}
-      <div className="border-b border-stone-400/20 flex items-center w-full fixed z-20">
-        <Navigation />
-      </div>
-
-      {/** MAIN */}
-      <main className="max-w-7xl min-h-screen mx-auto px-6">
-        {/** SIDE NAV */}
-        <NavContainer>
-          {navigationMap?.map(({ groupName, items }) => (
-            <NavList key={groupName} title={groupName}>
-              {items.map(({ label, href, title }) => (
-                <NavItem key={href} label={label} href={href} title={title} />
-              ))}
-            </NavList>
-          ))}
-        </NavContainer>
-
-        {/** CONTENT */}
-        <div className="lg:pl-60 pt-24 flex-1">
-          <div className="py-10 pl-12 ">
-            {/** INNER CONTENT (markdoc goes here) */}
-            <div className="grid gap-6 grid-cols-[auto,12rem]">
-              <div>{children}</div>
-
-              <div className="sticky top-28 self-start">
-                <h5 className="text-xs uppercase text-stone-600">
-                  On this page
-                </h5>
-              </div>
-            </div>
-
-            {/** FOOTER */}
-            <footer>
-              <hr className="h-px my-8 border-stone-400/20 mb-8" />
-
-              <p className="leading-none text-keystatic-gray-dark text-sm">
-                &copy; {new Date().getFullYear()} Thinkmill. All rights
-                reserved.{' '}
-                <Link
-                  href="/privacy-policy"
-                  className="underline hover:text-black"
-                >
-                  Privacy policy
-                </Link>
-              </p>
-            </footer>
-          </div>
+    <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>
-      </main>
+      </div>
     </div>
   );
 }

docs/src/app/docs/page.tsx

@@ -3,23 +3,7 @@ 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

@@ -2,9 +2,11 @@ import Head from 'next/head';
 import { Analytics } from '@vercel/analytics/react';
 
 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/page.tsx

@@ -1,15 +1,13 @@
-import Navigation from '../components/navigation';
 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 Index() {
+export default function Homepage() {
   return (
-    <div className="min-h-screen">
-      <Navigation />
+    <>
       <main>
         <Hero />
         <Intro />
@@ -18,6 +16,6 @@ export default function Index() {
         <CallToAction />
       </main>
       <Footer />
-    </div>
+    </>
   );
 }

docs/src/app/privacy-policy/page.tsx

@@ -1,15 +1,13 @@
-import Navigation from '../../components/navigation';
 import PrivacyPolicy from '../../components/privacy-policy';
 import Footer from '../../components/footer';
 
 export default function PrivacyPolicyPage() {
   return (
-    <div className="min-h-screen">
-      <Navigation />
+    <>
       <main>
         <PrivacyPolicy />
       </main>
       <Footer />
-    </div>
+    </>
   );
 }

docs/src/app/thank-you/page.tsx

@@ -1,11 +1,9 @@
-import Navigation from '../../components/navigation';
 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',
 };
 
 // ----------

docs/src/components/footer.tsx

@@ -1,23 +1,50 @@
 import Link from 'next/link';
-
-import Navigation from './navigation';
+import { KeystaticLogoLink } from './navigation/keystatic-logo-link';
+import { SocialLinks } from './navigation/social-links';
 
 export default function Footer() {
   return (
     <footer className="bg-keystatic-gray-light pb-10">
-      <Navigation showCta={false} />
-      <div className="mx-auto mt-4 flex max-w-7xl flex-col justify-between gap-y-4 gap-x-12 px-6 text-center md:flex-row md:text-left">
-        <p className="leading-none text-keystatic-gray-dark">
-          &copy; {new Date().getFullYear()} Thinkmill. All rights reserved.{' '}
-          <Link href="/privacy-policy" className="underline hover:text-black">
-            Privacy policy
-          </Link>
+      <div className="mx-auto max-w-7xl">
+        <nav className="p-6 flex flex-col md:flex-row items-center justify-between gap-6">
+          <KeystaticLogoLink />
+          <SocialLinks />
+        </nav>
+      </div>
+
+      <div className="mx-auto mt-2 flex max-w-7xl flex-col justify-between gap-y-4 gap-x-12 px-6 text-center md:flex-row">
+        <p className="leading-tight text-keystatic-gray-dark text-center md:text-left">
+          <CopyrightPrivacyPolicyContent />
         </p>
-        <p className="leading-none text-keystatic-gray-dark">
-          Made with <span className="text-[#ff3838]">♥</span> in Australia by a
+
+        <p className="leading-tight text-keystatic-gray-dark text-center md:text-right">
+          Made with <span className="text-[#ff3838]">❤️</span> in Australia by a
           team from 30 countries.
         </p>
       </div>
     </footer>
   );
 }
+
+export function DocsFooter() {
+  return (
+    <footer>
+      <hr className="h-px my-8 border-stone-400/20 mb-8" />
+
+      <p className="leading-tight text-keystatic-gray-dark text-sm">
+        <CopyrightPrivacyPolicyContent />
+      </p>
+    </footer>
+  );
+}
+
+function CopyrightPrivacyPolicyContent() {
+  return (
+    <>
+      &copy; {new Date().getFullYear()} Thinkmill. All rights reserved.{' '}
+      <Link href="/privacy-policy" className="underline hover:text-black">
+        Privacy policy
+      </Link>
+    </>
+  );
+}

docs/src/components/hero.tsx

@@ -9,7 +9,7 @@ const features = [
 
 export default function Hero() {
   return (
-    <section className="overflow-hidden bg-keystatic-gray-light">
+    <section className="overflow-hidden bg-white">
       <div className="mx-auto grid max-w-7xl gap-y-8 py-12 px-6 md:gap-y-16 md:py-16 lg:grid-cols-12 lg:items-center">
         <div className="text-center lg:col-span-7 lg:pr-8 lg:text-left xl:col-span-6">
           <h1 className="text-4xl font-bold sm:text-5xl md:text-6xl lg:text-7xl">