From aa2212acb5e6f4d7ef6b7e81624a48421acb4adf Mon Sep 17 00:00:00 2001
From: Sarah German <sgerman@gitlab.com>
Date: Mon, 14 Nov 2022 14:20:29 +0000
Subject: Replace mermaid styles with a built-in theme

---
 content/assets/stylesheets/stylesheet.scss | 22 ----------------------
 content/frontend/default/mermaid.js        |  2 +-
 layouts/default.html                       | 12 +++++-------
 lib/filters/convert_mermaid_html.rb        |  2 +-
 4 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 421786b37..1378d130f 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -415,29 +415,7 @@ ol {
   overflow: auto;
   position: relative;
   z-index: 1;
-
-  /* stylelint-disable declaration-no-important */
-  /* stylelint-disable selector-class-pattern */
-  .label,
-  text {
-    font-family: $gl-regular-font !important;
-    font-size: 0.9rem !important;
-  }
-
-  rect:not(.branchLabelBkg, .commit-label-bkg),
-  polygon {
-    fill: $white !important;
-    stroke: $gray-300 !important;
-  }
-
-  .note {
-    fill: $gray-50 !important;
-    stroke: $gray-50 !important;
-  }
-  /* stylelint-enable declaration-no-important */
-  /* stylelint-enable selector-class-pattern */
 }
-
 .mermaid:not([data-processed='true']) {
   display: none;
 }
diff --git a/content/frontend/default/mermaid.js b/content/frontend/default/mermaid.js
index b1d85dfc5..cc94750ae 100644
--- a/content/frontend/default/mermaid.js
+++ b/content/frontend/default/mermaid.js
@@ -1,5 +1,5 @@
 import mermaid from 'mermaid';
 
 document.addEventListener('DOMContentLoaded', () => {
-  mermaid.initialize({ startOnLoad: true });
+  mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
 });
diff --git a/layouts/default.html b/layouts/default.html
index 856a5cc99..2e81869ca 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -102,13 +102,11 @@
     <script src="<%= @items['/assets/javascripts/toggle_popover.*'].path %>"></script>
     <script src="<%= @items['/frontend/shared/clipboardjs.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
-    <script>
-      if (document.querySelector('.mermaid') !== null) {
-        let script = document.createElement('script');
-        script.src = '/frontend/default/mermaid.js';
-        document.head.appendChild(script);
-      }
-    </script>
+
+    <% if @item.compiled_content.include? "load-mermaid" %>
+      <script src="<%= @items['/frontend/default/mermaid.*'].path %>"></script>
+    <% end %>
+
     <% if production? %>
     <%# Add analytics only in production %>
       <%= render '/analytics.*' %>
diff --git a/lib/filters/convert_mermaid_html.rb b/lib/filters/convert_mermaid_html.rb
index fb21778a1..b219dd49a 100644
--- a/lib/filters/convert_mermaid_html.rb
+++ b/lib/filters/convert_mermaid_html.rb
@@ -16,6 +16,6 @@ class ConvertMermaidHtml < Nanoc::Filter
       .gsub('>', '&gt;')
       .gsub('"', '&quot;')
 
-    %(<div class="mermaid">#{fixed_content}</div>)
+    %(<div class="mermaid load-mermaid">#{fixed_content}</div>)
   end
 end
-- 
cgit v1.2.3