eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Use JS to show/hide railroad diagrams based on page width (thanks @hober!)

Browse source
This commit is contained in:
Eryn Wells 2022-10-21 11:06:13 -07:00
parent 2f6e78fa91
commit f9543b6d85
4 changed files with 77 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

15
layouts/shortcodes/figures/railroad.html
View file

@ -1,11 +1,4 @@
{{ $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>
{{- $id := .Get "id" -}}
{{- .Page.Scratch.Set "includes_railroad_diagram" true -}}
<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
{{ .Inner }}

8
layouts/shortcodes/scripts/railroad.html Normal file
View file

@ -0,0 +1,8 @@
{{- $parentID := .Parent.Get "id" -}}
{{- $narrowOnly := .Get "narrow" }}
<script defer type="module">
import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
railroadDiagram(rr => {
{{ .Inner | safeJS }}
}, "{{ $parentID }}", {{ if $narrowOnly }}true{{ else }}false{{ end }});
</script>