Adds podcast page

The podcast XML feed doesn't exist yet, but at least the page does now!

assets/js/main.js

@@ -187,6 +187,7 @@ document.body.addEventListener('click', (e) => {
   switch(e.target.tagName) {
     case 'A':
     case 'BUTTON':
+    case 'svg':
       return true;
     default:
   }

assets/scss/_main.scss

@@ -1096,3 +1096,21 @@ main ul.social {
     }
   }
 }
+
+.podcast-player {
+  width: 90%;
+  margin: 2em auto 1em;
+  border: 1px solid $light-background-secondary;
+  .shk {
+    --color-button: var(--accent);
+    --color-handle: var(--accent);
+    --color-bar-played: var(--accent);
+    --color-spinner: var(--accent);
+    --color-live-symbol: var(--accent);
+    --color-live-text: var(--accent);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border-color: $dark-background-secondary;
+  }
+}

content/podcast.md

@@ -0,0 +1,12 @@
+---
+title: "My “Podcast”"
+emoji: 🎙️
+type: timeless
+tags:
+- podcast
+---
+Okay, so 'Podcast' means something very specific these days, and this is not that. Sometimes I record audio versions of my posts and, because all the areas of this site have RSS feeds and podcasts are just RSS feeds with audio, I have an accidental podcast right here.
+
+There aren't many "episodes", and they're all short, but you can listen below.
+
+{{< podcast "/podcast.xml" >}}

layouts/partials/javascript.html

@@ -1,15 +1,14 @@
-{{ $main := resources.Get "js/main.js" }}
+{{ $main := resources.Get "js/main.js" -}}
-{{ $menu := resources.Get "js/menu.js" }}
+{{- $menu := resources.Get "js/menu.js" -}}
-{{ $prism := resources.Get "js/prism.js" }}
+{{- $prism := resources.Get "js/prism.js" -}}
-{{ $secureJS := slice $main $menu $prism | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $secureJS := slice $main $menu $prism | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
-{{ range $val := $.Site.Params.customJS }}
+{{- if in .Params.Tags "podcast" -}}
-    {{ if gt (len $val) 0 }}
+  <script type="text/javascript" src="/js/shikwasa.js"></script>
-        <script src="{{ $val }}"></script>
+  <link rel="stylesheet" rev="stylesheet" href="/css/shikwasa.css" media="screen">
-    {{ end }}
+{{- end -}}
-{{ end }}
 
-{{ if .Param "math" }}
+{{- if .Param "math" -}}
   {{ partialCached "math.html" . }}
 {{ end }}

layouts/shortcodes/podcast.html

@@ -0,0 +1,59 @@
+<div class="podcast-player" data-feed="{{ .Get 0 | absURL}}"><p>This box should hold a Javascript-based Podcast listener, but it's not loading on your browser. Add <em>{{ .Get 0 | absURL}}</em> to your podcast player to listen instead.</p></div>
+<script type="text/javascript">
+  const playerElement = document.currentScript.previousElementSibling
+  const feedURL = playerElement.dataset.feed
+
+  const show = fetch(feedURL).then((res) => res.text()).then((feed) => {
+    const parser = new DOMParser()
+    const xmlDoc = parser.parseFromString(feed, "application/xml")
+    const title = xmlDoc.querySelector('channel title')?.textContent
+    const link = xmlDoc.querySelector('channel link')?.textContent
+    const description = xmlDoc.querySelector('channel description')?.textContent
+    const tracks = [...xmlDoc.querySelectorAll('channel item')].map((item) => ({
+      title: item.querySelector('title')?.textContent,
+      link: item.querySelector('link')?.textContent,
+      artist: title,
+      src: item.querySelector('enclosure[type^="audio/"]')?.getAttribute('url'),
+    })).filter((track) => !!track.src)
+
+    return {
+      title,
+      link,
+      description,
+      tracks,
+    }
+  })
+
+  document.addEventListener('DOMContentLoaded', async () => {
+    const { Player } = window.Shikwasa;
+    const tracks = (await show).tracks
+
+    const player = new Player({
+      container: () => playerElement,
+      audio: tracks[0],
+      download: true,
+    })
+
+    const playlist = document.createElement('ul')
+    tracks.forEach((track) => {
+      const a = document.createElement('a')
+      a.href = track.link
+      a.onclick = () => {
+        player.update(track)
+        player.play()
+        return false
+      }
+      a.innerText = track.title
+
+      const li = document.createElement('li')
+      li.appendChild(a)
+
+      playlist.appendChild(li)
+    })
+    playerElement.after(playlist)
+    
+    const label = document.createElement('p')
+    label.innerText = "Tracks:"
+    playerElement.after(label)
+  })
+</script>

retrieve-deps.sh

@@ -1,3 +1,6 @@
 #!/bin/bash
 mkdir -p static/js/
 curl -L -o static/js/mermaid.js "https://unpkg.com/mermaid@10/dist/mermaid.min.js"
+curl -L -o static/js/mathjax.js "https://unpkg.com/mathjax@3/dist/mathjax.min.js"
+curl -L -o static/js/shikwasa.js "https://unpkg.com/shikwasa@2/dist/shikwasa.min.js"
+curl -L -o static/css/shikwasa.css "https://unpkg.com/shikwasa@2/dist/style.css"