## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Quick Start

This guide creates a project with a landing page at `/` and a small documentation site at `/docs/`.

## 1. Create the landing page generator

Create `pages/pages.js` to render `content/index.md` with the `vara-landing` template:

```js
export default function({ data, files, parse }) {
  const md = parse.markdown(files.readFile("content/index.md"));

  return [
    {
      permalink: "/",
      template: "vara-landing",
      title: md.frontmatter.title || data.site.title,
      description: md.frontmatter.description || data.site.description,
      content: parse.renderComponents(md.html),
    },
  ];
}
```

## 2. Write the landing page

Create `content/index.md` and compose it with Vara components:

```md
---
title: "My Project"
description: "A short description of the project."
---

<vara-hero
  title="Welcome to my project"
  description="A clear sentence about what this project does and who it is for."
  primary_label="Get started"
  primary_href="/docs/"
  secondary_label="View on GitHub"
  secondary_href="https://github.com/example/project"
/>
```

## 3. Create the documentation generator

Create `pages/docs.js` to turn every Markdown file under `content/docs/` into a page using the `vara-docs` template:

```js
export default function({ files, parse }) {
  return files.listFiles("content/docs/**/*.md").map((path) => {
    const page = parse.markdown(files.readFile(path));

    return {
      permalink: files.toPermalink(path, { stripPrefix: "content/" }),
      template: "vara-docs",
      title: page.frontmatter.title || "Untitled",
      description: page.frontmatter.description || "",
      weight: Number(page.frontmatter.weight) || 999999,
      icon: page.frontmatter.icon || "",
      content: parse.renderComponents(page.html),
    };
  });
}
```

This generator is intentionally short. The theme's reference generator goes further: it skips pages with `draft: true` in their frontmatter and passes `disable_search` through so a page can opt out of the index. See [Page generators](../fundamentals/page-generators/) for the full set of fields a docs page can carry.

## 4. Add a documentation page

Create `content/docs/getting-started/hello.md`:

```md
---
title: "Hello"
weight: 1
---

# Hello

This is my first documentation page.
```

Add an index page at `content/docs/index.md` if you want a landing page for the section:

```md
---
title: "Documentation"
weight: 0
---

# Documentation

The documentation for my project lives here.
```

## 5. Configure the site

Add a `data/site.yaml`:

```yaml
title: "My Project"
description: "A short description of the project."
site_url: "https://example.com"
```

## 6. Run it

```sh
veta dev
```

Visit `/` for the landing page and `/docs/getting-started/hello/` for the documentation page.

## Next steps

- Learn how documentation pages are organized in [Page generators](../fundamentals/page-generators/).
- Customize the sidebar, search, and branding in [Site settings](../fundamentals/site-settings/).
- Browse the [components](../components/) to enrich your content.