Use Keystatic in DS docs (#1021)

design-system/docs/app/(site)/[[...slug]]/page.tsx

@@ -0,0 +1,54 @@
+import { Metadata } from 'next';
+
+import { notFound } from 'next/navigation';
+import { DocPage } from '../../../components/doc-page';
+import { transformMarkdoc } from '../../../utils/markdoc';
+import { reader } from '../../../utils/packages';
+
+export async function generateStaticParams() {
+  const entries = await reader.collections.otherDocs.list();
+
+  return entries.map(slug => {
+    const split = slug.split('/');
+    return {
+      slug: split[split.length - 1] === 'index' ? split.slice(0, -1) : split,
+    };
+  });
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug?: string[] };
+}): Promise<Metadata> {
+  const slug = (params.slug ?? ['index']).join('/');
+  let entry = await reader.collections.otherDocs.read(slug);
+  if (!entry && slug !== 'index') {
+    entry = await reader.collections.otherDocs.read(slug + '/index');
+  }
+  if (!entry) notFound();
+  return { title: entry.title };
+}
+
+export default async function Page(props: { params: { slug?: string[] } }) {
+  const slug = (props.params.slug ?? ['index']).join('/');
+  let entry = await reader.collections.otherDocs.read(slug, {
+    resolveLinkedFiles: true,
+  });
+  if (!entry && slug !== 'index') {
+    entry = await reader.collections.otherDocs.read(slug + '/index', {
+      resolveLinkedFiles: true,
+    });
+  }
+  if (!entry) notFound();
+
+  const content = transformMarkdoc(slug, entry?.content.node);
+
+  return (
+    <DocPage
+      content={content}
+      title={entry.title}
+      description={entry.description}
+    />
+  );
+}

design-system/docs/app/colours/colours-inner.tsx → design-system/docs/app/(site)/colours/colours-inner.tsx

@@ -5,7 +5,7 @@ import { Box, BoxProps, Grid, Flex, repeat } from '@keystar/ui/layout';
 import { ColorForeground, tokenSchema } from '@keystar/ui/style';
 import { Heading, Text } from '@keystar/ui/typography';
 
