feat: add basic audio shortcode (#969)

exampleSite/content/en/shortcodes/audio/_index.md

@@ -0,0 +1,48 @@
+---
+title: Audio
+resources:
+  - name: risen
+    src: "risen.mp3"
+    title: Risen
+    params:
+      credits: "[Sascha Ende on filmmusic.io](https://filmmusic.io/en/song/12856-risen)"
+---
+
+The audio shortcode allows you to embed audio files.
+
+## Usage
+
+Define your resources in the page front matter, custom parameter `params.credits` is optional.
+
+<!-- spellchecker-disable -->
+
+```md
+---
+resources:
+  - name: risen
+    src: "risen.mp3"
+    title: Risen
+    params:
+      credits: "[Sascha Ende on filmmusic.io](https://filmmusic.io/en/song/12856-risen)"
+---
+
+{{</* audio name="risen" */>}}
+```
+
+### Attributes
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< propertylist name=shortcode-audio sort=name order=asc >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+<!-- spellchecker-enable -->
+
+## Example
+
+<!-- spellchecker-disable -->
+
+{{< audio name="risen" >}}
+
+<!-- spellchecker-enable -->

exampleSite/data/properties/shortcode-audio.yaml

@@ -0,0 +1,6 @@
+---
+properties:
+  - name: name
+    type: string
+    description: Name of the audio resource defined in page front matter.
+    required: true

layouts/shortcodes/audio.html

@@ -0,0 +1,23 @@
+{{- $source := ($.Page.Resources.ByType "audio").GetMatch (printf "%s" (.Get "name")) }}
+{{- $customAlt := .Get "alt" }}
+
+
+{{- with $source }}
+  {{- $caption := default .Title $customAlt }}
+
+  <div class="flex justify-center">
+    <figure class="gdoc-markdown__figure">
+      <audio controls class="player" preload="auto">
+        <source src="{{ .Permalink }}" type="audio/mpeg">
+      </audio>
+      {{- with $caption }}
+        <figcaption>
+          {{ . }}
+          {{- with $source.Params.credits }}
+            {{ printf " (%s)" . | $.Page.RenderString }}
+          {{- end }}
+        </figcaption>
+      {{- end }}
+    </figure>
+  </div>
+{{- end }}

src/sass/_markdown.scss

@@ -100,6 +100,14 @@
       max-width: 100%;
       height: auto;
     }
+
+    &:has(audio) {
+      width: 100%;
+
+      audio {
+        width: 100%;
+      }
+    }
   }
 
   img {
@@ -109,7 +117,8 @@
 
   blockquote {
     margin: defaults.$padding-16 0;
-    padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8 (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
+    padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
+      (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
 
     border-left: defaults.$border-4 solid var(--accent-color);
     border-radius: defaults.$border-radius;