Mermaid works for some content only

[king-11]

hugo version: 0.128.0
theme: hugo-PaperMod

I had a working mermaid integration as per the docs but recently for a new content file I started missing it out.

Mermaid is loaded in dev server if disableFastRender isn’t used with

pkgx hugo@0.128.0 server -w

layouts defined:

• render-codeblock-mermaid

<pre class="mermaid" align="center">
  {{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

• extend_head

{{ if .Page.Store.Get "hasMermaid" }}
<script async type="module">
  var theme = localStorage.getItem("pref-theme") === "dark" ? 'neutral' : 'base';
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    'theme': theme,
  });
</script>
{{ end }}

Mermaid is loaded on all other content files for example

I am not able to figure out the reason for the same and have tried looking up options for now what I have done is include an explicit param in frontmatter with or condition. So the issue seems to be around Page.Store set and get.

I validated things by running

pkgx hugo@0.128.0 --minify --baseURL localhost:7000
python -m http.server -d public 7000

the mermaid head isn’t included in new content but is included for the other example.

[jmooring]

https://gohugo.io/methods/page/store/#determinate-values

You are attempting to access the page store before the page has been rendered.

[king-11]

yes thanks I figured after finding your comment on this issue I am using this as new extend_head now works like a charm. Thanks

{{ $noop := .WordCount }}
{{ if .Page.Store.Get "hasMermaid" }}
<script async type="module">
  var theme = localStorage.getItem("pref-theme") === "dark" ? 'neutral' : 'base';
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    'theme': theme,
  });
</script>
{{ end }}