Skip to main content
Our new developer certification is live!

Author

Person page component displaying person information, bio, and their content (blog posts, guides, and live streams).

Props

PropTypeRequiredDefaultDescription
authorPersonYes-Person object from Contentstack
blogpostsBlogpost[]Yes-Array of blog posts by this person
guidesGuide[]Yes-Array of guides by this person
liveStreamsLiveStream[]Yes-Array of live streams by this person
pathstringYes-Current page path for breadcrumbs

Usage

import Author from '@/components/pages/Author';

<Author 
  author={personData}
  blogposts={blogposts}
  guides={guides}
  liveStreams={liveStreams}
  path="/person/john-doe"
/>

Features

  • Person header: Displays person avatar, name, job title, and description
  • Bio: Rich text bio content (if available)
  • Blog posts: Grid of blog posts by the person
  • Guides: Grid of guides by the person
  • Live streams: Grid of live streams by the person
  • Breadcrumb navigation: Sticky breadcrumb at the top
  • JSON-LD: Generates structured data for SEO
  • Empty states: Shows "No [content type] yet" when no content is available

Page Structure

  1. Breadcrumb - Sticky navigation breadcrumb
  2. Person Header - Avatar, name, job title, description, and bio
  3. Blog Posts - Grid of blog posts (4 columns)
  4. Guides - Grid of guides (4 columns)
  5. Live Streams - Grid of live streams (4 columns)

Content Sections

Each content type (blog posts, guides, live streams) is displayed in a List component with:

  • Title: Section heading ("Blog posts", "Guides", "Live Streams")
  • Grid layout: 4 columns on desktop, responsive on mobile
  • Default cards: Uses DefaultCard component for all content types
  • Empty state: Shows a message when no content is available

Data Fetching

The author page fetches content using:

  • getBlogpostsByAuthor(authorUid) - Fetches blog posts
  • getGuidesByAuthor(authorUid) - Fetches guides
  • getLiveStreamsByAuthor(authorUid) - Fetches live streams

All queries filter by author UID using $in_query, then sort by effective publish date descending (date fallback to created_at).

Route

Person pages are served at /person/[name] route.

Notes

  • All content sections use the same grid layout (4 columns)
  • Content is ordered by effective publish date (newest first, using date fallback to created_at)
  • Live stream cards automatically use YouTube thumbnails when available
  • Supports Contentstack Live Preview (CSLP) for all editable fields
  • Empty states provide helpful messaging when persons have no content
  • Person type includes optional bio (rich text) and job (string) fields
  • If bio is not available, falls back to metadata.description for description