From e66d19ff6e816958473dbb81825e8c30a13eee2c Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 21 Dec 2021 18:54:46 +0000
Subject: [PATCH] Improve message shown for Mermaid when JS not enabled

---
 assets/scss/_custom.scss        | 17 +++++++++++++++++
 data/i18n/en/en.toml            |  3 +++
 layouts/partials/scripts.html   |  2 +-
 layouts/shortcodes/mermaid.html |  9 +++++----
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 71f61c6ada..ed6a8e598a 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -752,6 +752,10 @@ figure {
     max-width: clamp(0vw, 95vw, 100%);
     max-height: calc(80vh - 8rem);
   }
+
+  figure + noscript > *{
+    max-width: calc(max(100%, 100vw));
+  }
 }
 
 @media only screen and (min-width: 768px) {
@@ -774,6 +778,9 @@ figure {
       max-height: calc(100vh - 10rem);
     }
   }
+  figure + noscript > * {
+    max-width: 80%;
+  }
 }
 
 // Indent definition lists
@@ -806,3 +813,13 @@ dl {
      margin-bottom: 1em;
   }
 }
+
+.no-js .mermaid {
+  display: none;
+}
+
+div.alert > em.javascript-required {
+  display: inline-block;
+  min-height: 1.5em;
+  margin: calc(max(4em, ( 8vh + 4em ) / 2)) 0 0.25em 0;
+}
diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml
index 53467e42de..e006dfde23 100644
--- a/data/i18n/en/en.toml
+++ b/data/i18n/en/en.toml
@@ -87,6 +87,9 @@ other = ","
 [input_placeholder_email_address]
 other = "email address"
 
+[javascript_required]
+other = "JavaScript must be [enabled](https://www.enable-javascript.com/) to view this content"
+
 [latest_release]
 other = "Latest Release:"
 
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 2ee8155b11..07b8ee8a67 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -3,7 +3,7 @@
 <script src="/js/bootstrap-4.3.1.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 {{ if .Site.Params.mermaid.enable }}
-<script src="/js//mermaid.min.js" crossorigin="anonymous"></script>
+<script src="/js/mermaid.min.js" crossorigin="anonymous"></script>
 
 {{ end }}
 
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index ff20843db3..ecd1da5324 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,10 +1,11 @@
+<figure>
 <div class="mermaid">
     {{.Inner}}
 </div>
+</figure>
 <!-- Hide content and error if JS is disabled. -->
 <noscript>
-    <style type="text/css">
-    .mermaid { display:none; }
-    </style>
-    <h4>[JavaScript must be <a href="https://www.enable-javascript.com/">enabled</a> to view content]</h4>
+  <div class="alert alert-secondary callout" role="alert">
+    <em class="javascript-required">{{ T "javascript_required" | markdownify }}</em>
+  </div>
 </noscript>
\ No newline at end of file