Extract mermaid logic into its own JS file, and correct conditional loading

content/posts/opening-port-22.md

@@ -55,4 +55,3 @@ After giving your credentials twice (once for the intermediary, then again for t
 SSH has many configuration options available to ease this process, such as using keys for authentication over passwords, and transparently connecting to the intermediary server when trying to connect to the server.
 
 My personal tool of choice for managing config like this is [`assh`](https://github.com/moul/advanced-ssh-config).
-

layouts/_default/baseof.html

@@ -28,10 +28,10 @@
 
     {{ partial "footer.html" . }}
 
-    {{ $raw_content := "" }}
+    {{ $content := "" }}
 
     {{ if .Content }}
-      {{ $raw_content = .RawContent }}
+      {{ $content = .Content | htmlEscape }}
     {{ end }}
 
     {{ partial "script.html" "js/jquery.js" }}
@@ -44,7 +44,7 @@
 
     {{ partial "script_async.html" "js/bootstrap.js" }}
 
-    {{ if in $raw_content "{{<mermaid" }}
+    {{ if in $content "mermaid-shortcode" }}
       {{ partial "script_async.html" "js/mermaid.js" }}
     {{ end }}
 

layouts/shortcodes/mermaid.html

@@ -1,5 +1,5 @@
 <figure>
-  <div class="mermaid" align="center">
+  <div class="mermaid mermaid-shortcode" align="center">
     {{ safeHTML .Inner }}
   </div>
   <figcaption class="text-center">

scripts/build.sh

@@ -18,10 +18,10 @@ cp -r $BASEDIR/node_modules/@fortawesome/fontawesome-free/webfonts $STATIC_BUILD
 cp $BASEDIR/node_modules/jquery/dist/jquery.min.js $STATIC_BUILD/js/jquery.js
 cp $BASEDIR/node_modules/lightgallery/dist/js/lightgallery-all.min.js $STATIC_BUILD/js/lightgallery.js
 cp $BASEDIR/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js $STATIC_BUILD/js/bootstrap.js
-cp $BASEDIR/node_modules/mermaid/dist/mermaid.min.js $STATIC_BUILD/js/mermaid.js
 
 browserify $STATIC_SRC/js/index.js -o $STATIC_BUILD/js/app.js
 browserify $STATIC_SRC/js/sentry.js -t envify -o $STATIC_BUILD/js/sentry.js
+browserify $STATIC_SRC/js/mermaid.js -o $STATIC_BUILD/js/mermaid.js
 
 cp -r $STATIC_SRC/scss $STATIC_BUILD/scss
 hugo gen chromastyles --style=monokai > $STATIC_BUILD/css/highlight.css

static/src/js/index.js

@@ -47,12 +47,6 @@ $(document).ready(function() {
       );
     }
   });
-
-  waitFor(window, 'mermaid', function() {
-    mermaid.initialize({
-      startOnLoad: true,
-    });
-  });
 });
 
 $('.navbar-brand').on('click', function(event) {

static/src/js/mermaid.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var mermaid = require('mermaid');
+
+$(document).ready(function() {
+  mermaid.initialize({
+    startOnLoad: true,
+  });
+});