Refactor blog system for interactive content support

[richiemcilroy]

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.

Summary by CodeRabbit

• New Features
  • Interactive blog posts now render with a dedicated experience.
  • Added a new tutorial: Record screen with system audio on Windows 11.
• Style
  • Blog list redesigned to a responsive grid with refined cards.
  • Consistent image presentation; gradient placeholders appear when posts lack images.
  • Improved readability for tables, lists, FAQs, and content sections.
• Refactor
  • Unified rendering path for interactive posts across blog pages for a smoother, more consistent experience.

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

📥 Commits

Reviewing files that changed from the base of the PR and between 0fb9be3 and 6e9fdf9.

📒 Files selected for processing (9)

• apps/web/app/(site)/blog/[slug]/page.tsx (2 hunks)
• apps/web/app/(site)/blog/record-screen-mac-system-audio/page.tsx (0 hunks)
• apps/web/components/blog/BlogTemplate.tsx (16 hunks)
• apps/web/components/pages/UpdatesPage.tsx (5 hunks)
• apps/web/content/blog-content/record-screen-mac-system-audio.tsx (1 hunks)
• apps/web/content/blog-content/windows-11-record-screen-system-audio-no-stereo-mix.tsx (1 hunks)
• apps/web/utils/blog-registry.ts (1 hunks)
• apps/web/utils/blog.ts (3 hunks)
• apps/web/utils/gradients.ts (1 hunks)

 ___________________________________________________
< What happens in code review stays in code review. >
 ---------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting in your project's settings in CodeRabbit to disable sequence diagrams in the walkthrough.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dynamic-blogs

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}