Embed podcast on homepage (#219)

Embeds latest podcast on homepage

Just above db-story-i on desktop, and just below the classifieds on tablet. Currently no display on mobile.

Author: Willjianger9

components/LatestPodcast/index.jsx

@@ -0,0 +1,41 @@
+/**
+ * LatestPodcast: renders the latest podcast episode's embedded player
+ * on the home page. The WordPress post content typically contains an
+ * iframe embed (Spotify, Apple Podcasts, etc.) which is rendered directly.
+ */
+import * as React from "react";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/core";
+
+export default function LatestPodcast({ podcast }) {
+  if (!podcast) return null;
+
+  return (
+    <div
+      css={css`
+        /* Embedded player from WordPress content */
+        iframe {
+          max-width: 100%;
+          border-radius: 8px;
+        }
+
+        /* Hide non-embed content (text paragraphs, images, etc.)
+           so only the player iframe shows */
+        & > p,
+        & > div:not(:has(iframe)),
+        & > figure,
+        & > img {
+          display: none;
+        }
+
+        /* Keep containers that hold iframes visible */
+        & > div:has(iframe),
+        & > p:has(iframe),
+        & > figure:has(iframe) {
+          display: block;
+        }
+      `}
+      dangerouslySetInnerHTML={{ __html: podcast.content }}
+    />
+  );
+}

layouts/Home/index.jsx

@@ -7,6 +7,7 @@ import Media from "react-media";
 
 import ClassifiedsCard from "../../components/ClassifiedsCard";
 import GamesCard from "components/GamesCard/GamesCard";
+import LatestPodcast from "../../components/LatestPodcast";
 
 // Helper component for article cards with display type
 const ArticleCardWrapper = ({ id, card, displayType, priority }) => {
@@ -67,10 +68,21 @@ const GamesCardWrapper = () => (
   </div>
 );
 
+// Helper component for latest podcast
+const LatestPodcastWrapper = ({ podcast }) => {
+  if (!podcast) return null;
+  return (
+    <div className={css.card}>
+      <LatestPodcast podcast={podcast} />
+    </div>
+  );
+};
+
 export default function HomeLayout({
   posts,
   media,
   classifieds,
+  latestPodcast = null,
   mappedBreaking = null
 }) {
   const cards = useMemo(() => {
@@ -202,6 +214,7 @@ export default function HomeLayout({
                       classifieds={classifieds}
                     />
                   </div>
+                  <LatestPodcastWrapper podcast={latestPodcast} />
                   <ArticleCardWrapper
                     id="f1"
                     card={cards.f1ArticleCard}
@@ -305,6 +318,7 @@ export default function HomeLayout({
                     <div style={{ textAlign: "center" }} className={css.card}>
                       <broadstreet-zone zone-id="69405"></broadstreet-zone>
                     </div>
+                    <LatestPodcastWrapper podcast={latestPodcast} />
                     <StoryListWrapper id="i" card={cards.iArticleCard} />
                     <StoryListWrapper id="j" card={cards.jArticleCard} />
                     {/* Put twitter feed here */}

lib/fetchHomepageContent.js

@@ -131,15 +131,16 @@ export async function fetchHomePageContent() {
     fetchWithTimeout(`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&per_page=3&tags=${TAG_IDS.kTAGID}&${Config.articleCardFields}`),
     fetchWithTimeout(`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&per_page=3&tags=${TAG_IDS.lTAGID}&${Config.articleCardFields}`),
     fetchWithTimeout(`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&per_page=3&tags=${TAG_IDS.hTAGID}&${Config.articleCardFields}`),
-    fetchWithTimeout(`${Config.apiUrl}/wp-json/wp/v2/classifieds?_embed&Featured=3`)
+    fetchWithTimeout(`${Config.apiUrl}/wp-json/wp/v2/classifieds?_embed&Featured=3`),
+    fetchWithTimeout(`${Config.apiUrl}/wp-json/wp/v2/categories?slug=podcasts`)
   ];
 
   const results = await Promise.allSettled(fetchPromises);
 
   const [
     aStoryRes, bStoryRes, c1StoryRes, c2StoryRes, d1StoryRes, d2StoryRes, gStoryRes, mmStoryRes,
     f1StoryRes, f2StoryRes, iStoryRes, jStoryRes, kStoryRes, lStoryRes, hStoryRes,
-    classifiedsRes
+    classifiedsRes, podcastCatRes
   ] = results.map((res, i) => {
     if (res.status === "fulfilled" && res.value.ok) return res.value;
 
@@ -190,7 +191,33 @@ export async function fetchHomePageContent() {
 
   const classifieds = await safeJsonArray(classifiedsRes);
 
+  // Fetch latest podcast post (two-step: category slug → latest post)
+  let latestPodcast = null;
+  try {
+    const podcastCats = await safeJsonArray(podcastCatRes);
+    if (podcastCats.length > 0) {
+      const podcastCatId = podcastCats[0].id;
+      const podcastPostRes = await fetchWithTimeout(
+        `${Config.apiUrl}/wp-json/wp/v2/posts?_embed&per_page=1&categories=${podcastCatId}`
+      );
+      const podcastPosts = await safeJsonArray(podcastPostRes);
+      if (podcastPosts.length > 0) {
+        const post = podcastPosts[0];
+        latestPodcast = {
+          id: post.id ?? null,
+          title: post.title?.rendered ?? "",
+          content: post.content?.rendered ?? "",
+          link: post.link ?? "",
+          date: post.date ?? null,
+          _embedded: filterEmbeddedData(post)
+        };
+      }
+    }
+  } catch (err) {
+    console.error("Non-critical: failed to fetch latest podcast:", err.message);
+  }
+
   const filteredPosts = filterPostsData(posts);
 
-  return { posts: filteredPosts, multimediaPosts, classifieds };
+  return { posts: filteredPosts, multimediaPosts, classifieds, latestPodcast };
 }

pages/index.jsx

@@ -9,7 +9,7 @@ import EmailPopUp from "../components/EmailSignUp";
 import { createStaticProps } from "lib/createStaticProps";
 import { fetchHomePageContent } from "lib/fetchHomepageContent";
 
-function Index({ posts, multimediaPosts, classifieds }) {
+function Index({ posts, multimediaPosts, classifieds, latestPodcast }) {
   const [showNewsletterPopUp, setShowNewsletterPopUp] = useState(false);
 
   /* Handle newsletter popping-up logic */
@@ -89,6 +89,7 @@ function Index({ posts, multimediaPosts, classifieds }) {
       <HomeLayout
         posts={posts}
         media={multimediaPosts}
+        latestPodcast={latestPodcast}
         classifieds={(classifieds || [])
           .map(c => {
             try {