Improve message shown for Mermaid when JS not enabled

Author: Tim Bannister

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;
+}

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:"
 

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 }}
 

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>