Add audio support for entries on website

5 files changed, 31 insertions, 2 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 9c24bb0..f8a294a 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -136,7 +136,7 @@ article:last-child header p,
 	margin-bottom: 1.0em;
 }
 
-.entry__heading, .entry__pageinfo {
+.entry__heading, .entry__pageinfo, .entry__audio {
 	margin-bottom: 0.2em;
 	margin-top: 0.2em;
 }
diff --git a/i18n/en.toml b/i18n/en.toml
index b82ce91..e885407 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -27,3 +27,12 @@
 
 [pageNotFound]
   other = "Page Not Found"
+
+[audioAvailable]
+  other = "audio available"
+
+[audioVersion]
+  other = "Audio version of {{ . }}."
+
+[audioUnsupported]
+  other = "Your browser does not support audio playback."
diff --git a/i18n/es.toml b/i18n/es.toml
index 2a7ff92..7e98ed9 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -28,3 +28,12 @@
 
 [pageNotFound]
   other = "Página no encontrada"
+
+[audioAvailable]
+  other = "audio disponible"
+
+[audioVersion]
+  other = "Versión en audio de {{ . }}."
+
+[audioUnsupported]
+  other = "Tu navegador no puede reproducir audio."
diff --git a/layouts/_partials/pageinfo.html b/layouts/_partials/pageinfo.html
index 9d60ea6..47f1194 100644
--- a/layouts/_partials/pageinfo.html
+++ b/layouts/_partials/pageinfo.html
@@ -20,4 +20,9 @@
   {{ $nonBreakingTags = $nonBreakingTags | append $nonBreakingTag -}}
 {{ end -}}
 
-<span class="meta-item">{{ emojify ":calendar:" }}&nbsp;<time {{ printf "datetime=%q" (.Page.PublishDate | time.Format "2006-01-02T15:04:05-0700") | safeHTMLAttr }}>{{ $nonBreakingPublishDate | safeHTML }}</time></span><span class="meta-item">{{ emojify ":stopwatch:" }}&nbsp;<time datetime="PT{{ .ReadingTime }}M">{{ $nonBreakingReadingTime | safeHTML }}</time></span>{{ if $nonBreakingTags }}<span class="meta-item">{{ emojify ":label:" }}&nbsp;{{ range $key, $val := $nonBreakingTags }}{{ if $key }} {{ end }}<a class="link link--internal" href='{{ relLangURL (lower (i18n "tags")) }}/{{ index $breakingTags $key | urlize }}/' rel="noreferrer">{{ $val | safeHTML }}</a>{{ end }}</span>{{ end }}
+{{/* user-overridable parameter $audioAvailable is escaped pre-insertion so that HTML entities can be inserted */ -}}
+{{ $nonBreakingAudioAvailable := i18n "audioAvailable" .Title | htmlEscape -}}
+{{ $nonBreakingAudioAvailable = replace $nonBreakingAudioAvailable " " "&nbsp;" -}}
+{{ $nonBreakingAudioAvailable = replace $nonBreakingAudioAvailable "-" "&#8209;" -}}
+
+<span class="meta-item">{{ emojify ":calendar:" }}&nbsp;<time {{ printf "datetime=%q" (.Page.PublishDate | time.Format "2006-01-02T15:04:05-0700") | safeHTMLAttr }}>{{ $nonBreakingPublishDate | safeHTML }}</time></span><span class="meta-item">{{ emojify ":stopwatch:" }}&nbsp;<time datetime="PT{{ .ReadingTime }}M">{{ $nonBreakingReadingTime | safeHTML }}</time></span>{{ if where .Resources "MediaType.MainType" "audio" }}<span class="meta-item">{{ emojify ":headphones:" }}&nbsp;{{ $nonBreakingAudioAvailable | safeHTML }}</span>{{ end }}{{ if $nonBreakingTags }}<span class="meta-item">{{ emojify ":label:" }}&nbsp;{{ range $key, $val := $nonBreakingTags }}{{ if $key }} {{ end }}<a class="link link--internal" href='{{ relLangURL (lower (i18n "tags")) }}/{{ index $breakingTags $key | urlize }}/' rel="noreferrer">{{ $val | safeHTML }}</a>{{ end }}</span>{{ end }}
diff --git a/layouts/single.html b/layouts/single.html
index 9a8c8ae..e7522a0 100644
--- a/layouts/single.html
+++ b/layouts/single.html
@@ -7,6 +7,12 @@
     <h1 id="{{ .File.TranslationBaseName }}" class="entry__heading">{{ .Title }}</h1>
     {{- if (.Page.Params.pageinfo | default true) }}
     <p class="entry__pageinfo">{{ partial "pageinfo.html" . }}</p>
+    {{- end -}}
+    {{ with index (where .Resources "MediaType.MainType" "audio") 0 }}
+    <audio class="entry__audio" controls preload="metadata" aria-label="{{ i18n "audioVersion" $.Title }}">
+      <source src="{{ .RelPermalink }}" type="{{ .MediaType }}">
+      {{ i18n "audioUnsupported" }}
+    </audio>
     {{- end }}
   </div>
   {{ chomp (.Content) }}