make blog posts and docs page editable with Keystatic

keystonejs · Jul 4, 2024 · 323255e · 323255e
1 parent c58693f
commit 323255e
Show file tree

Hide file tree

Showing 78 changed files with 13,090 additions and 13,792 deletions.
diff --git a/docs/app/api/keystatic/[...params]/route.ts b/docs/app/api/keystatic/[...params]/route.ts
@@ -0,0 +1,6 @@
+import { makeRouteHandler } from '@keystatic/next/route-handler'
+import config from '../../../../keystatic.config'
+
+export const { POST, GET } = makeRouteHandler({
+  config,
+})
diff --git a/docs/app/keystatic/[[...params]]/page.tsx b/docs/app/keystatic/[[...params]]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page () {
+  return null
+}
diff --git a/docs/app/keystatic/keystatic.ts b/docs/app/keystatic/keystatic.ts
@@ -0,0 +1,6 @@
+'use client'
+
+import { makePage } from '@keystatic/next/ui/app'
+import config from '../../keystatic.config'
+
+export default makePage(config)
diff --git a/docs/app/keystatic/layout.tsx b/docs/app/keystatic/layout.tsx
@@ -0,0 +1,12 @@
+import KeystaticApp from './keystatic'
+
+export default function Layout () {
+  return (
+    <html>
+      <head></head>
+      <body>
+        <KeystaticApp />
+      </body>
+    </html>
+  )
+}
diff --git a/docs/pages/blog/customisable-admin-ui.md → docs/content/blog/customisable-admin-ui.md b/docs/pages/blog/customisable-admin-ui.md → docs/content/blog/customisable-admin-ui.md
diff --git a/.../blog/embedded-mode-with-sqlite-nextjs.md → .../blog/embedded-mode-with-sqlite-nextjs.md b/.../blog/embedded-mode-with-sqlite-nextjs.md → .../blog/embedded-mode-with-sqlite-nextjs.md
diff --git a/docs/pages/blog/general-availability.md → docs/content/blog/general-availability.md b/docs/pages/blog/general-availability.md → docs/content/blog/general-availability.md
diff --git a/docs/pages/blog/introducing-keystone-blog.md → ...content/blog/introducing-keystone-blog.md b/docs/pages/blog/introducing-keystone-blog.md → ...content/blog/introducing-keystone-blog.md
diff --git a/docs/pages/blog/keystone-tutorials.md → docs/content/blog/keystone-tutorials.md b/docs/pages/blog/keystone-tutorials.md → docs/content/blog/keystone-tutorials.md
diff --git a/docs/pages/blog/mysql-support.md → docs/content/blog/mysql-support.md b/docs/pages/blog/mysql-support.md → docs/content/blog/mysql-support.md
diff --git a/docs/pages/blog/nextjs-keystone.md → docs/content/blog/nextjs-keystone.md b/docs/pages/blog/nextjs-keystone.md → docs/content/blog/nextjs-keystone.md
diff --git a/docs/pages/blog/prisma-day-2021.md → docs/content/blog/prisma-day-2021.md b/docs/pages/blog/prisma-day-2021.md → docs/content/blog/prisma-day-2021.md
diff --git a/docs/pages/blog/singleton.md → docs/content/blog/singleton.md b/docs/pages/blog/singleton.md → docs/content/blog/singleton.md
diff --git a/docs/pages/docs/config/access-control.md → docs/content/docs/config/access-control.md b/docs/pages/docs/config/access-control.md → docs/content/docs/config/access-control.md
diff --git a/docs/pages/docs/config/auth.md → docs/content/docs/config/auth.md b/docs/pages/docs/config/auth.md → docs/content/docs/config/auth.md
diff --git a/docs/pages/docs/config/config.md → docs/content/docs/config/config.md b/docs/pages/docs/config/config.md → docs/content/docs/config/config.md
diff --git a/docs/pages/docs/config/hooks.md → docs/content/docs/config/hooks.md b/docs/pages/docs/config/hooks.md → docs/content/docs/config/hooks.md
diff --git a/docs/pages/docs/config/lists.md → docs/content/docs/config/lists.md b/docs/pages/docs/config/lists.md → docs/content/docs/config/lists.md
diff --git a/docs/pages/docs/config/session.md → docs/content/docs/config/session.md b/docs/pages/docs/config/session.md → docs/content/docs/config/session.md
diff --git a/docs/pages/docs/context/db-items.md → docs/content/docs/context/db-items.md b/docs/pages/docs/context/db-items.md → docs/content/docs/context/db-items.md
diff --git a/docs/pages/docs/context/get-context.md → docs/content/docs/context/get-context.md b/docs/pages/docs/context/get-context.md → docs/content/docs/context/get-context.md
diff --git a/docs/pages/docs/context/overview.md → docs/content/docs/context/overview.md b/docs/pages/docs/context/overview.md → docs/content/docs/context/overview.md
diff --git a/docs/pages/docs/context/query.md → docs/content/docs/context/query.md b/docs/pages/docs/context/query.md → docs/content/docs/context/query.md
diff --git a/docs/pages/docs/fields/bigint.md → docs/content/docs/fields/bigint.md b/docs/pages/docs/fields/bigint.md → docs/content/docs/fields/bigint.md
diff --git a/docs/pages/docs/fields/calendarday.md → docs/content/docs/fields/calendarday.md b/docs/pages/docs/fields/calendarday.md → docs/content/docs/fields/calendarday.md
diff --git a/docs/pages/docs/fields/checkbox.md → docs/content/docs/fields/checkbox.md b/docs/pages/docs/fields/checkbox.md → docs/content/docs/fields/checkbox.md
diff --git a/docs/pages/docs/fields/cloudinaryimage.md → docs/content/docs/fields/cloudinaryimage.md b/docs/pages/docs/fields/cloudinaryimage.md → docs/content/docs/fields/cloudinaryimage.md
diff --git a/docs/pages/docs/fields/decimal.md → docs/content/docs/fields/decimal.md b/docs/pages/docs/fields/decimal.md → docs/content/docs/fields/decimal.md
diff --git a/docs/pages/docs/fields/document.md → docs/content/docs/fields/document.md b/docs/pages/docs/fields/document.md → docs/content/docs/fields/document.md
diff --git a/docs/pages/docs/fields/file.md → docs/content/docs/fields/file.md b/docs/pages/docs/fields/file.md → docs/content/docs/fields/file.md
diff --git a/docs/pages/docs/fields/float.md → docs/content/docs/fields/float.md b/docs/pages/docs/fields/float.md → docs/content/docs/fields/float.md
diff --git a/docs/pages/docs/fields/image.md → docs/content/docs/fields/image.md b/docs/pages/docs/fields/image.md → docs/content/docs/fields/image.md
diff --git a/docs/pages/docs/fields/integer.md → docs/content/docs/fields/integer.md b/docs/pages/docs/fields/integer.md → docs/content/docs/fields/integer.md
diff --git a/docs/pages/docs/fields/json.md → docs/content/docs/fields/json.md b/docs/pages/docs/fields/json.md → docs/content/docs/fields/json.md
diff --git a/docs/pages/docs/fields/multiselect.md → docs/content/docs/fields/multiselect.md b/docs/pages/docs/fields/multiselect.md → docs/content/docs/fields/multiselect.md
diff --git a/docs/pages/docs/fields/overview.md → docs/content/docs/fields/overview.md b/docs/pages/docs/fields/overview.md → docs/content/docs/fields/overview.md
diff --git a/docs/pages/docs/fields/password.md → docs/content/docs/fields/password.md b/docs/pages/docs/fields/password.md → docs/content/docs/fields/password.md
diff --git a/docs/pages/docs/fields/relationship.md → docs/content/docs/fields/relationship.md b/docs/pages/docs/fields/relationship.md → docs/content/docs/fields/relationship.md
diff --git a/docs/pages/docs/fields/select.md → docs/content/docs/fields/select.md b/docs/pages/docs/fields/select.md → docs/content/docs/fields/select.md
diff --git a/docs/pages/docs/fields/text.md → docs/content/docs/fields/text.md b/docs/pages/docs/fields/text.md → docs/content/docs/fields/text.md
diff --git a/docs/pages/docs/fields/timestamp.md → docs/content/docs/fields/timestamp.md b/docs/pages/docs/fields/timestamp.md → docs/content/docs/fields/timestamp.md
diff --git a/docs/pages/docs/fields/virtual.md → docs/content/docs/fields/virtual.md b/docs/pages/docs/fields/virtual.md → docs/content/docs/fields/virtual.md
diff --git a/docs/pages/docs/getting-started.md → docs/content/docs/getting-started.md b/docs/pages/docs/getting-started.md → docs/content/docs/getting-started.md
diff --git a/docs/pages/docs/graphql/filters.md → docs/content/docs/graphql/filters.md b/docs/pages/docs/graphql/filters.md → docs/content/docs/graphql/filters.md
diff --git a/docs/pages/docs/graphql/overview.md → docs/content/docs/graphql/overview.md b/docs/pages/docs/graphql/overview.md → docs/content/docs/graphql/overview.md
diff --git a/...es/docs/guides/auth-and-access-control.md → ...nt/docs/guides/auth-and-access-control.md b/...es/docs/guides/auth-and-access-control.md → ...nt/docs/guides/auth-and-access-control.md
diff --git a/.../pages/docs/guides/choosing-a-database.md → ...ontent/docs/guides/choosing-a-database.md b/.../pages/docs/guides/choosing-a-database.md → ...ontent/docs/guides/choosing-a-database.md
diff --git a/docs/pages/docs/guides/cli.md → docs/content/docs/guides/cli.md b/docs/pages/docs/guides/cli.md → docs/content/docs/guides/cli.md
diff --git a/...pages/docs/guides/custom-admin-ui-logo.md → ...ntent/docs/guides/custom-admin-ui-logo.md b/...pages/docs/guides/custom-admin-ui-logo.md → ...ntent/docs/guides/custom-admin-ui-logo.md
diff --git a/...docs/guides/custom-admin-ui-navigation.md → ...docs/guides/custom-admin-ui-navigation.md b/...docs/guides/custom-admin-ui-navigation.md → ...docs/guides/custom-admin-ui-navigation.md
diff --git a/...ages/docs/guides/custom-admin-ui-pages.md → ...tent/docs/guides/custom-admin-ui-pages.md b/...ages/docs/guides/custom-admin-ui-pages.md → ...tent/docs/guides/custom-admin-ui-pages.md
diff --git a/docs/pages/docs/guides/custom-field-views.md → ...content/docs/guides/custom-field-views.md b/docs/pages/docs/guides/custom-field-views.md → ...content/docs/guides/custom-field-views.md
diff --git a/docs/pages/docs/guides/custom-fields.md → docs/content/docs/guides/custom-fields.md b/docs/pages/docs/guides/custom-fields.md → docs/content/docs/guides/custom-fields.md
diff --git a/docs/pages/docs/guides/database-migration.md → ...content/docs/guides/database-migration.md b/docs/pages/docs/guides/database-migration.md → ...content/docs/guides/database-migration.md
diff --git a/docs/pages/docs/guides/document-fields.md → docs/content/docs/guides/document-fields.md b/docs/pages/docs/guides/document-fields.md → docs/content/docs/guides/document-fields.md
diff --git a/docs/pages/docs/guides/filters.md → docs/content/docs/guides/filters.md b/docs/pages/docs/guides/filters.md → docs/content/docs/guides/filters.md
diff --git a/docs/pages/docs/guides/hooks.md → docs/content/docs/guides/hooks.md b/docs/pages/docs/guides/hooks.md → docs/content/docs/guides/hooks.md
diff --git a/docs/pages/docs/guides/images-and-files.md → docs/content/docs/guides/images-and-files.md b/docs/pages/docs/guides/images-and-files.md → docs/content/docs/guides/images-and-files.md
diff --git a/docs/pages/docs/guides/relationships.md → docs/content/docs/guides/relationships.md b/docs/pages/docs/guides/relationships.md → docs/content/docs/guides/relationships.md
diff --git a/docs/pages/docs/guides/schema-extension.md → docs/content/docs/guides/schema-extension.md b/docs/pages/docs/guides/schema-extension.md → docs/content/docs/guides/schema-extension.md
diff --git a/docs/pages/docs/guides/testing.md → docs/content/docs/guides/testing.md b/docs/pages/docs/guides/testing.md → docs/content/docs/guides/testing.md
diff --git a/docs/pages/docs/guides/virtual-fields.md → docs/content/docs/guides/virtual-fields.md b/docs/pages/docs/guides/virtual-fields.md → docs/content/docs/guides/virtual-fields.md
diff --git a/docs/pages/docs/reference/telemetry.md → docs/content/docs/reference/telemetry.md b/docs/pages/docs/reference/telemetry.md → docs/content/docs/reference/telemetry.md
diff --git a/docs/pages/docs/walkthroughs/lesson-1.md → docs/content/docs/walkthroughs/lesson-1.md b/docs/pages/docs/walkthroughs/lesson-1.md → docs/content/docs/walkthroughs/lesson-1.md
diff --git a/docs/pages/docs/walkthroughs/lesson-2.md → docs/content/docs/walkthroughs/lesson-2.md b/docs/pages/docs/walkthroughs/lesson-2.md → docs/content/docs/walkthroughs/lesson-2.md
diff --git a/docs/pages/docs/walkthroughs/lesson-3.md → docs/content/docs/walkthroughs/lesson-3.md b/docs/pages/docs/walkthroughs/lesson-3.md → docs/content/docs/walkthroughs/lesson-3.md
diff --git a/docs/pages/docs/walkthroughs/lesson-4.md → docs/content/docs/walkthroughs/lesson-4.md b/docs/pages/docs/walkthroughs/lesson-4.md → docs/content/docs/walkthroughs/lesson-4.md
diff --git a/docs/pages/docs/walkthroughs/lesson-5.md → docs/content/docs/walkthroughs/lesson-5.md b/docs/pages/docs/walkthroughs/lesson-5.md → docs/content/docs/walkthroughs/lesson-5.md
diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
@@ -0,0 +1,112 @@
+// keystatic.config.ts
+import { config, fields, collection } from '@keystatic/core'
+import { superscriptIcon } from '@keystar/ui/icon/icons/superscriptIcon'
+
+import { mark, wrapper } from '@keystatic/core/content-components'
+// import { WellPreview } from './keystatic/admin-previews'
+
+export default config({
+  storage: {
+    kind: 'local',
+  },
+  ui: {
+    brand: {
+      name: 'Keystone Website',
+    },
+  },
+  collections: {
+    docs: collection({
+      label: 'Docs',
+      path: 'content/docs/**',
+      slugField: 'title',
+      columns: ['title'],
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        description: fields.text({ label: 'Description' }),
+        content: fields.markdoc({
+          label: 'Content',
+          extension: 'md',
+          options: {
+            heading: {
+              levels: [1, 2, 3, 4],
+              schema: {
+                id: fields.text({ label: 'ID' }),
+              },
+            },
+          },
+          components: {
+            heading: wrapper({ label: 'Heading', schema: { id: fields.text({ label: 'ID' }) } }),
+            well: wrapper({
+              label: 'Well',
+              schema: {
+                heading: fields.text({ label: 'Heading' }),
+                grad: fields.select({
+                  label: 'Gradient',
+                  options: [
+                    { label: '1', value: 'grad1' },
+                    { label: '2', value: 'grad2' },
+                    { label: '3', value: 'grad3' },
+                    { label: '4', value: 'grad4' },
+                  ],
+                  defaultValue: 'grad1',
+                }),
+                badge: fields.text({ label: 'Badge' }),
+                href: fields.text({ label: 'Link href', validation: { isRequired: true } }),
+                target: fields.select({
+                  label: 'Link target',
+                  description: 'Where should this link open?',
+                  options: [
+                    { label: 'New tab', value: '_blank' },
+                    { label: 'Same tab', value: '' },
+                  ],
+                  defaultValue: '',
+                }),
+              },
+              /* 
+                Preview below doesn't work properly,
+                but you can try enable it :)
+              */
+
+              // ContentView: (data) => <WellPreview {...data} />,
+            }),
+            hint: wrapper({
+              label: 'Hint',
+              schema: {
+                kind: fields.select({
+                  label: 'Kind',
+                  options: [
+                    { label: 'Tip', value: 'tip' },
+                    { label: 'Warning', value: 'warn' },
+                    { label: 'Error', value: 'error' },
+                  ],
+                  defaultValue: 'tip',
+                }),
+              },
+            }),
+            'related-content': wrapper({ label: 'Related Content', schema: {} }),
+            sup: mark({ label: 'Superscript', schema: {}, icon: superscriptIcon, tag: 'sup' }),
+          },
+        }),
+      },
+    }),
+
+    // Blog
+    posts: collection({
+      path: 'content/blog/*',
+      label: 'Blog',
+      slugField: 'title',
+      columns: ['title'],
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        description: fields.text({ label: 'Description' }),
+        publishDate: fields.date({ label: 'Publish Date', validation: { isRequired: true } }),
+        authorName: fields.text({ label: 'Author Name', validation: { isRequired: true } }),
+        authorHandle: fields.url({ label: 'Author Handle' }),
+        metaImageUrl: fields.url({ label: 'Meta Image URL' }),
+        content: fields.markdoc({ label: 'Content', extension: 'md' }),
+      },
+    }),
+  },
+})
diff --git a/docs/keystatic/admin-previews.tsx b/docs/keystatic/admin-previews.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Well } from '../components/primitives/Well'
+
+export function WellPreview (data) {
+  return <Well {...data.value}>{data.children}</Well>
+}
diff --git a/docs/lib/keystatic-reader.ts b/docs/lib/keystatic-reader.ts
@@ -0,0 +1,4 @@
+import { createReader } from '@keystatic/core/reader'
+import keystaticConfig from '../keystatic.config'
+
+export const reader = createReader(process.cwd(), keystaticConfig)
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/docs/package.json b/docs/package.json
@@ -22,6 +22,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/server": "11.11.0",
     "@emotion/weak-memoize": "^0.3.0",
