Add Tab's railroad.js to the blog

- Include railroad.js from http://tabatkins.github.io/railroad-diagrams/
- Include railroad.css from the same, and tweak it to match my style a bit
  better
- Add a railroad-utils.js file that declares a railroadDiagram function. It
  takes a builder function and an element ID, calls the builder and adds the
  resulting diagram to the element with the given ID.
- Add a railroad_diagram shortcode that wraps that all up so you can write a
  diagram inline with a post.
- Add script includes if the railroad_diagram shortcode is used. The shortcut
  sets a variable in the page's .Scratch that is looked up in the head partial
  template to determine whether to include these scripts.

layouts/partials/head.html

@@ -45,6 +45,11 @@
   <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ site.Title }}">
   {{ end }}
 
+  {{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
+  <script defer src="{{ `scripts/railroad.js` | absURL }}"></script>
+  <script defer src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
+  {{ end }}
+
   <!-- Misc -->
   {{ if or hugo.IsProduction (eq site.Params.env "production") }}
   <!---->

layouts/shortcodes/railroad_diagram.html

@@ -0,0 +1,9 @@
+{{ $id := .Get "id" }}
+{{ .Page.Scratch.Set "includes_railroad_diagram" true }}
+<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
+<script defer type="module">
+    import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
+    railroadDiagram(rr => {
+        {{ .Inner | safeJS }}
+    }, "{{ $id }}");
+</script>

static/scripts/railroad-utils.js

@@ -0,0 +1,6 @@
+import rr from "./railroad.js";
+
+export function railroadDiagram(builder, elementID) {
+    const diagram = builder(rr);
+    diagram.addTo(document.getElementById(elementID));
+}

static/styles/railroad.css

@@ -0,0 +1,44 @@
+svg.railroad-diagram path {
+    stroke-width: 2;
+    stroke: var(--body-foreground-color);
+    fill: var(--body-foreground-color);
+}
+svg.railroad-diagram text {
+    font-family: var(--monospace-font-family);
+    text-anchor: middle;
+    white-space: pre;
+}
+svg.railroad-diagram text.diagram-text {
+    font-size: 12px;
+}
+svg.railroad-diagram text.diagram-arrow {
+    font-size: 16px;
+}
+svg.railroad-diagram text.label {
+    text-anchor: start;
+}
+svg.railroad-diagram text.comment {
+    font: italic 12px monospace;
+}
+svg.railroad-diagram g.non-terminal text {
+    /*font-style: italic;*/
+}
+svg.railroad-diagram rect {
+    stroke-width: 2;
+    stroke: black;
+    fill: hsl(120,100%,90%);
+}
+svg.railroad-diagram rect.group-box {
+    stroke: gray;
+    stroke-dasharray: 10 5;
+    fill: none;
+}
+svg.railroad-diagram path.diagram-text {
+    stroke-width: 3;
+    stroke: black;
+    fill: white;
+    cursor: help;
+}
+svg.railroad-diagram g.diagram-text:hover path.diagram-text {
+    fill: #eee;
+}