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

content/posts/opening-port-22.md

@@ -1,10 +1,10 @@
 ---
 title: Opening Port 22
 date: 2018-01-23
-subtitle: Using an SSH reverse tunnel to bypass a firewall 
+subtitle: Using an SSH reverse tunnel to bypass a firewall
 ---
 
-My university has a development sever, which it uses to host our coursework without the need to setup a development environment locally. It also enables lecturers to mark our work in a controlled environment, without needing to spin up an environment, and run untrusted code on their machines, a security hole I'm more than likely to take advantage of! 
+My university has a development sever, which it uses to host our coursework without the need to setup a development environment locally. It also enables lecturers to mark our work in a controlled environment, without needing to spin up an environment, and run untrusted code on their machines, a security hole I'm more than likely to take advantage of!
 
 For reasons unknown, only HTTP ports (80, 443) are available from machines other than those permanently on-site (even eduroam doesn't work!). Their solution to this problem is _RemoteApp_, which, like most windows products, doesn't work very well under Linux!
 
@@ -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.
 
@@ -38,9 +38,9 @@ Create the tunnel between the server and your intermediary server. Obviously, Th
 ssh -R 12345:localhost:22 intermediary-user@intermediary
 ```
 
-`intermediary-user@intermediary` should be replaced with your server credentials. 
+`intermediary-user@intermediary` should be replaced with your server credentials.
 
-This will create a tunnel from the server to the intermediary, on port `12345`. This port is arbitrary, however does have to be unused. 
+This will create a tunnel from the server to the intermediary, on port `12345`. This port is arbitrary, however does have to be unused.
 
 ### Step 2: The connection
 And now, to actually connect. From your local machine, simply run:
@@ -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,
+  });
+});