# CLI (/docs/cli)

## Installation

Initialize a config for CLI:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @rodrigo-work/cli
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @rodrigo-work/cli
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @rodrigo-work/cli
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @rodrigo-work/cli
    ```
  </CodeBlockTab>
</CodeBlockTabs>

You can change the output paths of components in the config.

### Components

Select and install components.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @fumadocs/cli add
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @fumadocs/cli add
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @fumadocs/cli add
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @fumadocs/cli add
    ```
  </CodeBlockTab>
</CodeBlockTabs>

You can pass component names directly.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @fumadocs/cli add banner files
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @fumadocs/cli add banner files
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @fumadocs/cli add banner files
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @fumadocs/cli add banner files
    ```
  </CodeBlockTab>
</CodeBlockTabs>

#### How the magic works?

The CLI fetches the latest version of component from the GitHub repository of Fumadocs.
When you install a component, it is guaranteed to be up-to-date.

In addition, it also transforms import paths.
Make sure to use the latest version of CLI

> This is highly inspired by Shadcn UI.

### Customise

A simple way to customise Fumadocs layouts.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @fumadocs/cli customise
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @fumadocs/cli customise
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @fumadocs/cli customise
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @fumadocs/cli customise
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Tree

Generate files tree for Fumadocs UI `Files` component, using the `tree` command from your terminal.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @fumadocs/cli tree ./my-dir ./output.tsx
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @fumadocs/cli tree ./my-dir ./output.tsx
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @fumadocs/cli tree ./my-dir ./output.tsx
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @fumadocs/cli tree ./my-dir ./output.tsx
    ```
  </CodeBlockTab>
</CodeBlockTabs>

You can output MDX files too:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @fumadocs/cli tree ./my-dir ./output.mdx
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @fumadocs/cli tree ./my-dir ./output.mdx
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @fumadocs/cli tree ./my-dir ./output.mdx
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @fumadocs/cli tree ./my-dir ./output.mdx
    ```
  </CodeBlockTab>
</CodeBlockTabs>

See help for further details:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @fumadocs/cli tree -h
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @fumadocs/cli tree -h
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @fumadocs/cli tree -h
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @fumadocs/cli tree -h
    ```
  </CodeBlockTab>
</CodeBlockTabs>

#### Example Output

```tsx title="output.tsx"
import { File, Folder, Files } from 'fumadocs-ui/components/files';

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);
```


# Hello World (/docs)

Welcome to the docs! You can start writing documents in `/content/docs`.

## What is Next?

<Cards>
  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />

  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
</Cards>


# Root Provider (/docs/root-provider)

# Fumadocs Framework: Root Provider

URL: /docs/ui/layouts/root-provider
Source: [https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/(ui)/layouts/root-provider.mdx](https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/\(ui\)/layouts/root-provider.mdx)

The context provider of Fumadocs UI.

The context provider of all the components, including `next-themes` and context
for search dialog. It should be located at the root layout.

## Usage

