render page content based on tokens; ignore rendered content field

src/components/Markdown/index.tsx

@@ -0,0 +1,19 @@
+import { Html } from 'src/components/Html'
+import MarkdownIt from 'markdown-it'
+import Typograf from 'typograf'
+import { memo } from 'react'
+
+const tp = new Typograf({ locale: ['ru'] })
+const md = new MarkdownIt({
+    html: true,
+})
+
+export type MarkdownProps = {
+    data: string
+}
+
+export const Markdown: React.SFC<MarkdownProps> = memo(props => (
+    <Html
+        html={tp.execute(md.render(props.data))}
+    />
+))

src/components/Page/index.tsx

@@ -7,19 +7,13 @@ import { ITag } from 'src/types'
 
 export type PageProps = {
     style?: React.CSSProperties
-    children: string
     date: Date
     tags: ITag[]
 }
 
 export const Page: React.FC<PageProps> = props => (
     <div className={'page'} style={props.style}>
-        <Html
-            as={'article'}
-            className={'article'}
-            html={props.children}
-        />
-
+        {props.children}
         <hr />
         <Share />
 

src/lib/tokens.ts

@@ -0,0 +1,36 @@
+import { TextToken, Token } from 'src/types'
+
+export function joinTextTokens(tokens: TextToken[]): TextToken {
+    return {
+        token: 'text',
+        data: tokens
+            .map(x => x.data)
+            .join('\n\n'),
+    }
+}
+
+export function joinTokens(tokens: Token[]): Token[] {
+    let buffer: TextToken[] = []
+    const result: Token[] = []
+
+    for (const token of tokens) {
+        if (token.token === 'text') {
+            buffer.push(token)
+            continue
+        }
+
+        const compiledToken = joinTextTokens(buffer)
+        buffer = []
+
+        result.push(compiledToken)
+        result.push(token)
+    }
+
+    if (buffer.length) {
+        result.push(
+            joinTextTokens(buffer)
+        )
+    }
+
+    return result
+}

src/style/article.css

@@ -27,10 +27,6 @@
     line-height: var(--article-line-height);
 }
 
-.article p:last-child {
-    margin-bottom: 0;
-}
-
 .article blockquote {
     padding: var(--size-m);
     font-size: var(--font-size-accent);

src/types.ts

@@ -103,3 +103,35 @@ export type ImageDefinition = {
     height: number
     src: string
 }
+
+export type TextToken = {
+    token: 'text'
+    data: string
+}
+
+export type ImageToken = {
+    token: 'image'
+    data: {
+        src: string
+        alt: string
+        caption: string
+    }
+}
+
+export type FileTokenData = {
+    url: string
+    slug: string
+    image_url: string
+    file_url: string
+    title: string
+    file_size: number
+    file_format: 'application/pdf'
+}
+
+export type FileToken = {
+    token: 'file'
+    data: FileTokenData
+}
+
+export type Token = TextToken | ImageToken | FileToken
+