Authoring guide

Reference for anyone writing guides. Every guide is one .mdx file — prose plus screenshots that walk through a real flow.

Screenshots

Put images under application/web/docs/public/images/ and reference them with the Screenshot component. Use frame="phone" for mobile-app captures, frame="browser" for web.

import Screenshot from '@/components/Screenshot.astro';

<Screenshot src="/images/deposit-add-money.png" alt="Tap Add money" frame="phone" />

Swap the src for a real capture under /images.

Callouts

Use Starlight’s built-in asides for notes and warnings — they pick up the brand accent automatically. Don’t hand-roll callout boxes.

注意

Handy context that isn’t part of the main flow.

警告

Something the reader must not skip.

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip">A shortcut worth knowing.</Aside>

Steps

Number a walkthrough with the built-in Steps component.

1. Open the app and tap Add money.
2. Choose a linked bank and enter an amount.
3. Confirm — the balance updates once the transfer settles.

Translations

English lives at the content root (src/content/docs/…) and is the fallback for every language — any page you haven’t translated shows the English version, so every locale is browsable from day one.

To translate a page, add a file at the same path under the locale directory. For example, the Brazilian-Portuguese version of src/content/docs/mobile/spend/send-money.md goes at:

src/content/docs/pt-br/mobile/spend/send-money.md

Keep the frontmatter (title, description) and translate those too. The navigation, search, and UI chrome are already translated by Starlight — you only translate page content. Locale codes match the language switcher (pt-br, es, fr, de, …); see the locales map in astro.config.mjs.