+    "@keystar/ui": "^0.7.6",
+    "@keystatic/core": "^0.5.24",
+    "@keystatic/next": "^5.0.1",
     "@keystone-6/fields-document": "workspace:^",
     "@keystone-ui/core": "workspace:^",
     "@keystone-ui/icons": "workspace:^",

diff --git a/docs/pages/blog/[post].tsx b/docs/pages/blog/[post].tsx
@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import path from 'path'
 import { jsx } from '@emotion/react'
+import { transform } from '@markdoc/markdoc'
 import {
   type GetStaticPathsResult,
   type GetStaticPropsContext,
@@ -11,20 +11,22 @@ import {
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parse, format } from 'date-fns'
-import { globby } from 'globby'
-import { type BlogContent, readBlogContent } from '../../markdoc'
+import { type BlogContent } from '../../markdoc'
 import { extractHeadings, Markdoc } from '../../components/Markdoc'
 import { BlogPage } from '../../components/Page'
 import { Heading } from '../../components/docs/Heading'
 import { Type } from '../../components/primitives/Type'
 import { getOgAbsoluteUrl } from '../../lib/og-util'
+import { reader } from '../../lib/keystatic-reader'
+import { baseMarkdocConfig } from '../../markdoc/config'
 
 export default function Page (props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
   const headings = [
     { id: 'title', depth: 1, label: props.title },
     ...extractHeadings(props.content),
   ]
+
   const publishedDate = props.publishDate
   const parsedDate = parse(publishedDate, 'yyyy-M-d', new Date())
   const formattedDateStr = format(parsedDate, 'MMMM do, yyyy')
@@ -81,17 +83,28 @@ export default function Page (props: InferGetStaticPropsType<typeof getStaticPro
 }
 
 export async function getStaticPaths (): Promise<GetStaticPathsResult> {
-  const files = await globby('**/*.md', {
-    cwd: path.join(process.cwd(), 'pages/blog'),
-  })
+  const posts = await reader.collections.posts.list()
   return {
-    paths: files.map(file => ({ params: { post: file.replace(/\.md$/, '') } })),
+    paths: posts.map(post => ({ params: { post } })),
     fallback: false,
   }
 }
 
+type KeystaticPostsContent = Omit<BlogContent, 'authorHandle' | 'metaImageUrl'> & {
+  authorHandle: string | null
+  metaImageUrl: string | null
+}
+
 export async function getStaticProps (
   args: GetStaticPropsContext<{ post: string }>
-): Promise<GetStaticPropsResult<BlogContent>> {
-  return { props: await readBlogContent(`pages/blog/${args.params!.post}.md`) }
+): Promise<GetStaticPropsResult<KeystaticPostsContent>> {
+  const keystaticPost = await reader.collections.posts.read(args.params!.post, {
+    resolveLinkedFiles: true,
+  })
+
+  if (!keystaticPost) throw new Error(`Post not found: ${args.params!.post}`)
+
+  const transformedContent = transform(keystaticPost.content.node, baseMarkdocConfig)
+
+  return { props: { ...keystaticPost, content: JSON.parse(JSON.stringify(transformedContent)) } }
 }
diff --git a/docs/pages/blog/index.tsx b/docs/pages/blog/index.tsx
@@ -1,8 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import path from 'path'
-import fs from 'fs/promises'
-import { globby } from 'globby'
 import { type InferGetStaticPropsType, type GetStaticPropsResult } from 'next'
 import Link from 'next/link'
 import { parse, format } from 'date-fns'
@@ -13,8 +10,10 @@ import { Page } from '../../components/Page'
 import { Type } from '../../components/primitives/Type'
 import { Highlight } from '../../components/primitives/Highlight'
 import { useMediaQuery } from '../../lib/media'
-import { type BlogFrontmatter, extractBlogFrontmatter } from '../../markdoc'
 import { siteBaseUrl } from '../../lib/og-util'
+import { reader } from '../../lib/keystatic-reader'
+import { type Entry } from '@keystatic/core/reader'
+import type keystaticConfig from '../../keystatic.config'
 
 const today = new Date()
 export default function Docs (props: InferGetStaticPropsType<typeof getStaticProps>) {
@@ -163,28 +162,15 @@ export async function getStaticProps (): Promise<
   GetStaticPropsResult<{
     posts: {
       slug: string
-      frontmatter: BlogFrontmatter
+      frontmatter: Omit<Entry<typeof keystaticConfig['collections']['posts']>, 'content'>
     }[]
   }>
 > {
-  const files = await globby('*.md', {
-    cwd: path.join(process.cwd(), 'pages/blog'),
-  })
+  const keystaticPosts = await reader.collections.posts.all()
 
-  return {
-    props: {
-      posts: await Promise.all(
-        files.map(async filename => {
-          const contents = await fs.readFile(
-            path.join(process.cwd(), 'pages/blog', filename),
-            'utf8'
-          )
-          return {
-            slug: filename.replace(/\.md$/, ''),
-            frontmatter: extractBlogFrontmatter(contents),
-          }
-        })
-      ),
-    },
-  }
+  const postMeta = keystaticPosts.map(post => ({
+    slug: post.slug,
+    frontmatter: { ...post.entry, content: null },
+  }))
+  return { props: { posts: postMeta } }
 }
diff --git a/docs/pages/docs/[...rest].tsx b/docs/pages/docs/[...rest].tsx
@@ -1,4 +1,3 @@
-import path from 'path'
 import React from 'react'
 import {
   type GetStaticPathsResult,
@@ -7,11 +6,13 @@ import {
   type InferGetStaticPropsType,
 } from 'next'
 import { useRouter } from 'next/router'
-import { globby } from 'globby'
-import { type DocsContent, readDocsContent } from '../../markdoc'
+import { type DocsContent } from '../../markdoc'
 import { extractHeadings, Markdoc } from '../../components/Markdoc'
 import { DocsPage } from '../../components/Page'
 import { Heading } from '../../components/docs/Heading'
+import { reader } from '../../lib/keystatic-reader'
+import { transform } from '@markdoc/markdoc'
+import { baseMarkdocConfig } from '../../markdoc/config'
 
 export default function DocPage (props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
@@ -37,17 +38,23 @@ export default function DocPage (props: InferGetStaticPropsType<typeof getStatic
 }
 
 export async function getStaticPaths (): Promise<GetStaticPathsResult> {
-  const files = await globby('**/*.md', {
-    cwd: path.join(process.cwd(), 'pages/docs'),
-  })
+  const pages = await reader.collections.docs.list()
   return {
-    paths: files.map(file => ({ params: { rest: file.replace(/\.md$/, '').split('/') } })),
+    paths: pages.map(page => ({ params: { rest: page.split('/') } })),
     fallback: false,
   }
 }
 
 export async function getStaticProps (
   args: GetStaticPropsContext<{ rest: string[] }>
 ): Promise<GetStaticPropsResult<DocsContent>> {
-  return { props: await readDocsContent(`pages/docs/${args.params!.rest.join('/')}.md`) }
+  const doc = await reader.collections.docs.read(args.params!.rest.join('/'), {
+    resolveLinkedFiles: true,
+  })
+
+  if (!doc) throw new Error(`Doc page not found: ${args.params!.rest.join('/')}`)
+
+  const transformedContent = transform(doc.content.node, baseMarkdocConfig)
+
+  return { props: { ...doc, content: JSON.parse(JSON.stringify(transformedContent)) } }
 }
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -1,20 +1,24 @@
 {
   "compilerOptions": {
-    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "strict": false,
     "noEmit": true,
-    "esModuleInterop": true,
+    "incremental": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }