# Writing Content

> Learn how to author and organize your documentation pages using MDX and Frontmatter.

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.

```yaml
---
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.

<FileTree>
	<Folder name="src/content/docs" defaultOpen>
		<File name="introduction.mdx" />
		<Folder name="components" defaultOpen>
			<File name="callout.mdx" />
			<File name="tabs.mdx" />
		</Folder>
	</Folder>
</FileTree>

- `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](/docs/overview/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!

## Table of Contents

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.