Make docs page hub and sidebar navigation editable with Keystatic

keystonejs · Jul 24, 2024 · 673b57c · 673b57c
1 parent d46c311
commit 673b57c
Show file tree

Hide file tree

Showing 77 changed files with 2,065 additions and 978 deletions.
diff --git a/docs/app/(site)/blog/page.tsx b/docs/app/(site)/blog/page.tsx
@@ -11,8 +11,8 @@ export const metadata: Metadata = {
   title: 'Keystone Blog',
   description: 'Blog posts from the team maintaining Keystone.',
   openGraph: {
-    images: `${siteBaseUrl}/assets/blog/the-keystone-blog-cover.png` 
-  }
+    images: `${siteBaseUrl}/assets/blog/the-keystone-blog-cover.png`,
+  },
 }
 
 export default async function Docs () {

diff --git a/docs/app/(site)/docs/[...rest]/page-client.tsx b/docs/app/(site)/docs/[...rest]/page-client.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'next/navigation'
 import { type Document } from './page'
 
 import { extractHeadings, Markdoc } from '../../../../components/Markdoc'
-import { DocsPage } from '../../../../components/Page'
+
 import { Heading } from '../../../../components/docs/Heading'
 
 export default function PageClient ({ document }: { document: Document }) {
@@ -17,17 +17,14 @@ export default function PageClient ({ document }: { document: Document }) {
   ]
 
   return (
-    <DocsPage
-      headings={headings}
-      editPath={`docs/${(params?.rest as string[]).join('/')}.md`}
-    >
+    <>
       <Heading level={1} id="title">
         {document.title}
       </Heading>
 
       {document.content.children.map((child, i) => (
         <Markdoc key={i} content={child} />
       ))}
-    </DocsPage>
+    </>
   )
 }
diff --git a/docs/app/(site)/docs/[...rest]/page.tsx b/docs/app/(site)/docs/[...rest]/page.tsx
@@ -6,6 +6,8 @@ import { baseMarkdocConfig } from '../../../../markdoc/config'
 import PageClient from './page-client'
 import { type EntryWithResolvedLinkedFiles } from '@keystatic/core/reader'
 import type keystaticConfig from '../../../../keystatic.config'
+import { DocsLayout } from '../../../../components/docs/DocsLayout'
+import { extractHeadings } from '../../../../components/Markdoc'
 
 export type Document = NonNullable<
   Pick<
@@ -22,16 +24,20 @@ export default async function DocPage ({ params }) {
   })
   if (!doc) return notFound()
 
+  const transformedDoc: Document = {
+    ...doc,
+    content: transform(doc.content.node, baseMarkdocConfig) as Tag,
+  }
+
+  const headings = [
+    { id: 'title', depth: 1, label: transformedDoc.title },
+    // ...extractHeadings(transformedDoc.content),
+  ]
+
   return (
-    <PageClient
-      document={JSON.parse(
-        JSON.stringify({
-          ...doc,
-          // Prepare content for Markdoc renderer
-          content: transform(doc.content.node, baseMarkdocConfig),
-        })
-      )}
-    />
+    <DocsLayout headings={headings} editPath={`docs/${(params?.rest as string[]).join('/')}.md`}>
+      <PageClient document={JSON.parse(JSON.stringify(transformedDoc))} />
+    </DocsLayout>
   )
 }
 

diff --git a/docs/app/(site)/docs/config/overview/page-client.tsx b/docs/app/(site)/docs/config/overview/page-client.tsx
@@ -5,19 +5,13 @@
 import { CommunitySlackCTA } from '../../../../../components/docs/CommunitySlackCTA'
 import { Type } from '../../../../../components/primitives/Type'
 import { Well } from '../../../../../components/primitives/Well'