<CodeBlockTabs defaultValue="Next.js">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Next.js">
      Next.js
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Others">
      Others
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Next.js">
    ```jsx
    import { RootProvider } from 'fumadocs-ui/provider';

    export default function Layout({ children }) {
      return (
        <html lang="en">
          <body>
            <RootProvider>{children}</RootProvider>
          </body>
        </html>
      );
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Others">
    ```jsx
    import { RootProvider } from 'fumadocs-ui/provider/base';

    export default function Layout({ children }) {
      return (
        <html lang="en">
          <body>
            <RootProvider>{children}</RootProvider>
          </body>
        </html>
      );
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Search Dialog

Customize or disable the search dialog with `search` option.

```jsx
<RootProvider
  search={{
    enabled: false,
  }}
>
  {children}
</RootProvider>
```

Learn more from [Search](/docs/ui/search).

### Theme Provider

Fumadocs supports light/dark modes with [`next-themes`](https://github.com/pacocoursey/next-themes).
Customise or disable it with `theme` option.

```jsx
<RootProvider
  theme={{
    enabled: false,
  }}
>
  {children}
</RootProvider>
```


# Components (/docs/test)

## Code Block

```js
console.log('Hello World');
```

## Cards

<Cards>
  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />

  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
</Cards>


# Overview (/docs/openapi)



# Transactional Emails (/docs/packages/email)

Utilizamos o serviço [Resend](https://resend.com/) para envio de **e-mails transacionais**.
Os templates, localizados no pacote `@repo/email`, são construídos com [React Email](https://react.email/):
uma coleção de componentes de alta qualidade (e sem estilo) para criação de e-mails com **React** e **TypeScript**.

## Instalação

Para instalar o pacote `@repo/email`, execute o seguinte comando:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @rodrigo-work/cli add --name packages/email
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @rodrigo-work/cli add --name packages/email
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @rodrigo-work/cli add --name packages/email
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @rodrigo-work/cli add --name packages/email
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Envio de E-mails

Para enviar um e-mail, você pode usar o objeto `resend`, importado do pacote `@repo/email`:

```tsx
import { resend } from '@repo/email';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  text: 'The email text',
});''
```

## Templates de E-mail

O pacote `email` é separado da pasta da aplicação principal por dois motivos:

1. Permite importar os templates no app de `email`, possibilitando a **pré-visualização na interface (UI)**.
2. Permite importar tanto os templates quanto o SDK em outras aplicações para **uso direto no envio de e-mails**.

O Resend funciona perfeitamente com o React Email. Veja um exemplo de envio usando um template React:

```tsx title="apps/web/app/contact/actions/contact.tsx"
import { resend } from '@repo/email';
import { ContactTemplate } from '@repo/email/templates/contact';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  react: <ContactTemplate name={name} email={email} message={message} />,
});
```

## Pré-visualização de E-mails

Para visualizar os templates, basta executar o app [`email`](/apps/email).

```tsx title="apps/web/app/contact/actions/contact.tsx"
import { resend } from '@repo/email';
import { ContactTemplate } from '@repo/email/templates/contact';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  react: <ContactTemplate name={name} email={email} message={message} />,
});
```

A aplicação exibirá os templates renderizados no navegador, facilitando ajustes de layout e conteúdo antes do envio.


# Bundle Analysis (/docs/packages/next-config/bundle-analysis)

O **[rodrigo-work](https://github.com/rodrigo-work/rodrigo-work)** usa o pacote [@vercel/next-bundle-analyzer](https://github.com/vercel/next-bundle-analyzer)
para analisar e otimizar o tamanho do bundle da sua aplicação.
Cada aplicação possui um arquivo `next.config.ts` configurado para usar o analisador quando a variável de ambiente `ANALYZE` estiver definida como `true`.

## Como usar

Para executar o analisador, basta rodar o seguinte comando a partir da raiz do projeto:

```sh title="Terminal"
pnpm analyze
```

O **Turborepo** executará automaticamente o analisador para cada aplicação quando esse comando for executado.

Assim que o analisador de bundles terminar, ele **abrirá automaticamente três arquivos HTML** no seu navegador padrão:

* **client** – mostra os pacotes carregados no cliente (navegador)
* **nodejs** – mostra os pacotes carregados no lado do servidor (Node.js)
* **edge** – mostra os pacotes usados no ambiente edge (Edge Functions)

Cada arquivo exibe um **treemap interativo**, que ajuda a visualizar o tamanho e o impacto dos módulos carregados em cada ambiente.


# Configuration (/docs/packages/next-config/configuration)

O pacote `next-config` é responsável por configurar o aplicativo Next.js e está localizado no diretório `packages/next-config`.

## Imagens

Este pacote configura a otimização de imagens do Next.js com suporte aos formatos **AVIF** e **WebP**.
Também define padrões remotos que permitem o carregamento seguro de imagens do **Clerk** (como fotos de perfil de usuários).

## Prisma

Para builds no lado do servidor, o pacote inclui o **plugin do Prisma**, que garante o funcionamento correto do Prisma em uma estrutura monorepo com Next.js.

## Rewrites (Reescritas de rota)

O pacote define reescritas de URL para integração com o **PostHog**:

| Rota local              | Destino                                           |
| ----------------------- | ------------------------------------------------- |
| `/ingest/static/:path*` | Redireciona para os assets estáticos do PostHog   |
| `/ingest/:path*`        | Redireciona para o endpoint principal de ingestão |
| `/ingest/decide`        | Redireciona para o endpoint de feature flags      |

Além disso, a opção `skipTrailingSlashRedirect` é ativada para garantir o suporte adequado a requisições da API do PostHog com ou sem barra no final da URL.

## OpenTelemetry

Para evitar *warnings* relacionados à instrumentação do **OpenTelemetry**, o pacote configura o Webpack para **ignorar avisos** vindos dos pacotes `@opentelemetry/instrumentation`.

A configuração pode ser envolvida com a função `withAnalyzer()` para habilitar a análise de bundle, permitindo inspecionar e otimizar o tamanho final da aplicação.


# Next.js Config (/docs/packages/next-config)

Este pacote faz parte do monorepo **[rodrigo-work](https://github.com/rodrigo-work/rodrigo-work)** e
fornece configurações padrão para projetos **Next.js**. O objetivo principal deste pacote é simplificar e padronizar
a configuração de projetos Next.js, facilitando o processo de integração e ajudando a manter boas práticas em termos de
desempenho, segurança e escalabilidade.

## Instalação

Para instalar o pacote `@repo/next-config`, execute o seguinte comando:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @rodrigo-work/cli add --name packages/next-config
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @rodrigo-work/cli add --name packages/next-config
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @rodrigo-work/cli add --name packages/next-config
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @rodrigo-work/cli add --name packages/next-config
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Debugging (/docs/packages/observability/debugging)

next-forge has pre-configured [VSCode](https://code.visualstudio.com/) to work as a debugger. The `.vscode/launch.json` file contains the configuration for the debugger and is configured to work for all the apps in the monorepo.

To use the debugger, simply open the app in VSCode (or any VSCode-compatible editor) and go to the Debug panel (Ctrl+Shift+D on Windows/Linux, ⇧+⌘+D on macOS). Select a launch configuration, then press `F5` or select `Debug: Start Debugging` from the Command Palette to start your debugging session.

## 🐞 Debugging

### Como o `next-forge` está configurado para depuração

O `next-forge` vem com o **VSCode pré-configurado como depurador**.
O arquivo `.vscode/launch.json` contém as configurações necessárias e está preparado para funcionar com **todas as aplicações do monorepo**.

***

### ▶️ Como usar o depurador

1. **Abra a aplicação no VSCode** (ou em qualquer editor compatível com o VSCode).
2. Acesse o painel de **Depuração**:
   * **Windows/Linux**: `Ctrl + Shift + D`
   * **macOS**: `⇧ + ⌘ + D`
3. Selecione uma configuração de execução no menu suspenso.
4. Pressione `F5` ou execute o comando **"Debug: Start Debugging"** pela Paleta de Comandos (`Ctrl + Shift + P`) para iniciar a sessão de depuração.

***

Essa configuração facilita o processo de desenvolvimento e debugging em ambientes locais, oferecendo uma integração pronta entre o código e o depurador do editor.


# Observability (/docs/packages/observability)

Este pacote faz parte do monorepo **[rodrigo-work](https://github.com/rodrigo-work/rodrigo-work)** e oferece soluções
de **observabilidade** para aplicações. O objetivo principal deste pacote é fornecer ferramentas para monitoramento, coleta
de métricas, logs e rastreamento distribuído, facilitando o diagnóstico e a melhoria do desempenho das aplicações.

## Instalação

Para instalar o pacote `@repo/observability`, execute o seguinte comando:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @rodrigo-work/cli --name packages/observability
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @rodrigo-work/cli --name packages/observability
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @rodrigo-work/cli --name packages/observability
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @rodrigo-work/cli --name packages/observability
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Logging (/docs/packages/observability/logging)

The logging functionality is abstracted through a simple wrapper that provides a consistent logging interface across environments.

## How it works

In development, logs are output to the console for easy debugging. In production, logs are sent to BetterStack Logs where they can be searched, filtered, and analyzed.

## Usage

To use this logging setup, simply import and use the `log` object. It shares the same interface as the `console` object, so you can replace `console` with `log` in your codebase.

```tsx title="page.tsx"
import { log } from '@repo/observability/log';

log.info('Hello, world!');
```

## 🪵 Logging

### Como o `next-forge` está configurado para logging

A funcionalidade de logging é abstraída por um *wrapper* simples que fornece uma **interface de log consistente entre ambientes** (desenvolvimento e produção).

***

### ⚙️ Como funciona

* **Em desenvolvimento**: os logs são exibidos no console para facilitar o debug.
* **Em produção**: os logs são enviados para o **BetterStack Logs**, onde podem ser **pesquisados, filtrados e analisados**.

***

### 🧪 Como usar

Para utilizar esse sistema de logging, basta importar o objeto `log`.

A interface do `log` é idêntica à do objeto `console`, então você pode **substituir `console` por `log`** diretamente no seu código.

#### Exemplo:

```tsx
// page.tsx

import { log } from '@repo/observability/log';

log.info('Hello, world!');
```


# Uptime Monitoring (/docs/packages/observability/uptime)

A funcionalidade de monitoramento de uptime é configurada através do painel da **[BetterStack](https://betterstack.com/)**.

## Configurando o monitoramento

Ao criar seu projeto, recomendo adicionar algumas URLs específicas para monitoramento. Supondo que estamos usando `example.com` e seus subdomínios, aqui está o que você deve adicionar:

1. `example.com` - site principal (web), deve estar online se a página inicial retornar uma resposta de sucesso.
2. `app.example.com` - aplicação (app), deve estar online se a página inicial retornar uma resposta de sucesso.
3. `api.example.com/health` - API, deve estar online se a rota `/health` retornar uma resposta de sucesso. Esse é um endpoint stub que é executado no runtime Edge, portanto é muito rápido.

## Uso na interface (UI)

Esse pacote disponibiliza um componente chamado **`<Status />`**, exportado de `@repo/observability`, que exibe o status atual da aplicação.
Você pode ver um exemplo de uso desse componente no **[rodapé do site](https://rodrigo.work)**.

O componente pode exibir **três estados diferentes** com base nos monitores configurados:

| Estado                   | Condição                                    |
| ------------------------ | ------------------------------------------- |
| **All systems normal**   | 100% dos sistemas de uptime estão online    |
| **Partial outage**       | Pelo menos um sistema está reportando queda |
| **Degraded performance** | 0% dos sistemas estão online                |

Essa funcionalidade depende das seguintes variáveis de ambiente:

* `BETTERSTACK_API_KEY` - Chave de API para acessar os dados do **[BetterStack](https://betterstack.com/docs/uptime/start/)**.
* `BETTERSTACK_URL` - [https://betterstack.com/docs/uptime/api/list-all-existing-status-pages/](https://betterstack.com/docs/uptime/api/list-all-existing-status-pages/)


# SEO (/docs/packages/seo)

Este pacote faz parte do monorepo **[rodrigo-work](https://github.com/rodrigo-work/rodrigo-work)** e oferece soluções
para otimização de mecanismos de busca (SEO) em aplicações.
O pacote fornece ferramentas para facilitar a integração de boas práticas de SEO, como configuração de meta tags,
estruturação de dados, e geração de sitemaps, visando melhorar a visibilidade do seu site nos motores de busca.

## Instalação

Para instalar o pacote `@repo/seo`, execute o seguinte comando:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @rodrigo-work/cli add --name packages/seo
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @rodrigo-work/cli add --name packages/seo
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @rodrigo-work/cli add --name packages/seo
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @rodrigo-work/cli add --name packages/seo
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# JSON-LD (/docs/packages/seo/json-ld)

## Default Configuration

next-forge has a dedicated JSON+LD helper designed to create fully validated Google structured data, making your content more likely to be featured in Google Search results.

By default, structured data is implemented on the following pages:

* `Blog` for the blog index
* `BlogPosting` for the blog post pages

## Usage

Our `@repo/seo` package provides a JSON+LD helper built on `schema-dts`, allowing for structured data generation in a type-safe way. You can declare your own JSON+LD implementations like so:

```tsx title="page.tsx"
import { JsonLd } from '@repo/seo/json-ld';
import type { WithContext, YourInterface } from '@repo/seo/json-ld';

const jsonLd: WithContext<YourInterface> = {
  // ...
};

return <JsonLd code={jsonLd} />;
```


# Metadata (/docs/packages/seo/metadata)

next-forge relies on Next.js's built-in [Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) API to handle most of our SEO needs. Specifically, the `@repo/seo` package provides a `createMetadata` function that you can use to generate metadata for your pages. For example:

```tsx title="page.tsx"
import { createMetadata } from '@repo/seo/metadata';

export const metadata = createMetadata({
  title: 'My Page',
  description: 'My page description',
});
```

While this looks similar to just exporting a `metadata` object from your page, the `createMetadata` function deep merges your metadata with our default metadata, allowing you to customize only the metadata that you need to. It's also much easier to specify a cover photo for the page, for example:

```tsx title="page.tsx {6}"
import { createMetadata } from '@repo/seo/metadata';

export const metadata = createMetadata({
  title: 'My Page',
  description: 'My page description',
  image: '/my-page-image.png',
});
```


# Sitemap (/docs/packages/seo/sitemap)

next-forge automatically generates the sitemap for the website using Next.js's built-in sitemap generation functionality (`sitemap.ts`). The generation process scans different directories in the project and creates sitemap entries for various types of content:

## Page Collection

The system first scans the `app` directory to collect all page routes:

1. Reads all directories in the `app` folder
2. Filters out:
   * Directories starting with underscore (`_`) which are typically internal/private routes
   * Directories starting with parentheses (`(`)  which are usually Next.js route groups
3. Uses the remaining directory names as valid page routes

## Content Collection

The system then scans two content directories:

### Blog Posts

* Reads all files in the `content/blog` directory
* Filters out:
  * Directory entries (only wants files)
  * Files starting with underscore
  * Files starting with parentheses
* Removes the `.mdx` extension from filenames

### Legal Pages

* Similarly scans the `content/legal` directory
* Applies the same filtering rules as blog posts
* Removes `.mdx` extensions

## Sitemap Generation

The final sitemap is generated by combining all these routes:

1. Adds the base URL as the root entry
2. Adds all page routes prefixed with the base URL
3. Adds all blog posts under the `blog/` path
4. Adds all legal pages under the `legal/` path

Each sitemap entry includes:

* A full URL (combining the base URL with the route)
* A `lastModified` timestamp (set to the current date)

The sitemap is automatically regenerated during each build, ensuring it stays up to date with your content.