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

Include Railroad.js files in <head>

Browse source
This commit is contained in:
Eryn Wells 2022-08-18 20:18:05 -07:00
parent 4c1baa2b6d
commit a897f476e6
3 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
layouts/partials/head.html
View file

@ -19,6 +19,9 @@
{{ if or (eq .Kind "list") (eq .Kind "term") }} {{ if or (eq .Kind "list") (eq .Kind "term") }}
<link rel="preload stylesheet" as="style" href="/styles/list.css"> <link rel="preload stylesheet" as="style" href="/styles/list.css">
{{ end }} {{ end }}
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
<link rel="preload stylesheet" as="style" href="{{ `styles/railroad.css` | absURL }}">
{{ end }}
{{ range $stylesheet := .Resources.Match "*.css" }} {{ range $stylesheet := .Resources.Match "*.css" }}
<link rel="preload stylesheet" as="style" href="{{ $stylesheet.Permalink }}"> <link rel="preload stylesheet" as="style" href="{{ $stylesheet.Permalink }}">
{{ end }} {{ end }}
@ -44,8 +47,8 @@
{{ end }} {{ end }}
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }} {{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
<script defer src="{{ `scripts/railroad.js` | absURL }}"></script> <script defer type="module" src="{{ `scripts/railroad.js` | absURL }}"></script>
<script defer src="{{ `scripts/railroad-utils.js` | absURL }}"></script> <script defer type="module" src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
{{ end }} {{ end }}
{{ if and .IsPage (.Page.Scratch.Get "includes_p5_sketch") }} {{ if and .IsPage (.Page.Scratch.Get "includes_p5_sketch") }}

2
layouts/shortcodes/railroad_diagram.html
View file

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

19
static/styles/railroad.css
View file

@ -1,3 +1,13 @@
:root {
--rect-fill: #fafafa;
}
@media (prefers-color-scheme: dark) {
:root {
--rect-fill: #272822;
}
}
svg.railroad-diagram path { svg.railroad-diagram path {
stroke-width: 2; stroke-width: 2;
stroke: var(--body-foreground-color); stroke: var(--body-foreground-color);
@ -7,6 +17,7 @@ svg.railroad-diagram text {
font-family: var(--monospace-font-family); font-family: var(--monospace-font-family);
text-anchor: middle; text-anchor: middle;
white-space: pre; white-space: pre;
color: var(--body-foreground-color);
} }
svg.railroad-diagram text.diagram-text { svg.railroad-diagram text.diagram-text {
font-size: 12px; font-size: 12px;
@ -25,8 +36,8 @@ svg.railroad-diagram g.non-terminal text {
} }
svg.railroad-diagram rect { svg.railroad-diagram rect {
stroke-width: 2; stroke-width: 2;
stroke: black; stroke: var(--body-foreground-color);
fill: hsl(120,100%,90%); fill: var(--rect-fill);
} }
svg.railroad-diagram rect.group-box { svg.railroad-diagram rect.group-box {
stroke: gray; stroke: gray;
@ -35,8 +46,8 @@ svg.railroad-diagram rect.group-box {
} }
svg.railroad-diagram path.diagram-text { svg.railroad-diagram path.diagram-text {
stroke-width: 3; stroke-width: 3;
stroke: black; stroke: var(--body-foreground-color);
fill: white; fill: var(--body-background-color);
cursor: help; cursor: help;
} }
svg.railroad-diagram g.diagram-text:hover path.diagram-text { svg.railroad-diagram g.diagram-text:hover path.diagram-text {