The body element on each page has a class representing the current page. The homepage has classes "page home", while a blog post might have "page blog-hello-world".

Vowel attempts to construct a logical semantic HTML structure based on the files and folders in your website.

To do this, Vowel distinguishes between evergreen pages and ephemeral pages. A page with a date property is considered ephemeral, so it is excluded from the navigation and sitemap.

Vowel will automatically create a multi-level nav, with one level for each parent folder for the current page.

Vowel will create a full side navigation that displays all evergreen pages.

Frontmatter

Reserved properties

• title: Page title

• image: Page image

• description: Page description

• date: Date published

• breadcrumb: Short identifier for the page

• toc: Optionally display a table of contents

Vowel will attempt to impute the type of each frontmatter property. Imputed types include:

• Links (Will generate a link preview)

• Images (will display the image)

• Date (will render a pretty date in a time element)

You can also use lists and objects in frontmatter.

Markdown

Vowel comes loaded with GFM (Github-flavored Markdown):

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

Along with all standard Markdown, Vowel also allows the following special elements:

Rich link previews

Paste a URL on its own line (e.g. https://example.com).

Internal link previews

Paste a relative path to a page (e.g. /about).

The link will be rendered as an article element with a class representing the linked path (e.g. page-blog-hello-world).

Page lists

A relative path to a folder with a count parameter (e.g. /blog?count=2). This will exclude the home.md file for the folder. In this example, it would return the /blog/hello-world.md file but not /blog/home.md.

The page list will order pages first by date in reverse chronology (newest to oldest) and then alphabetically (a to z).

The list will be rendered as article elements (see above) in a section element. The section element will have a class representing the folder path (e.g. folder-blog).

Headings

If your document starts with an h1 (#) and has no title property, the h1 will be used as the meta title.

If your document includes h1s after the title, all headings will be demoted one level (# to h2, ## to h3).

Description

If your document doesn't include a description, a meta description will be extracted from the text.

Notes

Highlight information with note boxes:

:::tip
Use `tip` for power-ups.
:::

:::note
Use `note` for good-to-know information.
:::

:::important
Use `important` to help guide your user down the right path.
:::

:::warning
Use `warning` to help your user avoid the wrong path.
:::

:::caution
Use `caution` to alert the user before they perform a destructive action.
:::