Adding Mermaid and MathJax Support & Fix Google Analytics to Arberia Hugo Theme

[wachin]

Hi Vincenzo Antedoro Arberia Hugo Theme Developer I Add to your theme MathJax, Mermaid and fix Google Analytics with this instructions

Configuration Changes

1. Update config.toml in GitHub Pages

[markup]

  [markup.highlight]
    codeFences = true
    
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

2. Create Mermaid Render Hook

Create /layouts/_default/_markup/render-codeblock-mermaid.html:

<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>

3. Create Minimal Mermaid Shortcode

Create /layouts/shortcodes/mermaid.html:

{{ .Inner }}

4. Add Scripts to head.html

In /themes/arberia/layouts/partials/head.html, add before </head>:

<!-- Mermaid Support -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
  mermaid.initialize({ startOnLoad: true });
</script>

<!-- Mathjax Support -->
<script>
    window.MathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            displayMath: [['$$', '$$'], ['\\[', '\\]']]
        }
    };
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Also when you are going to use Mermaid you must add the following to the file at:

yoursite.github.io/content/posts/your-new-post.md

there:

mermaid: true

Example:

---
title: "My new post"
date: 2025-01-22T13:34:57-05:00
draft: false
mermaid: true
---

Usage Examples

Mermaid Diagram

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
```

and see:

graph TD;
    A-->B;
    A-->C;
    B-->D;

Loading

MathJax Equations

• Inline: $E = mc^2$
• Block: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

and see:

• Inline: $E = mc^2$
• Block: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

Pull Request Description

These changes add native support for Mermaid diagrams and MathJax equations in the Arberia Hugo theme:

• Configures Hugo to render code fences and Mermaid blocks
• Adds client-side rendering scripts for Mermaid and MathJax
• Provides render hooks for seamless integration
• Maintains theme's existing structure and design

Tested on Hugo v0.141.0+extended.

Improving Google Analytics Integration in Arberia Hugo Theme

Configuration Changes

1. Update config.toml in GitHub Pages

[params]
  googleAnalytics = "G-XXXXXXXXXX"  # Replace with your actual Google Analytics ID

2. Modify /themes/arberia/layouts/partials/head.html

	{{ "<!-- OpenGraph + Twitter + Analytics + Disqus -->" | safeHTML }}
	{{- if hugo.IsProduction | or (eq .Site.Params.env "production") }}
	{{ with .Params.Image }}
	<meta property="og:image" content="{{ . | absURL }}" />
	{{ end }}
	{{ template "_internal/opengraph.html" . }}
	{{ template "_internal/twitter_cards.html" . }}
	{{ template "_internal/schema.html" . }}
	{{/* {{ template "_internal/google_news.html" . }} */}}
	{{ if .Site.Params.googleAnalytics }}
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'G-XXXXXXXXXX');
	</script>
	{{ end }} <!-- Cierra el if para .Site.Params.googleAnalytics -->
	{{ template "_internal/disqus.html" . }}
	{{- end -}}
</head>

where G-XXXXXXXXXX is an example of the Google Analytics ID

Key Improvements

• Dynamic Google Analytics ID insertion using .Site.Params.googleAnalytics
• Removed hardcoded tracking ID
• Maintains existing theme structure
• Supports conditional rendering based on production environment

Steps to Set Up

1. Create a Google Analytics account
2. Add your website to Google Analytics
3. Obtain your tracking ID (format: G-XXXXXXXXXX)
4. Add the tracking ID to config.toml

Benefits

• More flexible configuration
• Easier to update tracking ID
• Better integration with Hugo's internal templates
• Maintains theme's existing code structure

[antedoro]

As soon as possible after a verification I will integrate your contribution.

Thanks a lot.
Vincenzo Antedoro