feat: enhance YouTube video handling and update RSS feed links

codercatdev · codercatdev · commit 31f5fdb5e735 · 2026-03-31T14:28:25.000-04:00
- Added referrer policy to YouTube iframes to prevent errors related to cross-origin requests.
- Improved YouTube video ID parsing in various components for better handling of video URLs.
- Updated footer links to point to the new RSS feeds path.
- Adjusted sitemap and reserved slugs to reflect the new feeds structure.
- Removed obsolete podcast RSS feed generation file.
diff --git a/apps/sanity/components/YouTubePreview.tsx b/apps/sanity/components/YouTubePreview.tsx
@@ -75,6 +75,7 @@ export function VideoPreview(props: { youtube: string }) {
 				<iframe
 					style={{ height: "100%", width: "100%", border: 0 }}
 					src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&fs=0`}
+					referrerPolicy="strict-origin-when-cross-origin"
 					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 					allowFullScreen
 					title="YouTube video player"
diff --git a/apps/sanity/lib/utils.ts b/apps/sanity/lib/utils.ts
@@ -3,8 +3,10 @@
  */
 export function youtubeParser(url: string): string | null {
 	if (!url || typeof url !== "string") return null;
+	const trimmed = url.trim();
+	if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed)) return trimmed;
 	const regExp =
 		/^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
-	const match = url.match(regExp);
+	const match = trimmed.match(regExp);
 	return match && match[2].length === 11 ? match[2] : null;
 }
diff --git a/apps/web/src/components/Footer.astro b/apps/web/src/components/Footer.astro
@@ -104,9 +104,9 @@ import Container from "./Container.astro";
             </li>
             <li>
               <a
-                href="/rss.xml"
+                href="/feeds"
                 class="text-sm text-[--text-secondary] hover:text-[--text] transition-colors"
-                >RSS Feed</a>
+                >RSS feeds</a>
             </li>
           </ul>
         </div>
diff --git a/apps/web/src/components/course/LessonPlayer.tsx b/apps/web/src/components/course/LessonPlayer.tsx
@@ -1,12 +1,21 @@
 import { useMemo } from "react";
 
+import { parseYoutubeVideoId, youtubeEmbedSrc } from "@/lib/youtube";
+
+type SanityFileAsset = {
+  url?: string | null;
+  mimeType?: string | null;
+};
+
 type LessonRef = {
   _id: string;
   title: string;
   slug: string;
   locked?: boolean;
   coverImage?: unknown;
+  /** Raw string from CMS: may be URL or 11-char id */
   youtube?: string | null;
+  videoCloudinary?: { asset?: SanityFileAsset | null } | null;
 };
 
 type Section = {
@@ -85,6 +94,7 @@ export default function LessonPlayer({
   const next = index >= 0 && index < lessons.length - 1 ? lessons[index + 1] : null;
 
   const base = `/course/${courseSlug}/lesson`;
+  const youtubeId = parseYoutubeVideoId(lesson.youtube ?? undefined);
 
   return (
     <div className="flex flex-col gap-6 lg:grid lg:grid-cols-[minmax(240px,280px)_1fr] lg:items-start lg:gap-8">
@@ -137,15 +147,32 @@ export default function LessonPlayer({
             <LockBadge locked={lesson.locked} />
           </header>
 
-          {lesson.youtube ? (
+          {youtubeId ? (
             <div className="aspect-video w-full bg-black">
               <iframe
-                src={`https://www.youtube.com/embed/${lesson.youtube}`}
+                src={youtubeEmbedSrc(youtubeId)}
                 className="h-full w-full"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowFullScreen
                 title={lesson.title}
               />
             </div>
+          ) : lesson.videoCloudinary?.asset?.url ? (
+            <div className="aspect-video w-full bg-black">
+              <video
+                className="h-full w-full"
+                controls
+                playsInline
+                preload="metadata"
+                title={lesson.title}
+              >
+                <source
+                  src={lesson.videoCloudinary.asset.url}
+                  type={lesson.videoCloudinary.asset.mimeType ?? undefined}
+                />
+              </video>
+            </div>
           ) : (
             <div className="flex aspect-video w-full items-center justify-center bg-[--surface-hover] text-[--text-tertiary]">
               No video for this lesson
diff --git a/apps/web/src/layouts/BaseLayout.astro b/apps/web/src/layouts/BaseLayout.astro
@@ -40,7 +40,7 @@ const currentPath = Astro.url.pathname || "/";
     />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="alternate" type="application/rss+xml" title="CodingCat.dev Blog" href="/rss.xml" />
-    <link rel="alternate" type="application/rss+xml" title="CodingCat.dev Podcast" href="/podcast/rss.xml" />
+    <link rel="alternate" type="application/rss+xml" title="CodingCat.dev Courses" href="/courses/rss.xml" />
 
     {/* Dark mode script — MUST be before CSS to prevent FOUC */}
     <ThemeScript />
diff --git a/apps/web/src/lib/queries.ts b/apps/web/src/lib/queries.ts
@@ -42,9 +42,10 @@ const contentFields = `
 `;
 
 const podcastFields = `
-  podcastType[]->{
+  podcastType->{
     ...,
     "title": coalesce(title, "Missing Podcast Title"),
+    "slug": slug.current,
   },
   season,
   episode,
@@ -225,7 +226,12 @@ const courseFields = `
 
 const lessonFields = `
   locked,
-  videoCloudinary
+  videoCloudinary{
+    asset->{
+      url,
+      mimeType
+    }
+  }
 `;
 
 export const courseListQuery = groq`*[_type == "course" && defined(slug.current)] | order(date desc, _updatedAt desc) [$offset...$end] {
@@ -297,7 +303,26 @@ export const rssPostsQuery = groq`*[_type == "post" && defined(slug.current)] |
   ${contentFields}
 }`;
 
-export const rssPodcastsQuery = groq`*[_type == "podcast" && defined(slug.current)] | order(date desc) [0...20] {
+export const rssCoursesQuery = groq`*[_type == "course" && defined(slug.current)] | order(date desc) [0...20] {
   ${baseFields},
-  ${contentFields}
+  ${courseFields}
+}`;
+
+/** Full episode archive for this show (podcast apps expect the complete feed). */
+export const rssPodcastsByTypeQuery = groq`*[_type == "podcast" && defined(slug.current) && podcastType->slug.current == $podcastTypeSlug] | order(date desc) {
+  ${baseFields},
+  ${contentFields},
+  ${podcastFields}
+}`;
+
+export const podcastTypeBySlugQuery = groq`*[_type == "podcastType" && slug.current == $podcastTypeSlug][0] {
+  _id,
+  "title": coalesce(title, "Untitled"),
+  "slug": slug.current
+}`;
+
+export const podcastTypesListQuery = groq`*[_type == "podcastType" && defined(slug.current)] | order(title asc) {
+  _id,
+  "title": coalesce(title, "Untitled"),
+  "slug": slug.current
 }`;
diff --git a/apps/web/src/lib/youtube.ts b/apps/web/src/lib/youtube.ts
@@ -0,0 +1,23 @@
+/**
+ * YouTube embed helpers.
+ *
+ * Error 153 ("Video player configuration error") happens when the embed request sends no
+ * Referer — e.g. site-wide Referrer-Policy: same-origin. Set
+ * referrerpolicy="strict-origin-when-cross-origin" on the iframe.
+ * @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-player-api-client-identity
+ */
+
+/** 11-char video ID from a bare id or youtu.be / watch / embed URLs */
+export function parseYoutubeVideoId(input: string | null | undefined): string | null {
+  if (!input || typeof input !== "string") return null;
+  const trimmed = input.trim();
+  if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed)) return trimmed;
+  const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+  const match = trimmed.match(regExp);
+  return match && match[2].length === 11 ? match[2] : null;
+}
+
+/** Privacy-enhanced host; works better with some referrer/CSP setups than www.youtube.com */
+export function youtubeEmbedSrc(videoId: string): string {
+  return `https://www.youtube-nocookie.com/embed/${encodeURIComponent(videoId)}`;
+}
diff --git a/apps/web/src/pages/[slug].astro b/apps/web/src/pages/[slug].astro
@@ -10,7 +10,7 @@ export const prerender = false;
 const { slug } = Astro.params;
 
 // Don't catch known routes — let them fall through to their own handlers
