feat(blog): add source badges for podcast content (Office Hours, After Hours, Roo Cast)

- Add BlogSource type to types.ts
- Export BlogSource from blog index
- Add SourceBadge component to BlogPostList with colored badges
- Each podcast has distinct color: blue (Office Hours), purple (After Hours), emerald (Roo Cast)

Author: mp-roocode

apps/web-roo-code/src/components/blog/BlogPostList.tsx

@@ -4,13 +4,46 @@
  */
 
 import Link from "next/link"
-import type { BlogPost } from "@/lib/blog"
+import type { BlogPost, BlogSource } from "@/lib/blog"
 import { formatPostDatePt } from "@/lib/blog"
 
 interface BlogPostListProps {
 	posts: BlogPost[]
 }
 
+/**
+ * Source badge colors and icons
+ * Each podcast has a distinct color for visual differentiation
+ */
+const SOURCE_STYLES: Record<BlogSource, { bg: string; text: string; icon: string }> = {
+	"Office Hours": {
+		bg: "bg-blue-500/10 dark:bg-blue-400/10",
+		text: "text-blue-700 dark:text-blue-300",
+		icon: "🎙️",
+	},
+	"After Hours": {
+		bg: "bg-purple-500/10 dark:bg-purple-400/10",
+		text: "text-purple-700 dark:text-purple-300",
+		icon: "🌙",
+	},
+	"Roo Cast": {
+		bg: "bg-emerald-500/10 dark:bg-emerald-400/10",
+		text: "text-emerald-700 dark:text-emerald-300",
+		icon: "📻",
+	},
+}
+
+function SourceBadge({ source }: { source: BlogSource }) {
+	const style = SOURCE_STYLES[source]
+	return (
+		<span
+			className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${style.bg} ${style.text}`}>
+			<span aria-hidden="true">{style.icon}</span>
+			{source}
+		</span>
+	)
+}
+
 export function BlogPostList({ posts }: BlogPostListProps) {
 	if (posts.length === 0) {
 		return (
@@ -29,7 +62,10 @@ export function BlogPostList({ posts }: BlogPostListProps) {
 							{post.title}
 						</h2>
 					</Link>
-					<p className="mt-2 text-sm text-muted-foreground">{formatPostDatePt(post.publish_date)}</p>
+					<div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+						{post.source && <SourceBadge source={post.source} />}
+						<span>{formatPostDatePt(post.publish_date)}</span>
+					</div>
 					<p className="mt-3 text-muted-foreground">{post.description}</p>
 					{post.tags.length > 0 && (
 						<div className="mt-4 flex flex-wrap gap-2">

apps/web-roo-code/src/lib/blog/index.ts

@@ -4,7 +4,7 @@
  */
 
 // Types
-export type { BlogPost, BlogPostFrontmatter, NowPt } from "./types"
+export type { BlogPost, BlogPostFrontmatter, BlogSource, NowPt } from "./types"
 export type { PaginatedBlogPosts } from "./content"
 
 // Content loading

apps/web-roo-code/src/lib/blog/types.ts

@@ -3,6 +3,12 @@
  * MKT-67: Blog Content Layer
  */
 
+/**
+ * Content source for blog posts
+ * Posts derived from podcast episodes have a source; standalone articles may not
+ */
+export type BlogSource = "Office Hours" | "After Hours" | "Roo Cast"
+
 export interface BlogPostFrontmatter {
 	title: string
 	slug: string
@@ -11,6 +17,7 @@ export interface BlogPostFrontmatter {
 	status: "draft" | "published"
 	publish_date: string // YYYY-MM-DD
 	publish_time_pt: string // h:mmam/pm (e.g., "9:00am")
+	source?: BlogSource // Optional: indicates podcast source
 }
 
 export interface BlogPost extends BlogPostFrontmatter {