Greptile Summary

This PR is a comprehensive visual redesign of the Sim blog (/studio) — introducing a persistent two-column sidebar layout, redesigned post cards with category badges, a three-column article detail page (TOC + article + author sidebar), and dynamic per-post OG image generation via a new /studio/og route.

Key concerns identified:

• Sidebar active state is never wired up (layout.tsx line 49): StudioSidebar is rendered without its activeTag prop, and Next.js layouts do not receive searchParams, so category highlights in the sidebar will never reflect the current filter.
• Unhandled font-load errors in OG route (og/route.tsx lines 44–47): The fs.readFile calls for font assets are not inside a try-catch; a missing font file will produce an unhandled 500 error for all OG image requests.
• Non-functional search input (sidebar.tsx lines 32–43): The search field renders and focuses but has no onChange, state, or search logic — it is purely decorative and may confuse users.
• Tag filter URL semantics changed (page.tsx line 22): ?tag= now expects category IDs (e.g. announcements) rather than raw tag strings (e.g. Announcement). Existing bookmarks or sitemap entries using old tag URLs will silently show all posts instead of the expected results.
• Untracked setTimeout handles (animated-blocks.tsx lines 53–79): Timers created inside startCycle are not tracked for cleanup, so they continue firing after unmount; a minor performance concern.

Confidence Score: 3/5

• Merging is safe for the visual redesign, but two functional regressions (sidebar active state, OG font error handling) should be fixed before this ships to production.
• The overall design work is solid and the new components are well-structured. However, the sidebar active-state feature is completely non-functional due to how Next.js layouts work (a logic issue, not a style one), and the OG image route will crash with 500 errors if the font files are missing. The tag URL schema change also silently breaks any existing filtered links without a migration path.
• Pay close attention to apps/sim/app/(landing)/studio/layout.tsx (sidebar wiring), apps/sim/app/(landing)/studio/og/route.tsx (font error handling), and apps/sim/app/(landing)/studio/sidebar.tsx (search input placeholder UX).

Important Files Changed

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User visits /studio] --> B[StudioLayout]
    B --> C[StudioSidebar\nserver component]
    B --> D[main - children]
    
    C --> C1[getAllPostMeta]
    C1 --> C2[Count posts per category\nvia getPrimaryCategory]
    C2 --> C3[Render category links\nactiveTag always undefined ⚠️]

    D --> E{Route}
    E -->|/studio| F[StudioIndex page]
    E -->|/studio/slug| G[Article page]
    E -->|/studio/og?slug=| H[OG Image route]

    F --> F1[StudioHero]
    F --> F2[FeaturedGrid\nfeatured posts]
    F --> F3[PostGrid\nregular posts]
    F2 --> F4[FeaturedLeadCard]
    F2 --> F5[PostCard]

    G --> G1[AnimatedColorBlocks\nclient animation]
    G --> G2[Article MDX content\n+ prose-studio.css]
    G --> G3[ArticleSidebar\nauthor / TOC / tags / related]
    G --> G4[ShareButtons\nclient component]

    H --> H1{slug param?}
    H1 -->|No| H2[400 Bad Request]
    H1 -->|Yes| H3[getPostBySlug]
    H3 -->|Not found| H4[404]
    H3 -->|Found| H5[Read font files\nfs.readFile ⚠️ unguarded]
    H5 --> H6[ImageResponse\n1200x630 PNG]

    G3 --> G3a[TableOfContents\nclient - IntersectionObserver]

_{Last reviewed commit: 34d3d78}