-const reservedSlugs = ["blog", "courses", "podcasts", "authors", "guests", "sponsors", "login", "dashboard", "rss.xml", "sitemap.xml", "course"];
+const reservedSlugs = ["blog", "courses", "feeds", "podcasts", "authors", "guests", "sponsors", "login", "dashboard", "rss.xml", "sitemap.xml", "course"];
 if (reservedSlugs.includes(slug!)) {
   return Astro.redirect(`/${slug}`);
 }
diff --git a/apps/web/src/pages/course/[slug].astro b/apps/web/src/pages/course/[slug].astro
@@ -7,6 +7,7 @@ import ContentCard from "@/components/ContentCard.astro";
 import { PortableText } from "astro-portabletext";
 import { loadQuery, urlForImage } from "@/utils/sanity";
 import { courseQuery, lessonsInCourseQuery } from "@/lib/queries";
+import { parseYoutubeVideoId, youtubeEmbedSrc } from "@/lib/youtube";
 
 export const prerender = false;
 
@@ -54,6 +55,8 @@ const displayDescription = course.excerpt;
 const ogImage = coverUrl ?? `${siteUrl}/api/og/default.png?title=${encodeURIComponent(course.title)}`;
 
 const showLockedHint = Astro.url.searchParams.has("locked");
+
+const courseYoutubeId = parseYoutubeVideoId(course.youtube);
 ---
 
 <BaseLayout title={`${displayTitle} — CodingCat.dev`} description={displayDescription} ogImage={ogImage}>
