Don't render markdown in multiple components in nextjs template

Author: Polleps

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<TextBlock>(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 (
     <div
       className={styles.wrapper}
       dangerouslySetInnerHTML={{
-        __html: resource.loading ? initialContent : processed.toString(),
+        __html: processed.toString(),
       }}
     />
   );

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<TextBlockType> }) => {
   return (
     <MarkdownContent
       subject={resource.subject}
-      initialContent={initialContent}
+      initialValue={resource.props.description}
     />
   );
 };

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<Blogpost> }) => {
   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 (
     <Container>
@@ -31,7 +25,7 @@ const BlogpostFullPage = ({ resource }: { resource: Resource<Blogpost> }) => {
           <p className={styles.publishDate}>{date}</p>
           <MarkdownContent
             subject={resource.subject}
-            initialContent={initialContent}
+            initialValue={resource.props.description}
           />
         </div>
       </div>