Move docs introduction body to the docs page

apps/web/content/pages/docs.json

@@ -1,11 +1,43 @@
 {
-  "id": "docs",
-  "type": "Docs",
-  "root": "data",
-  "index": "a0",
   "title": "Docs",
-  "alinea": {
+  "navigationTitle": "Introduction",
+  "body": [
+    {
+      "type": "heading",
+      "textAlign": "left",
+      "level": 1,
+      "content": [
+        {
+          "type": "text",
+          "text": "Introduction"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "textAlign": "left",
+      "content": [
+        {
+          "type": "text",
+          "text": "Alinea is an open source headless CMS written in Typescript. It integrates with git by storing content in flat files. Content is bundled with deploys so you can retrieve it without network roundtrips. "
+        }
+      ]
+    }
+  ],
+  "metadata": {
+    "title": "",
+    "description": "",
+    "openGraph": {
+      "title": "",
+      "image": {},
+      "description": ""
+    }
+  },
+  "@alinea": {
+    "entryId": "docs",
+    "type": "Docs",
     "index": "a0",
-    "root": "data"
+    "seeded": true,
+    "root": "pages"
   }
-}
+}

apps/web/content/pages/index.json

@@ -22,17 +22,6 @@
           }
         ]
       },
-      {
-        "type": "heading",
-        "textAlign": "left",
-        "level": 2,
-        "content": [
-          {
-            "type": "text",
-            "text": " "
-          }
-        ]
-      },
       {
         "type": "paragraph",
         "textAlign": "left",
@@ -89,23 +78,23 @@
   },
   "links": [
     {
-      "id": "KFFmmbYVMbbO6ZcG51SEH",
+      "id": "2a7ftYTVOui6duXcA4Js0xG8QC6",
       "index": "a0",
       "type": "entry",
-      "entry": "2AFn42lqIU86a9MI0I4rX3qMJQv",
+      "entry": "docs",
       "label": "Docs",
-      "active": "/docs"
+      "active": ""
     },
     {
-      "id": "YcBOn-HADwb-hCGO0GeY_",
+      "id": "2a7ftRO1unpBDnfvXtgJUBIBwNr",
       "index": "a1",
       "type": "entry",
       "entry": "CC8aJ6-2U3s31micAzTLU",
       "label": "Roadmap",
       "active": ""
     },
     {
-      "id": "Q4Njy-I1fBzyuIBdZhb1f",
+      "id": "2a7ftUxPD7w8EMFYWjpYoJVF6GP",
       "index": "a2",
       "type": "entry",
       "entry": "gx3H52whBKO_DdfcMNI3I",
@@ -121,11 +110,11 @@
       "label": "Developer",
       "links": [
         {
-          "id": "2ANVLD5olNHL82kExSypIXaVndL",
-          "index": "a0",
+          "id": "2a7fvVi9M7zcX2wx3IJfYBrCqeC",
+          "index": "a1",
           "type": "entry",
-          "entry": "2AFn42lqIU86a9MI0I4rX3qMJQv",
-          "label": "Docs"
+          "entry": "docs",
+          "label": ""
         }
       ]
     }

apps/web/src/app/(web)/docs/DocPage.tsx

@@ -0,0 +1,172 @@
+import {BodyView} from '@/blocks/BodyFieldView'
+import {cms} from '@/cms'
+import {Breadcrumbs} from '@/layout/Breadcrumbs'
+import {LayoutWithSidebar} from '@/layout/Layout'
+import {FrameworkPicker} from '@/nav/FrameworkPicker'
+import {supportedFrameworks} from '@/nav/Frameworks'
+import {Link} from '@/nav/Link'
+import {NavTree} from '@/nav/NavTree'
+import {NavItem, nestNav} from '@/nav/NestNav'
+import {Doc} from '@/schema/Doc'
+import {Entry} from 'alinea/core'
+import {HStack, VStack, fromModule} from 'alinea/ui'
+import {IcRoundArrowBack} from 'alinea/ui/icons/IcRoundArrowBack'
+import {IcRoundArrowForward} from 'alinea/ui/icons/IcRoundArrowForward'
+import {Metadata} from 'next'
+import {notFound} from 'next/navigation'
+import css from './DocPage.module.scss'
+
+const styles = fromModule(css)
+
+interface DocPageParams {
+  slug: Array<string>
+  framework: string
+}
+
+interface DocPageProps {
+  params: DocPageParams
+}
+
+const summary = {
+  id: Entry.entryId,
+  title: Entry.title,
+  url: Entry.url
+}
+
+async function getPage(params: DocPageParams) {
+  const slug = params.slug?.slice() ?? []
+  const framework =
+    supportedFrameworks.find(f => f.name === params.framework) ??
+    supportedFrameworks[0]
+  if (params.framework && framework.name !== params.framework)
+    slug.unshift(params.framework)
+  const pathname = slug.map(decodeURIComponent).join('/')
+  const url = pathname ? `/docs/${pathname}` : '/docs'
+  return {
+    framework,
+    doc: await cms.maybeGet(
+      Entry()
+        .where(Entry.url.is(url))
+        .select({
+          ...Doc,
+          id: Entry.entryId,
+          level: Entry.level,
+          parents({parents}) {
+            return parents().select(summary)
+          }
+        })
+    )
+  }
+}
+
+export const dynamicParams = false
+export async function generateStaticParams() {
+  const urls = await cms
+    .in(cms.workspaces.main.pages.docs)
+    .find(Entry().select(Entry.url))
+  return urls.flatMap(url => {
+    return supportedFrameworks
+      .map(framework => {
+        return {
+          framework: framework.name,
+          slug: url.split('/').slice(2)
+        }
+      })
+      .concat({
+        framework: url.split('/')[2],
+        slug: url.split('/').slice(3)
+      })
+  })
+}
+
+export async function generateMetadata({
+  params
+}: DocPageProps): Promise<Metadata> {
+  const {doc} = await getPage(params)
+  if (!doc) return notFound()
+  return {title: doc.title}
+}
+
+export default async function DocPage({params}: DocPageProps) {
+  const {doc, framework} = await getPage(params)
+  if (!doc) return notFound()
+  const select = {
+    id: Entry.entryId,
+    type: Entry.type,
+    url: Entry.url,
+    title: Entry.title,
+    navigationTitle: Doc.navigationTitle,
+    parent: Entry.parent
+  }
+  const root = await cms.get(Entry({url: '/docs'}).select(select))
+  const nav = await cms
+    .in(cms.workspaces.main.pages.docs)
+    .find(Entry().select(select))
+  const nested = nestNav(
+    [
+      root,
+      ...nav.map(item => ({
+        ...item,
+        parent: item.parent === root.id ? null : item.parent
+      }))
+    ].map(item => ({
+      ...item,
+      title: item.navigationTitle ?? item.title
+    }))
+  )
+  const itemsIn = (item: NavItem): Array<NavItem> =>
+    item.children ? [item, ...item.children.flatMap(itemsIn)] : [item]
+  const docs = nested.flatMap(itemsIn)
+  const index = docs.findIndex(item => item.id === doc.id)
+  const prev = docs[index - 1]
+  const next = docs[index + 1]
+  return (
+    <LayoutWithSidebar
+      sidebar={
+        <VStack gap={10}>
+          <FrameworkPicker />
+          <NavTree nav={nested} />
+        </VStack>
+      }
+    >
+      <Breadcrumbs parents={doc.parents.slice(1)} />
+      <BodyView body={doc.body} />
+      <HStack
+        gap={20}
+        justify="space-between"
+        wrap
+        className={styles.root.nav()}
+      >
+        {prev?.url && (
+          <Link
+            href={framework.link(prev.url)}
+            className={styles.root.nav.link()}
+          >
+            <span className={styles.root.nav.link.icon()}>
+              <IcRoundArrowBack />
+            </span>
+            <VStack gap={4}>
+              <span className={styles.root.nav.link.label()}>Previous</span>
+              <span className={styles.root.nav.link.title()}>{prev.title}</span>
+            </VStack>
+          </Link>
+        )}
+        {next?.url && (
+          <Link
+            href={framework.link(next.url)}
+            className={styles.root.nav.link('right')}
+          >
+            <VStack gap={4}>
+              <span className={styles.root.nav.link.label()}>Next</span>
+              <span className={styles.root.nav.link.title()}>{next.title}</span>
+            </VStack>
+
+            <span className={styles.root.nav.link.icon()}>
+              <IcRoundArrowForward />
+            </span>
+          </Link>
+        )}
+      </HStack>
+    </LayoutWithSidebar>
+  )
+}