From 5b6b7d29dd8050c1abc09a69d3a1d8cb156f5e30 Mon Sep 17 00:00:00 2001
From: Preston Arnold <prestonarnold19@gmail.com>
Date: Mon, 30 Mar 2026 06:06:06 +0100
Subject: [PATCH 1/6] spotlight interview: initial

---
 src/content.config.ts                         | 1 +
 src/data/spotlight/preston-arnold/index.md    | 1 +
 src/pages/spotlight/[spotlightId]/index.astro | 6 ++++++
 3 files changed, 8 insertions(+)

diff --git a/src/content.config.ts b/src/content.config.ts
index 18d84bd..7f81882 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -90,6 +90,7 @@ const spotlight = defineCollection({
       image: image(),
       ogImage: image(),
       date: z.coerce.date(),
+      interview: z.url().optional(),
       urlWebsite: z.url().optional(),
       urlGitHub: z.url().optional(),
       urlMastodon: z.url().optional(),
diff --git a/src/data/spotlight/preston-arnold/index.md b/src/data/spotlight/preston-arnold/index.md
index 0d5ab6b..8fa6bd2 100644
--- a/src/data/spotlight/preston-arnold/index.md
+++ b/src/data/spotlight/preston-arnold/index.md
@@ -2,6 +2,7 @@
 name: "Preston Arnold"
 role: "Full-Stack Developer & Builder"
 date: "2026-03-06"
+# interview: "https://spotapi.prestonarnold.uk/interviews/final-1774813511682.mp3"
 image: "preston.jpg"
 ogImage: "og.jpg"
 urlWebsite: "https://prestonarnold.uk/"
diff --git a/src/pages/spotlight/[spotlightId]/index.astro b/src/pages/spotlight/[spotlightId]/index.astro
index 4c453a1..2d44d82 100644
--- a/src/pages/spotlight/[spotlightId]/index.astro
+++ b/src/pages/spotlight/[spotlightId]/index.astro
@@ -37,6 +37,7 @@ const {
     role,
     date,
     ogImage,
+    interview,
     urlWebsite,
     urlGitHub,
     urlMastodon,
@@ -65,6 +66,7 @@ const { Content, headings } = await render(entry);
           <div class="article__header">
             <Heading title={name} level={1} />
             <p class="article__role">{role}</p>
+            {interview && <audio src={interview} controls class="article__interview"></audio>}
             <ul class="socials">
               {
                 urlWebsite ? (
@@ -370,6 +372,10 @@ const { Content, headings } = await render(entry);
     }
   }
 
+  .article__interview {
+    margin: 1rem 0;
+  }
+
   .article__content {
   }
 

From 683dbe3e3bb306b65213bfae60230c16a68938fd Mon Sep 17 00:00:00 2001
From: Preston Arnold <prestonarnold19@gmail.com>
Date: Mon, 30 Mar 2026 06:13:13 +0100
Subject: [PATCH 2/6] remove example comment

---
 src/data/spotlight/preston-arnold/index.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/data/spotlight/preston-arnold/index.md b/src/data/spotlight/preston-arnold/index.md
index 8fa6bd2..0d5ab6b 100644
--- a/src/data/spotlight/preston-arnold/index.md
+++ b/src/data/spotlight/preston-arnold/index.md
@@ -2,7 +2,6 @@
 name: "Preston Arnold"
 role: "Full-Stack Developer & Builder"
 date: "2026-03-06"
-# interview: "https://spotapi.prestonarnold.uk/interviews/final-1774813511682.mp3"
 image: "preston.jpg"
 ogImage: "og.jpg"
 urlWebsite: "https://prestonarnold.uk/"

From cf00875973c00a48ebc85745d86a57839285f4bc Mon Sep 17 00:00:00 2001
From: Preston Arnold <prestonarnold19@gmail.com>
Date: Mon, 30 Mar 2026 06:47:28 +0100
Subject: [PATCH 3/6] proposed custom audio player

---
 src/pages/spotlight/[spotlightId]/index.astro | 110 +++++++++++++++++-
 1 file changed, 109 insertions(+), 1 deletion(-)

diff --git a/src/pages/spotlight/[spotlightId]/index.astro b/src/pages/spotlight/[spotlightId]/index.astro
index 2d44d82..a779d79 100644
--- a/src/pages/spotlight/[spotlightId]/index.astro
+++ b/src/pages/spotlight/[spotlightId]/index.astro
@@ -66,7 +66,20 @@ const { Content, headings } = await render(entry);
           <div class="article__header">
             <Heading title={name} level={1} />
             <p class="article__role">{role}</p>
-            {interview && <audio src={interview} controls class="article__interview"></audio>}
+            {interview && (
+              <div class="player-wrap">
+                <div class="player" data-src={interview}>
+                  <button class="player__btn" aria-label="Play interview" aria-pressed="false">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="player__icon player__icon--play" aria-hidden="true"><path fill="currentColor" d="M8 5.14v14l11-7-11-7z"/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="player__icon player__icon--pause" aria-hidden="true"><path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+                  </button>
+                  <div class="player__meta">
+                    <span class="player__label">Interview</span>
+                  <span class="player__time" aria-live="off" aria-atomic="true">0:00</span>
+                  </div>
+                </div>
+              </div>
+            )}
             <ul class="socials">
               {
                 urlWebsite ? (
@@ -463,8 +476,103 @@ const { Content, headings } = await render(entry);
       display: block;
     }
   }
+
+  .player-wrap {
+    margin-block-end: 0.75lh;
+  }
+
+  .player {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75lh;
+    padding: 0.4lh 0.75lh 0.4lh 0.4lh;
+    background-color: var(--color-border);
+    border-radius: 999px;
+  }
+
+  .player__btn {
+    flex-shrink: 0;
+    width: 2lh;
+    height: 2lh;
+    border-radius: 50%;
+    border: none;
+    background-color: var(--color-accent);
+    color: var(--color-bg);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 80ms;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .player__icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .player__icon--pause {
+    display: none;
+  }
+
+  .player[data-playing] .player__icon--play {
+    display: none;
+  }
+
+  .player[data-playing] .player__icon--pause {
+    display: block;
+  }
+
+  .player__meta {
+    display: flex;
+    flex-direction: column;
+    padding-inline-end: 0.25lh;
+  }
+
+  .player__label {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--color-fg-dim);
+    line-height: 1.2;
+  }
+
+  .player__time {
+    font-size: 1.1rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+  }
 </style>
 
+<script>
+  const player = document.querySelector<HTMLElement>('.player')
+  if (player) {
+    const audio = new Audio(player.dataset.src!)
+    const btn = player.querySelector<HTMLButtonElement>('.player__btn')!
+    const timeEl = player.querySelector<HTMLElement>('.player__time')!
+
+    const fmt = (s: number) =>
+      `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`
+
+    const setPlaying = (playing: boolean) => {
+      player.toggleAttribute('data-playing', playing)
+      btn.setAttribute('aria-pressed', String(playing))
+      btn.setAttribute('aria-label', playing ? 'Pause interview' : 'Play interview')
+    }
+
+    audio.addEventListener('timeupdate', () => { timeEl.textContent = fmt(audio.currentTime) })
+    audio.addEventListener('ended', () => { setPlaying(false); timeEl.textContent = '0:00' })
+    btn.addEventListener('click', () => {
+      audio.paused ? (audio.play(), setPlaying(true)) : (audio.pause(), setPlaying(false))
+    })
+  }
+</script>
+
 <style is:global>
   .article__content {
     > * {

From a5ca16f7d4de2b4bfb86e569a714a0a89ab4d6a4 Mon Sep 17 00:00:00 2001
From: Preston Arnold <prestonarnold19@gmail.com>
Date: Mon, 30 Mar 2026 07:26:59 +0100
Subject: [PATCH 4/6] tts

---
 src/pages/spotlight/[spotlightId]/index.astro | 129 ++++++++++++++----
 1 file changed, 103 insertions(+), 26 deletions(-)

diff --git a/src/pages/spotlight/[spotlightId]/index.astro b/src/pages/spotlight/[spotlightId]/index.astro
index a779d79..dec3b28 100644
--- a/src/pages/spotlight/[spotlightId]/index.astro
+++ b/src/pages/spotlight/[spotlightId]/index.astro
@@ -66,20 +66,18 @@ const { Content, headings } = await render(entry);
           <div class="article__header">
             <Heading title={name} level={1} />
             <p class="article__role">{role}</p>
-            {interview && (
-              <div class="player-wrap">
-                <div class="player" data-src={interview}>
-                  <button class="player__btn" aria-label="Play interview" aria-pressed="false">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="player__icon player__icon--play" aria-hidden="true"><path fill="currentColor" d="M8 5.14v14l11-7-11-7z"/></svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="player__icon player__icon--pause" aria-hidden="true"><path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
-                  </button>
-                  <div class="player__meta">
-                    <span class="player__label">Interview</span>
+            <div class="player-wrap">
+              <div class="player" data-src={interview ?? ''}>
+                <button class="player__btn" aria-label="Play interview" aria-pressed="false">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="player__icon player__icon--play" aria-hidden="true"><path fill="currentColor" d="M8 5.14v14l11-7-11-7z"/></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="player__icon player__icon--pause" aria-hidden="true"><path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+                </button>
+                <div class="player__meta">
+                  <span class="player__label">Interview</span>
                   <span class="player__time" aria-live="off" aria-atomic="true">0:00</span>
-                  </div>
                 </div>
               </div>
-            )}
+            </div>
             <ul class="socials">
               {
                 urlWebsite ? (
@@ -551,25 +549,104 @@ const { Content, headings } = await render(entry);
 
 <script>
   const player = document.querySelector<HTMLElement>('.player')
-  if (player) {
-    const audio = new Audio(player.dataset.src!)
-    const btn = player.querySelector<HTMLButtonElement>('.player__btn')!
-    const timeEl = player.querySelector<HTMLElement>('.player__time')!
-
-    const fmt = (s: number) =>
-      `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`
-
-    const setPlaying = (playing: boolean) => {
-      player.toggleAttribute('data-playing', playing)
-      btn.setAttribute('aria-pressed', String(playing))
-      btn.setAttribute('aria-label', playing ? 'Pause interview' : 'Play interview')
+  if (!player) return
+
+  const state = {
+    elapsed: 0,
+    ticker: null as ReturnType<typeof setInterval> | null,
+  }
+
+  const src    = player.dataset.src ?? ''
+  const btn    = player.querySelector<HTMLButtonElement>('.player__btn')!
+  const timeEl = player.querySelector<HTMLElement>('.player__time')!
+
+  const fmt = (s: number) =>
+    isNaN(s) ? '0:00' : `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`
+
+  const setPlaying = (on: boolean) => {
+    player.toggleAttribute('data-playing', on)
+    btn.setAttribute('aria-pressed', String(on))
+    btn.setAttribute('aria-label', on ? 'Pause interview' : 'Play interview')
+  }
+
+  const stopTicker = () => {
+    clearInterval(state.ticker ?? undefined)
+    state.ticker = null
+  }
+
+  const startTicker = (getTime: () => number) => {
+    stopTicker()
+    state.ticker = setInterval(() => {
+      timeEl.textContent = fmt(getTime())
+    }, 500)
+  }
+
+  const reset = () => {
+    stopTicker()
+    state.elapsed = 0
+    timeEl.textContent = '0:00'
+    setPlaying(false)
+  }
+
+  if (src) {
+    // interview audio file in frontmatter
+    const audio = new Audio(src)
+    audio.addEventListener('ended', reset)
+
+    btn.addEventListener('click', () => {
+      if (audio.paused) {
+        audio.play()
+        setPlaying(true)
+        startTicker(() => audio.currentTime)
+      } else {
+        audio.pause()
+        stopTicker()
+        setPlaying(false)
+      }
+    })
+
+    document.addEventListener('astro:before-swap', () => {
+      audio.pause()
+      reset()
+    }, { once: true })
+
+  } else {
+    // tts fallback
+    const getText = () =>
+      Array.from(document.querySelectorAll<HTMLElement>('.article__content h2'))
+        .flatMap(h => {
+          const parts = [h.textContent ?? '']
+          let el = h.nextElementSibling
+          while (el && el.tagName !== 'H2') {
+            if (el.textContent) parts.push(el.textContent.trim())
+            el = el.nextElementSibling
+          }
+          return parts
+        })
+        .join(' ')
+
+    const speak = (text: string) => {
+      const u = new SpeechSynthesisUtterance(text)
+      u.onend = reset
+      speechSynthesis.speak(u)
     }
 
-    audio.addEventListener('timeupdate', () => { timeEl.textContent = fmt(audio.currentTime) })
-    audio.addEventListener('ended', () => { setPlaying(false); timeEl.textContent = '0:00' })
     btn.addEventListener('click', () => {
-      audio.paused ? (audio.play(), setPlaying(true)) : (audio.pause(), setPlaying(false))
+      if (speechSynthesis.speaking || speechSynthesis.pending) {
+        speechSynthesis.cancel()
+        reset()
+      } else {
+        speak(getText())
+        setPlaying(true)
+        const start = Date.now()
+        startTicker(() => (Date.now() - start) / 1000)
+      }
     })
+
+    document.addEventListener('astro:before-swap', () => {
+      speechSynthesis.cancel()
+      reset()
+    }, { once: true })
   }
 </script>
 

From 33b09848953deed7307329ec644da0d847054c7d Mon Sep 17 00:00:00 2001
From: Preston Arnold <prestonarnold19@gmail.com>
Date: Mon, 30 Mar 2026 08:57:29 +0100
Subject: [PATCH 5/6] no longer needed

---
 src/pages/spotlight/[spotlightId]/index.astro | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/spotlight/[spotlightId]/index.astro b/src/pages/spotlight/[spotlightId]/index.astro
index dec3b28..e0f06e2 100644
--- a/src/pages/spotlight/[spotlightId]/index.astro
+++ b/src/pages/spotlight/[spotlightId]/index.astro
@@ -383,10 +383,6 @@ const { Content, headings } = await render(entry);
     }
   }
 
-  .article__interview {
-    margin: 1rem 0;
-  }
-
   .article__content {
   }
 

From 47ca0cd84f689e361a319ef296377acf4755a5df Mon Sep 17 00:00:00 2001
From: Preston Arnold <prestonarnold19@gmail.com>
Date: Mon, 30 Mar 2026 10:16:02 +0100
Subject: [PATCH 6/6] self invoke

---
 src/pages/spotlight/[spotlightId]/index.astro | 176 +++++++++---------
 1 file changed, 89 insertions(+), 87 deletions(-)

diff --git a/src/pages/spotlight/[spotlightId]/index.astro b/src/pages/spotlight/[spotlightId]/index.astro
index e0f06e2..d852822 100644
--- a/src/pages/spotlight/[spotlightId]/index.astro
+++ b/src/pages/spotlight/[spotlightId]/index.astro
@@ -544,106 +544,108 @@ const { Content, headings } = await render(entry);
 </style>
 
 <script>
-  const player = document.querySelector<HTMLElement>('.player')
-  if (!player) return
+  (() => {
+    const player = document.querySelector<HTMLElement>('.player')
+    if (!player) return
 
-  const state = {
-    elapsed: 0,
-    ticker: null as ReturnType<typeof setInterval> | null,
-  }
+    const state = {
+      elapsed: 0,
+      ticker: null as ReturnType<typeof setInterval> | null,
+    }
 
-  const src    = player.dataset.src ?? ''
-  const btn    = player.querySelector<HTMLButtonElement>('.player__btn')!
-  const timeEl = player.querySelector<HTMLElement>('.player__time')!
+    const src    = player.dataset.src ?? ''
+    const btn    = player.querySelector<HTMLButtonElement>('.player__btn')!
+    const timeEl = player.querySelector<HTMLElement>('.player__time')!
 
-  const fmt = (s: number) =>
-    isNaN(s) ? '0:00' : `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`
+    const fmt = (s: number) =>
+      isNaN(s) ? '0:00' : `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`
 
-  const setPlaying = (on: boolean) => {
-    player.toggleAttribute('data-playing', on)
-    btn.setAttribute('aria-pressed', String(on))
-    btn.setAttribute('aria-label', on ? 'Pause interview' : 'Play interview')
-  }
+    const setPlaying = (on: boolean) => {
+      player.toggleAttribute('data-playing', on)
+      btn.setAttribute('aria-pressed', String(on))
+      btn.setAttribute('aria-label', on ? 'Pause interview' : 'Play interview')
+    }
 
-  const stopTicker = () => {
-    clearInterval(state.ticker ?? undefined)
-    state.ticker = null
-  }
+    const stopTicker = () => {
+      clearInterval(state.ticker ?? undefined)
+      state.ticker = null
+    }
 
-  const startTicker = (getTime: () => number) => {
-    stopTicker()
-    state.ticker = setInterval(() => {
-      timeEl.textContent = fmt(getTime())
-    }, 500)
-  }
+    const startTicker = (getTime: () => number) => {
+      stopTicker()
+      state.ticker = setInterval(() => {
+        timeEl.textContent = fmt(getTime())
+      }, 500)
+    }
 
-  const reset = () => {
-    stopTicker()
-    state.elapsed = 0
-    timeEl.textContent = '0:00'
-    setPlaying(false)
-  }
+    const reset = () => {
+      stopTicker()
+      state.elapsed = 0
+      timeEl.textContent = '0:00'
+      setPlaying(false)
+    }
 
-  if (src) {
-    // interview audio file in frontmatter
-    const audio = new Audio(src)
-    audio.addEventListener('ended', reset)
-
-    btn.addEventListener('click', () => {
-      if (audio.paused) {
-        audio.play()
-        setPlaying(true)
-        startTicker(() => audio.currentTime)
-      } else {
+    if (src) {
+      // interview audio file in frontmatter
+      const audio = new Audio(src)
+      audio.addEventListener('ended', reset)
+
+      btn.addEventListener('click', () => {
+        if (audio.paused) {
+          audio.play()
+          setPlaying(true)
+          startTicker(() => audio.currentTime)
+        } else {
+          audio.pause()
+          stopTicker()
+          setPlaying(false)
+        }
+      })
+
+      document.addEventListener('astro:before-swap', () => {
         audio.pause()
-        stopTicker()
-        setPlaying(false)
+        reset()
+      }, { once: true })
+
+    } else {
+      // tts fallback
+      const getText = () =>
+        Array.from(document.querySelectorAll<HTMLElement>('.article__content h2'))
+          .flatMap(h => {
+            const parts = [h.textContent ?? '']
+            let el = h.nextElementSibling
+            while (el && el.tagName !== 'H2') {
+              if (el.textContent) parts.push(el.textContent.trim())
+              el = el.nextElementSibling
+            }
+            return parts
+          })
+          .join(' ')
+
+      const speak = (text: string) => {
+        const u = new SpeechSynthesisUtterance(text)
+        u.onend = reset
+        speechSynthesis.speak(u)
       }
-    })
-
-    document.addEventListener('astro:before-swap', () => {
-      audio.pause()
-      reset()
-    }, { once: true })
-
-  } else {
-    // tts fallback
-    const getText = () =>
-      Array.from(document.querySelectorAll<HTMLElement>('.article__content h2'))
-        .flatMap(h => {
-          const parts = [h.textContent ?? '']
-          let el = h.nextElementSibling
-          while (el && el.tagName !== 'H2') {
-            if (el.textContent) parts.push(el.textContent.trim())
-            el = el.nextElementSibling
-          }
-          return parts
-        })
-        .join(' ')
-
-    const speak = (text: string) => {
-      const u = new SpeechSynthesisUtterance(text)
-      u.onend = reset
-      speechSynthesis.speak(u)
-    }
 
-    btn.addEventListener('click', () => {
-      if (speechSynthesis.speaking || speechSynthesis.pending) {
+      btn.addEventListener('click', () => {
+        if (speechSynthesis.speaking || speechSynthesis.pending) {
+          speechSynthesis.cancel()
+          reset()
+        } else {
+          speak(getText())
+          setPlaying(true)
+          const start = Date.now()
+          startTicker(() => (Date.now() - start) / 1000)
+        }
+      })
+
+      document.addEventListener('astro:before-swap', () => {
         speechSynthesis.cancel()
         reset()
-      } else {
-        speak(getText())
-        setPlaying(true)
-        const start = Date.now()
-        startTicker(() => (Date.now() - start) / 1000)
-      }
-    })
-
-    document.addEventListener('astro:before-swap', () => {
-      speechSynthesis.cancel()
-      reset()
-    }, { once: true })
-  }
+      }, { once: true })
+    }
+  })()
 </script>
 
 <style is:global>