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


# Functions and Filters

Vara ships a set of template helpers under the `vara_` prefix. Most of them do internal plumbing - building the sidebar, pagination, search index, and similar - and you never need to touch them.

This page covers the small set that is genuinely useful when you write your own components or templates.

Functions are called like any Pongo function, and filters are applied with a pipe:

```text
{{ vara_icon("rocket", "size-5") }}
{{ repo.stars|vara_compact_number }}
```

## Functions

### `vara_icon`

Renders one of the bundled SVG icons by name. Pass optional utility classes for size and color:

```text
{{ vara_icon("check", "size-4 text-success")|safe }}
```

Icon names come from the theme's icon set - the same names the `<vara-icon>` component accepts. Browse them in the [icon explorer](/icons/).

Missing names render a visible warning glyph instead of failing the build.

### `vara_absolute_url`

Resolves a path against your `site_url` and returns an absolute URL. Useful for social metadata or generated output that needs a full link:

```text
{{ vara_absolute_url(page.permalink) }}
```

Absolute HTTP URLs pass through unchanged. When `site_url` is missing or invalid, the result falls back to a root-relative path.

### `vara_github_repo`

Fetches public metadata for an `owner/name` repository at build time: stars, forks, and the latest release tag. It is what powers the GitHub button in the docs header, and it works the same way in your own components:

```text
{% set repo = vara_github_repo("varavelio/veta") %}
{% if repo.ok %}
  {{ repo.stars|vara_compact_number }} stars
{% endif %}
```

The result is cached per repository during a build, so you can call it in several places without extra requests. Failed lookups return a safe empty result rather than breaking the build.

## Filters

### `vara_trim`

Trims leading and trailing whitespace, treating empty values as empty strings. Ideal for optional-value conditionals in components:

```text
{% if props.description|vara_trim %}
  <p>{{ props.description }}</p>
{% endif %}
```

### `vara_compact_number`

Formats a number compactly - `12400` becomes `12.4k`, and `2100000` becomes `2.1M`. Non-finite input becomes `0`. Handy for stats, repository counts, or any metric with large values:

```text
{{ repo.stars|vara_compact_number }}
```

## What is not covered here

Everything else under theme's `functions/` and `filters/` directories is theme plumbing: sidebar navigation, pagination, search indexing, sitemap generation, and the like. The theme keeps those stable, but they exist to serve its own templates. If a helper is not listed on this page, treat it as internal and prefer the public API above in your own code.