## 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.


# Page Generators

In Veta, pages are not discovered from Markdown. Your project declares them in JavaScript files under `pages/`. Each generator returns an array of pages, and every page names a template from the theme.

This guide shows the generators the theme itself uses, adapted so you can copy them into your project.

## The landing page

The `vara-landing` template renders `page.content` as the whole page. Read `content/index.md`, render it, and pass it along:

```js
// pages/pages.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),
    },
  ];
}
```

`parse.renderComponents` resolves Vara component tags after the Markdown is rendered, which is how `<vara-hero>` and friends end up in your content.

## The documentation pages

The `vara-docs` template is used for every page under the docs root. The generator reads the Markdown, extracts a few frontmatter fields, and passes the rendered content:

```js
// pages/docs.js
export default function({ files, parse }) {
  return files.listFiles("content/docs/**/*.md")
    .filter((path) => !parse.markdown(files.readFile(path)).frontmatter.draft)
    .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),
        disable_search: page.frontmatter.disable_search === true,
      };
    });
}
```

### Fields the theme reads

| Field            | Used for                                                         |
| ---------------- | ---------------------------------------------------------------- |
| `template`       | The template to render.                                          |
| `permalink`      | The page's route.                                                |
| `title`          | Document title, sidebar label, breadcrumb, and pager.            |
| `description`    | The meta description and search result snippets.                 |
| `content`        | The rendered page body.                                          |
| `weight`         | Ordering in the sidebar, pager, and LLM indexes.                 |
| `icon`           | The icon shown next to the page in the sidebar.                  |
| `disable_search` | Excludes the page from the search index when `true`.             |
| `lang`           | The page language, used by the search index (`"en"` by default). |

### Frontmatter fields

For a documentation page, Vara reads these frontmatter fields:

| Field            | Purpose                                               |
| ---------------- | ----------------------------------------------------- |
| `title`          | Required. The page title.                             |
| `description`    | Optional. Shown in search results and metadata.       |
| `weight`         | Optional. Controls ordering. Lower values come first. |
| `icon`           | Optional. An icon name for the sidebar.               |
| `draft`          | Optional. Skips the page when `true`.                 |
| `disable_search` | Optional. Excludes the page from search when `true`.  |

### The raw Markdown version

Documentation pages also get a `vara-docs-raw` page at the same permalink with `index.md` appended. This is what the "View Markdown", "Copy Markdown", and "Ask AI" actions point to:

```js
pages.push({
  permalink: permalink + "index.md",
  template: "vara-docs-raw",
  title,
  description,
  weight,
  icon,
  content: pageMarkdown,
});
```

The `vara-docs-raw` template writes the original Markdown, with an optional hierarchical index prepended when `docs_llms_index` is enabled.

## The support pages

A full documentation site also needs three support routes. They require no content of their own:

```js
pages.push({
  permalink: "/docs/vara-docs-search-index.json",
  template: "vara-docs-search-index",
  sitemap: false,
});

pages.push({
  permalink: "/docs/llms.txt",
  template: "vara-docs-llms-txt",
});

pages.push({
  permalink: "/docs/llms-full.txt",
  template: "vara-docs-llms-full-txt",
});
```

If you change `docs_root_permalink` or `docs_search_index_permalink`, update these permalinks to match - the templates resolve their own output from those settings, but the routes themselves come from your generator.

## The not-found page and the sitemap

The `vara-404` template is a self-contained page. The `vara-sitemap-xml` template lists the site's HTML routes:

```js
pages.push({
  permalink: "/404.html",
  template: "vara-404",
  title: "Page not found",
  description: "The requested page could not be found.",
  sitemap: false,
  content: "",
});

pages.push({
  permalink: "/sitemap.xml",
  template: "vara-sitemap-xml",
});
```

### Sitemap behavior

HTML routes are included in the sitemap automatically. Other output formats need `sitemap: true`, and any page can opt out with `sitemap: false`. The not-found page and the search index opt out above because they are not meaningful for search engines.

## Sorting

Documentation pages are sorted by `weight`, then by title. The theme's own generator applies that ordering before building the search index and LLM outputs, so keep your generator consistent if you want the same order everywhere.