erynwells.me/layouts/shortcodes/figures/railroad.html

{{ $id := .Get "id" }}
{{ .Page.Scratch.Set "includes_railroad_diagram" true }}
<div class="centered">
    <figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
</div>
<script defer type="module">
    import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
    railroadDiagram(rr => {
        {{ .Inner | safeJS }}
    }, "{{ $id }}");
</script>
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. 2022-08-16 09:06:30 -07:00			`{{ $id := .Get "id" }}`
			`{{ .Page.Scratch.Set "includes_railroad_diagram" true }}`
Include Railroad.js files in <head> 2022-08-18 20:18:05 -07:00			`<div class="centered">`
Move all the figure shortcodes to /layouts/shortcodes/figures; center all of them 2022-08-20 09:38:27 -07:00			`<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>`
Include Railroad.js files in <head> 2022-08-18 20:18:05 -07:00			`</div>`
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. 2022-08-16 09:06:30 -07:00			`<script defer type="module">`
			import { railroadDiagram } from {{ `/scripts/railroad-utils.js` \| relURL }};
			`railroadDiagram(rr => {`
			`{{ .Inner \| safeJS }}`
			`}, "{{ $id }}");`
			`</script>`