From a8057aa8e8da403ebc56981976119eb80e67e758 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Thu, 30 Jun 2022 20:12:06 -0700
Subject: [PATCH] Add support for <audio> elements

- Adjust transcript shortcodes to also support <audio> elements.
- Add audio element shortcode based on <picture> shortcode
- Make <audio> elements match container width.
---
 assets/css/main.css                           |  4 ++
 layouts/shortcodes/audio.html                 | 39 +++++++++++++++++++
 .../transcribed-image-transcript.html         | 15 ++++++-
 layouts/shortcodes/transcribed-image.html     | 16 ++++++--
 4 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 layouts/shortcodes/audio.html

diff --git a/assets/css/main.css b/assets/css/main.css
index 8c245b1..885830c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -360,6 +360,10 @@ div[itemprop="articleBody"] img {
 	max-width: 100%;
 }
 
+audio {
+	width: 100%;
+}
+
 /* Some images look blurry when scaled; this makes them easier to
  * read. */
 .pix {
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
new file mode 100644
index 0000000..2657327
--- /dev/null
+++ b/layouts/shortcodes/audio.html
@@ -0,0 +1,39 @@
+{{ $name := (.Get "name") -}}
+{{- $opus := resources.GetMatch (printf "/a/%s.opus" $name) -}}
+{{- $mp3 := resources.GetMatch (printf "/a/%s.mp3" $name) -}}
+{{- $isTranscribed := false -}}
+{{- /* preloading an in-page audio asset under 32 KiB is fine. */ -}}
+{{- $shouldPreload := lt (len $opus.Content) 32768 -}}
+<audio
+	controls=""
+	{{ with .Parent -}}
+		{{ if eq .Name "transcribed-image" -}}
+			{{- $isTranscribed = true -}}
+			{{ with .Get "id" -}}
+				aria-describedby="transcript-{{ . }}"
+			{{- end -}}
+		{{- end -}}
+	{{- end }}
+	{{ if $shouldPreload -}}
+		preload="auto"
+	{{- end -}}
+	>
+	{{ with $opus -}}
+	{{ $opus_src := . | resources.Fingerprint "md5" -}}
+	<source
+		src="{{ $opus_src.RelPermalink }}"
+		type='audio/ogg; codecs="opus"' />
+	{{ end -}}
+	{{ with $mp3 -}}
+	{{ $mp3_src := . | resources.Fingerprint "md5" -}}
+	<source
+		src="{{ $mp3_src.RelPermalink }}"
+		type="audio/mpeg" />
+	<p role="note">Your browser does not support HTML5 audio. Here’s a <a
+		href="{{ $mp3_src.RelPermalink }}"
+		{{ if $isTranscribed -}}
+			itemprop="audio contentUrl"
+		{{- end -}}
+		>link to download the audio file <samp translate="no">{{ $name }}.mp3</samp></a> instead.</p>
+	{{ end -}}
+</audio>{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}
diff --git a/layouts/shortcodes/transcribed-image-transcript.html b/layouts/shortcodes/transcribed-image-transcript.html
index d1b23e1..9eb41f3 100644
--- a/layouts/shortcodes/transcribed-image-transcript.html
+++ b/layouts/shortcodes/transcribed-image-transcript.html
@@ -1,14 +1,25 @@
-{{ with .Parent -}}
+{{- $captionType := "embeddedTextCaption" -}}
 {{- $type := "image" -}}
 {{- with .Get "type" -}}
 	{{- $type = . -}}
 {{- end -}}
+{{ with .Parent -}}
+	{{- with .Get "type" -}}
+		{{- $type = . -}}
+	{{- end -}}
+	{{- if eq .Name "transcribed-audio" -}}
+		{{- $captionType = "transcript" -}}
+	{{- end -}}
 <details>
 <summary>Toggle {{ $type }} <span itemprop="accessibilityFeature">transcript</span></summary>
 <section id="transcript-{{ .Get "id" }}">
+{{ if eq (.Get "hlevel") "3" -}}
+<h4>{{ $type | humanize }} transcript</h4>
+{{- else -}}
 <h5>{{ $type | humanize }} transcript</h5>
+{{- end -}}
 {{- end }}
-	<div itemprop="embeddedTextCaption">
+	<div itemprop="{{ $captionType }}">
 		{{ .Inner | markdownify | safeHTML }}
 </div>
 </section>
diff --git a/layouts/shortcodes/transcribed-image.html b/layouts/shortcodes/transcribed-image.html
index af7e339..875b91e 100644
--- a/layouts/shortcodes/transcribed-image.html
+++ b/layouts/shortcodes/transcribed-image.html
@@ -1,14 +1,24 @@
 {{- $type := "image" -}}
 {{- $itemtype := "CreativeWork" -}}
+{{- $itemtype2 := "ImageObject" -}}
+{{- $itemprop := "mentions" -}}
 {{- with .Get "type" -}}
-{{- $type = . -}}
+	{{- $type = . -}}
 {{- end -}}
 {{- with .Get "itemtype" -}}
-{{- $itemtype = . -}}
+	{{- $itemtype = . -}}
 {{- end -}}
+{{- with .Get "itemtype2" -}}
+	{{- $itemtype2 = . -}}
+{{- end -}}
+{{- with .Get "itemprop" -}}
+	{{- $itemprop = . -}}
+{{- end -}}
+<hr />
 <section
 	aria-label="{{ $type }}, caption, and transcript"
-	itemprop="mentions" itemscope="" itemtype="https://schema.org/{{ $itemtype }} https://schema.org/ImageObject"
+	itemprop="{{ $itemprop }}" itemscope="" itemtype="https://schema.org/{{ $itemtype }} https://schema.org/{{ $itemtype2 }}"
 	id="{{ .Get "id" }}" tabindex="-1">
 {{ .Inner | markdownify | safeHTML }}
 </section>
+<hr />