Skip to main content

Work in Progress

On this page

Every documentation page in this theme uses frontmatter to define metadata and control how the page is displayed. Here’s a complete reference of all available frontmatter options.

Required Fields 

---
title: "Page Title"
---

title

  • Type: string

The title of the page. This appears at the top of the page and in the navigation.

Optional Fields 

---
description: A brief description of the page content
tab: "docs-tab"
sidebar:
  label: Custom Label
  order: 1
  badge:
    text: Updated
    variant: note
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 3
summary:
  title: "Quick Summary"
  content: "Brief overview of the page content"
  items:
    - "Key point one"
    - "Key point two"
  variant: "info"
pagefind: true
draft: true
---

description

  • Type: string

A brief description of the page content. This is used for SEO purposes and should concisely summarize what users will find on the page.

tab

  • Type: string

The tab that the page belongs to. This is used to group pages together in the navigation for easy content organization.

Any pages not configured with a tab will be included in the “main” tab.

sidebar

  • Type: object

Controls how the page appears in the sidebar navigation.

Properties:

  • label (string, optional): Custom label for the sidebar. If not provided, the page title is used.
  • order (number, optional): Controls the order of pages within their section. Lower numbers appear first. Pages without an order value are sorted alphabetically.
  • badge (object, optional): Displays a badge next to the page title in the sidebar.
    • text (string): The text to display in the badge
    • variant ("note" | "tip" | "caution" | "danger" | "info"): The style variant of the badge

Example with badge:

sidebar:
  label: "API Guide"
  order: 2
  badge:
    text: "New"
    variant: "info"

summary

  • Type: object

Displays a summary box in the sidebar containing key information about the page. The summary only appears if this field is configured.

Properties:

  • title (string, optional): The title of the summary box. Defaults to “Summary”.
  • content (string, optional): A brief description or overview text.
  • items (string[], optional): Array of key points to display as a bulleted list.
  • variant ("default" | "info" | "tip" | "warning", optional): The visual style of the summary box. Defaults to “default”.

Example:

summary:
  title: "Key Takeaways"
  content: "This page covers the fundamentals of API authentication"
  items:
    - "Learn about API keys and tokens"
    - "Understand OAuth 2.0 flow"
    - "Implement secure authentication"
  variant: "info"

tableOfContents

  • Type: object
  • Default: { minHeadingLevel: 2, maxHeadingLevel: 3 }

Controls which headings appear in the table of contents.

Properties:

  • minHeadingLevel (number, optional): The minimum heading level to include (h1-h6). Defaults to 2.
  • maxHeadingLevel (number, optional): The maximum heading level to include (h1-h6). Defaults to 3.

pagefind

  • Type: boolean
  • Default: true

Controls whether the page content should be indexed by Pagefind for search functionality. Set to false to exclude the page from search results.

draft

  • Type: boolean
  • Default: false

When set to true, the page will not be published in production. This is useful for work-in-progress content.

Example Configuration 

---
title: My Documentation Page
description: A comprehensive guide to using our product's API
tab: "api"
sidebar:
  label: API Guide
  order: 2
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 4
pagefind: false
draft: false
---

Available MDX Components

All course pages have access to these components without needing imports:

Interactive Components

  • <Aside> - Callout boxes for important information
  • <Badge> - Small labels and status indicators
  • <Button> - Interactive buttons
  • <Tooltip>, <TooltipTrigger>, <TooltipContent> - Contextual help tooltips

Layout Components

  • <Tabs>, <TabsList>, <TabsTrigger>, <TabsContent> - Tabbed content
  • <Steps> - Numbered step-by-step instructions

Tooltip Usage Example 

You can add <Tooltip><TooltipTrigger><span class="underline decoration-dashed cursor-help">helpful explanations</span></TooltipTrigger><TooltipContent>This explains complex terms</TooltipContent></Tooltip> anywhere in your content.

See the tooltip demo pages for comprehensive examples and usage patterns.