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

content/posts/opening-port-22.md

@@ -13,7 +13,7 @@ With coursework requiring deployment onto this server now, access to SSH is esse
 ## SSH Reverse Tunnels
 SSH has the ability to create a reverse tunnel between 2 machines, by using a 3rd as a gateway. Assuming the destination server has the ability to SSH out of its firewall, a separate SSH connection can use that connection as a tunnel to communicate.
 
-{{< mermaid caption="Network layout" >}}
+{{<mermaid caption="Network layout">}}
 graph LR
 
 A[Client]
@@ -25,7 +25,7 @@ end
 
 A-->B
 C-->B
-{{< /mermaid >}}
+{{</mermaid>}}
 
 The intermediary server has to allow SSH connections from both the server and your client. The magic here happens because unless the server is in a highly controlled environment (where you shouldn't be doing this anyway), traffic is likely unrestricted outbound through the firewall.
 
@@ -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,
+  });
+});