DemoBuy

Public Blog

Last updated on 2026-03-22

The public blog is the reader-facing experience. Pages in the (blog) route group share a common layout with BlogHeader (navigation, search, categories, theme toggle) and BlogFooter (links, newsletter, social media). The homepage uses a standalone layout to accommodate its featured hero section.

Homepage

Route: /

The homepage features:

  • Featured hero — large featured post card with the PostHero component
  • Category tabs — filter posts by category using pill-style toggle buttons
  • Post grid — responsive 3-column grid of PostCard components with staggered fade-in animations
  • Newsletter form — email signup CTA section
  • Empty state — friendly message when no posts match the selected category
import { PostHero } from "@/components/blog/post-hero"
import { PostCard } from "@/components/blog/post-card"
import { CategoryTabs } from "@/components/blog/category-tabs"
import { NewsletterForm } from "@/components/blog/newsletter-form"

Article Detail

Route: /posts/[slug]

Individual article pages include:

  • Reading progress — fixed top bar showing scroll progress via ReadingProgress
  • Breadcrumbs — Home > Category > Post title navigation
  • Category & tag badges — clickable badges linking to category and tag pages
  • Author byline — avatar, name (linked to author page), date, and reading time
  • Featured image — full-width responsive image with 2:1 aspect ratio
  • Post body — rendered article content via PostBody
  • TOC sidebar — sticky table of contents on desktop via PostToc
  • Share buttons — social sharing links via ShareButtons
  • Author card — full author bio card with social links
  • Comments — threaded comment list using CommentCard
  • Related posts — 3-column grid of related articles
  • Prev/next navigation — links to adjacent posts via PostNavigation
import { ReadingProgress } from "@/components/blog/reading-progress"
import { PostBody } from "@/components/blog/post-body"
import { PostToc } from "@/components/blog/post-toc"
import { ShareButtons } from "@/components/blog/share-buttons"
import { AuthorCard } from "@/components/blog/author-card"
import { PostNavigation } from "@/components/blog/post-navigation"
import { CommentCard } from "@/components/blog/comment-card"

Layout Structure

The article page uses a two-column grid on desktop:

┌─────────────────────────────┬──────────┐
│ Breadcrumbs                 │          │
│ Category / Tag Badges       │          │
│ Title                       │   TOC    │
│ Author Byline               │ (sticky) │
│ Featured Image              │          │
│ Post Body                   │          │
│ Share Buttons / Tags        │          │
│ Author Card                 │          │
│ Comments                    │          │
│ Related Posts               │          │
│ Prev/Next Navigation       │          │
└─────────────────────────────┴──────────┘

Category Page

Route: /categories/[slug]

Category pages display:

  • Breadcrumbs — Home > Category name
  • Hero section — category name, description, post count badge, and optional background image with gradient overlay
  • Filtered post grid — 3-column responsive grid of posts in the selected category
  • Empty state — message when no posts exist in the category
import { PostCard } from "@/components/blog/post-card"

Tag Page

Route: /tags/[slug]

Tag pages display:

  • Breadcrumbs — Home > #TagName
  • Hero section — tag name with hash icon, post count badge
  • Filtered post grid — 3-column responsive grid of posts with the selected tag
  • Empty state — message when no posts have the tag

Author Page

Route: /authors/[slug]

Author profile pages include:

  • Breadcrumbs — Home > Author name
  • Profile hero — large avatar, name, role, bio, and social links (GitHub, Twitter, LinkedIn, website) displayed as icon buttons with tooltips
  • Posts grid — 3-column grid of all posts by the author with post count badge
  • Empty state — message when the author has no published posts
import { PostCard } from "@/components/blog/post-card"

Route: /search

Full-text search with real-time filtering:

  • Search input — with search icon and keyboard shortcut hint (Cmd+K)
  • Category checkboxes — sidebar filter panel with category names and post counts
  • Real-time results — updates as you type with result count
  • Search results — rendered via SearchResults component with highlighted matches
  • Popular searches — pill buttons for common terms (React, TypeScript, Next.js, Performance, Design System, AI) shown when no query is active
import { SearchResults } from "@/components/blog/search-results"

Layout Structure

┌─────────────────────────┬──────────────────┐
│ Search Input             │                  │
│                          │ Filter by        │
│ Result Count             │ category         │
│ Search Results Grid      │ (checkboxes)     │
│                          │                  │
└─────────────────────────┴──────────────────┘

About

Route: /about

The about page includes:

  • Hero section — title, description, and background image with gradient overlay
  • Team grid — 2-column grid of AuthorCard components in full variant showing bio and social links
  • Our Story — multi-paragraph prose section about the blog's origins and mission
  • Newsletter form — email signup CTA
import { AuthorCard } from "@/components/blog/author-card"
import { NewsletterForm } from "@/components/blog/newsletter-form"

Newsletter Archive

Route: /newsletter

The newsletter page features:

  • Archive heading — title and description
  • Subscribe form — NewsletterForm component for email signup
  • Past issues — list of newsletter issues as cards, each showing title, description, recipient count badge, send date, and "Read issue" link
import { NewsletterForm } from "@/components/blog/newsletter-form"

Past issues are sourced from the newsletterIssues array in data/seed.ts and formatted with date-fns.

Previous

Project Structure

Next

Admin CMS