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

Move all the figure shortcodes to /layouts/shortcodes/figures; center all of them

Browse source
This commit is contained in:
Eryn Wells 2022-08-20 09:38:27 -07:00
parent ead979da00
commit 542866489d
12 changed files with 43 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

4
content/blog/2021/09/nihonmachi/index.md
View file

@ -14,7 +14,7 @@ resources:
tags: ["Travel"]
---
{{< post_figure name=buchanan >}}
{{< figures/image name=buchanan >}}
This past weekend, {{< tess >}} and I took a short, one-night staycation in San
Francisco's Japantown. With all the flurry of things happening in our lives, it
@ -41,7 +41,7 @@ walking around the neighborhood, eating, and relaxing. For only being just over
Tess also [wrote](https://tess.oconnor.cx/2021/09/japantown) about our trip.
{{< post_figure name=ramen >}}
{{< figures/image name=ramen >}}
[hk]: https://www.jdvhotels.com/hotels/california/san-francisco/hotel-kabuki
[ks]: https://kabukisprings.com

2
content/blog/2021/09/oskitone-scout/index.md
View file

@ -6,7 +6,7 @@ draft: false
tags: ["Music", "Synthesizers", "DIY"]
---
{{< youtube_figure id="gCSwWsxzy_c" title="A timelapse video of me building an Oskitone Scout, set to music produced using the Scout itself">}}
{{< figures/youtube id="gCSwWsxzy_c" title="A timelapse video of me building an Oskitone Scout, set to music produced using the Scout itself">}}
[Oskitone][oskitone] recently released a new synthesizer: the [Scout][scout].
It's a small monophonic keyboard synth built around an Arduino. It was a quick

2
content/blog/2021/10/pnw-reunion-trip/index.md
View file

@ -10,7 +10,7 @@ resources:
tags: ["Travel", "Pandemic", "Friends"]
---
{{< post_figure name=friends >}}
{{< figures/image name=friends >}}
I'm writing this in the airport having just spend a week with a group of friends
who mean the world to me. For the past 18 months, we have been spending our

2
content/blog/2022/01/23/cmss-3modules/index.md
View file

@ -6,7 +6,7 @@ draft: false
tags: ["Music", "Eurorack", "Synthesizers", "Recordings", "Performances"]
---
{{< youtube_figure id="sqr7g4P85aM" title="A top-down video of me operating a small Eurorack system made of only three modules. Lights flash, an incorporeal hand turns knobs to sculpt the sound." >}}
{{< figures/youtube id="sqr7g4P85aM" title="A top-down video of me operating a small Eurorack system made of only three modules. Lights flash, an incorporeal hand turns knobs to sculpt the sound." >}}
This is my submission to the [Three Module Challenge][3mc] show put on by
Colorado Modular Synth Society in late January 2022. This is my first time

6
content/blog/2022/05/roguelikes-i-like/index.md
View file

@ -26,7 +26,7 @@ Most recently, it's what got me hooked on the genre all over again. Famously, it
you start. It's up to you to figure out everything based on what you -- the player -- know about the game. It's like a
puzzle!
{{< post_figure name=nethack >}}
{{< figures/image name=nethack >}}
### Brogue
@ -35,7 +35,7 @@ awe. It does a really great job of making use of the terminal to render a beauti
(there are lakes!) animates, there are fields of mossy grass and plants, there are blobs of goo that explode and spread
noxious pink gas everywhere.
{{< post_figure name=brogue >}}
{{< figures/image name=brogue >}}
### Dungeon Crawl Stone Soup
@ -43,7 +43,7 @@ My friend David introduced me to [Dungeon Crawl Stone Soup][dcss] on Twitter. I
the complexities of many roguelikes into a simpler form that's still rich and engaging. I really like how easy it is to
drop in on people and observe games too!
{{< post_figure name=dcss >}}
{{< figures/image name=dcss >}}
[nh]: https://www.nethack.org
[b]: https://sites.google.com/site/broguegame/

6
content/blog/2022/08/audio-scope-with-p5js/index.md
View file

@ -15,7 +15,7 @@ This is a quick write-up to share with y'all a small project I've been working
on using [P5.js][p5] and [Web Audio][webaudio] to implement some audio
visualizations. By the end, we'll have something like this:
{{< p5_sketch id="oscilloscopeFinal" bordered=1 >}}
{{< figures/p5 id="oscilloscopeFinal" bordered=1 >}}
## Embedding an Audio File
@ -83,13 +83,13 @@ node to the input of the analyzer node, and the output of the analyzer node to
the audio context's `destination` node that routes to the computer's speakers.
Our audio processing graph looks like this:
{{< railroad_diagram id="audioContextDiagram" >}}
{{< figures/railroad id="audioContextDiagram" >}}
return rr.Diagram(
rr.Sequence(
rr.Terminal("<audio>"),
rr.Terminal("Analyzer"),
rr.Terminal("destination")));
{{< / railroad_diagram >}}
{{< /figures/railroad >}}
By itself the AudioContext doesn't actually play any audio. I'll tackle that
next.

14
layouts/shortcodes/figures/image.html Normal file
View file

@ -0,0 +1,14 @@
{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
{{ $resized_img := $img.Fit "1000x1000" }}
<div class="centered">
<figure>
<a href="{{ $img.RelPermalink }}">
<img src="{{ $resized_img.RelPermalink }}" />
</a>
{{ if $img.Title }}
<figcaption>
<p>{{ $img.Title }}</p>
</figcaption>
{{ end }}
</figure>
</div>

5
layouts/shortcodes/figures/p5.html Normal file
View file

@ -0,0 +1,5 @@
{{ $id := .Get "id" }}
{{ .Page.Scratch.Set "includes_p5_sketch" true }}
<div class="centered">
<figure class="p5-sketch {{ with .Get "bordered" }}bordered{{ end }}" id="{{ $id }}"></figure>
</div>

2
layouts/shortcodes/railroad_diagram.html → layouts/shortcodes/figures/railroad.html
View file

@ -1,7 +1,7 @@
{{ $id := .Get "id" }}
{{ .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">
import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};

12
layouts/shortcodes/youtube_figure.html → layouts/shortcodes/figures/youtube.html
View file

@ -4,9 +4,11 @@
{{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) -}}
{{- $title := .Get "title" | default "YouTube Video" }}
<figure>
<div class="youtube">
<iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
</div>
</figure>
<div class="centered">
<figure>
<div class="youtube">
<iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
</div>
</figure>
</div>
{{ end -}}

3
layouts/shortcodes/p5_sketch.html
View file

@ -1,3 +0,0 @@
{{ $id := .Get "id" }}
{{ .Page.Scratch.Set "includes_p5_sketch" true }}
<figure class="p5-sketch {{ with .Get "bordered" }}bordered{{ end }}" id="{{ $id }}"></figure>

12
layouts/shortcodes/post_figure.html
View file

@ -1,12 +0,0 @@
{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
{{ $resized_img := $img.Fit "576x576" }}
<figure>
<a href="{{ $img.RelPermalink }}">
<img src="{{ $resized_img.RelPermalink }}" />
</a>
{{ if $img.Title }}
<figcaption>
<h4>{{ $img.Title }}</h4>
</figcaption>
{{ end }}
</figure>