feat: page redesigns — design system, schema fields, SocialMeta, OG images (Track C) (#682)

Full page redesign using Track B design system + Track A schema fields.\n\nPages redesigned:\n- Homepage: hero with gradient, featured podcast (ContentCardFeatured), 4 content rows with Badge headers + View All links\n- Blog listing: Badge + post count, categories as Tags, 3-column grid\n- Post detail: Badge + date, author Avatar, categories, prose with design tokens, author card, socialPreview\n- Podcast listing: episode/season metadata on cards, episode count\n- Podcast detail: series info card, chapters timeline with seconds, guest cards (Avatar + company/role), listen links (flat object), picks, author card, socialPreview\n- Author/guest/sponsor detail: company/role, Avatar fallback, Badge headers for related content\n- Author/guest/sponsor listing: Container, design tokens, OG images\n- Generic pages: Container narrow, socialPreview fields\n- 404: gradient text, cat message, Button components\n\nNew component:\n- SocialMeta.astro: og:*/twitter:*/article:* meta tags with smart defaults, og:image dimensions + alt + locale, fallback OG image via /api/og/default.png\n\nGROQ updates:\n- baseFields: +authorName, +authorImage\n- postListQuery/postQuery: +categories[]->  +socialPreview\n- podcastFields: +chapters[]{title,timestamp,seconds}, +series->, +listenLinks (flat object)\n- podcastListQuery: +episode, +season\n- author/guest queries: +company, +role, +socialPreview\n- sponsor/page queries: +socialPreview\n\nDesign compliance: zero hardcoded colors, all design tokens, all Track B components used.\nDesign QA approved by @uidesigner. Social preview reviewed by @SocialMediaStrategist. Podcast reviewed by @podcaststrategist."

Author: codercatdev

apps/web/src/components/PersonDetail.astro

@@ -2,6 +2,8 @@
 import { PortableText } from "astro-portabletext";
 import { urlForImage } from "@/utils/sanity";
 import ContentCard from "./ContentCard.astro";
+import Avatar from "./Avatar.astro";
+import Badge from "./Badge.astro";
 
 interface Props {
   person: any;
@@ -21,34 +23,45 @@ function getHostname(url: string): string {
 ---
 
 <div class="flex flex-col md:flex-row gap-8 mb-12">
-  {coverUrl && (
+  {coverUrl ? (
     <img
       src={coverUrl}
       alt={person.title}
       width={400}
       height={400}
       class="w-48 h-48 rounded-full object-cover flex-shrink-0"
     />
+  ) : (
+    <Avatar name={person.title} size="xl" />
   )}
   <div>
-    <h1 class="text-4xl font-bold mb-4">{person.title}</h1>
+    <h1 class="text-4xl font-bold text-[--text] mb-2">{person.title}</h1>
+
+    {/* Company & Role for guests */}
+    {(person.company || person.role) && (
+      <p class="text-lg text-[--text-secondary] mb-2">
+        {[person.role, person.company].filter(Boolean).join(" at ")}
+      </p>
+    )}
+
     {person.excerpt && (
-      <p class="text-gray-600 text-lg mb-4">{person.excerpt}</p>
+      <p class="text-[--text-secondary] text-lg mb-4">{person.excerpt}</p>
     )}
+
     {person.socials && (
       <div class="flex flex-wrap gap-3">
         {person.socials.twitter && (
-          <a href={`https://twitter.com/${person.socials.twitter}`} target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">
+          <a href={`https://twitter.com/${person.socials.twitter}`} target="_blank" rel="noopener noreferrer" class="text-[--text-secondary] hover:text-primary transition-colors">
             Twitter
           </a>
         )}
         {person.socials.github && (
-          <a href={`https://github.com/${person.socials.github}`} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:underline">
+          <a href={`https://github.com/${person.socials.github}`} target="_blank" rel="noopener noreferrer" class="text-[--text-secondary] hover:text-primary transition-colors">
             GitHub
           </a>
         )}
         {person.socials.linkedin && (
-          <a href={person.socials.linkedin} target="_blank" rel="noopener noreferrer" class="text-blue-700 hover:underline">
+          <a href={person.socials.linkedin} target="_blank" rel="noopener noreferrer" class="text-[--text-secondary] hover:text-primary transition-colors">
             LinkedIn
           </a>
         )}
@@ -57,7 +70,7 @@ function getHostname(url: string): string {
     {person.websites && person.websites.length > 0 && (
       <div class="flex flex-wrap gap-3 mt-2">
         {person.websites.map((site: string) => (
-          <a href={site} target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline text-sm">
+          <a href={site} target="_blank" rel="noopener noreferrer" class="text-sm text-[--text-secondary] hover:text-primary transition-colors">
             {getHostname(site)}
           </a>
         ))}
@@ -67,7 +80,16 @@ function getHostname(url: string): string {
 </div>
 
 {person.content && (
-  <div class="prose prose-lg max-w-none mb-12">
+  <div class="prose prose-lg prose-invert max-w-none mb-12
+    prose-headings:text-[--text] prose-headings:font-bold
+    prose-p:text-[--text-secondary]
+    prose-a:text-primary prose-a:no-underline hover:prose-a:underline
+    prose-strong:text-[--text]
+    prose-code:text-primary prose-code:bg-[--surface] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
+    prose-pre:bg-[--surface] prose-pre:border prose-pre:border-[--border] prose-pre:rounded-xl
+    prose-blockquote:border-primary prose-blockquote:text-[--text-secondary]
+    prose-li:text-[--text-secondary]
+  ">
     <PortableText value={person.content} />
   </div>
 )}
@@ -76,15 +98,20 @@ function getHostname(url: string): string {
   <>
     {person.related.podcast && person.related.podcast.length > 0 && (
       <section class="mb-12">
-        <h2 class="text-2xl font-bold mb-6">Related Podcasts</h2>
-        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div class="flex items-center gap-3 mb-6">
+          <Badge type="podcast" />
+          <h2 class="text-2xl font-bold text-[--text]">Related Podcasts</h2>
+        </div>
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
           {person.related.podcast.map((p: any) => (
             <ContentCard
               title={p.title}
-              slug={`/podcast/${p.slug}`}
-              coverImage={p.coverImage}
-              excerpt={p.excerpt}
-              date={p.date}
+              url={`/podcast/${p.slug}`}
+              type="podcast"
+              thumbnail={p.coverImage}
+              authorName={p.authorName}
+              authorImage={p.authorImage}
+              metadata={p.date ? new Date(p.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : undefined}
             />
           ))}
         </div>
@@ -93,15 +120,20 @@ function getHostname(url: string): string {
 
     {person.related.post && person.related.post.length > 0 && (
       <section class="mb-12">
-        <h2 class="text-2xl font-bold mb-6">Related Posts</h2>
-        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div class="flex items-center gap-3 mb-6">
+          <Badge type="blog" />
+          <h2 class="text-2xl font-bold text-[--text]">Related Posts</h2>
+        </div>
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
           {person.related.post.map((p: any) => (
             <ContentCard
               title={p.title}
-              slug={`/post/${p.slug}`}
-              coverImage={p.coverImage}
-              excerpt={p.excerpt}
-              date={p.date}
+              url={`/post/${p.slug}`}
+              type="blog"
+              thumbnail={p.coverImage}
+              authorName={p.authorName}
+              authorImage={p.authorImage}
+              metadata={p.date ? new Date(p.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : undefined}
             />
           ))}
         </div>

apps/web/src/components/SocialMeta.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+  ogImage?: string;
+  type?: 'website' | 'article';
+  publishedAt?: string;
+  author?: string;
+  canonicalUrl?: string;
+}
+
+const {
+  title,
+  description = "CodingCat.dev — Purrfect Web Tutorials",
+  ogImage,
+  type = "website",
+  publishedAt,
+  author,
+  canonicalUrl,
+} = Astro.props;
+
+const siteUrl = Astro.url.origin;
+const resolvedUrl = canonicalUrl || Astro.url.href;
+const resolvedImage = ogImage || `${siteUrl}/api/og/default.png?title=${encodeURIComponent(title)}`;
+---
+
+{/* Primary Meta Tags */}
+<meta name="description" content={description} />
+
+{/* Canonical */}
+{canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+
+{/* Open Graph */}
+<meta property="og:type" content={type} />
+<meta property="og:url" content={resolvedUrl} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={resolvedImage} />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:alt" content={title} />
+<meta property="og:site_name" content="CodingCat.dev" />
+<meta property="og:locale" content="en_US" />
+
+{/* Twitter Card */}
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@codingcatdev" />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={resolvedImage} />
+
+{/* Article-specific */}
+{type === "article" && publishedAt && (
+  <meta property="article:published_time" content={publishedAt} />
+)}
+{type === "article" && author && (
+  <meta property="article:author" content={author} />
+)}

apps/web/src/layouts/BaseLayout.astro

@@ -4,13 +4,19 @@ import ThemeScript from "../components/ThemeScript.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { VisualEditing } from "@sanity/astro/visual-editing";
+import SocialMeta from "../components/SocialMeta.astro";
 
 interface Props {
   title: string;
   description?: string;
+  ogImage?: string;
+  ogType?: 'website' | 'article';
+  publishedAt?: string;
+  author?: string;
+  canonicalUrl?: string;
 }
 
-const { title, description = "CodingCat.dev — Purrfect Web Tutorials" } = Astro.props;
+const { title, description = "CodingCat.dev — Purrfect Web Tutorials", ogImage, ogType, publishedAt, author, canonicalUrl } = Astro.props;
 
 const visualEditingEnabled =
   import.meta.env.PUBLIC_SANITY_VISUAL_EDITING_ENABLED === "true" ||
@@ -22,7 +28,15 @@ const visualEditingEnabled =
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content={description} />
+    <SocialMeta
+      title={title}
+      description={description}
+      ogImage={ogImage}
+      type={ogType}
+      publishedAt={publishedAt}
+      author={author}
+      canonicalUrl={canonicalUrl}
+    />
     <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" />

apps/web/src/lib/queries.ts

@@ -7,7 +7,9 @@ const baseFields = `
   "slug": slug.current,
   excerpt,
   coverImage,
-  "date": coalesce(date, _createdAt)
+  "date": coalesce(date, _createdAt),
+  "authorName": author[0]->title,
+  "authorImage": author[0]->coverImage
 `;
 
 const contentFields = `
@@ -57,12 +59,20 @@ const podcastFields = `
     name,
     site
   },
-  spotify
+  spotify,
+  chapters[]{
+    title,
+    timestamp,
+    seconds
+  },
+  "series": series->{ _id, "title": coalesce(title, "Unknown Series"), "slug": slug.current, description },
+  listenLinks
 `;
 
 export const homePageQuery = groq`*[_type == "settings"][0]{
   "latestPodcast": *[_type == "podcast"]|order(date desc)[0]{
     ${baseFields},
+    excerpt,
     youtube,
   },
   "latestPodcasts": *[_type == "podcast"]|order(date desc)[0...4]{
@@ -84,18 +94,25 @@ export const postListQuery = groq`*[_type == "post" && defined(slug.current)] |
   author[]->{
     "title": coalesce(title, "Anonymous"),
     "slug": slug.current,
-  }
+  },
+  categories[]->{ _id, "title": coalesce(title, "Uncategorized"), "slug": slug.current }
 }`;
 
 export const postQuery = groq`*[_type == "post" && slug.current == $slug][0] {
   ${baseFields},
-  ${contentFields}
+  ${contentFields},
+  categories[]->{ _id, "title": coalesce(title, "Uncategorized"), "slug": slug.current },
+  "ogTitle": socialPreview.ogTitle,
+  "ogDescription": socialPreview.ogDescription,
+  "ogImage": socialPreview.ogImage
 }`;
 
 export const postCountQuery = groq`count(*[_type == "post" && defined(slug.current)])`;
 
 export const podcastListQuery = groq`*[_type == "podcast" && defined(slug.current)] | order(date desc, _updatedAt desc) [$offset...$end] {
   ${baseFields},
+  episode,
+  season,
   author[]->{
     "title": coalesce(title, "Anonymous"),
     "slug": slug.current,
@@ -109,7 +126,10 @@ export const podcastListQuery = groq`*[_type == "podcast" && defined(slug.curren
 export const podcastQuery = groq`*[_type == "podcast" && slug.current == $slug][0] {
   ${baseFields},
   ${contentFields},
-  ${podcastFields}
+  ${podcastFields},
+  "ogTitle": socialPreview.ogTitle,
+  "ogDescription": socialPreview.ogDescription,
+  "ogImage": socialPreview.ogImage
 }`;
 
 export const podcastCountQuery = groq`count(*[_type == "podcast" && defined(slug.current)])`;
@@ -131,6 +151,11 @@ export const authorQuery = groq`*[_type == "author" && slug.current == $slug][0]
   ${contentFields},
   socials,
   websites,
+  company,
+  role,
+  "ogTitle": socialPreview.ogTitle,
+  "ogDescription": socialPreview.ogDescription,
+  "ogImage": socialPreview.ogImage,
   "related": {
     "podcast": *[_type == "podcast" && (^._id in author[]._ref || ^._id in guest[]._ref)] | order(date desc) [0...4] {
       ${baseFields}
@@ -153,6 +178,11 @@ export const guestQuery = groq`*[_type == "guest" && slug.current == $slug][0] {
   ${contentFields},
   socials,
   websites,
+  company,
+  role,
+  "ogTitle": socialPreview.ogTitle,
+  "ogDescription": socialPreview.ogDescription,
+  "ogImage": socialPreview.ogImage,
   "related": {
     "podcast": *[_type == "podcast" && (^._id in author[]._ref || ^._id in guest[]._ref)] | order(date desc) [0...4] {
       ${baseFields}
@@ -175,6 +205,9 @@ export const sponsorQuery = groq`*[_type == "sponsor" && slug.current == $slug][
   ${contentFields},
   socials,
   websites,
+  "ogTitle": socialPreview.ogTitle,
+  "ogDescription": socialPreview.ogDescription,
+  "ogImage": socialPreview.ogImage,
   "related": {
     "podcast": *[_type == "podcast" && ^._id in sponsor[]._ref] | order(date desc) [0...4] {
       ${baseFields}
@@ -196,7 +229,10 @@ export const sitemapQuery = groq`*[_type in ["author", "guest", "page", "podcast
 // Generic pages (Sanity "page" type)
 export const pageQuery = groq`*[_type == "page" && slug.current == $slug][0] {
   ${baseFields},
-  ${contentFields}
+  ${contentFields},
+  "ogTitle": socialPreview.ogTitle,
+  "ogDescription": socialPreview.ogDescription,
+  "ogImage": socialPreview.ogImage
 }`;
 
 // RSS feeds

apps/web/src/pages/404.astro

@@ -1,20 +1,27 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import Container from "@/components/Container.astro";
+import Button from "@/components/Button.astro";
 ---
 
 <BaseLayout title="Page Not Found — CodingCat.dev">
-  <main class="container mx-auto px-4 py-16 text-center">
-    <h1 class="text-6xl font-bold mb-4">404</h1>
-    <p class="text-xl text-gray-600 mb-8">
-      This page has gone on a catnap. 😸
-    </p>
-    <div class="space-x-4">
-      <a href="/" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
-        Go Home
-      </a>
-      <a href="/blog" class="px-6 py-3 border rounded-lg hover:bg-gray-50 transition-colors">
-        Browse Blog
-      </a>
-    </div>
+  <main class="py-20 md:py-32">
+    <Container>
+      <div class="text-center max-w-lg mx-auto">
+        <p class="text-8xl md:text-9xl font-extrabold bg-gradient-to-r from-primary to-primary/50 bg-clip-text text-transparent mb-6">
+          404
+        </p>
+        <h1 class="text-2xl md:text-3xl font-bold text-[--text] mb-3">
+          Page Not Found
+        </h1>
+        <p class="text-lg text-[--text-secondary] mb-8">
+          This page has gone on a catnap. 😸 Maybe it's chasing a laser pointer somewhere else.
+        </p>
+        <div class="flex flex-wrap justify-center gap-4">
+          <Button href="/" variant="primary" size="lg">Go Home</Button>
+          <Button href="/blog" variant="secondary" size="lg">Browse Blog</Button>
+        </div>
+      </div>
+    </Container>
   </main>
 </BaseLayout>