Refactor blog system for interactive content support (#1023)

Introduces a registry for interactive blog posts, adds gradient backgrounds for posts without images, and refactors blog listing and rendering logic to support interactive content. Removes the dedicated Mac system audio blog page in favor of registry-driven rendering. Updates BlogTemplate for improved key usage, gradient support, and code consistency. Adds Windows 11 system audio blog content and utility for generating gradients.

Author: richiemcilroy

apps/web/app/(site)/blog/[slug]/page.tsx

@@ -4,8 +4,13 @@ import type { Metadata } from "next";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
+import { BlogTemplate } from "@/components/blog/BlogTemplate";
 import { ReadyToGetStarted } from "@/components/ReadyToGetStarted";
 import { getBlogPosts } from "@/utils/blog";
+import {
+	getInteractiveBlogContent,
+	isInteractiveBlogPost,
+} from "@/utils/blog-registry";
 import { calculateReadingTime } from "@/utils/readTime";
 import { Share } from "../_components/Share";
 
@@ -67,6 +72,11 @@ export default async function PostPage({ params }: PostProps) {
 		notFound();
 	}
 
+	if (isInteractiveBlogPost(params.slug)) {
+		const interactiveContent = getInteractiveBlogContent(params.slug);
+		return <BlogTemplate content={interactiveContent} />;
+	}
+
 	const readingTime = calculateReadingTime(post.content);
 
 	return (