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

6
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
[ks]: https://kabukisprings.com

4
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
@ -16,4 +16,4 @@ building the kit, set to music I wrote and produced with the completed Scout.
Enjoy!
[oskitone]: https://www.oskitone.com
[scout]: https://www.oskitone.com/product/scout-synth
[scout]: https://www.oskitone.com/product/scout-synth

4
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
@ -32,4 +32,4 @@ I'm so grateful for every one of these people. We've been friends for years and
even though our lives have taken us in so many different directions, we've found
each other again and that is so wonderful.
{{< twitter 1447951049076056071 >}}
{{< twitter 1447951049076056071 >}}

4
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
@ -19,4 +19,4 @@ performing, without the stage fright that comes with doing it live in front of a
crowd. I encourage you to give it a go if you're interested in performing!
[3mc]: https://youtu.be/sglQv_fV4FQ?t=1930
[hosts]: https://youtu.be/sglQv_fV4FQ?t=2382
[hosts]: https://youtu.be/sglQv_fV4FQ?t=2382

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 }};

14
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>
{{ end -}}
<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>