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") }}
<link rel="preload stylesheet" as="style" href="/styles/list.css">
{{ 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" }}
<link rel="preload stylesheet" as="style" href="{{ $stylesheet.Permalink }}">
{{ end }}
@ -44,8 +47,8 @@
{{ 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>
<script defer type="module" src="{{ `scripts/railroad.js` | absURL }}"></script>
<script defer type="module" src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
{{ end }}
{{ if and .IsPage (.Page.Scratch.Get "includes_p5_sketch") }}

2
layouts/shortcodes/railroad_diagram.html
View file

@ -1,6 +1,8 @@
{{ $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 => {

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 {
stroke-width: 2;
stroke: var(--body-foreground-color);
@ -7,6 +17,7 @@ svg.railroad-diagram text {
font-family: var(--monospace-font-family);
text-anchor: middle;
white-space: pre;
color: var(--body-foreground-color);
}
svg.railroad-diagram text.diagram-text {
font-size: 12px;
@ -25,8 +36,8 @@ svg.railroad-diagram g.non-terminal text {
}
svg.railroad-diagram rect {
stroke-width: 2;
stroke: black;
fill: hsl(120,100%,90%);
stroke: var(--body-foreground-color);
fill: var(--rect-fill);
}
svg.railroad-diagram rect.group-box {
stroke: gray;
@ -35,8 +46,8 @@ svg.railroad-diagram rect.group-box {
}
svg.railroad-diagram path.diagram-text {
stroke-width: 3;
stroke: black;
fill: white;
stroke: var(--body-foreground-color);
fill: var(--body-background-color);
cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {