feat: add mermaid for rendering mermaid diagram codes

[plutack]

This PR adds mermaids support so an input like this;

Loading

  flowchart TD
    A["Cron Job Starts at 9 AM"] --> B["Loop Through Each Newspaper"]
    B --> C["Get Newspaper URL and Upload Image"]
    C --> D["Convert Image to Base64 & Calculate Hash"]
    D --> E["Analyze Image Using LLM"]
    E -- If Success --> F["Save Newspaper Data"]
    F --> G["Perform Google Search for Headlines"] & I["Check If Newspaper Already Exists"]
    G --> H["Store Headline Search Results in Database"]
    I -- If Exists --> J["Compare Hash and Update If Needed"]
    I -- If New --> K["Create New Newspaper Entry"]
    J --> L["Update Existing Entry in Database"]
    K --> M["Save New Entry to Database"]
    L --> N["Save or Update Search Results"]
    M --> N
    N --> O["End of Newspaper Process"]
    O -- If All Newspapers Processed --> P["Cron Job Complete"]

It also only loads the mermaid js module only if a codeblock that uses mermaid is present on that page

[plutack]

[1bl4z3r]

Hi @plutack,

Thanks for the PR.
I thought to add this long time ago, but as it happens, totally forgot XD

[1bl4z3r]

Hi @plutack,

Sorry to disturb you, bit I am unable to get Mermaid started with .Page.Store method in staging
Can you show me how did you get mermaid working? I had to do shortcode way

[plutack]

Hello,
First of all , thank you for keeping this project alive. This works by using code block and calling mermaid in it.
```mermaid
```
I also attached add the link to where the code snippets came from https://gohugo.io/content-management/diagrams/#mermaid-diagrams

[1bl4z3r]

Hi @plutack,

This project is alive because of you 😅
I am getting this output. I think I am unable to properly implement render hooks. Should there be any changes to hugo's config?

<pre tabindex="0">
<code class="language-mermaid" data-lang="mermaid">
flowchart TD
    A[&#34;Cron Job Starts at 9 AM&#34;] --&gt; B[&#34;Loop Through Each Newspaper&#34;]
    B --&gt; C[&#34;Get Newspaper URL and Upload Image&#34;]
    C --&gt; D[&#34;Convert Image to Base64 &amp; Calculate Hash&#34;]
    D --&gt; E[&#34;Analyze Image Using LLM&#34;]
    E -- If Success --&gt; F[&#34;Save Newspaper Data&#34;]
    F --&gt; G[&#34;Perform Google Search for Headlines&#34;] &amp; I[&#34;Check If Newspaper Already Exists&#34;]
    G --&gt; H[&#34;Store Headline Search Results in Database&#34;]
    I -- If Exists --&gt; J[&#34;Compare Hash and Update If Needed&#34;]
    I -- If New --&gt; K[&#34;Create New Newspaper Entry&#34;]
    J --&gt; L[&#34;Update Existing Entry in Database&#34;]
    K --&gt; M[&#34;Save New Entry to Database&#34;]
    L --&gt; N[&#34;Save or Update Search Results&#34;]
    M --&gt; N
    N --&gt; O[&#34;End of Newspaper Process&#34;]
    O -- If All Newspapers Processed --&gt; P[&#34;Cron Job Complete&#34;]
</code>
</pre>

[1bl4z3r]

Nevermind, I got it working.

The render hook should be as follows layouts/_default/_markup/render-codeblock-mermaid.html, but PR's location was layouts/_default/markup/render-codeblock-mermaid.html

A single underscore caused me thinking my life choices 🤣

[plutack]

I was lost too since I wasn't able to replicate the behavior. The pr was an after-thought, i probably should have tested with staging like you mentioned but it didn't occur to me at the time.

[1bl4z3r]

No worries, all's well that ends well.

Properly merged into main.
Made fetching mermaidjs code block as a partial for easier extensibility. 🥂