[pkg/template,#428][s]: add mermaid plugin and use component

packages/template/contentlayer.config.ts

@@ -5,7 +5,7 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeMathjax from "rehype-mathjax";
 import rehypePrismPlus from "rehype-prism-plus";
 import rehypeSlug from "rehype-slug";
-import codeExtra from "remark-code-extra";
+import mdxMermaid from "mdx-mermaid";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import smartypants from "remark-smartypants";
@@ -149,52 +149,6 @@ export default makeSource({
       remarkMath,
       callouts,
       [wikiLinkPlugin, { markdownFolder: siteConfig.content }],
-      /** Using the code extra plugin from https://github.com/s0/remark-code-extra
-       *  to create new mermaid pre tags to use with mdx-mermaid.
-       *  rehypePrismPlus plugin modifies the pre tags and due to this mdx-mermaid
-       *  component cannot receive the values in the required format.
-       *  Refer issue https://github.com/flowershow/flowershow/issues/12 for more info.
-       */
-      [
-        codeExtra,
-        {
-          transform: (node) => {
-            if (node.type === "code" && node.lang === "mermaid") {
-              // reset values else rehype-prism-plus throws error
-              // node.type = "";
-              // node.lang = "";
-              return {
-                // create new pre tag element here for mermaid
-                after: [
-                  {
-                    type: "element",
-                    tagName: "pre",
-                    properties: {
-                      className: "code-mermaid",
-                    },
-                    children: [
-                      {
-                        type: "text",
-                        value: node.value,
-                      },
-                    ],
-                  },
-                ],
-                // remove the pre tag element created by rehype-prism-plus
-                // otherwise both will be displayed
-                transform: (n) => {
-                  const preElem = n.data.hChildren.find(
-                    (el) => el.tagName === "pre"
-                  );
-                  const index = n.data.hChildren.indexOf(preElem);
-                  n.data.hChildren.splice(index, 1);
-                },
-              };
-            }
-            return null;
-          },
-        },
-      ],
       [
         remarkToc,
         {
@@ -203,6 +157,7 @@ export default makeSource({
           tight: true,
         },
       ],
+      [mdxMermaid, {}],
     ],
     rehypePlugins: [
       rehypeSlug,

packages/template/pages/[[...slug]].tsx

@@ -3,13 +3,16 @@ import { NextSeo } from "next-seo";
 import { allDocuments } from "contentlayer/generated";
 import { useMDXComponent } from "next-contentlayer/hooks";
 
-import { CustomLink, Pre, BlogsList } from "@flowershow/core";
+import { CustomLink, Pre, BlogsList, Mermaid } from "@flowershow/core";
 
 import { getPageData } from "../lib/getPageData";
 import { getAuthorsDetails } from "../lib/getAuthorsDetails";
 import layouts from "../layouts";
 import { siteConfig } from "../config/siteConfig";
 
+// import type { MermaidProps } from "mdx-mermaid/lib/Mermaid";
+// const Mermaid = dynamic(() => import("mdx-mermaid/lib/Mermaid").then((res) => res.Mermaid), { ssr: false })
+
 // workaround solution to allow importing components
 // that import from "next" package (e.g. next/link) in MDX pages
 // more info: https://github.com/contentlayerdev/contentlayer/issues/288
@@ -41,6 +44,7 @@ export default function Page({ globals, body, ...meta }) {
       />
     ),
     pre: Pre,
+    mermaid: Mermaid,
     /* eslint no-unused-vars: off */
     // TODO this is a temporary workaround for errors resulting from importing this component directly in mdx file
     // see this issue for ref: https://github.com/kentcdodds/mdx-bundler/issues/156