Aftonbladet Astro Widgets

Radio puff

Compact now-playing teaser for Radio Aftonbladet with a play button and a ticker for what's next.

@aftonbladet-performance/radio-puffv0.0.4

Preview

Light
Just nu:

Lyssna på Radio Aftonbladet

Dark
Just nu:

Lyssna på Radio Aftonbladet

Drag the bottom-right corner of a preview to test narrower widths.

Install

npm install @aftonbladet-performance/radio-puff

RadioPuff

Radio puff widget. The frontend is written in Svelte (src/RadioPuff.svelte) and wrapped in an Astro component (src/RadioPuff.astro) that hydrates it.

Usage

The consuming Astro project needs the @astrojs/svelte integration.

---
import RadioPuff from '@aftonbladet-performance/radio-puff';
---

<RadioPuff
	title="Morgonshow med Hjertén och Letic"
	next="Besök av Alex och Sigge i studion"
	track="Midnight Sun med Zara Larsson"
/>
Prop Description
title Program on air now.
next Upcoming program, shown in the ticker (“Snart:”).
track Current track, shown in the ticker (“Spelas nu:”).

Fonts are loaded from the Aftonbladet CDN. Colours are defined in src/theme.css using the same --c-* names and values as cdn.aftonbladet.se/dark/variables.css, and the widget switches to dark mode when the host page sets html[data-theme="dark"] (or the OS prefers dark and no theme is set).