add now playing stuff

Author: ellie

content/index.md

@@ -11,13 +11,14 @@ My name is Ellie Huxtable. I'm a software/infrastructure engineer, and am at my
 Here you will find a mix of notes, longer/more thoughtful posts, and links to various things I've done
 
 </div>
-
 <div class="me">
 <img src="https://yeet.ellie.wtf/i/f449b641480701bb19587f55672ac7e5bc94847a2d6df66cb5565bc2843e68a2.jpg"/>
 </div>
 
+
 </div>
 
+
 This site is constantly shifting, but here are some things you may be interested in
 - [Posts](/posts), a selection of my longer-form writing and thoughts
 - [Projects](/projects) - over the years I've built a lot of things, but the main two I'm known for are
@@ -26,15 +27,15 @@ This site is constantly shifting, but here are some things you may be interested
 - [Life](/life), where I'm writing about my travels, adventures, and life in general
 - [Notes](/notes), where I write about things I'm working on and exploring. They're not supposed to be as high-quality as a post, but I'll be publishing them much more often.
 
-## Speaking 
+## Speaking
 
 - FOSDEM 2023, [magical shell history with Rust](https://www.youtube.com/watch?v=uyRmV19qJ2o)
 - EMFCamp 2024, [keeping shell history in sync with turtles and magic](https://www.youtube.com/watch?v=FIswx57l6hw)
 
 ## Podcasts
 
 - [Rustship #3](https://www.marcoieni.com/2023/09/%EF%B8%8F-atuin-shell-history-sync-search-and-backup-ellie-huxtable-rustship-3/)
-- Changelog Interviews 579, [Making shell history magical with Atuin](https://changelog.com/podcast/579) 
+- Changelog Interviews 579, [Making shell history magical with Atuin](https://changelog.com/podcast/579)
 
 ## Publicity
 Some of my [projects](/projects) have been featured in print, and on various blogs/podcasts. This list is not exhaustive, please get in touch if I've missed something!
@@ -64,4 +65,4 @@ Please do get in touch!
 Email: [email protected]<br>
 GitHub: [@ellie](https://github.com/ellie)<br>
 Mastodon: [@ellie@hachyderm.io](https://hachyderm.io/@ellie)<br>
-Twitter: [@ellie_huxtable](https://twitter.com/ellie_huxtable)<br>
+Twitter: [@ellie_huxtable](https://twitter.com/ellie_huxtable)<br>

quartz.layout.ts

@@ -26,6 +26,7 @@ export const defaultContentPageLayout: PageLayout = {
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
+    Component.NowPlaying(),
     Component.Search(),
     Component.Darkmode(),
     Component.DesktopOnly(Component.Links()),

quartz/components/NowPlaying.tsx

@@ -0,0 +1,16 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+// @ts-ignore
+import script from "./scripts/nowplaying.inline"
+import style from "./styles/graph.scss"
+import { i18n } from "../i18n"
+import { classNames } from "../util/lang"
+
+export default (() => {
+  const NowPlaying: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    return <div id="nowplaying" />
+  }
+
+  NowPlaying.afterDOMLoaded = script
+
+  return NowPlaying
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -21,6 +21,9 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Links from "./Links"
 
+// Custom
+import NowPlaying from "./NowPlaying"
+
 export {
   ArticleTitle,
   Content,
@@ -44,4 +47,5 @@ export {
   NotFound,
   Breadcrumbs,
   Links,
+  NowPlaying,
 }

quartz/components/scripts/nowplaying.inline.ts

@@ -0,0 +1,35 @@
+function updateNowPlaying() {
+  fetch("https://ellie-nowplaying.web.val.run/")
+    .then((response) => response.json())
+    .then((data) => {
+      const nowplaying = document.getElementById("nowplaying")
+      if (!nowplaying) return
+
+      nowplaying.innerHTML = `
+        <div style="font-family: system-ui, sans-serif;">
+          <span>Recent listening:</span>
+          <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <img
+              src="${data.artwork}"
+              alt="Album artwork"
+              style="width: 3rem; height: 3rem; object-fit: cover; border-radius: 0.125rem;"
+            />
+            <div>
+              <div style="color: #333; font-weight: 500;">${data.trackName}</div>
+              <div style="color: #666; font-size: 0.875rem;">${data.artist}</div>
+            </div>
+          </div>
+        </div>
+      `
+    })
+    .catch(() => {
+      const nowplaying = document.getElementById("nowplaying")
+      if (!nowplaying) return
+
+      nowplaying.innerHTML = ""
+    })
+}
+
+// Update immediately and then every 30 seconds
+updateNowPlaying()
+setInterval(updateNowPlaying, 30000)