NewsArticle Component | Pipeline Verification

This is a live end-to-end verification article for the NewsArticle component pipeline. It confirms that NewsArticleDB correctly fetches content from the articles Supabase table and renders it via the NewsArticle display component — including hero images, author cards, tags, reaction bars, and comments.

What This Page Tests

• ✅ DB fetch — NewsArticleDB reads slug newsarticle-test from articles table
• ✅ Component render — NewsArticle displays title, subtitle, category, author, hero image, tags
• ✅ Dynamic route — export const dynamic = 'force-dynamic' ensures fresh reads
• ✅ Content HTML — dangerouslySetInnerHTML injects this body content
• ✅ SEO metadata — title, description, og:image, canonical URL all set

Component Architecture

The NewsArticle component is designed for fast-moving news: breaking stories, influencer coverage, entertainment, technology announcements, and trending topics. It features:

• Hero image with caption and photo credit
• Topic tag badge with color-coded category icons
• Breaking / Trending / Exclusive flag badges
• Author card with avatar, role, bio, and Twitter link
• Inline newsletter signup
• ReactionBar — emoji reactions synced to Supabase
• DiscordComments — embedded comment section

Pipeline Flow

1. Author writes full article in app/newsarticle/test/page.tsx using <NewsArticle> components
2. npm run wiki:migrate extracts content to Supabase articles table
3. npm run wiki:trim replaces the file with a <NewsArticleDB> stub
4. Page renders dynamically from DB on every request

Status

If you can read this page at /newsarticle/test, the pipeline is working correctly. The articles table row with slug = "newsarticle-test" exists and is being served via NewsArticleDB.