feat: Pods are own page and searchable

package.json

@@ -18,7 +18,7 @@
         "astro-pagefind": "^1.8.3",
         "canvas-confetti": "^1.9.3",
         "googleapis": "^144.0.0",
-        "swiper": "^11.2.6",
+        "swiper": "^12.1.2",
         "tailwindcss": "^4.0.3"
     },
     "devDependencies": {

src/components/PodsGrid.astro

@@ -1,45 +1,16 @@
 ---
-import { getPlaylistItems } from "@utils/youtubeApi";
-const fullPodPlaylistId = import.meta.env.COA_PODCASTS_FULL_PLAYLIST_ID;
-
-type PodcastItem = {
-    id: string;
-    title: string;
-    thumbnail: string;
-    publishedAt: string;
-};
-
-const podCount = 20;
-let data = await getPlaylistItems(podCount, fullPodPlaylistId);
-
-let privateVidCount = 0;
-data?.items?.forEach((item) => {
-    item.snippet.title === "Private video" ? privateVidCount++ : null;
-});
-data = await getPlaylistItems(podCount + privateVidCount, fullPodPlaylistId);
+import { getPodcasts } from "@utils/podcasts";
 
-const podcasts = data?.items
-    ?.map(
-        (item): PodcastItem => ({
-            id: item.contentDetails.videoId,
-            title: item.snippet.title,
-            thumbnail: item.snippet.thumbnails.maxres?.url || item.snippet.thumbnails.high?.url,
-            publishedAt: new Date(item.contentDetails.videoPublishedAt).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-            }),
-        })
-    )
-    .filter((podcast) => podcast.title !== "Private video");
+const fullPodPlaylistId = import.meta.env.COA_PODCASTS_FULL_PLAYLIST_ID;
+const podcasts = await getPodcasts(fullPodPlaylistId);
 ---
 
 <div class="bg-gray p-8 lg:p-12 xl:p-19">
     <div class="mx-auto">
         <div class="grid grid-cols-1 w-full md:grid-cols-2 lg:grid-cols-4 gap-14 sm:gap-8 lg:gap-8">
             {
                 podcasts?.map((podcast) => (
-                    <div class="group cursor-pointer video-item" data-video-id={podcast.id}>
+                    <a href={`/podcasts/${podcast.slug}`} class="group cursor-pointer">
                         <div class="relative aspect-video overflow-hidden rounded-lg">
                             <img
                                 src={podcast.thumbnail}
@@ -51,77 +22,9 @@ const podcasts = data?.items
                         </div>
                         <h3 class="mt-2 text-pearl text-sm font-barlow line-clamp-2">{podcast.title}</h3>
                         <p class="text-jonquil text-xs mt-1">{podcast.publishedAt}</p>
-                    </div>
+                    </a>
                 ))
             }
         </div>
     </div>
 </div>
-
-<!-- Video Modal -->
-<div id="videoModal" class="fixed inset-0 bg-black/80 z-50 hidden">
-    <button id="closeModalButton" class="fixed top-4 right-4 text-white hover:text-white/80 transition-colors z-50">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-        </svg>
-    </button>
-    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-7xl lg:max-w-[85vw]">
-        <div class="aspect-video w-full">
-            <iframe
-                id="modalVideoFrame"
-                class="w-full h-full"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-            >
-            </iframe>
-        </div>
-    </div>
-</div>
-
-<script>
-    function openVideoModal(videoId: string) {
-        const modal = document.getElementById("videoModal");
-        const iframe = document.getElementById("modalVideoFrame") as HTMLIFrameElement;
-        if (modal && iframe) {
-            iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
-            modal.classList.remove("hidden");
-            document.body.style.overflow = "hidden";
-        }
-    }
-
-    function closeVideoModal() {
-        const modal = document.getElementById("videoModal");
-        const iframe = document.getElementById("modalVideoFrame") as HTMLIFrameElement;
-        if (modal && iframe) {
-            iframe.src = "";
-            modal.classList.add("hidden");
-            document.body.style.overflow = "";
-        }
-    }
-
-    // Add click event listeners to all video items
-    document.addEventListener("DOMContentLoaded", () => {
-        const videoItems = document.querySelectorAll(".video-item");
-        videoItems.forEach((item) => {
-            item.addEventListener("click", () => {
-                const videoId = item.getAttribute("data-video-id");
-                if (videoId) {
-                    openVideoModal(videoId);
-                }
-            });
-        });
-
-        // Add click event listener to close button
-        const closeButton = document.getElementById("closeModalButton");
-        if (closeButton) {
-            closeButton.addEventListener("click", closeVideoModal);
-        }
-    });
-
-    // Close modal when clicking outside the video
-    document.getElementById("videoModal")?.addEventListener("click", (e) => {
-        if (e.target === e.currentTarget) {
-            closeVideoModal();
-        }
-    });
-</script>

src/layouts/Post.astro

@@ -13,7 +13,7 @@ const { Content } = await render(post);
         data-pagefind-body
     >
         <h4
-            data-pagefind-weight="10"
+            data-pagefind-weight="9"
             class="font-noto text-2xl sm:text-3xl md:text-4xl text-pearl text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21 max-w-full sm:max-w-[90%] md:max-w-[80%] lg:max-w-[66%] place-self-center"
         >
             {post.data.title}
@@ -34,7 +34,7 @@ const { Content } = await render(post);
                 </div>
             )
         }