@@ -109,11 +112,13 @@ const showLockedHint = Astro.url.searchParams.has("locked");
           />
         )}
 
-        {course.youtube && (
+        {courseYoutubeId && (
           <div class="aspect-video mb-8 rounded-xl overflow-hidden">
             <iframe
-              src={`https://www.youtube.com/embed/${course.youtube}`}
+              src={youtubeEmbedSrc(courseYoutubeId)}
               class="w-full h-full"
+              referrerpolicy="strict-origin-when-cross-origin"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               allowfullscreen
               loading="lazy"
               title="Course video"
diff --git a/apps/web/src/pages/courses/rss.xml.ts b/apps/web/src/pages/courses/rss.xml.ts
@@ -0,0 +1,42 @@
+import type { APIRoute } from "astro";
+import { sanityFetch } from "@/utils/sanity";
+import { rssCoursesQuery } from "@/lib/queries";
+import { escapeXml } from "@/utils/xml";
+
+export const prerender = false;
+
+export const GET: APIRoute = async () => {
+  const site = "https://codingcat.dev";
+  const courses = await sanityFetch<any[]>(rssCoursesQuery);
+
+  const items = courses
+    .map(
+      (course) => `    <item>
+      <title>${escapeXml(course.title)}</title>
+      <link>${site}/course/${course.slug}</link>
+      <guid>${site}/course/${course.slug}</guid>
+      <pubDate>${new Date(course.date).toUTCString()}</pubDate>
+      ${course.excerpt ? `<description>${escapeXml(course.excerpt)}</description>` : ""}
+    </item>`,
+    )
+    .join("\n");
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>CodingCat.dev Courses</title>
+    <link>${site}/courses</link>
+    <description>Structured courses and learning paths from CodingCat.dev</description>
+    <language>en-us</language>
+    <atom:link href="${site}/courses/rss.xml" rel="self" type="application/rss+xml"/>
+${items}
+  </channel>
+</rss>`;
+
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/rss+xml",
+      "Cache-Control": "public, max-age=3600",
+    },
+  });
+};
diff --git a/apps/web/src/pages/feeds.astro b/apps/web/src/pages/feeds.astro
@@ -0,0 +1,72 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Container from "@/components/Container.astro";
+import { loadQuery } from "@/utils/sanity";
+import { podcastTypesListQuery } from "@/lib/queries";
+
+export const prerender = false;
+
+const draftMode = Astro.cookies.has("__sanity_preview");
+const perspective = Astro.url.searchParams.get("sanity-preview-perspective") ?? undefined;
+const previewDataset = Astro.cookies.get("__sanity_preview_dataset")?.value ?? undefined;
+
+const { data: podcastTypes } = await loadQuery<
+  { _id: string; title: string; slug: string }[]
+>({
+  query: podcastTypesListQuery,
+  draftMode,
+  perspective,
+  dataset: previewDataset,
+});
+
+const siteUrl = Astro.url.origin;
+const ogImage = `${siteUrl}/api/og/default.png?title=${encodeURIComponent("RSS Feeds")}&subtitle=${encodeURIComponent("CodingCat.dev")}`;
+---
+
+<BaseLayout
+  title="RSS Feeds — CodingCat.dev"
+  description="Subscribe to the blog, courses, or individual podcast shows."
+  ogImage={ogImage}
+>
+  <main class="py-12">
+    <Container size="narrow">
+      <h1 class="text-3xl font-bold text-[--text] mb-2">RSS feeds</h1>
+      <p class="text-[--text-secondary] mb-8">
+        Subscribe in your podcast app or feed reader.
+      </p>
+
+      <ul class="space-y-6">
+        <li>
+          <h2 class="text-lg font-semibold text-[--text] mb-1">Blog</h2>
+          <p class="text-sm text-[--text-secondary] mb-2">Latest posts and tutorials.</p>
+          <a href="/rss.xml" class="text-primary font-mono text-sm break-all hover:underline">/rss.xml</a>
+        </li>
+        <li>
+          <h2 class="text-lg font-semibold text-[--text] mb-1">Courses</h2>
+          <p class="text-sm text-[--text-secondary] mb-2">New and updated courses.</p>
+          <a href="/courses/rss.xml" class="text-primary font-mono text-sm break-all hover:underline">/courses/rss.xml</a>
+        </li>
+        <li>
+          <h2 class="text-lg font-semibold text-[--text] mb-2">Podcasts by show</h2>
+          {podcastTypes && podcastTypes.length > 0 ? (
+            <ul class="space-y-3">
+              {podcastTypes.map((pt) => (
+                <li class="border border-[--border] rounded-lg p-4 bg-[--surface]">
+                  <div class="font-medium text-[--text] mb-1">{pt.title}</div>
+                  <a
+                    href={`/podcast/${pt.slug}/rss.xml`}
+                    class="text-primary font-mono text-sm break-all hover:underline"
+                  >
+                    /podcast/{pt.slug}/rss.xml
+                  </a>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p class="text-sm text-[--text-tertiary]">No podcast types configured yet.</p>
+          )}
+        </li>
+      </ul>
+    </Container>
+  </main>
+</BaseLayout>
diff --git a/apps/web/src/pages/podcast/[podcastTypeSlug]/rss.xml.ts b/apps/web/src/pages/podcast/[podcastTypeSlug]/rss.xml.ts
diff --git a/apps/web/src/pages/podcast/[slug].astro b/apps/web/src/pages/podcast/[slug].astro
diff --git a/apps/web/src/pages/podcast/rss.xml.ts b/apps/web/src/pages/podcast/rss.xml.ts
diff --git a/apps/web/src/pages/post/[slug].astro b/apps/web/src/pages/post/[slug].astro
diff --git a/apps/web/src/pages/sitemap.xml.ts b/apps/web/src/pages/sitemap.xml.ts

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export const prerender = false;`
`10`	`10`	`const { slug } = Astro.params;`
`11`	`11`
`12`	`12`	`// Don't catch known routes — let them fall through to their own handlers`
`13`		`-const reservedSlugs = ["blog", "courses", "podcasts", "authors", "guests", "sponsors", "login", "dashboard", "rss.xml", "sitemap.xml", "course"];`
	`13`	`+const reservedSlugs = ["blog", "courses", "feeds", "podcasts", "authors", "guests", "sponsors", "login", "dashboard", "rss.xml", "sitemap.xml", "course"];`
`14`	`14`	`if (reservedSlugs.includes(slug!)) {`
`15`	`15`	return Astro.redirect(`/${slug}`);
`16`	`16`	`}`