move extractHeadings to non-client utils file to fix docs + blog tabl…

…e of contents

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/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('')
+}