diff --git a/docs/package.json b/docs/package.json index 0e1cd3ded..950ebdd6b 100644 --- a/docs/package.json +++ b/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" }, diff --git a/docs/src/app/docs/[slug]/page.tsx b/docs/src/app/(public)/docs/[slug]/page.tsx similarity index 84% rename from docs/src/app/docs/[slug]/page.tsx rename to docs/src/app/(public)/docs/[slug]/page.tsx index 61dadda3e..e8d3427a1 100644 --- a/docs/src/app/docs/[slug]/page.tsx +++ b/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); diff --git a/docs/src/app/(public)/docs/layout.tsx b/docs/src/app/(public)/docs/layout.tsx new file mode 100644 index 000000000..7e126a9da --- /dev/null +++ b/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 ( +
+ + {navigationMap?.map(({ groupName, items }) => ( + + {items.map(({ label, href, title }) => ( + + ))} + + ))} + + + {/** CONTENT */} +
+
+
+ {/** INNER CONTENT */} +
{children}
+ + {/** TOCs */} + +
+ + +
+
+
+ ); +} diff --git a/docs/src/app/docs/page.tsx b/docs/src/app/(public)/docs/page.tsx similarity index 75% rename from docs/src/app/docs/page.tsx rename to docs/src/app/(public)/docs/page.tsx index 1281fa1db..3f662338e 100644 --- a/docs/src/app/docs/page.tsx +++ b/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 ( <> -

- Welcome to Keystatic{' '} - - - - - Docs - -

+

Keystatic Docs

Keystatic is a new project from diff --git a/docs/src/app/layout.tsx b/docs/src/app/(public)/layout.tsx similarity index 76% rename from docs/src/app/layout.tsx rename to docs/src/app/(public)/layout.tsx index f6b8bd4f2..5a351b743 100644 --- a/docs/src/app/layout.tsx +++ b/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 ( @@ -56,7 +60,14 @@ export default function RootLayout({ - {children} + + +

+ + {children} +
+ + ); diff --git a/docs/src/app/(public)/page.tsx b/docs/src/app/(public)/page.tsx new file mode 100644 index 000000000..714e13884 --- /dev/null +++ b/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 ( + <> +
+ + + + + +
+