diff --git a/browser/create-template/templates/nextjs-site/src/components/MarkdownContent.tsx b/browser/create-template/templates/nextjs-site/src/components/MarkdownContent.tsx index 398ec92e5..44a4a81ae 100644 --- a/browser/create-template/templates/nextjs-site/src/components/MarkdownContent.tsx +++ b/browser/create-template/templates/nextjs-site/src/components/MarkdownContent.tsx @@ -13,21 +13,23 @@ import styles from '@/views/Block/TextBlock.module.css'; */ export const MarkdownContent = ({ subject, - initialContent, + initialValue, }: { subject: string; - initialContent: string | TrustedHTML; + initialValue: string; }) => { const resource = useResource(subject); - const matterResult = matter(resource.props.description ?? ''); + const matterResult = matter( + resource.loading ? initialValue : resource.props.description, + ); const processed = remark().use(html).processSync(matterResult.content); return (
); diff --git a/browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.tsx b/browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.tsx index 989854715..2322f3117 100644 --- a/browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.tsx +++ b/browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.tsx @@ -1,19 +1,12 @@ import { Resource } from '@tomic/react'; -import { remark } from 'remark'; -import html from 'remark-html'; -import matter from 'gray-matter'; import { MarkdownContent } from '@/components/MarkdownContent'; +import type { TextBlock as TextBlockType } from '@/ontologies/website'; -const TextBlock = ({ resource }: { resource: Resource }) => { - const matterResult = matter(resource.props.description); - - const processed = remark().use(html).processSync(matterResult.content); - - const initialContent = processed.toString(); +const TextBlock = ({ resource }: { resource: Resource }) => { return ( ); }; diff --git a/browser/create-template/templates/nextjs-site/src/views/FullPage/BlogpostFullPage.tsx b/browser/create-template/templates/nextjs-site/src/views/FullPage/BlogpostFullPage.tsx index 66a787104..2bf48dd38 100644 --- a/browser/create-template/templates/nextjs-site/src/views/FullPage/BlogpostFullPage.tsx +++ b/browser/create-template/templates/nextjs-site/src/views/FullPage/BlogpostFullPage.tsx @@ -1,11 +1,8 @@ import Container from '@/components/Layout/Container'; -import { Blogpost } from '@/ontologies/website'; +import type { Blogpost } from '@/ontologies/website'; import { Resource } from '@tomic/lib'; import styles from './BlogpostFullPage.module.css'; import { Image } from '@/components/Image'; -import matter from 'gray-matter'; -import html from 'remark-html'; -import { remark } from 'remark'; import { MarkdownContent } from '@/components/MarkdownContent'; const formatter = new Intl.DateTimeFormat('default', { @@ -16,9 +13,6 @@ const formatter = new Intl.DateTimeFormat('default', { const BlogpostFullPage = ({ resource }: { resource: Resource }) => { const date = formatter.format(new Date(resource.props.publishedAt)); - const matterResult = matter(resource.props.description); - const processed = remark().use(html).processSync(matterResult.content); - const initialContent = processed.toString(); return ( @@ -31,7 +25,7 @@ const BlogpostFullPage = ({ resource }: { resource: Resource }) => {

{date}