diff --git a/src/content/docs/pt-br/guides/integrations-guide.mdx b/src/content/docs/pt-br/guides/integrations-guide.mdx
index 8b9e3c79b15c8..2eee605928a77 100644
--- a/src/content/docs/pt-br/guides/integrations-guide.mdx
+++ b/src/content/docs/pt-br/guides/integrations-guide.mdx
@@ -2,29 +2,37 @@
title: Adicione Integrações
i18nReady: true
---
+
import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components'
-
-**Integrações Astro** adicionam novas funcionalidades e comportamentos para o seu projeto com apenas algumas linhas de código. Você mesmo pode escrever uma integração customizada, usar uma integração oficial, ou usar integrações feitas pela comunidade.
+**Integrações Astro** adicionam novas funcionalidades e comportamentos em seu projeto com apenas algumas linhas de código. Você pode usar uma integração oficial, [integrações construídas pela comunidade](#encontrando-mais-integrações) ou até mesmo [construir uma integração você mesmo](#criando-sua-própria-integração).
Integrações podem...
-- Habilitar React, Vue, Svelte, Solid e outros frameworks de UI populares.
-- Integrar ferramentas como Tailwind e Partytown com algumas linhas de código.
-- Adicionar novas funcionalidades ao seu projeto, como geração de sitemap automático.
-- Escrever código customizado que é executado no processo de build, no servidor de desenvolvimento e mais.
+- Habilitar React, Vue, Svelte, Solid e outros frameworks de UI populares com um [renderer](/pt-br/guides/framework-components/).
+- Habilitar processamento sob demanda com um [adaptador SSR](/pt-br/guides/server-side-rendering/).
+- Integrar ferramentas como Tailwind e Partytown com poucas linhas de código.
+- Adicionar novas funcionalidades ao seu projeto, como geração automática de sitemap.
+- Escrever código personalizado que se integra ao processo de build, ao servidor de desenvolvimento e mais.
+
+:::tip[Diretório de integrações]
+Navegue ou pesquise por toda a série de centenas de integrações oficiais e da comunidade em nosso [diretório de integrações](https://astro.build/integrations/). Encontre pacotes para adicionar autenticação, métricas, desempenho, SEO, acessibilidade, UI, ferramentas de desenvolvedor e mais ao seu projeto Astro.
+:::
## Integrações Oficiais
+As seguintes integrações são mantidas pelo Astro.
+
-## Instalação Automática de Integrações
+## Instalação Automática de Integração
-Astro inclui o comando `astro add` para automatizar a instalação de integrações.
+Astro inclui o comando `astro add` para automatizar a instalação de integrações oficiais. Diversos plugins da comunidade podem ser adicionados usando esse comando. Por favor confira a documentação de cada integração para ver se há suporte para `astro add`, ou se você precisa [instalar manualmente](#instalação-manual).
-Execute o comando `astro add` utilizando o gerenciador de pacotes de sua escolha para que nosso assistente automático de integrações atualize seu arquivo de configuração e instale quaisquer dependências necessárias.
+Execute o comando `astro add` usando o gerenciador de pacotes de sua escolha e nosso assistente automático de integração atualizará seu arquivo de configuração e instalará quaisquer dependências necessárias.
@@ -44,7 +52,7 @@ Execute o comando `astro add` utilizando o gerenciador de pacotes de sua escolha
-É até mesmo possível adicionar múltiplas integrações ao mesmo tempo!
+É possível até mesmo adicionar múltiplas integrações de uma vez só!
@@ -64,61 +72,156 @@ Execute o comando `astro add` utilizando o gerenciador de pacotes de sua escolha
-:::note[Lidando com Dependências de Integrações]
-Se você encontrar quaisquer avisos como `Cannot find package '[nome-do-pacote]'` após adicionar uma integração, seu gerenciador de pacotes pode não ter instalado as [dependências de pares](https://nodejs.org/en/blog/npm/peer-dependencies/) para você. Para instalar esses pacotes faltando, execute `npm install [nome-do-pacote]`.
+:::note[Manipulando dependências de integração]
+Se você encontrar quaisquer avisos como `Cannot find package '[nome-do-pacote]'` após adicionar uma integração, seu gerenciador de pacotes pode não ter instalado as [dependências de pares](https://nodejs.org/en/blog/npm/peer-dependencies/) para você. Para instalar esses pacotes ausentes, execute `npm install [nome-do-pacote]`.
:::
-## Usando Integrações
-
-Integrações Astro são sempre adicionadas através da propriedade `integrations` no seu arquivo `astro.config.mjs`.
-
-Há três formas comuns de importar uma integração em seu projeto Astro:
-1. Instalando uma integração como um pacote npm.
-2. Importando sua própria integração de um arquivo local dentro do seu projeto.
-3. Escrevendo sua própria integração diretamente no seu arquivo de configuração.
-
-```js
-// astro.config.mjs
-import {defineConfig} from 'astro/config';
-import integracaoInstalada from '@astrojs/vue';
-import integracaoLocal from './minha-integracao';
-
-export default defineConfig({
- integrations: [
- // 1. Importado de um pacote npm
- integracaoInstalada(),
- // 2. Importado de um arquivo JS local
- integracaoLocal(),
- // 3. Um objeto inserido diretamente
- {name: 'namespace:id', hooks: { /* ... */ }},
- ]
-})
-```
-
-Veja a [API de Integrações](/pt-br/reference/integrations-reference/) para aprender sobre todas as diferentes formas em que você pode escrever uma integração.
-
-### Opções Customizadas
-
-Integrações são quase sempre escritas como funções de fábrica que retornam um objeto da integração. Isso te permite passar argumentos e opções para a função de fábrica que customiza a integração do seu projeto.
+### Instalação Manual
+
+Integrações Astro são sempre adicionadas pela propriedade `integrations` do seu arquivo `astro.config.mjs`.
+
+Existem três maneiras comuns de importar uma integração no seu projeto Astro:
+1. [Instale uma integração com pacote npm](#instalando-um-pacote-npm).
+2. Importe sua própria integração de um arquivo local dentro do seu projeto.
+3. Escreva sua integração em linha, diretamente no seu arquivo de configuração.
+
+ ```js
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import installedIntegration from '@astrojs/vue';
+ import localIntegration from './my-integration.js';
+
+ export default defineConfig({
+ integrations: [
+ // 1. Importado de um pacote npm instalado
+ installedIntegration(),
+ // 2. Importado de um arquivo JS local
+ localIntegration(),
+ // 3. Um objeto em linha
+ {name: 'namespace:id', hooks: { /* ... */ }},
+ ]
+ });
+ ```
+
+Confira a referência da [API de Integrações](/pt-br/reference/integrations-reference/) para aprender sobre todas as maneiras diferentes que você pode escrever uma integração.
+
+#### Instalando um pacote NPM
+
+Instale uma integração de pacote NPM usando um gerenciador de pacotes, e então atualize manualmente o `astro.config.mjs`.
+
+Por exemplo, para instalar a integração `@astrojs/sitemap`:
+
+
+1. Instale a integração nas dependências do seu projeto usando o seu gerenciador de pacote preferido:
+
+
+
+ ```shell
+ npm install @astrojs/sitemap
+ ```
+
+
+ ```shell
+ pnpm add @astrojs/sitemap
+ ```
+
+
+ ```shell
+ yarn add @astrojs/sitemap
+ ```
+
+
+
+2. Importe a integração para seu arquivo `astro.config.mjs`, e adicione-a ao seu array `integrations[]`, junto de quaisquer opções de configuração:
+
+ ```js title="astro.config.mjs" ins={2} ins="sitemap()"
+ import { defineConfig } from 'astro/config';
+ import sitemap from '@astrojs/sitemap';
+
+ export default defineConfig({
+ // ...
+ integrations: [sitemap()],
+ // ...
+ });
+ ```
+
+ Observe que integrações diferentes podem ter diferentes definições de configuração. Leia a documentação de cada integração, e aplique quaisquer opções de configurações necessárias para a integração escolhida em `astro.config.mjs`
+
+
+### Opções Personalizadas
+
+Integrações são quase sempre escritas como funções factory que retornam o próprio objeto de integração. Isso permite que você passe argumentos e opções para a função factory que personaliza a integração do seu projeto.
```js
integrations: [
- // Exemplo: Customize sua integração com os argumentos da função
+ // Exemplo: Personalize sua integração com argumentos de função
sitemap({filter: true})
]
```
-### Ligando/Desligando uma Integração
+### Alterne uma Integração
-Integrações com valores `falsy` são ignoradas, então você pode alternar integrações entre ligado e desligado sem se preocupar com `undefined` e valores booleanos deixados para trás.
+Integrações com valor falso são ignoradas, então você pode alternar a ativação de integrações sem precisar se preocupar com valores booleanos e `undefined` esquecidos.
```js
integrations: [
- // Exemplo: Pula a build do sitemap no Windows
+ // Exemplo: Pule construir um sitemap no Windows
process.platform !== 'win32' && sitemap()
]
```
+## Atualizando Integrações
+
+Para atualizar todas as integrações oficiais de uma vez só, execute o comando `@astrojs/upgrade`. Isso atualizará o Astro e todas as integrações oficiais para as últimas versões.
+
+### Atualizando Automaticamente
+
+
+
+ ```shell
+ # Atualize Astro e as integrações oficiais para as mais recentes
+ npx @astrojs/upgrade
+ ```
+
+
+ ```shell
+ # Atualize Astro e as integrações oficiais para as mais recentes
+ pnpm dlx @astrojs/upgrade
+ ```
+
+
+ ```shell
+ # Atualize Astro e as integrações oficiais para as mais recentes
+ yarn dlx @astrojs/upgrade
+ ```
+
+
+
+### Atualizando Manualmente
+
+Para atualizar uma ou mais integrações manualmente, use o comando apropriado em seu gerenciador de pacote.
+
+
+
+ ```shell
+ # Exemplo: atualiza integrações React e Tailwind
+ npm install @astrojs/react@latest @astrojs/tailwind@latest
+ ```
+
+
+ ```shell
+ # Exemplo: atualiza integrações React e Tailwind
+ pnpm add @astrojs/react@latest @astrojs/tailwind@latest
+ ```
+
+
+ ```shell
+ # Exemplo: atualiza integrações React e Tailwind
+ yarn add @astrojs/react@latest @astrojs/tailwind@latest
+ ```
+
+
+
## Removendo uma Integração
Para remover uma integração, primeiro desinstale a integração do seu projeto
@@ -146,7 +249,7 @@ Depois, remova a integração do seu arquivo `astro.config.*`:
```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config'
-import react from "@astrojs/react";
+import react from '@astrojs/react';
export default defineConfig({
integrations: [
@@ -157,7 +260,7 @@ export default defineConfig({
## Encontrando Mais Integrações
-Você pode encontrar várias integrações desenvolvidas pela comunidade no [Diretório de Integrações Astro](https://astro.build/integrations/). Siga seus links para instruções mais detalhadas de utilização e configuração.
+Você pode encontrar várias integrações desenvolvidas pela comunidade no [Diretório de Integrações Astro](https://astro.build/integrations/). Siga os links para instruções detalhadas de uso e configuração.
## Criando sua Própria Integração
diff --git a/src/content/docs/pt-br/reference/cli-reference.mdx b/src/content/docs/pt-br/reference/cli-reference.mdx
index 43a2b7156d1ca..2d171dd065d8b 100644
--- a/src/content/docs/pt-br/reference/cli-reference.mdx
+++ b/src/content/docs/pt-br/reference/cli-reference.mdx
@@ -242,7 +242,7 @@ Gera tipos do TypeScript para todos os módulos do Astro. Ele configura um [arqu
## `astro add`
-Adiciona uma integração a sua configuração. Leia mais no [guia de integrações](/pt-br/guides/integrations-guide/#instalação-automática-de-integrações).
+Adiciona uma integração a sua configuração. Leia mais no [guia de integrações](/pt-br/guides/integrations-guide/#instalação-automática-de-integração).
## `astro docs`