Writing Content - Demo Docs

Lyvo Docs utilizes Astro’s built-in Content Collections to manage your documentation. This provides type-safe frontmatter, automatic routing, and excellent performance.

Frontmatter

Every .mdx file inside the src/content/docs directory requires a simple frontmatter block at the very top. This metadata drives the layout, SEO, and sidebar ordering.

---
title: My Page Title
description: A short summary of what this page covers.
order: 3
icon: rocket
badge: New
---

Property	Type	Description
`title`	`string`	Required. The main title of the page, displayed at the top and in the sidebar.
`description`	`string`	Optional. A brief subtitle displayed below the title and used for the meta `<meta name="description">` tag.
`order`	`number`	Optional. Sort order within the folder. Lower numbers come first. Only used by the auto-generated sidebar.
`icon`	`string`	Optional. Lucide icon name like `rocket`, or an SVG file in `src/assets`, shown in the sidebar.
`badge`	`string`	Optional. Short label next to the sidebar entry, like `New` or `Beta`.

Folders & Routing

The URL and Sidebar placement of your documentation page is determined directly by the file’s path.

src/content/docs
- introduction.mdx
- components
  - callout.mdx
  - tabs.mdx

introduction.mdx becomes /docs/introduction and appears at the root of your Sidebar.
components/callout.mdx becomes /docs/components/callout and appears grouped under a “Components” category dropdown in the Sidebar.

Folders are ordered by the lowest order of their pages. For full control, list the pages yourself with the docs.sidebar option (see Configuration).

Using MDX Components

All of the custom components provided by Lyvo Docs (like <Callout>, <Steps>, <FileTree>, <Tabs>) are automatically injected into your MDX scope.

You do not need to manually import them at the top of your markdown files. You can just start using them immediately!

The Table of Contents (TOC) on the right side of the page is completely automatic.

It captures ## (H2) and ### (H3) headings.
It dynamically tracks your scroll position and perfectly masks the active section as you read.
To exclude a section from the TOC, simply use a smaller heading like #### (H4) instead.