giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: add podroll page for podcast episode listings

Browse Source 
Client-side page that fetches podcast data from the podroll API endpoint.
Features:
- Episode listings with audio players
- Sidebar showing podcast sources from OPML
- Filter by podcast dropdown
- Load more pagination
- Auto-refresh every 5 minutes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-02 19:11:26 +01:00
parent 44bfa6de9e
commit 875676d9c7
1 changed files with 344 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
podroll.njk Normal file
View File

@@ -0,0 +1,344 @@
---
layout: layouts/base.njk
title: Podroll
permalink: /podroll/
withSidebar: true
---
<div class="podroll-page" x-data="podrollApp()" x-init="init()">
<header class="mb-6 sm:mb-8">
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
<svg class="w-8 h-8 inline-block mr-2 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
<circle cx="12" cy="12" r="3"/>
<path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
<path d="M12 2v2a8 8 0 0 1 8 8h2c0-5.52-4.48-10-10-10z"/>
</svg>
Podroll
</h1>
<p class="text-surface-600 dark:text-surface-400">
My podcast subscriptions - recent episodes from <span x-text="sources.length" class="font-medium"></span> podcasts
</p>
<p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync">
Last synced: <span x-text="formatDate(status.episodes.lastSync, 'full')"></span>
<button @click="refresh()" class="ml-2 text-primary-600 hover:text-primary-700 dark:text-primary-400" :disabled="loading">
<svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
</button>
</p>
</header>
<div class="flex flex-col lg:flex-row gap-8">
{# Main Content - Episodes #}
<div class="flex-1 min-w-0">
{# Loading State #}
<div x-show="loading && episodes.length === 0" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<p class="text-surface-600 dark:text-surface-400">Loading episodes...</p>
</div>
{# Error State #}
<div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
<p class="text-red-700 dark:text-red-400" x-text="error"></p>
<button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
</div>
{# Filter by Podcast #}
<div x-show="episodes.length > 0" class="mb-6">
<div class="relative">
<select
x-model="filterPodcast"
class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
>
<option value="all">All Podcasts</option>
<template x-for="podcast in uniquePodcasts" :key="podcast">
<option :value="podcast" x-text="podcast"></option>
</template>
</select>
<svg class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-surface-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</div>
</div>
{# Episodes List #}
<div x-show="episodes.length > 0" class="space-y-4">
<template x-for="episode in filteredEpisodes" :key="episode.id">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
{# Episode Header #}
<div class="flex items-start gap-4 mb-4">
<div class="flex-1 min-w-0">
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1">
<a :href="episode.url" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener" x-text="episode.title"></a>
</h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<a
x-show="episode.podcast"
:href="episode.podcast?.url || '#'"
class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 rounded-full hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
target="_blank"
rel="noopener"
>
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3"/>
<path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
</svg>
<span x-text="episode.podcast?.title || 'Unknown'"></span>
</a>
<time :datetime="episode.published" x-text="formatDate(episode.published)"></time>
<span x-show="episode.enclosure" class="text-surface-400">
<svg class="w-3 h-3 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.828-2.828"/>
</svg>
<span x-text="formatDuration(episode.enclosure?.length)"></span>
</span>
</div>
</div>
</div>
{# Audio Player #}
<div x-show="episode.enclosure?.url" class="mb-4">
<audio
controls
preload="none"
class="w-full h-10 rounded-lg"
:src="episode.enclosure?.url"
>
Your browser does not support the audio element.
</audio>
</div>
{# Episode Description (text only for safety) #}
<p
x-show="episode.content"
class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3"
x-text="stripHtml(episode.content)"
></p>
{# Actions #}
<div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
<a
:href="episode.url"
class="inline-flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400"
target="_blank"
rel="noopener"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
</svg>
View Episode
</a>
<a
x-show="episode.podcast?.feedUrl"
:href="episode.podcast?.feedUrl"
class="inline-flex items-center gap-2 text-sm text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
target="_blank"
rel="noopener"
title="Subscribe to feed"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<circle cx="6.18" cy="17.82" r="2.18"/>
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
</svg>
RSS
</a>
</div>
</article>
</template>
</div>
{# Pagination #}
<div x-show="hasMore" class="text-center mt-8">
<button
@click="loadMore()"
:disabled="loadingMore"
class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
>
<span x-show="!loadingMore">Load More Episodes</span>
<span x-show="loadingMore" class="flex items-center gap-2">
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
Loading...
</span>
</button>
</div>
{# Empty State #}
<div x-show="!loading && episodes.length === 0 && !error" class="text-center py-12">
<svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
</svg>
<p class="text-surface-600 dark:text-surface-400 text-lg">No podcast episodes yet.</p>
<p class="text-surface-500 text-sm mt-2">Episodes will appear once the sync completes.</p>
</div>
</div>
{# Sidebar - Podcast Sources (OPML) #}
<aside class="lg:w-80 flex-shrink-0">
<div class="sticky top-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6">
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4 flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
<circle cx="6.18" cy="17.82" r="2.18"/>
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
</svg>
Subscriptions
<span class="text-sm font-normal text-surface-500" x-text="'(' + sources.length + ')'"></span>
</h2>
<div x-show="sources.length === 0 && !loading" class="text-sm text-surface-500 text-center py-4">
No subscriptions loaded yet.
</div>
<ul x-show="sources.length > 0" class="space-y-2 max-h-[60vh] overflow-y-auto">
<template x-for="source in sources" :key="source.xmlUrl">
<li class="group">
<a
:href="source.htmlUrl || source.xmlUrl"
class="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
target="_blank"
rel="noopener"
>
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center flex-shrink-0">
<span class="text-white text-xs font-bold" x-text="source.title.charAt(0).toUpperCase()"></span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate" x-text="source.title"></p>
<p x-show="source.category" class="text-xs text-surface-500 truncate" x-text="source.category"></p>
</div>
<a
:href="source.xmlUrl"
class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-primary-600 transition-opacity"
target="_blank"
rel="noopener"
title="RSS Feed"
@click.stop
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<circle cx="6.18" cy="17.82" r="2.18"/>
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
</svg>
</a>
</a>
</li>
</template>
</ul>
</div>
</aside>
</div>
</div>
<script>
function podrollApp() {
return {
episodes: [],
sources: [],
status: null,
loading: true,
loadingMore: false,
error: null,
filterPodcast: 'all',
offset: 0,
limit: 20,
hasMore: false,
refreshInterval: null,
async init() {
await this.fetchData();
// Auto-refresh every 5 minutes
this.refreshInterval = setInterval(() => this.fetchData(true), 5 * 60 * 1000);
},
async fetchData(silent = false) {
if (!silent) this.loading = true;
this.error = null;
try {
const [episodesRes, sourcesRes, statusRes] = await Promise.all([
fetch(`/podrollapi/api/episodes?limit=${this.limit}`).then(r => r.json()),
fetch('/podrollapi/api/sources').then(r => r.json()),
fetch('/podrollapi/api/status').then(r => r.json())
]);
this.episodes = episodesRes.items || [];
this.hasMore = episodesRes.hasMore || false;
this.offset = episodesRes.offset || 0;
this.sources = sourcesRes.items || [];
this.status = statusRes;
} catch (err) {
this.error = 'Failed to load podcasts: ' + err.message;
console.error('Podroll fetch error:', err);
} finally {
this.loading = false;
}
},
async loadMore() {
this.loadingMore = true;
const newOffset = this.offset + this.limit;
try {
const res = await fetch(`/podrollapi/api/episodes?limit=${this.limit}&offset=${newOffset}`).then(r => r.json());
this.episodes = [...this.episodes, ...(res.items || [])];
this.hasMore = res.hasMore || false;
this.offset = newOffset;
} catch (err) {
console.error('Load more error:', err);
} finally {
this.loadingMore = false;
}
},
async refresh() {
await this.fetchData();
},
get filteredEpisodes() {
if (this.filterPodcast === 'all') return this.episodes;
return this.episodes.filter(ep => ep.podcast?.title === this.filterPodcast);
},
get uniquePodcasts() {
const podcasts = new Set();
this.episodes.forEach(ep => {
if (ep.podcast?.title) podcasts.add(ep.podcast.title);
});
return Array.from(podcasts).sort();
},
formatDate(dateStr, format = 'short') {
if (!dateStr) return '';
const date = new Date(dateStr);
if (isNaN(date.getTime())) return '';
if (format === 'full') {
return date.toLocaleString(undefined, {
year: 'numeric', month: 'short', day: 'numeric',
hour: '2-digit', minute: '2-digit'
});
}
return date.toLocaleDateString(undefined, {
month: 'short', day: 'numeric', year: 'numeric'
});
},
formatDuration(bytes) {
if (!bytes) return '';
const mb = bytes / (1024 * 1024);
return mb.toFixed(1) + ' MB';
},
stripHtml(html) {
if (!html) return '';
// Use textContent to safely extract text without executing HTML
const div = document.createElement('div');
div.textContent = html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
return div.textContent.substring(0, 500);
}
};
}
</script>