Skip to main content

🧩 Doc Components

Reusable React components available in every Markdown page.

These components are globally injected via the MDX swizzle at website/src/theme/MDXComponents.tsx — no import statements needed in your .md / .mdx files.

:::tip When to use them Plain Markdown is faster for 90% of content. Reach for these components when:

  • A numbered procedure has code + explanation per step → <Steps>
  • You want a terminal aesthetic for a shell snippet → <Terminal>
  • You need a cross-link grid at the end of a page → <CardGrid> / <Card>
  • You want to highlight key metrics → <StatRow> / <StatBadge> :::

🪜 <Steps> and <Step>​

Numbered sequential instructions with a connecting rail. Each <Step> can have a title and any nested content (code blocks, lists, images).

  1. 1

    Install the CLI

    Run pnpm add -g firebase-tools and verify with firebase --version.

  2. 2

    Authenticate

    Sign in with Google: firebase login. Then choose the project: firebase use acesense-prod.

  3. 3

    Deploy

    Build the website, copy website/build into functions/site, then deploy docsServer and the docs Hosting target from the repository root.

<Steps>
  <Step title="Install the CLI">
    Run `pnpm add -g firebase-tools` and verify with `firebase --version`.
  </Step>
  <Step title="Authenticate">
    Sign in with Google: `firebase login`.
  </Step>
  <Step title="Deploy">
    Follow `/architecture/deployment` to package the build with `docsServer`
    before deploying the function and Hosting rewrite.
  </Step>
</Steps>

:::info MDX note Use .mdx for pages that contain these JSX components. Keep ordinary pages as .md. :::

💻 <Terminal>​

A styled terminal wrapper for shell snippets with the classic traffic-light header. Purely cosmetic — the code inside is still a normal syntax-highlighted code block.

zsh
cd acesense-docs/website
pnpm install
pnpm build
# Then follow /architecture/deployment from the repository root.
<Terminal title="zsh">

​```bash
cd acesense-docs/website
pnpm build
# Then follow /architecture/deployment from the repository root.
​```

</Terminal>

🗂️ <CardGrid> and <Card>​

Cross-reference cards for the end of a page. Accepts to (internal link), href (external), and optional emoji / description.

💾

Data Model

Firestore collections, fields, and indexes

→
🔤

Glossary

Every domain term used in the platform

→
🔐

Security Model

Rules, secrets, allowlists, incident response

→
<CardGrid cols={3}>
  <Card
    emoji="💾"
    title="Data Model"
    description="Firestore collections, fields, and indexes"
    to="/reference/data-model"
  />
  <Card
    emoji="🔤"
    title="Glossary"
    description="Every domain term used in the platform"
    to="/reference/glossary"
  />
</CardGrid>

Supported cols values: 2, 3, 4. The grid is responsive — on mobile it collapses automatically.

📊 <StatRow> and <StatBadge>​

Compact cards for highlighting key numbers. Supports tone: default, success, info, warning, danger.

2 GB
Upload request cap
30 days
Completed-job retention
Node 22
Functions runtime
europe-west1
Functions region
<StatRow>
  <StatBadge value="2 GB" label="Upload request cap" tone="success" />
  <StatBadge value="30 days" label="Completed-job retention" tone="info" />
  <StatBadge value="Node 22" label="Functions runtime" tone="default" />
  <StatBadge value="europe-west1" label="Functions region" tone="warning" />
</StatRow>

📢 Admonitions (built-in)​

Docusaurus ships with five admonitions out of the box. Use them for callouts that don't fit in prose.

tip

:::tip — positive framing. Use for "pro tips" and recommended paths.

info

:::info — neutral context. Use for background or explanatory asides.

warning

:::warning — things that commonly trip people up.

danger

:::danger — irreversible or destructive actions.

note

:::note — a quiet side note.

Syntax:

:::tip Optional Title
Body content here.
:::

📐 Mermaid diagrams​

Also built-in. Use for flowcharts, sequence diagrams, state machines. See Contributing for syntax tips.

🎯 Next Steps​

✍️

Contributing

Style guide and conventions

→
📖

Full Reference Index

→