feat: Implement author pages and SEO JSON-LD, refactoring blog post page for server-side metadata and content

[codeunia-dev]

🚀 Summary

This PR introduces Author pages and enhances SEO by adding JSON-LD structured data, along with a refactor of the blog post page to move metadata and content handling to the server side.

✨ What’s Included

• 👤 New Author pages to showcase author profiles and their posts
• 🔍 Added SEO JSON-LD for better search engine understanding and rich results
• 🧠 Refactored blog post page to:
  • Generate metadata on the server
  • Improve SEO, performance, and consistency
• 🧹 Cleaner separation of concerns between content, metadata, and rendering

🧪 How to Test

1. Open any blog post and verify metadata (title, description, OG tags)
2. Check page source / SEO tools for valid JSON-LD structured data
3. Navigate to an Author page and confirm author details and posts render correctly
4. Ensure no regressions in existing blog routes

📌 Notes

• No breaking changes
• SEO-focused improvements with better server-side rendering
• Sets a strong foundation for future blog and author enhancements

Authored by: @akshay0611

Summary by CodeRabbit

• New Features
  • Author profile pages displaying author details and all published articles in a responsive grid
  • Like button on blog posts with real-time like count updates
  • View counter tracking on blog posts with real-time updates
  • Author profile cards showing name, role, bio, and social links
  • Enhanced SEO metadata generation for blog posts and author pages

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
codeunia	Building	Preview, Comment	Jan 2, 2026 1:05pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The changes introduce a server-rendered blog post page with SEO metadata generation, add an author profile page with blog post listing, create components for displaying author information and blog post content with real-time like and view counters, add JSON-LD schema generation for SEO, and establish a typed author configuration module.

Changes

Cohort / File(s)	Summary
Blog Post Page Refactoring app/blog/[slug]/page.tsx	Migrated from client-side to server-side rendering; added generateMetadata function for dynamic SEO metadata fetching via Supabase; converted page component to async function accepting params prop with slug.
New Author Page & Components app/blog/author/[slug]/page.tsx, components/blog/author-box.tsx	Created author profile page with dynamic metadata, author details display, and filtered blog post grid with category badges and read-time indicators; introduced reusable AuthorBox component for author profile cards with social links.
Blog Post Content Engine components/blog/blog-post-content.tsx	New component with real-time features: like/unlike with optimistic UI, per-user authentication checks, Supabase real-time view counter subscription, localStorage-based view deduplication, conditional content preview for unauthenticated users, and About Author section integration.
SEO & Configuration components/seo/json-ld.tsx, config/authors.ts	Added PersonJsonLd component for Person schema JSON-LD serialization; created typed Author interface and authors configuration mapping for structured author metadata.

Sequence Diagrams

sequenceDiagram
    participant User
    participant Client as Client (Browser)
    participant Page as BlogPostContent
    participant API as API Endpoints
    participant DB as Supabase DB
    participant RTC as Supabase Realtime

    User->>Client: Load blog post (slug)
    
    rect rgb(200, 220, 255)
    Note over Client: Initialization Phase
    Client->>Page: Mount with slug
    Page->>DB: Fetch post data
    DB-->>Page: Post content, author, tags
    Page->>API: GET /api/blog/{slug}/like
    API-->>Page: likeCount, likedByUser
    end
    
    rect rgb(220, 240, 220)
    Note over Client: View Tracking
    alt Not in localStorage
        Page->>API: POST /api/blog/{slug}/views
        API-->>Page: Updated view count
        Page->>Client: Store slug in localStorage
    end
    end
    
    rect rgb(240, 240, 220)
    Note over Client: Real-time Updates
    Page->>RTC: Subscribe to blogs-views channel
    RTC-->>Page: View count changes (background)
    Page-->>Client: Update view counter UI
    end
    
    rect rgb(255, 220, 220)
    Note over Client: User Interaction - Like/Unlike
    alt Authenticated & Not Loading
        User->>Client: Click like/unlike button
        Client->>Page: Optimistic state update
        Page-->>Client: Immediate UI refresh
        par Async Request
            Page->>API: POST/DELETE /api/blog/{slug}/like
            API-->>Page: Sync response
            Page->>Client: Confirm or revert state
        end
    else Not Authenticated
        User->>Client: Click like button
        Client-->>User: Show login prompt
    end
    end
    
    Page-->>Client: Render post with all data
    Client-->>User: Display blog post

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Replace simple loading spinner with a detailed skeleton UI for blog post pages #391 — Modifies app/blog/[slug]/page.tsx loading UI (spinner to skeleton), overlapping the same page file being refactored here for server-side rendering.

Poem

🐰 A rabbit hops through metadata fine,
Real-time likes and views align,
Authors now have profiles bright,
JSON-LD schemas, SEO's delight!
Server-side rendering, oh what a sight! ✨

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ec66b98 and 527cf77.

📒 Files selected for processing (6)

• app/blog/[slug]/page.tsx
• app/blog/author/[slug]/page.tsx
• components/blog/author-box.tsx
• components/blog/blog-post-content.tsx
• components/seo/json-ld.tsx
• config/authors.ts

---

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.}