Aftonbladet Astro Widgets

Radio puff

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

@schibsted/ab-radio-puffv0.0.6

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 @schibsted/ab-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 now-playing data is read from S3, so you need to be logged in to AWS locally to get the real data:

aws sso login --profile default

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

---
import RadioPuff from '@schibsted/ab-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).