From 4241e5986276592fae09cfa2cd18e7518c630d1c Mon Sep 17 00:00:00 2001 From: Vinicius de Liz Date: Wed, 2 Oct 2024 18:40:55 -0300 Subject: [PATCH 1/5] i18n(pt-BR): update `guides/integrations-guide.mdx` file --- .../docs/pt-br/guides/integrations-guide.mdx | 203 +++++++++++++----- 1 file changed, 153 insertions(+), 50 deletions(-) diff --git a/src/content/docs/pt-br/guides/integrations-guide.mdx b/src/content/docs/pt-br/guides/integrations-guide.mdx index 8b9e3c79b15c8..afb1a77e3cd9a 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-integracoes) ou até mesmo [construir uma integração você mesmo](#criando-sua-propria-integracao). 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](#instalacao-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. Imported from an installed npm package + installedIntegration(), + // 2. Imported from a local JS file + localIntegration(), + // 3. An inline object + {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 From f44303bddc59a1ded8ec0de545084ca2e93b5286 Mon Sep 17 00:00:00 2001 From: Vinicius de Liz Date: Wed, 2 Oct 2024 18:52:10 -0300 Subject: [PATCH 2/5] i18n(pt-BR): update relative links in `guides/integrations-guide.mdx` file --- src/content/docs/pt-br/guides/integrations-guide.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/pt-br/guides/integrations-guide.mdx b/src/content/docs/pt-br/guides/integrations-guide.mdx index afb1a77e3cd9a..91d325fc2e3c3 100644 --- a/src/content/docs/pt-br/guides/integrations-guide.mdx +++ b/src/content/docs/pt-br/guides/integrations-guide.mdx @@ -8,7 +8,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components' -**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-integracoes) ou até mesmo [construir uma integração você mesmo](#criando-sua-propria-integracao). +**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-propria-integracão). Integrações podem... @@ -30,7 +30,7 @@ As seguintes integrações são mantidas pelo Astro. ## Instalação Automática de Integração -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](#instalacao-manual). +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](#instalacão-manual). 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. From 974ef68a409ffd62f37d4c8a7df49079dc1f07a2 Mon Sep 17 00:00:00 2001 From: Vinicius de Liz Date: Wed, 2 Oct 2024 18:59:43 -0300 Subject: [PATCH 3/5] i18n(pt-BR): update `guides/integrations-guide.mdx` file --- src/content/docs/pt-br/guides/integrations-guide.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/pt-br/guides/integrations-guide.mdx b/src/content/docs/pt-br/guides/integrations-guide.mdx index 91d325fc2e3c3..b2690d19e95aa 100644 --- a/src/content/docs/pt-br/guides/integrations-guide.mdx +++ b/src/content/docs/pt-br/guides/integrations-guide.mdx @@ -93,11 +93,11 @@ Existem três maneiras comuns de importar uma integração no seu projeto Astro: export default defineConfig({ integrations: [ - // 1. Imported from an installed npm package + // 1. Importado de um pacote npm instalado installedIntegration(), - // 2. Imported from a local JS file + // 2. Importado de um arquivo JS local localIntegration(), - // 3. An inline object + // 3. Um objeto em linha {name: 'namespace:id', hooks: { /* ... */ }}, ] }); From 401dde9b5ddbf5495ab34840f4cb17875726ba2f Mon Sep 17 00:00:00 2001 From: Vinicius de Liz Date: Wed, 2 Oct 2024 19:11:23 -0300 Subject: [PATCH 4/5] i18n(pt-BR): update `guides/integrations-guide.mdx` and reference link in file `reference/cli-reference.mdx` --- src/content/docs/pt-br/guides/integrations-guide.mdx | 4 ++-- src/content/docs/pt-br/reference/cli-reference.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/pt-br/guides/integrations-guide.mdx b/src/content/docs/pt-br/guides/integrations-guide.mdx index b2690d19e95aa..b741f6eea1e23 100644 --- a/src/content/docs/pt-br/guides/integrations-guide.mdx +++ b/src/content/docs/pt-br/guides/integrations-guide.mdx @@ -8,7 +8,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components' -**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-propria-integracão). +**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-integracão). Integrações podem... @@ -30,7 +30,7 @@ As seguintes integrações são mantidas pelo Astro. ## Instalação Automática de Integração -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](#instalacão-manual). +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` 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. 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` From 6146323a9d7c1aadce5c98915a63cf7848fc8168 Mon Sep 17 00:00:00 2001 From: Vinicius de Liz Date: Wed, 2 Oct 2024 19:18:35 -0300 Subject: [PATCH 5/5] i18n(pt-BR): update relative link in `basics/integrations-guide.mdx` file --- src/content/docs/pt-br/guides/integrations-guide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/pt-br/guides/integrations-guide.mdx b/src/content/docs/pt-br/guides/integrations-guide.mdx index b741f6eea1e23..2eee605928a77 100644 --- a/src/content/docs/pt-br/guides/integrations-guide.mdx +++ b/src/content/docs/pt-br/guides/integrations-guide.mdx @@ -8,7 +8,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components' -**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-integracão). +**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...