# Getting Started

Install @maas/docs, extend it from a Nuxt app and write the first page.

`@maas/docs` is a Nuxt layer for documentation sites. It brings the shell, search, color modes, the Markdown components and the Mirror tokens, so a docs app holds its content and little else.

## Installation

Add the layer and the two libraries it runs on to your docs app.

::package-install{name="@maas/docs @maas/mirror @maas/vue-equipment"}
::

`@maas/mirror` and `@maas/vue-equipment` are peer dependencies, so the app decides their versions. If the docs live in the repository of either library, read [Monorepos](/guide/monorepos) next.

## Setup

::steps

1. Extend the layer in `nuxt.config.ts`.

   ```ts [nuxt.config.ts]
   export default defineNuxtConfig({
     extends: ['@maas/docs'],
   })
   ```

2. Define the collections the layer queries in `content.config.ts`.

   ```ts [content.config.ts]
   import {
     defineContentConfig,
     defineDocsCollections,
   } from '@maas/docs/content'

   export default defineContentConfig({
     collections: defineDocsCollections(),
   })
   ```

3. Name the site in `app/app.config.ts`.

   ```ts [app/app.config.ts]
   export default defineAppConfig({
     docs: {
       title: 'Magic Timer',
       description: 'A timer that keeps time across tabs.',
       repository: 'https://github.com/magicasaservice/magic-timer',
     },
   })
   ```

::

The layer reads content with Node’s built-in SQLite, so the app needs Node 22.5 or later and no native database driver.

## Writing pages

Every Markdown file in `content/` becomes a page, and every folder becomes a section of the sidebar. Numeric prefixes order both and never reach a URL.

```
content/
├── index.md
├── 0.guide/
│   ├── 0.getting-started.md
│   └── 1.configuration.md
└── 1.components/
    └── 0.timer.md
```

A page takes its title and description from front matter. If it opens with a `# Title` instead, the heading and the paragraph under it serve as both.

```md [content/0.guide/0.getting-started.md]
---
title: Getting Started
description: Install the package and start the first timer.
---

## Installation
```

## Landing page

`content/index.md` is the landing page. It renders its front matter as a hero and has no body.

```yaml [content/index.md]
---
title: Magic Timer
description: A timer that keeps time across tabs.
hero:
  name: Magic Timer
  tagline: Time, kept
  text: A timer that keeps time across tabs and survives a reload.
  image:
    src: /images/hero.png
    alt: A brass stopwatch
    width: 1200
    height: 1200
  actions:
    - text: Get Started
      link: /guide/getting-started
      mode: solid
    - text: GitHub
      link: https://github.com/magicasaservice/magic-timer
---
```