Docs: example links fixing + table of contents fixes (#9272)

docs/app/(site)/blog/[post]/page-client.tsx

@@ -6,11 +6,12 @@ import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { parse, format } from 'date-fns'
 
-import { extractHeadings, Markdoc } from '../../../../components/Markdoc'
+import {  Markdoc } from '../../../../components/Markdoc'
 import { BlogPage } from '../../../../components/Page'
 import { Heading } from '../../../../components/docs/Heading'
 import { Type } from '../../../../components/primitives/Type'
 import { type BlogPost } from './page'
+import { extractHeadings } from '../../../../markdoc/headings'
 
 export default function Page ({ post }: { post: BlogPost }) {
   const params = useParams()

docs/app/(site)/docs/[...rest]/page-client.tsx

@@ -1,21 +1,12 @@
 'use client'
 
-import { useParams } from 'next/navigation'
-
 import { type Document } from './page'
 
-import { extractHeadings, Markdoc } from '../../../../components/Markdoc'
+import {  Markdoc } from '../../../../components/Markdoc'
 
 import { Heading } from '../../../../components/docs/Heading'
 
 export default function PageClient ({ document }: { document: Document }) {
-  const params = useParams()
-
-  const headings = [
-    { id: 'title', depth: 1, label: document.title },
-    ...extractHeadings(document.content),
-  ]
-
   return (
     <>
       <Heading level={1} id="title">

docs/app/(site)/docs/[...rest]/page.tsx

@@ -3,11 +3,11 @@ import { type Tag, transform } from '@markdoc/markdoc'
 
 import { reader } from '../../../../keystatic/reader'
 import { baseMarkdocConfig } from '../../../../markdoc/config'
+import { extractHeadings } from '../../../../markdoc/headings'
 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<
@@ -31,7 +31,7 @@ export default async function DocPage ({ params }) {
 
   const headings = [
     { id: 'title', depth: 1, label: transformedDoc.title },
-    // ...extractHeadings(transformedDoc.content),
+    ...extractHeadings(transformedDoc.content),
   ]
 
   return (

docs/components/Markdoc.tsx

@@ -84,37 +84,4 @@ export function Markdoc (props: { content: RenderableTreeNodes }) {
   }
 
   return render(props.content) as JSX.Element
-}
-
-export type HeadingType = {
-  id: string
-  depth: number
-  label: string
-}
-
-export function extractHeadings (content: Tag): HeadingType[] {
-  const headings: HeadingType[] = []
-  for (const child of content.children) {
-    if (isTag(child) && child.name === 'Heading') {
-      headings.push({
-        id: child.attributes.id,
-        depth: child.attributes.level,
-        label: stringifyDocContent(child),
-      })
-    }
-  }
-  return headings
-}
-
-function stringifyDocContent (node: RenderableTreeNode): string {
-  if (typeof node === 'string') {
-    return node
-  }
-  if (Array.isArray(node)) {
-    return node.map(stringifyDocContent).join('')
-  }
-  if (!isTag(node)) {
-    return ''
-  }
-  return node.children.map(stringifyDocContent).join('')
-}
+}

docs/components/docs/DocsLayoutClient.tsx

@@ -3,7 +3,6 @@
 'use client'
 
 import { type ReactNode, useRef } from 'react'
-import { type HeadingType } from '../Markdoc'
 import { usePathname } from 'next/navigation'
 import { Header } from '../Header'
 import { Wrapper } from '../primitives/Wrapper'
@@ -15,6 +14,7 @@ import { TableOfContents } from './TableOfContents'
 
 import { useMediaQuery } from '../../lib/media'
 import { DocsFooter } from '../Footer'
+import { type HeadingType } from '../../markdoc/headings'
 
 export function DocsLayoutClient ({
  children,

docs/content/examples/auth.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/auth
+url: https://github.com/keystonejs/keystone/tree/main/examples/auth
 title: Authentication
 kind: standalone
 description: >

docs/content/examples/azure.yaml

@@ -1,5 +1,6 @@
-url: https://github.com/aaronpowell/keystone-6-azure-example"
 title: Microsoft Azure
 kind: deployment
+url: https://github.com/aaronpowell/keystone-6-azure-example
 description: >
-  Deploys a Keystone app backend to Microsoft Azure. Based on the `with-auth` project. **One-click deployment** included.
+  Deploys a Keystone app backend to Microsoft Azure. Based on the `with-auth`
+  project. **One-click deployment** included.

docs/content/examples/blog.yaml

@@ -1,6 +1,6 @@
 title: Blog
 kind: standalone
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/usecase-blog
+url: https://github.com/keystonejs/keystone/tree/main/examples/usecase-blog
 description: >
   A basic Blog schema with Posts and Authors. Use this as a starting place for
   learning how to use Keystone. It’s also a starter for other feature projects.

docs/content/examples/custom-admin-ui-navigation.yaml

@@ -1,5 +1,5 @@
 title: Custom Admin UI Navigation
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation
+url: https://github.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-navigation
 kind: standalone
 description: >
   Adds a custom Navigation component to the Admin UI.

docs/content/examples/custom-admin-ui-pages.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/custom-admin-ui-pages
+url: https://github.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-pages
 title: Custom Admin UI Pages
 kind: standalone
 description: >

docs/content/examples/custom-field-type.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/custom-field
+url: https://github.com/keystonejs/keystone/tree/main/examples/custom-field
 title: Custom Field Type
 kind: standalone
 description: >

docs/content/examples/custom-field-view.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/custom-field-view
+url: https://github.com/keystonejs/keystone/tree/main/examples/custom-field-view
 title: Custom Field View
 kind: standalone
 description: >

docs/content/examples/default-values.yaml

@@ -1,6 +1,6 @@
 title: Default Values
 kind: standalone
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/default-values
+url: https://github.com/keystonejs/keystone/tree/main/examples/default-values
 description: >
   Demonstrates how to use default values for fields. Builds upon the Task
   Manager starter

docs/content/examples/document-field-customisation.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/usecase-blog
+url: https://github.com/keystonejs/keystone/tree/main/examples/usecase-blog
 title: Document Field Customisation
 kind: end-to-end
 description: >

docs/content/examples/document-field.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/document-field
+url: https://github.com/keystonejs/keystone/tree/main/examples/document-field
 title: Document field
 kind: standalone
 description: >

docs/content/examples/extend-express-app.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/extend-express-app
+url: https://github.com/keystonejs/keystone/tree/main/examples/extend-express-app
 title: REST API endpoint
 kind: standalone
 description: >

docs/content/examples/extend-graphql-schema-nexus.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/extend-graphql-schema-nexus
+url: https://github.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema-nexus
 title: Extend GraphQL API with Nexus
 kind: standalone
 description: >

docs/content/examples/extend-graphql-schema-ts.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/extend-graphql-schema-graphql-ts
+url: https://github.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema-graphql-ts
 title: Extend GraphQL Schema with GraphQL TS
 kind: standalone
 description: >

docs/content/examples/heroku.yaml

@@ -1,7 +1,6 @@
-url: https://github.com/keystonejs/keystone-6-heroku-example"
 title: Heroku
 kind: deployment
+url: https://github.com/keystonejs/keystone-6-heroku-example
 description: >
-  Based on the `with-auth` project, this example deploys a
-  simple app backend to Heroku. Includes a **one-click deployment** for Heroku
-  account holders.
+  Based on the `with-auth` project, this example deploys a simple app backend to
+  Heroku. Includes a **one-click deployment** for Heroku account holders.

docs/content/examples/next-js.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/framework-nextjs-app-directory
+url: https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-app-directory
 title: Next.js + Keystone
 kind: end-to-end
 description: >

docs/content/examples/railway.yaml

@@ -1,7 +1,6 @@
-url: https://github.com/keystonejs/keystone-6-railway-example"
 title: Railway
 kind: deployment
+url: https://github.com/keystonejs/keystone-6-railway-example
 description: >
-  Deploys a Keystone app backend to Railway. Based on the
-  `with-auth` project.
+  Deploys a Keystone app backend to Railway. Based on the `with-auth` project.
   **One-click deployment** included.

docs/content/examples/singleton.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/singleton
+url: https://github.com/keystonejs/keystone/tree/main/examples/singleton
 title: Singleton
 kind: standalone
 description: >

docs/content/examples/task-manager.yaml

@@ -1,6 +1,6 @@
 title: Task Manager
 kind: standalone
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/usecase-todo
+url: https://github.com/keystonejs/keystone/tree/main/examples/usecase-todo
 description: >
   A basic Task Management app, with Tasks and People who can be assigned to
   tasks. Great for learning how to use Keystone. It’s also a starter for other

docs/content/examples/testing.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/testing
+url: https://github.com/keystonejs/keystone/tree/main/examples/testing
 title: Testing
 kind: standalone
 description: >

docs/content/examples/virtual-field.yaml

@@ -1,4 +1,4 @@
-url: https://keystonejs.com/docs/guides/custom-admin-ui-navigation/virtual-field
+url: https://github.com/keystonejs/keystone/tree/main/examples/virtual-field
 title: Virtual fields
 kind: standalone
 description: >

docs/markdoc/headings.ts

@@ -0,0 +1,38 @@
+
+
+
+import type { RenderableTreeNode, Tag } from '@markdoc/markdoc'
+import { isTag } from './isTag'
+
+export type HeadingType = {
+  id: string
+  depth: number
+  label: string
+}
+
+export function extractHeadings (content: Tag): HeadingType[] {
+  const headings: HeadingType[] = []
+  for (const child of content.children) {
+    if (isTag(child) && child.name === 'Heading') {
+      headings.push({
+        id: child.attributes.id,
+        depth: child.attributes.level,
+        label: stringifyDocContent(child),
+      })
+    }
+  }
+  return headings
+}
+
+function stringifyDocContent (node: RenderableTreeNode): string {
+  if (typeof node === 'string') {
+    return node
+  }
+  if (Array.isArray(node)) {
+    return node.map(stringifyDocContent).join('')
+  }
+  if (!isTag(node)) {
+    return ''
+  }
+  return node.children.map(stringifyDocContent).join('')
+}