From 0e53862ba8f2aae6c820c69e84f73a7de8575654 Mon Sep 17 00:00:00 2001
From: Jonas Lagoni <jonas-lt@live.dk>
Date: Thu, 5 Oct 2023 12:16:25 +0200
Subject: [PATCH] chore(website): add support for mermaid (#1552)

---
 docs/internal-model.md                         |  1 -
 modelina-website/src/components/docs/Docs.tsx  | 18 ++++++++++++++++--
 .../src/components/layouts/Head.tsx            |  1 -
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/internal-model.md b/docs/internal-model.md
index 1c4fd4a659..4fe749d41a 100644
--- a/docs/internal-model.md
+++ b/docs/internal-model.md
@@ -19,7 +19,6 @@ These are the meta models and their meaning:
 - **StringModel** represent string values.
 - **AnyModel** represent generic values that cannot otherwise be represented by one of the other models.
 
-
 ```mermaid
 ---
 title: Meta Model
diff --git a/modelina-website/src/components/docs/Docs.tsx b/modelina-website/src/components/docs/Docs.tsx
index 90e8320d0c..af8e521120 100644
--- a/modelina-website/src/components/docs/Docs.tsx
+++ b/modelina-website/src/components/docs/Docs.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { withRouter, NextRouter } from 'next/router';
 import DocsList from "../../../config/docs.json";
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
@@ -7,6 +7,7 @@ import remarkGfm from "remark-gfm";
 import CodeBlock from '../CodeBlock';
 import rehypeRaw from 'rehype-raw';
 import GithubButton from '../buttons/GithubButton';
+import Script from 'next/script';
 
 interface WithRouterProps {
   router: NextRouter;
@@ -31,8 +32,8 @@ class Docs extends React.Component<
       showMenu: true
     };
     this.renderMenuTree = this.renderMenuTree.bind(this);
-
   }
+
   /**
    * Render the menu items dynamically in a depth first approach
    */
@@ -144,6 +145,9 @@ class Docs extends React.Component<
                 components={{
                 code({node, inline, className, children, ...props}) {
                   const match = /language-(\w+)/.exec(className || '')
+                  if(className === 'language-mermaid') {
+                    return <pre className="mermaid bg-white flex justify-center">{children}</pre>
+                  }
                   return !inline && match ? (
                     <CodeBlock
                       {...props}
@@ -158,6 +162,16 @@ class Docs extends React.Component<
                   )}}}>
                 {this.props.source}
               </ReactMarkdown>
+              <Script
+                type="module"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                  __html: `
+                  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+                  mermaid.initialize({startOnLoad: true});
+                  mermaid.contentLoaded();`,
+                }}
+              />
             </div>
           </div>
         </div>
diff --git a/modelina-website/src/components/layouts/Head.tsx b/modelina-website/src/components/layouts/Head.tsx
index c69d7510f4..54be6eb346 100644
--- a/modelina-website/src/components/layouts/Head.tsx
+++ b/modelina-website/src/components/layouts/Head.tsx
@@ -77,7 +77,6 @@ export default function HeadComponent({
       <meta property="og:url" content={permalink} />
       <meta property="og:image" content={image} />
       <meta property="og:description" content={description} />
-
       <title>{title}</title>
     </Head>
   );