From 287b601c0f2c1e3f49bf6312578f4c6a3a9c9686 Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Fri, 23 Oct 2026 00:11:17 -0400 Subject: [PATCH] fix(site): clamp CoverImage srcset to intrinsic width, uncrop sponsor logos, and remove PodMatch (#783) --- apps/site/src/components/CoverImage.astro | 38 ++++++++----- apps/site/src/components/PodmatchBadge.astro | 59 -------------------- apps/site/src/lib/html-to-markdown.ts | 4 -- apps/site/src/pages/book.astro | 6 +- apps/site/src/pages/contact.astro | 4 +- apps/site/src/pages/index.astro | 4 -- apps/site/src/pages/podcast/[slug].astro | 8 --- apps/site/src/pages/privacy.astro | 2 +- apps/site/src/pages/sponsor/[slug].astro | 18 +++--- 9 files changed, 38 insertions(+), 105 deletions(-) delete mode 100644 apps/site/src/components/PodmatchBadge.astro diff --git a/apps/site/src/components/CoverImage.astro b/apps/site/src/components/CoverImage.astro index 943e32ced..0fe179202 100644 --- a/apps/site/src/components/CoverImage.astro +++ b/apps/site/src/components/CoverImage.astro @@ -22,29 +22,41 @@ const { quality = 82, sizes = "(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 960px", priority = false, - class: className = "w-full h-auto aspect-video rounded-md", + class: className = "w-full h-auto aspect-video rounded-md object-cover", } = Astro.props; +const assetRef = stegaClean( + (image as { asset?: { _ref?: string } } | null)?.asset?._ref, +); +const dimMatch = assetRef?.match(/-(\d+)x(\d+)-[a-z0-9]+$/i); +const intrinsicWidth = dimMatch ? Number(dimMatch[1]) : undefined; + const builder = Astro.locals.sanity.urlForImage(image ?? undefined); const aspect = height / width; +const isSquare = width === height; +const maxWidth = intrinsicWidth ? Math.min(width, intrinsicWidth) : width; +const maxHeight = Math.round(maxWidth * aspect); + +const buildUrl = (w: number) => { + if (!builder) return undefined; + const b = builder.width(w); + return (isSquare ? b.height(Math.round(w * aspect)) : b) + .quality(quality) + .url(); +}; -const src = builder - ?.width(width) - .height(height) - .quality(quality) - .url(); +const src = buildUrl(maxWidth); const responsiveWidths = [320, 480, 640, 960, 1280, 1600, 1920].filter( - (w) => w <= width, + (w) => w <= maxWidth, ); -if (!responsiveWidths.includes(width)) { - responsiveWidths.push(width); +if (!responsiveWidths.includes(maxWidth)) { + responsiveWidths.push(maxWidth); } const srcset = builder ? responsiveWidths .map((w) => { - const h = Math.round(w * aspect); - const u = builder.width(w).height(h).quality(quality).url(); + const u = buildUrl(w); return `${u} ${w}w`; }) .join(", ") @@ -63,8 +75,8 @@ const alt = rawAlt && rawAlt.trim().length > 0 ? rawAlt : fallbackAlt; class={className} src={src} srcset={srcset} - width={width} - height={height} + width={maxWidth} + height={maxHeight} alt={alt} loading={priority ? "eager" : "lazy"} fetchpriority={priority ? "high" : "auto"} diff --git a/apps/site/src/components/PodmatchBadge.astro b/apps/site/src/components/PodmatchBadge.astro deleted file mode 100644 index febce45db..000000000 --- a/apps/site/src/components/PodmatchBadge.astro +++ /dev/null @@ -1,59 +0,0 @@ ---- -/** - * Ported from `podmatch-badge.tsx`. The Next version was a client component - * purely for an `onError` fallback on the artwork; `onerror` as an inline - * attribute does the same without hydration. - */ ---- - -
- - CodingCat.dev Podcast cover art -
- PodMatch - - CodingCat.dev Podcast - - - Become a guest on my podcast - -
- -
- - diff --git a/apps/site/src/lib/html-to-markdown.ts b/apps/site/src/lib/html-to-markdown.ts index 087d1695e..57730c194 100644 --- a/apps/site/src/lib/html-to-markdown.ts +++ b/apps/site/src/lib/html-to-markdown.ts @@ -24,10 +24,6 @@ export function htmlToMarkdown(html: string, pageUrl?: string): string { /]*class=["'][^"']*transcript-widget[^"']*["'][^>]*>[\s\S]*?<\/footer>\s*<\/div>\s*<\/div>\s*<\/div>/gi, "", ) - .replace( - /]*href=["']https:\/\/www\.podmatch\.com\/member\/codingcatdev["'][^>]*>[\s\S]*?<\/a>/gi, - "", - ) .replace(/)<[^<]*)*<\/button>/gi, "") .replace(/)<[^<]*)*<\/nav>/gi, "") .replace(/)<[^<]*)*<\/header>/gi, "") diff --git a/apps/site/src/pages/book.astro b/apps/site/src/pages/book.astro index 2ab24e13b..059fa21c2 100644 --- a/apps/site/src/pages/book.astro +++ b/apps/site/src/pages/book.astro @@ -1,6 +1,5 @@ --- import Breadcrumbs from "@/components/Breadcrumbs.astro"; -import PodmatchBadge from "@/components/PodmatchBadge.astro"; import BaseLayout from "@/layouts/BaseLayout.astro"; import { getMultiCalendarAvailableSlots } from "@/lib/google-calendar"; @@ -396,13 +395,12 @@ const description = - +
- PodMatch Network Certified + CodingCat.dev Studio Powered by CodingCat.dev & Sanity Content Operating System
-
diff --git a/apps/site/src/pages/contact.astro b/apps/site/src/pages/contact.astro index 9e6787b3e..3cf573c4f 100644 --- a/apps/site/src/pages/contact.astro +++ b/apps/site/src/pages/contact.astro @@ -26,8 +26,8 @@ const description =