-import { DocsContent } from '../../components/content';
+import { DocsContent } from '../../../components/content';
 
 export function Colours(): JSX.Element {
   const colors = [

design-system/docs/app/layout.tsx → design-system/docs/app/(site)/layout.tsx

@@ -2,8 +2,8 @@ import { NextRootProvider, nextRootScript } from '@keystar/ui/next';
 import { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
-import { Layout } from '../components/layout';
-import { getNavigation } from '../utils/packages';
+import { Layout } from '../../components/layout';
+import { getNavigation } from '../../utils/packages';
 import { basePageTitle } from './utils';
 
 const inter = Inter({

design-system/docs/app/not-found.tsx → design-system/docs/app/(site)/not-found.tsx

@@ -1,6 +1,6 @@
 import { Heading, Text } from '@keystar/ui/typography';
 import { Metadata } from 'next';
-import { DocsContent } from '../components/content';
+import { DocsContent } from '../../components/content';
 import { makePageTitle } from './utils';
 
 export const metadata: Metadata = {

design-system/docs/app/(site)/package/[package]/[[...slug]]/page.tsx

@@ -0,0 +1,60 @@
+import { Metadata } from 'next';
+
+import { notFound } from 'next/navigation';
+import { DocPage } from '../../../../../components/doc-page';
+import { transformMarkdoc } from '../../../../../utils/markdoc';
+import { reader } from '../../../../../utils/packages';
+
+export async function generateStaticParams() {
+  const entries = await reader.collections.packageDocs.list();
+  return entries.map(slug => {
+    const split = slug.split('/').filter(x => x !== 'docs');
+    return {
+      slug: split[split.length - 1] === 'index' ? split.slice(0, -1) : split,
+    };
+  });
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug?: string[] };
+}): Promise<Metadata> {
+  const slug = (params.slug ?? ['index']).join('/');
+  let entry = await reader.collections.packageDocs.read(slug);
+  if (!entry && slug !== 'index') {
+    entry = await reader.collections.packageDocs.read(slug + '/index');
+  }
+  if (!entry) notFound();
+  return { title: entry.title };
+}
+
+export default async function Page(props: { params: { slug?: string[] } }) {
+  if (!props.params.slug) notFound();
+
+  const slugWithDocsBitAdded = [
+    ...props.params.slug[0],
+    'docs',
+    ...props.params.slug.slice(1),
+  ];
+  const slug = slugWithDocsBitAdded.join('/');
+  let entry = await reader.collections.packageDocs.read(slug, {
+    resolveLinkedFiles: true,
+  });
+  if (!entry && slug !== 'index') {
+    entry = await reader.collections.packageDocs.read(slug + '/index', {
+      resolveLinkedFiles: true,
+    });
+  }
+  if (!entry) notFound();
+
+  const content = transformMarkdoc(slug, entry?.content.node);
+
+  return (
+    <DocPage
+      content={content}
+      title={entry.title}
+      description={entry.description}
+    />
+  );
+}

design-system/docs/app/api/keystatic/[...params]/route.ts

@@ -0,0 +1,7 @@
+import localConfig from '../../../../keystatic.config';
+import { makeRouteHandler } from '@keystatic/next/route-handler';
+
+export const { POST, GET } = makeRouteHandler({
+  config: localConfig,
+  localBaseDirectory: '../..',
+});

design-system/docs/app/keystatic/[[...params]]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null;
+}

design-system/docs/app/keystatic/keystatic.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { makePage } from '@keystatic/next/ui/app';
+import localConfig from '../../keystatic.config';
+
+export default makePage(localConfig);

design-system/docs/app/keystatic/layout.tsx

@@ -0,0 +1,16 @@
+import KeystaticApp from './keystatic';
+
+export const metadata = {
+  title: 'Keystatic',
+};
+
+export default function RootLayout() {
+  return (
+    <html>
+      <head />
+      <body>
+        <KeystaticApp />
+      </body>
+    </html>
+  );
+}

design-system/docs/keystatic.config.tsx

@@ -0,0 +1,61 @@
+import { collection, config, fields } from '@keystatic/core';
+import { categories } from './utils/categories';
+
+export default config({
+  storage: { kind: process.env.NODE_ENV === 'production' ? 'cloud' : 'local' },
+  cloud: {
+    project: 'thinkmill-labs/keystar-ui',
+  },
+  collections: {
+    packageDocs: collection({
+      label: 'Package Docs',
+      path: 'design-system/pkg/src/**',
+      slugField: 'title',
+      entryLayout: 'content',
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        description: fields.text({ label: 'Description', multiline: true }),
+        category: fields.select({
+          label: 'Category',
+          options: categories.map(category => ({
+            label: category,
+            value: category,
+          })),
+          defaultValue: 'Introduction',
+        }),
+        content: fields.markdoc({
+          label: 'Content',
+          options: {
+            codeBlock: {
+              schema: {
+                live: fields.checkbox({ label: 'Live' }),
+              },
+            },
+          },
+        }),
+      },
+    }),
+    otherDocs: collection({
+      label: 'Other Docs',
+      path: 'design-system/docs/content/**',
+      slugField: 'title',
+      entryLayout: 'content',
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        description: fields.text({ label: 'Description', multiline: true }),
+        content: fields.markdoc({
+          label: 'Content',
+          options: {
+            codeBlock: {
+              schema: {
+                live: fields.checkbox({ label: 'Live' }),
+              },
+            },
+          },
+        }),
+      },
+    }),
+  },
+});

design-system/docs/next.config.mjs

@@ -4,7 +4,10 @@ import withPreconstruct from '@preconstruct/next';
 const nextConfig = {
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-  experimental: { serverComponentsExternalPackages: ['esbuild'] },
+  experimental: {
+    serverComponentsExternalPackages: ['esbuild'],
+    externalDir: true,
+  },
   // reactStrictMode: true,
   // webpack: config => ({
   //   ...config,

design-system/docs/package.json

@@ -20,14 +20,14 @@
     "@babel/runtime": "^7.18.3",
     "@internationalized/date": "^3.5.0",
     "@keystar/ui": "workspace:^",
+    "@keystatic/core": "workspace:^",
+    "@keystatic/next": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
     "@react-aria/i18n": "^3.8.0",
-    "@types/js-yaml": "^4.0.5",
     "clipboard-copy": "^4.0.1",
     "emery": "^1.4.1",
     "esbuild": "^0.14.53",
-    "js-yaml": "^4.1.0",
-    "next": "^14.0.0",
+    "next": "^14.1.3",
     "next-seo": "^5.4.0",
     "parse-numeric-range": "^1.3.0",
     "prism-react-renderer": "^1.3.3",