Show Best-Of Episodes on linktree

src/components/PodcastEpisodeListing.astro

@@ -7,30 +7,34 @@ export interface Props {
 	// When entered a number, it is the episode number
 	// As string, only "latest" is supported for now - Which represents the top episode
 	episodes: Array<string|number>;
+
+	headline?: string;
+
+	description?: string;
+
+	showAllButton?: boolean;
 }
 
 import { getCollection } from "astro:content";
 
 import PodcastEpisodePreview from '../components/PodcastEpisodePreview.astro';
 
-const { numberOfItems, episodes } = Astro.props;
+const { numberOfItems, episodes, headline, description, showAllButton } = Astro.props;
 
 // Build the list of Podcast Episodes
 let allEpisodes = await getCollection("podcast");
 allEpisodes.sort((a, b) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf());
 
 // Default wise list all items, only limit it if requested
 let episodesToShow = allEpisodes;
-let showAllButton = false;
-let headline = 'Alle Podcast Episoden vom Engineering Kiosk';
 let mainPage = true;
 let descriptionChars = 300;
 
+let listingDescription = description || 'Jeden Dienstag gibt es eine neue Episode aus dem Kiosk rund um die Themen Engineering-Kultur, Open Source, Menschen, Technologie und verwandtes. Überall da wo es Podcasts gibt.';
+
 // if episodes are filtered
 if (episodes) {
-	headline = 'Ausgewählte Podcast Episoden für dich';
 	mainPage = false;
-	showAllButton = true;
 	episodesToShow = [];
 	descriptionChars = -1;
 
@@ -43,20 +47,19 @@ if (episodes) {
 
 	// add all remaining episodes, keep the order and prevent duplicates
 	episodes.forEach((ep) => {
-		const episodeToAdd = allEpisodes.find((episode) => episode.slug.includes(ep));
+		const episodeToAdd = allEpisodes.find((episode) => episode.slug.includes(ep) || episode.data.title.includes(ep));
 		if (episodeToAdd && !episodesToShow.includes(episodeToAdd)) {
 			episodesToShow.push(episodeToAdd);
 		}
 	});
 
 } else {
 	if (numberOfItems && numberOfItems > 0) {
-		headline = 'Die aktuellsten Podcast Episoden';
 		mainPage = false;
 		episodesToShow = allEpisodes.slice(0, numberOfItems);
-		showAllButton = true;
 	}
 }
+
 ---
 
 <section class="py-8 md:py-16 bg-white" style="background-image: url('/images/elements/pattern-white.svg'); background-repeat: no-repeat; background-position: center top;">
@@ -66,7 +69,7 @@ if (episodes) {
 				<span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-yellow-500 bg-yellow-100 font-medium uppercase rounded-full shadow-sm"> Podcast</span>
 				{mainPage && <h1 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">{headline}</h1>}
 				{!mainPage && <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">{headline}</h2>}
-				<p class="text-lg md:text-xl text-coolGray-500 font-medium">Jeden Dienstag gibt es eine neue Episode aus dem Kiosk rund um die Themen Engineering-Kultur, Open Source, Menschen, Technologie und verwandtes. Überall da wo es Podcasts gibt.</p>
+				<p class="text-lg md:text-xl text-coolGray-500 font-medium">{listingDescription}</p>
 			</div>
 			{
 				showAllButton && (

src/pages/index.astro

@@ -280,7 +280,7 @@ if (nextMeetup && nextMeetup.date) {
 				</div>
 			</section>
 
-			<PodcastEpisodeListing numberOfItems={6} />
+			<PodcastEpisodeListing numberOfItems={6}  showAllButton={true} headline="Die aktuellsten Podcast Episoden" />
 
 			<!--
 			<BlogPostListing numberOfItems="6" />

src/pages/linktree.astro

@@ -5,6 +5,8 @@ import MainHead from '../components/MainHead.astro';
 import Nav from '../components/Nav.astro';
 import PodcastEpisodeListing from '../components/PodcastEpisodeListing.astro';
 
+import bestOfEpisodes from '../data/episodes-best-of.json';
+
 // Header image
 import headerImageAndyWolfiLounge from "../images/headers/andy-grunwald-wolfgang-gassler-lounge.jpg";
 
@@ -24,18 +26,16 @@ const platforms = [
 	{ "name": "RSS", "image": "/images/brands/rss.svg", "href": podcastInfo.platformLinks.rss },
 ]
 
-// List of Slugs of episodes we want to show on this linktree site
-const episodesToShow = [
-	"latest-2",
-	"131-equity-in-tech-startups-mehr-als-nur-gehalt-mit-philipp-pip-klöckner",
-	"106-ci-continuous-integration-in-der-praxis-mit-michael-lihs-von-thoughtworks",
-	"95-effiziente-knowledge-sharing-formate-wissen-teilen-und-begeistern",
-	"94-die-realität-des-freelancings-zwischen-selbstbestimmung-und-unsicherheit-mit-index-out-of-bounds",
-	"51-was-ist-das-staff-engineer-level",
-	"127-imposter-syndrom-peter-prinzip-mit-dr-fanny-jimenez",
-	"46-welches-problem-löst-docker",
-	"28-o1-olog-n-on2-ist-die-komplexität-von-algorithmen-im-entwickler-alltag-relevant"
+const bestPerformingEpisodes = [
+  ...bestOfEpisodes
+    .sort((a, b) => a.rank - b.rank) 	// Sort by rank
+    .map(item => item.title)         	// Only get the titles
+];
+
+const latestEpisodes = [
+	"latest-3"
 ];
+
 ---
 
 <html lang="de">
@@ -66,7 +66,9 @@ const episodesToShow = [
 
 			</section>	
 
-			<PodcastEpisodeListing episodes={episodesToShow} />
+			<PodcastEpisodeListing episodes={bestPerformingEpisodes} showAllButton={true} headline="Unsere Best-Of Episoden" description="Neu hier? Unsere Best-Of-Episoden sind der perfekte Einstieg in den Engineering Kiosk – spannende Gespräche über Menschen, Technologie und Engineering-Kultur." />
+
+			<PodcastEpisodeListing episodes={latestEpisodes} showAllButton={false} headline="Unsere drei aktuellsten Episoden" description="Direkt aus dem Studio – die drei aktuellsten Folgen über Software, Teams & Technik, die du nicht verpassen solltest! Jeden Dienstag neu. Überall da wo es Podcasts gibt." />
 
 			<Footer />
 		</div>

src/pages/podcast/index.astro

@@ -18,7 +18,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 		<div>
 			<Nav title={title} />
 
-			<PodcastEpisodeListing numberOfItems="0" />
+			<PodcastEpisodeListing numberOfItems="0" showAllButton={false} headline='Alle Podcast Episoden vom Engineering Kiosk' />
 
 			<Footer />
 		</div>