-        <div class="font-barlow text-base sm:text-lg md:text-xl text-pearl" data-pagefind-weight="9">
+        <div class="font-barlow text-base sm:text-lg md:text-xl text-pearl" data-pagefind-weight="7">
             <Content />
         </div>
     </div>

src/pages/fr/podcasts/[slug].astro

@@ -0,0 +1,45 @@
+---
+import Main from "@layouts/Main.astro";
+import { getPodcasts } from "@utils/podcasts";
+import * as m from "@paraglide/messages.js";
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+    const playlistId = import.meta.env.COA_PODCASTS_FULL_PLAYLIST_ID;
+    const podcasts = await getPodcasts(playlistId);
+    return podcasts.map((podcast) => ({
+        params: { slug: podcast.slug },
+        props: { podcast },
+    }));
+}
+
+const { podcast } = Astro.props;
+---
+
+<Main title={`${podcast.title} | ${m.podcastsLabel()} | ${m.siteName()}`}>
+    <div class="bg-gray w-full">
+        <div data-pagefind-body class="flex flex-col justify-center py-8 sm:py-12 md:py-16 lg:py-21">
+            <h4
+                class="font-noto text-2xl sm:text-3xl md:text-4xl text-pearl text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21 max-w-full sm:max-w-[90%] md:max-w-[80%] lg:max-w-[66%] place-self-center"
+                data-pagefind-weight="10"
+            >
+                {podcast.title}
+            </h4>
+            <p class="text-jonquil text-sm text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21">{podcast.publishedAt}</p>
+            <div class="relative w-full px-40">
+                <div class="relative pb-[56.25%] h-0">
+                    <iframe
+                        class="absolute top-0 left-0 w-full h-full"
+                        src={`https://www.youtube.com/embed/${podcast.id}`}
+                        title={podcast.title}
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        loading="lazy"
+                    >
+                    </iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+</Main>

src/pages/podcasts/[slug].astro

@@ -0,0 +1,45 @@
+---
+import Main from "@layouts/Main.astro";
+import { getPodcasts } from "@utils/podcasts";
+import * as m from "@paraglide/messages.js";
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+    const playlistId = import.meta.env.COA_PODCASTS_FULL_PLAYLIST_ID;
+    const podcasts = await getPodcasts(playlistId);
+    return podcasts.map((podcast) => ({
+        params: { slug: podcast.slug },
+        props: { podcast },
+    }));
+}
+
+const { podcast } = Astro.props;
+---
+
+<Main title={`${podcast.title} | ${m.podcastsLabel()}`}>
+    <div class="bg-gray w-full">
+        <div data-pagefind-body class="flex flex-col justify-center py-8 sm:py-12 md:py-16 lg:py-21">
+            <h4
+                class="font-noto text-2xl sm:text-3xl md:text-4xl text-pearl text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21 max-w-full sm:max-w-[90%] md:max-w-[80%] lg:max-w-[66%] place-self-center"
+                data-pagefind-weight="10"
+            >
+                {podcast.title}
+            </h4>
+            <p class="text-jonquil text-sm text-center pb-4 sm:pb-8 md:pb-12 lg:pb-21">{podcast.publishedAt}</p>
+            <div class="relative w-full px-40 mb-4">
+                <div class="relative pb-[56.25%] h-0">
+                    <iframe
+                        class="absolute top-0 left-0 w-full h-full"
+                        src={`https://www.youtube.com/embed/${podcast.id}`}
+                        title={podcast.title}
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        loading="lazy"
+                    >
+                    </iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+</Main>

src/utils/podcasts.ts

@@ -0,0 +1,54 @@
+import { getPlaylistItems } from "@utils/youtubeApi";
+
+export type PodcastItem = {
+    id: string;
+    slug: string;
+    title: string;
+    thumbnail: string;
+    publishedAt: string;
+};
+
+export function slugify(text: string): string {
+    return text
+        .toLowerCase()
+        .replace(/['']/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+
+export async function getPodcasts(
+    playlistId: string,
+    count = 20,
+): Promise<PodcastItem[]> {
+    let data = await getPlaylistItems(count, playlistId);
+
+    let privateVidCount = 0;
+    data?.items?.forEach((item) => {
+        if (item.snippet.title === "Private video") privateVidCount++;
+    });
+    if (privateVidCount > 0) {
+        data = await getPlaylistItems(count + privateVidCount, playlistId);
+    }
+
+    return (
+        data?.items
+            ?.map(
+                (item): PodcastItem => ({
+                    id: item.contentDetails.videoId,
+                    slug: slugify(item.snippet.title),
+                    title: item.snippet.title,
+                    thumbnail:
+                        item.snippet.thumbnails.maxres?.url ||
+                        item.snippet.thumbnails.high?.url,
+                    publishedAt: new Date(
+                        item.contentDetails.videoPublishedAt,
+                    ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                    }),
+                }),
+            )
+            .filter((podcast) => podcast.title !== "Private video") ?? []
+    );
+}

src/utils/youtubeApi.ts

@@ -17,14 +17,14 @@ type PlaylistItem = {
                 videoId: string;
                 videoPublishedAt: string;
             };
-        }
+        },
     ];
 };
 
 // missing return type interface
 export const getPlaylistItems = async (
     maxResults: number,
-    playlistId: string
+    playlistId: string,
 ): Promise<PlaylistItem> => {
     let data = {};
     const res = await youtube.playlistItems.list({