Skip to main content
Our new developer certification is live!

Guide

Page component for rendering guide pages with content, chapter navigation, and sidebar.

Props

PropTypeRequiredDefaultDescription
guideGuideYes-Guide data from Contentstack
pathstringYes-Current page path
parentGuideGuide | nullNo-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 date when set, otherwise falls back to created_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
  • Chapter Navigation
  • 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