text component updates + performance improved

pages/[...slug].tsx

@@ -2,7 +2,6 @@ import Head from 'next/head'
 import { App } from 'src/components/App'
 import { tail } from 'lodash'
 import { Page } from 'src/components/Page'
-import { Markdown } from 'src/components/Markdown'
 import { Meta } from 'src/components/Meta'
 import { MetaBuilder } from 'src/lib/meta'
 import { apiGet } from '@/next-lib'
@@ -80,14 +79,6 @@ const Index: NextPage<Props> = props => {
                 <article className={'article'}>
                     {props.tokens.map((x, i) => {
                         switch (x.token) {
-                            case 'text':
-                                return (
-                                    <Markdown
-                                        key={i}
-                                        data={x.data}
-                                    />
-                                )
-
                             case 'html':
                                 return (
                                     <Html

src/components/Markdown/index.tsx

@@ -1,13 +0,0 @@
-import { Html } from 'src/components/Html'
-import { memo } from 'react'
-import { typograf, markdownToHtml } from 'src/lib/text'
-
-export type MarkdownProps = {
-    data: string
-}
-
-export const Markdown: React.SFC<MarkdownProps> = memo(props => (
-    <Html
-        html={typograf(markdownToHtml(props.data))}
-    />
-))

src/remote/factory.ts

@@ -1,6 +1,9 @@
 import { ImageDefinition, IMenu, IPage, ITag, PageCardDto, Token } from "@/types";
 import { asItem } from "./lib";
 import { StrapiComponentEmbed, StrapiComponent, StrapiHome, StrapiPage, StrapiPageCard, StrapiTag, StrapiMedia, StrapiMenu } from "./types";
+import { typograf, markdownToHtml } from 'src/lib/text'
+
+const md = (text: string) => typograf(markdownToHtml(text))
 
 export function createPageUrls(pages: StrapiPage[]) {
     return {
@@ -42,8 +45,8 @@ export function createPageTokens(components: StrapiComponent[]): Token[] {
         switch (component.__component) {
             case 'hudozka.text': {
                 return {
-                    token: 'text',
-                    data: component.text,
+                    token: 'html',
+                    data: md(component.text),
                 }
             }
 
@@ -140,8 +143,8 @@ export function createPage(res: StrapiPage | StrapiPage[]): IPage | null {
         cover,
         tokens: [
             {
-                token: 'text',
-                data: `# ${item.title}`,
+                token: 'html',
+                data: md(`# ${item.title}`),
             },
 
             ...createPageTokens(item.content)

src/style/article.css

@@ -25,11 +25,13 @@
 
 .article li {
     margin-bottom: var(--size-s);
+    max-width: var(--text-max-width);
 }
 
 .article p {
     margin-bottom: var(--size-m);
     line-height: var(--article-line-height);
+    max-width: var(--text-max-width);
 }
 
 .article blockquote {

src/style/style.css

@@ -51,6 +51,8 @@
     --content-wide-width: 100%;
     --content-wide-margin: var(--size-l) var(--size-xl);
 
+    --text-max-width: 800px;
+
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
     --picture-wide-increase: 100px;