add spotify

Author: codercatdev

apps/codingcatdev/src/lib/components/content/Podcast.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let src: string;
+	export let title: string;
+
+	const spotifyParser = (url: string) => {
+		return new URL(url).pathname.split('/').at(-1);
+	};
+	$: finalSrc = `https://open.spotify.com/embed/episode/${spotifyParser(
+		src
+	)}?utm_source=generator&theme=0`;
+</script>
+
+<iframe
+	frameborder="0"
+	{title}
+	allowfullscreen
+	allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+	loading="lazy"
+	width="100%"
+	height="160"
+	src={finalSrc}
+/>

apps/codingcatdev/src/routes/(content-single)/(non-course)/Content.svelte

@@ -4,10 +4,12 @@
 	import { ArrowTopRightOnSquare } from '@steeze-ui/heroicons';
 
 	import Video from '$lib/components/content/Video.svelte';
-	import type { Author, Content, ContentType, Podcast, Sponsor } from '$lib/types';
+	import type { Author, Content, Podcast, Sponsor } from '$lib/types';
+	import { ContentType } from '$lib/types';
 	import { pluralize } from '$lib/utils';
 	import Image from '$lib/components/content/Image.svelte';
 	import CopyCodeInjector from '$lib/components/content/CopyCodeInjector.svelte';
+	import PodcastComponent from '$lib/components/content/Podcast.svelte';
 	export let data: {
 		content: Content & Podcast;
 		guests?: Author[];
@@ -34,6 +36,10 @@
 						<Image src={data.content.cover} alt={data.content.title} />
 					{/if}
 
+					{#if data.content.type === ContentType.podcast && data.content?.spotify}
+						<PodcastComponent src={data.content.spotify} title={`${data.content.title}`} />
+					{/if}
+
 					<div class="flex gap-2 md:gap-8 overflow-x-auto">
 						<!-- Guests -->
 						{#if data?.guests && data?.guests?.length}