shortcodes: add shortcodes for audio & streaming

* Adds the two shortcodes.
* Styles the figure and figcaption around the player

Co-Authored-by: Igor Milhit <igor@milhit.ch>

assets/scss/_medias.scss

@@ -0,0 +1,30 @@
+.audio, .stream {
+  audio {
+    width: 100%;
+    border-radius: .5rem;
+  }
+  figcaption p {
+    text-align: left;
+    font-size: $font-size-small;
+    padding-left: .5rem;
+  }
+  > p {
+    font-size: $font-size-small;
+    font-variant: small-caps;
+  }
+}
+
+figure {
+  background-color: lightgrey;
+  padding: .4rem;
+  border-radius: 5px;
+  margin-right: .4rem;
+  margin-left: .4rem;
+  img {
+  width: 100%;
+  }
+  p {
+    text-align: center;
+    margin: .2rem 0;
+  }
+}

assets/scss/main.scss

@@ -11,6 +11,7 @@
 @import '_layout.scss';
 @import '_lists.scss';
 @import '_main_body.scss';
+@import '_medias.scss';
 @import '_post.scss';
 
 /*
@@ -30,23 +31,6 @@ pre {
   max-width: 95vw;
 }
 
-figure {
-  background-color: lightgrey;
-  padding: .4rem;
-  border-radius: 5px;
-  margin-right: .4rem;
-  margin-left: .4rem;
-}
-
-figure img {
-  width: 100%;
-}
-
-figure p {
-  text-align: center;
-  margin: .2rem 0;
-}
-
 .terms {
   display: flex;
   flex-wrap: wrap;

layouts/shortcodes/audio.html

@@ -0,0 +1,15 @@
+<figure class="audio">
+    <figcaption><p>{{ .Get "legend" }}</p></figcaption>
+    <audio controls preload="metadata">
+        <source src="/medias/{{ .Get "src" }}.opus" type="audio/opus" codecs="opus">
+        <source src="/medias/{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis">
+        <source src="/medias/{{ .Get "src" }}.mp3" type="audio/mpeg">
+        Your browser does not support the audio tag, you can download the audio
+        with <a href="/medias/{{ .Get "src" }}.mp3">this link</a>
+    </audio>
+    <p>
+        <a href="/medias/{{ .Get "src" }}.opus">opus</a> /
+        <a href="/medias/{{ .Get "src" }}.ogg">ogg</a> /
+        <a href="/medias/{{ .Get "src" }}.mp3">mp3</a>
+    </p>
+</figure>

layouts/shortcodes/stream.html

@@ -0,0 +1,9 @@
+<figure class="stream">
+    <figcaption><p>{{ .Get "legend" }}</p></figcaption>
+    <audio controls>
+        <source src="https://id-libre.org/live/stream.ogg" type="audio/ogg">
+        <source src="https://id-libre.org/live/stream.mp3" type="audio/mpeg">
+        Your browser does not support the audio tag, you can access the stream
+        directly with <a href="https://id-libre.org/live/stream.mp3">this link</a>
+    </audio>
+</figure>