-import { DocsPage } from '../../../../../components/Page'
 import { useMediaQuery } from '../../../../../lib/media'
 
 export default function Docs () {
   const mq = useMediaQuery()
 
   return (
-    <DocsPage
-      noRightNav
-      noProse
-      isIndexPage
-      editPath="docs/config/overview.tsx"
-    >
+    <>
       <Type as="h1" look="heading64">
         Configuration Overview
       </Type>
@@ -60,6 +54,6 @@ export default function Docs () {
           and one-time authentication tokens.
         </Well>
       </div>
-    </DocsPage>
+    </>
   )
 }
diff --git a/docs/app/(site)/docs/config/overview/page.tsx b/docs/app/(site)/docs/config/overview/page.tsx
@@ -1,3 +1,4 @@
+import { DocsLayout } from '../../../../../components/docs/DocsLayout'
 import PageClient from './page-client'
 
 export const metadata = {
@@ -6,5 +7,9 @@ export const metadata = {
 }
 
 export default function Docs () {
-  return <PageClient />
+  return (
+    <DocsLayout noRightNav noProse isIndexPage editPath="docs/config/overview.tsx">
+      <PageClient />
+    </DocsLayout>
+  )
 }
diff --git a/docs/app/(site)/docs/examples/page-client.tsx b/docs/app/(site)/docs/examples/page-client.tsx
@@ -4,7 +4,6 @@
 
 import { GitHubExamplesCTA } from '../../../../components/docs/GitHubExamplesCTA'
 import { Type } from '../../../../components/primitives/Type'
-import { DocsPage } from '../../../../components/Page'
 import { Well } from '../../../../components/primitives/Well'
 import { useMediaQuery } from '../../../../lib/media'
 import { InlineCode } from '../../../../components/primitives/Code'
@@ -13,11 +12,7 @@ export default function Docs () {
   const mq = useMediaQuery()
 
   return (
-    <DocsPage
-      noRightNav
-      noProse
-      editPath={'docs/examples.tsx'}
-    >
+    <>
       <Type as="h1" look="heading64">
         Examples
       </Type>
@@ -307,6 +302,6 @@ export default function Docs () {
           project. <strong>One-click deployment</strong> included.
         </Well>
       </div>
-    </DocsPage>
+    </>
   )
 }
diff --git a/docs/app/(site)/docs/examples/page.tsx b/docs/app/(site)/docs/examples/page.tsx
@@ -1,3 +1,4 @@
+import { DocsLayout } from '../../../../components/docs/DocsLayout'
 import PageClient from './page-client'
 
 export const metadata = {
@@ -7,5 +8,9 @@ export const metadata = {
 }
 
 export default function Docs () {
-  return <PageClient />
+  return (
+    <DocsLayout noRightNav noProse editPath={'docs/examples.tsx'}>
+      <PageClient />
+    </DocsLayout>
+  )
 }
diff --git a/docs/app/(site)/docs/guides/document-field-demo/page-client.tsx b/docs/app/(site)/docs/guides/document-field-demo/page-client.tsx
@@ -4,7 +4,7 @@
 import React from 'react'
 
 import { H1, H2 } from '../../../../../components/docs/Heading'
-import { DocsPage } from '../../../../../components/Page'
+
 import {
   DocumentEditorDemo,
   DocumentFeaturesProvider,
@@ -16,27 +16,7 @@ import { InlineCode } from '../../../../../components/primitives/Code'
 export default function DocumentFieldDemo () {
   const title = 'Document Fields Demo'
   return (
-    <DocsPage
-      noProse
-      headings={[
-        {
-          label: 'Document Fields Demo',
-          id: 'title',
-          depth: 1,
-        },
-        {
-          label: 'Configure the demo',
-          id: 'configure-the-demo',
-          depth: 2,
-        },
-        {
-          label: 'Related resources',
-          depth: 2,
-          id: 'related-resources',
-        },
-      ]}
-      editPath="docs/guides/document-field-demo.tsx"
-    >
+    <>
       <DocumentFeaturesProvider>
         <div className="prose">
           <H1 id="title">{title}</H1>
@@ -85,6 +65,6 @@ export default function DocumentFieldDemo () {
           </RelatedContent>
         </div>
       </DocumentFeaturesProvider>
-    </DocsPage>
+    </>
   )
 }
diff --git a/docs/app/(site)/docs/guides/document-field-demo/page.tsx b/docs/app/(site)/docs/guides/document-field-demo/page.tsx
@@ -1,3 +1,4 @@
+import { DocsLayout } from '../../../../../components/docs/DocsLayout'
 import PageClient from './page-client'
 
 export const metadata = {
@@ -7,5 +8,29 @@ export const metadata = {
 }
 
 export default function DocumentFieldDemo () {
-  return <PageClient />
+  return (
+    <DocsLayout
+      noProse
+      headings={[
+        {
+          label: 'Document Fields Demo',
+          id: 'title',
+          depth: 1,
+        },
+        {
+          label: 'Configure the demo',
+          id: 'configure-the-demo',
+          depth: 2,
+        },
+        {
+          label: 'Related resources',
+          depth: 2,
+          id: 'related-resources',
+        },
+      ]}
+      editPath="docs/guides/document-field-demo.tsx"
+    >
+      <PageClient />
+    </DocsLayout>
+  )
 }
diff --git a/docs/app/(site)/docs/guides/overview/page-client.tsx b/docs/app/(site)/docs/guides/overview/page-client.tsx
@@ -5,19 +5,13 @@
 import { CommunitySlackCTA } from '../../../../../components/docs/CommunitySlackCTA'
 import { Type } from '../../../../../components/primitives/Type'
 import { Well } from '../../../../../components/primitives/Well'
-import { DocsPage } from '../../../../../components/Page'
 import { useMediaQuery } from '../../../../../lib/media'
 
 export default function Docs () {
   const mq = useMediaQuery()
 
   return (
-    <DocsPage
-      noRightNav
-      noProse
-      isIndexPage
-      editPath="docs/guides/overview.tsx"
-    >
+    <>
       <Type as="h1" look="heading64">
         Keystone Guides
       </Type>
@@ -109,6 +103,6 @@ export default function Docs () {
           Learn how to add your own custom pages to Keystone’s Admin UI.
         </Well>
       </div>
-    </DocsPage>
+    </>
   )
 }
diff --git a/docs/app/(site)/docs/guides/overview/page.tsx b/docs/app/(site)/docs/guides/overview/page.tsx
@@ -1,3 +1,4 @@
+import { DocsLayout } from '../../../../../components/docs/DocsLayout'
 import PageClient from './page-client'
 
 export const metadata = {
@@ -7,5 +8,9 @@ export const metadata = {
 }
 
 export default function Docs () {
-  return <PageClient />
+  return (
+    <DocsLayout noRightNav noProse isIndexPage editPath="docs/guides/overview.tsx">
+      <PageClient />
+    </DocsLayout>
+  )
 }