# Vitrine

> A Hugo theme for documentation, with examples that run on the page next to their code.

A Hugo theme for documentation, with examples that run on the page next to their code.

## Docs

- [Docs](https://vitrine.maxfettinger.com/docs/index.md): How to build documentation with Vitrine, from installing it to examples that run on the page.
- [Getting started](https://vitrine.maxfettinger.com/docs/getting-started/index.md): From an empty folder to a running docs site.
- [Installation](https://vitrine.maxfettinger.com/docs/getting-started/installation/index.md): Hugo, the theme, and the three settings Vitrine needs from your site.
- [Your first pages](https://vitrine.maxfettinger.com/docs/getting-started/first-pages/index.md): Sections become tabs, folders become the sidebar, and every page needs a title and a weight.
- [Writing](https://vitrine.maxfettinger.com/docs/writing/index.md): Pages, navigation, and what Markdown can do in Vitrine.
- [Pages and navigation](https://vitrine.maxfettinger.com/docs/writing/pages-and-navigation/index.md): The header's tabs, the sidebar, "On this page", and the links under every page.
- [Markdown](https://vitrine.maxfettinger.com/docs/writing/markdown/index.md): Headings, links, code blocks, tables and images, and what Vitrine adds to each.
- [Tabs and callouts](https://vitrine.maxfettinger.com/docs/writing/tabs-and-callouts/index.md): Two shortcodes for writing: the same thing in several variants, and a note or warning beside the text.
- [Maths](https://vitrine.maxfettinger.com/docs/writing/maths/index.md): Formulas with MathJax, on the pages that ask for it.
- [Live examples](https://vitrine.maxfettinger.com/docs/examples/index.md): Examples that run on the page, with their files shown below them exactly as they run.
- [The example shortcode](https://vitrine.maxfettinger.com/docs/examples/example-shortcode/index.md): A folder next to your page, one line in its Markdown, and the example runs.
- [Styles, scripts and imports](https://vitrine.maxfettinger.com/docs/examples/styles-and-scripts/index.md): How an example's CSS stays inside it, how its script runs, and how it imports a library by its npm name.
- [Reference](https://vitrine.maxfettinger.com/docs/reference/index.md): Every setting, front matter key and shortcode in one place.
- [Configuration](https://vitrine.maxfettinger.com/docs/reference/configuration/index.md): Every setting Vitrine reads from your hugo.toml, with its default.
- [Front matter](https://vitrine.maxfettinger.com/docs/reference/front-matter/index.md): The keys Vitrine reads at the top of a page, and the start page's own.
- [Shortcodes](https://vitrine.maxfettinger.com/docs/reference/shortcodes/index.md): The shortcodes Vitrine adds, and their options.
- [llms.txt](https://vitrine.maxfettinger.com/docs/reference/llms-txt/index.md): Your docs as plain Markdown for AI assistants, generated with every build.
- [Guides](https://vitrine.maxfettinger.com/docs/guides/index.md): Making Vitrine your own, putting the site online, and what's planned.
- [Customizing](https://vitrine.maxfettinger.com/docs/guides/customizing/index.md): Your own CSS, hooks for analytics and scripts, and your own versions of the theme's templates.
- [Deployment](https://vitrine.maxfettinger.com/docs/guides/deployment/index.md): Building the site and putting it online, with GitHub Pages as the example.
- [Roadmap](https://vitrine.maxfettinger.com/docs/guides/roadmap/index.md): What Vitrine doesn't do yet, and might, if people need it.

## Examples

- [Examples](https://vitrine.maxfettinger.com/examples/index.md): Small examples running on the page, each with exactly the files it's made of.
- [Counter](https://vitrine.maxfettinger.com/examples/counter/index.md): Markup, a scoped style and a module script: the three files an example can have.
- [Random walk](https://vitrine.maxfettinger.com/examples/random-walk/index.md): A canvas drawn by a script, in the theme's colours.
- [Photo viewer](https://vitrine.maxfettinger.com/examples/photo-viewer/index.md): A library from npm, imported by its name through the import map.
- [The dialog](https://vitrine.maxfettinger.com/examples/dialog/index.md): A part several examples share, shown once, running elsewhere.