Proof of Concept MDAST in Server Components

apps/www/components/Article/Page.js

@@ -772,6 +772,7 @@ const ArticlePage = ({
                   </Center>
                 </div>
               )}
+
               {isFlyer ? (
                 <Flyer
                   meta={meta}
@@ -871,6 +872,21 @@ const ArticlePage = ({
                                 </div>
                               )}
 
+                              {isEditor && (
+                                <div style={{ marginTop: 16 }}>
+                                  <Link
+                                    href={`/rsc-artikel${cleanedPath}`}
+                                    style={{
+                                      background: '#E9A733',
+                                      color: '#fff',
+                                      padding: 4,
+                                    }}
+                                  >
+                                    RSC (Beta)
+                                  </Link>
+                                </div>
+                              )}
+
                               {(hasAudioSource ||
                                 article?.meta?.willBeReadAloud) && (
                                 <div style={{ marginTop: 32 }}>

apps/www/graphql/republik-api/queries/ArticleQuery.gql

@@ -0,0 +1,18 @@
+query Article($path: String!) {
+  article: document(path: $path) {
+    id
+    type
+    repoId
+    content
+
+    meta {
+      publishDate
+      lastPublishedAt
+      template
+      path
+      title
+      kind
+      description
+    }
+  }
+}

apps/www/package.json

@@ -149,10 +149,13 @@
     "react-maskedinput": "^4.0.1",
     "react-simple-typewriter": "^5.0.1",
     "react-textarea-autosize": "^7.1.2",
+    "rehype-react": "^8.0.0",
+    "remark-rehype": "^11.1.0",
     "scroll-into-view": "1.16.2",
     "sharp": "^0.31.3",
     "subscriptions-transport-ws": "^0.9.19",
     "topojson": "^3.0.2",
+    "unified": "^11.0.4",
     "use-resize-observer": "^9.1.0",
     "useragent": "^2.3.0",
     "uuid": "^9.0.1",

apps/www/src/app/rsc-artikel/[...path]/components/center.tsx

@@ -0,0 +1,30 @@
+import { css } from '@app/styled-system/css'
+
+export const Center = (props) => {
+  return (
+    <div
+      className={css({
+        textStyle: 'serifRegular',
+        fontSize: 'xl',
+        maxWidth: '[665px]',
+        margin: 'auto',
+        '& a': {
+          color: 'text',
+        },
+        '& p': {
+          mb: '4',
+        },
+        '& strong': {
+          fontWeight: 'medium',
+        },
+        '& h1, & h2, & h3, & h4, & h5, & h6': {
+          textStyle: 'serifBold',
+          mb: '4',
+          mt: '8',
+          '&:first-of-type': { mt: '0' },
+        },
+      })}
+      {...props}
+    />
+  )
+}

apps/www/src/app/rsc-artikel/[...path]/components/figure.tsx

@@ -0,0 +1 @@
+export const Figure = (props) => <figure {...props} />

apps/www/src/app/rsc-artikel/[...path]/components/index.ts

@@ -0,0 +1,6 @@
+export { Center } from './center'
+export { Figure } from './figure'
+export { Infobox } from './infobox'
+export { Title } from './title'
+
+export * from './tags'

apps/www/src/app/rsc-artikel/[...path]/components/infobox.tsx

@@ -0,0 +1,18 @@
+import { css } from '@app/styled-system/css'
+
+export const Infobox = (props) => {
+  return (
+    <section
+      className={css({
+        textStyle: 'sans',
+        fontSize: 'base',
+        borderTopColor: 'text',
+        borderTopWidth: 1,
+        '& h1, & h2, & h3, & h4, & h5, & h6': {
+          textStyle: 'sansSerifMedium',
+        },
+      })}
+      {...props}
+    />
+  )
+}

apps/www/src/app/rsc-artikel/[...path]/components/tags.tsx

@@ -0,0 +1,22 @@
+import { css } from '@app/styled-system/css'
+import Link from 'next/link'
+
+export const a = (props) => {
+  const [title, description] = (props.title || '').split('%%')
+
+  return description ? (
+    <Link
+      className={css({
+        textDecorationLine: 'underline',
+        textDecorationStyle: 'dotted',
+        textDecorationSkip: 'ink',
+        textDecorationThickness: 2,
+        textUnderlineOffset: 3,
+      })}
+      {...props}
+      title={title + '\n\n' + description}
+    />
+  ) : (
+    <Link {...props} />
+  )
+}

apps/www/src/app/rsc-artikel/[...path]/components/title.tsx

@@ -0,0 +1,5 @@
+import { css } from '@app/styled-system/css'
+
+export const Title = (props) => {
+  return <div className={css({ fontSize: '4xl' })} {...props} />
+}

apps/www/src/app/rsc-artikel/[...path]/mdast-render.tsx

@@ -0,0 +1,52 @@
+import * as components from '@app/app/rsc-artikel/[...path]/components'
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
+import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react'
+import remarkRehype, { Options as RemarkRehypeOptions } from 'remark-rehype'
+import { unified } from 'unified'
+
+const identifierToComponentName = (id: string): string => {
+  return id.charAt(0).toUpperCase() + id.slice(1).toLowerCase()
+}
+
+const remarkRehypeOptions: RemarkRehypeOptions = {
+  handlers: {
+    // @ts-expect-error zone is not a default mdast node
+    zone(state, node) {
+      const componentName = identifierToComponentName(node.identifier)
+
+      return {
+        type: 'element',
+        tagName: componentName in components ? componentName : 'section',
+        properties: { ...node.data },
+        children: state.all(node),
+      }
+    },
+  },
+}
+
+const rehypeReactOptions: RehypeReactOptions = {
+  Fragment,
+  jsx,
+  jsxs,
+  components,
+}
+
+export const MdastRender = async ({ mdast }: { mdast: any }) => {
+  console.time('mdast->rehype')
+  const rehypeTree = await unified()
+    .use(remarkRehype, remarkRehypeOptions)
+    .run(mdast)
+  console.timeEnd('mdast->rehype')
+  console.time('rehype->jsx')
+  const nodes = unified()
+    .use(rehypeReact, rehypeReactOptions)
+    .stringify(rehypeTree)
+  console.timeEnd('rehype->jsx')
+
+  return (
+    <>
+      {nodes}
+      <pre>{JSON.stringify(mdast, null, 2)}</pre>
+    </>
+  )
+}

apps/www/src/app/rsc-artikel/[...path]/page.tsx

@@ -0,0 +1,52 @@
+import { ArticleDocument } from '#graphql/republik-api/__generated__/gql/graphql'
+import { getClient } from '@app/lib/apollo/client'
+import { MdastRender } from './mdast-render'
+// import { renderMdast } from '@app/lib/mdast/render'
+import { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+
+export async function generateMetadata({
+  params: { path },
+}): Promise<Metadata> {
+  const client = await getClient()
+  const { data } = await client.query({
+    query: ArticleDocument,
+    variables: { path: `/${path.join('/')}` },
+  })
+
+  return {
+    title: data?.article?.meta.title,
+  }
+}
+
+export default async function ArticlePage({
+  params: { path },
+}: {
+  params: { path: string[] }
+}) {
+  const client = await getClient()
+  const { data } = await client.query({
+    query: ArticleDocument,
+    variables: { path: `/${path.join('/')}` },
+  })
+
+  if (!data.article) {
+    return notFound()
+  }
+
+  const {
+    article: { meta, content },
+  } = data
+
+  return (
+    <div>
+      <Link href={`/${path.join('/')}`}>Back to legacy article view</Link>
+      <h1>{meta.title}</h1>
+
+      <MdastRender mdast={content} />
+
+      {/* <pre>{JSON.stringify(content, null, 2)}</pre> */}
+    </div>
+  )
+}

apps/www/src/app/rsc-artikel/layout.tsx

@@ -0,0 +1,20 @@
+import { PageLayout } from '@app/components/layout'
+import { css } from '@app/styled-system/css'
+
+export default async function Layout(props: { children: React.ReactNode }) {
+  return (
+    <div>
+      <PageLayout>
+        <div
+          className={css({
+            color: 'text',
+            pb: '16-32',
+            pt: '4',
+          })}
+        >
+          {props.children}
+        </div>
+      </PageLayout>
+    </div>
+  )
+}