Guide
Page component for rendering guide pages with content, chapter navigation, and sidebar.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
guide | Guide | Yes | - | Guide data from Contentstack |
path | string | Yes | - | Current page path |
parentGuide | Guide | null | No | - | Parent guide for chapter navigation (when this guide is a chapter) |
Usage
import Guide from '@/components/pages/Guide';
<Guide guide={guideData} path="/guides/how-to-create-an-agent-skill" />Features
- Sticky breadcrumb: Breadcrumb navigation that sticks below header
- Parent guide indicator: For chapters, shows parent guide as a teal badge above title
- Date display: Published and updated dates with inline reading time (uses entry
datewhen set, otherwise falls back tocreated_at) - Title: Guide content title with configurable tag
- Content actions: Copy for LLM and View as Markdown below the title
- Authors: Author cards below the title
- Taxonomy tags: Displayed inline near the title metadata and link to subject-filtered search
- Rich content: Renders guide content using RichTextRenderer
- Dual sidebars: Left sidebar for navigation/metadata, right sidebar for content structure
- Additional items: FAQ, Notice, Related Items sections
- JSON-LD: Structured data for SEO
Sidebar Structure
Left Sidebar (when chapters exist)
- Chapter Navigation
Right Sidebar
- Table of Contents (if H2 headings exist)
Chapter Navigation
The component automatically:
- Fetches parent guide if current guide is a chapter (
chapter: true) - Shows parent guide as a teal badge above the chapter title (for chapters)
- Displays chapter navigation in left sidebar (main guide + all chapters)
- Left sidebar only appears when guide has chapters or is a chapter itself
Additional Items
Supports rendering:
- FAQ sections
- Notice sections
- Related Items (List component)
Notes
- Extracts H2 headings for table of contents
- Uses Breadcrumb component with generated breadcrumb items
- Supports CSLP for live preview editing
- Uses JsonLd component for SEO
- Fetches parent guide asynchronously when rendering a chapter
- Chapter navigation is separate from table of contents and renders independently