Author
Person page component displaying person information, bio, and their content (blog posts, guides, and live streams).
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
author | Person | Yes | - | Person object from Contentstack |
blogposts | Blogpost[] | Yes | - | Array of blog posts by this person |
guides | Guide[] | Yes | - | Array of guides by this person |
liveStreams | LiveStream[] | Yes | - | Array of live streams by this person |
path | string | Yes | - | 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
- Breadcrumb - Sticky navigation breadcrumb
- Person Header - Avatar, name, job title, description, and bio
- Blog Posts - Grid of blog posts (4 columns)
- Guides - Grid of guides (4 columns)
- 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
DefaultCardcomponent 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 postsgetGuidesByAuthor(authorUid)- Fetches guidesgetLiveStreamsByAuthor(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
datefallback tocreated_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) andjob(string) fields - If
biois not available, falls back tometadata.descriptionfor description