Podcast Guest Appearances

- Interested in being a guest on the CodingCat.dev Podcast? We love spotlighting developers building exciting tools, open source libraries, and novel developer experiences. You can connect with us directly via email or through our official PodMatch profile at - PodMatch. + Interested in being a guest on the CodingCat.dev Podcast? We love spotlighting developers building exciting tools, open source libraries, and novel developer experiences. You can connect with us directly via email at + alex@codingcat.dev or schedule a session on our booking page.

diff --git a/apps/site/src/pages/index.astro b/apps/site/src/pages/index.astro index 40850b966..a537b5ad1 100644 --- a/apps/site/src/pages/index.astro +++ b/apps/site/src/pages/index.astro @@ -1,7 +1,6 @@ --- import AnimatedHero from "@/components/AnimatedHero.astro"; import HomeSection from "@/components/HomeSection.astro"; -import PodmatchBadge from "@/components/PodmatchBadge.astro"; import BaseLayout from "@/layouts/BaseLayout.astro"; import type { ContentListItem } from "@/lib/content"; import { SITE_DESCRIPTION } from "@/lib/site"; @@ -26,9 +25,6 @@ const latestPosts = (home?.latestPosts ?? []) as ContentListItem[]; bare > -
- -
-
- -
-
- -
- { diff --git a/apps/site/src/pages/privacy.astro b/apps/site/src/pages/privacy.astro index c143df968..97b76e703 100644 --- a/apps/site/src/pages/privacy.astro +++ b/apps/site/src/pages/privacy.astro @@ -43,7 +43,7 @@ const description =

4. Third-Party Services

- Our website may contain links to external websites, platforms, or services (such as YouTube, GitHub, PodMatch, X, and sponsor sites). We are not responsible for the privacy practices of external platforms. We encourage you to review the privacy policies of any third-party websites you visit. + Our website may contain links to external websites, platforms, or services (such as YouTube, GitHub, X, and sponsor sites). We are not responsible for the privacy practices of external platforms. We encourage you to review the privacy policies of any third-party websites you visit.

diff --git a/apps/site/src/pages/sponsor/[slug].astro b/apps/site/src/pages/sponsor/[slug].astro index 173f5bb25..e3935da9e 100644 --- a/apps/site/src/pages/sponsor/[slug].astro +++ b/apps/site/src/pages/sponsor/[slug].astro @@ -21,11 +21,9 @@ if (!sponsor?._id) { const path = `/sponsor/${slug}`; const origin = Astro.locals.siteUrl.origin; -const avatarUrl = sanity +const ogCardImageUrl = sanity .urlForImage(sponsor.coverImage ?? undefined) - ?.width(256) - .height(256) - .fit("crop") + ?.width(640) .url(); const rawExcerpt = sponsor.excerpt?.trim(); const description = @@ -47,7 +45,7 @@ const relatedPodcasts = (sponsor.related?.podcast ?? []) as ContentListItem[]; title: sponsor.title, subtitle: description, type: "Sponsor", - avatar: avatarUrl, + image: ogCardImageUrl, }} canonical={path} schema={[ @@ -62,14 +60,14 @@ const relatedPodcasts = (sponsor.related?.podcast ?? []) as ContentListItem[]; />
-
+