jekyll-theme-chirpy: Mermaid.js won't render SVG images until refresh or color toggle.

Checklist

  • I have read the tutorials and know the correct effect of the functional design.
  • There are no similar reports on existing issues (including closed ones).
  • I found the bug on the latest code of the master branch.

Describe the bug

When attempting to render a standard mermaid.js svg chart image using Google Chrome latest ( Version 99.0.4844.74 (Official Build) (arm64) ), the mermaid charts remain as text and will not render until a refresh has occurred. Another way to trigger the render is to toggle dark/light mode. It seems like the updateMermaid function is not called until one of those events occurred.

Looking at the mermaid.js loader, and admittedly being no expert with javascript, I was able to add a workaround by adding the following snippet for force a call to updateMermaid on my site.

    // *******
    // added this to fix mermaid failing to render without refresh
    const toggle = new ModeToggle();
    toggle.notify();
    /// ********

This is obviously not the best way to handle it, but the toggle notify call ends up posting a message forcing a call to updateMermaid.

To Reproduce

Steps to reproduce the behavior:

  1. Open a jekyll-theme-chirpy created site with mermaid.js items within the page.
  2. Either local dev or a hosted github page.
  3. Notice mermaid object isn’t render
  4. Refresh page or change theme
  5. Notice mermaid object is rendered.

Expected behavior

Mermaid charts render when page is loaded initially.

Screenshots

image

Environment

Command Version
ruby -v ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux-musl]
gem -v 3.2.24
bundle -v Bundler version 2.2.24
bundle exec jekyll -v jekyll 4.2.1
bundle info jekyll-theme-chirpy * jekyll-theme-chirpy (5.1.0)

Desktop

  • OS: [e.g. macOS 12.2.1]
  • Browser: latest Chrome or Firefox ( maybe others?)
    • Chrome Version 99.0.4844.74 (Official Build) (arm64)

Smartphone

Additional context

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 15 (3 by maintainers)

Commits related to this issue

Most upvoted comments

Alright, I’m about to record a demo that Mermaid rendering works fine in incognito mode, and since you’ve solved the problem, I’m not going to make a video 😃