-
- {rows.map((post) => (
-
- {post.title} - ))} -
{rows[0].title}
-``` - -## Recursos Turso -- [Documentação Turso](https://docs.turso.tech) -- [Turso no GitHub](https://github.com/tursodatabase) -- [Usando Turso para servir o conteúdo de um blog Astro renderizado no lado do servidor](https://blog.turso.tech/using-turso-to-serve-a-server-side-rendered-astro-blogs-content-58caa6188bd5) diff --git a/src/content/docs/pt-br/guides/client-side-scripts.mdx b/src/content/docs/pt-br/guides/client-side-scripts.mdx deleted file mode 100644 index 48d59f10feab4..0000000000000 --- a/src/content/docs/pt-br/guides/client-side-scripts.mdx +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Scripts e Manipulação de Eventos -description: >- - Como adicionar interatividade no lado do cliente aos componentes do Astro - usando APIs JavaScript nativas do navegador. -i18nReady: true ---- -import ReadMore from '~/components/ReadMore.astro' - -Você pode adicionar interatividade em seus componentes Astro sem [utilizar um framework de UI](/pt-br/guides/framework-components/) como React, Svelte, Vue, etc. usando tags ` -``` - -Por padrão, o Astro processa e agrupa tags ` -``` - -### Processamento do Script - -Por padrão, tags ` -``` - -O atributo `type="module"` faz com que o navegador trate o script como um módulo JavaScript. Isso traz vários benefícios de desempenho: -- A renderização não é bloqueada. O navegador continua a processar o restante do HTML enquanto o script do módulo e suas dependências são carregados. -- O navegador aguarda o processamento do HTML antes de executar scripts de módulo. Você não precisa escutar o evento "load". -- Os atributos `async` e `defer` são desnecessários. Os scripts de módulo são sempre adiados. - -:::note -O atributo `async` é valioso para scripts normais, pois impede que eles bloqueiem a renderização. No entanto, os scripts de módulo já possuem esse comportamento. Adicionar `async` a um script de módulo fará com que ele seja executado antes que a página tenha carregado completamente. Isso provavelmente não é o que você deseja. -::: - -### Optando por não processar - -Para evitar fazer o bundle do script, você pode adicionar a diretiva `is:inline`. - -```astro title="src/components/ScriptInline.astro" "is:inline" - -``` - -:::note -Astro não processara suas tags de script em algumas situações. Especialmente, ao adicionar `type="module"` ou qualquer outro atributo diferente de `src` a uma tag ` - - - -``` - -#### Carregando scripts externos - -**Quando utilizar isto:** Se o seu arquivo JavaScript está dentro de `public/` ou em uma CDN. - -Para carregar scripts fora do diretório `src/` do seu projeto, inclua a diretiva `is:inline`. Esta abordagem pula o processamento, bundling e otimizações do JavaScript que são providenciadas pelo Astro quando você importa scripts como descrito acima. - -```astro title="src/components/ScriptsExternos.astro" "is:inline" - - - - - -``` - -## Padrões de script comuns - -### Manipulando `onclick` e outros eventos - -Alguns frameworks de UI utilizam uma sintaxe customizada para manipular eventos como `onClick={...}` (React/Preact) ou `@click="..."` (Vue). Astro segue mais fielmente o HTML padrão e não utiliza uma sintaxe customizada para eventos. - -No lugar, você pode utilizar [`addEventListener`](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener) em uma tag ` -``` - -:::note -Se você tem múltiplos componentes `{postagem.title}
-Astro + WordPress 🚀
-{ - posts.map((post) => ( - - - )) -} -``` - -A WordPress REST API inclui [parâmetros globais](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/) como `_fields` e `_embed`. - -Uma grande quantidade de dados está disponível para você através dessa API, então você pode querer obter apenas alguns campos. Você pode restringir a sua resposta ao adicionar o parâmetro [`_fields`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_fields) na URL da API, por exemplo: `[SEU-SITE]/wp/v2/posts?_fields=author,id,excerpt,title,link` - -A API também pode retornar conteúdo relacionado ao seu post, como um link para o post acima, ou para os comentários do post. Você pode adicionar o parâmetro [`_embed`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_embed) na URL da API, (e.g. `[SEU-SITE]/wp/v2/posts?_embed`) para indicar ao servidor que a resposta deve incluir estes recursos embutidos. - -## Construindo um blog com WordPress e Astro - -Este exemplo obtém dados da API pública do WordPress [https://norian.studio/dinosaurs/](https://norian.studio/dinosaurs/). Este site WordPress armazena informação sobre dinossauros individualmente sob a rota `dinos`, assim como um blog armazenaria seus posts individuais sob a rota `posts`. - -Este exemplo mostra como reproduzir esta estrutura de site no Astro: uma página índice que lista os dinossauros com links para páginas de dinossauros individuais geradas dinamicamente. - -:::note -Para usar [Custom Post Types (CPT)](https://learn.wordpress.org/lesson-plan/custom-post-types/) na sua API WordPress (não apenas `post` e `page`), você precisará [configurá-las em seu painel WordPress](https://stackoverflow.com/questions/48536646/how-can-i-get-data-from-custom-post-type-using-wp-rest-api) ou [adicionar suporte REST API para Custom Content Types](https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-rest-api-support-for-custom-content-types/) no WordPress. - -Este exemplo obtém dados de um site WordPress cujo qual tipos de conteúdo já foram configurados e expostos para a API REST. -::: - -### Mostrando uma lista de posts WordPress - -A página `src/pages/index.astro` lista cada dinossaurp, com uma descrição e link para uma página própria. - -Lista de Dinossauros
- { - posts.map((post) => ( -{postagemBlog.data.titulo}
-Autor: {autor.data.nome}
- - - -Você também pode gostar:
-{postagensRelacionadas.map(p => ( - {p.data.titulo} -))} -``` - -### Filtrando consultas de coleção - -`getCollection()` recebe um callback opcional "filter" que permite que você filtre sua consulta baseado em um `id` ou propriedades do `data` (frontmatter) da entrada. Para coleções `type: 'content'`, você também pode filtrar baseado no `slug`. - -:::note -A propriedade `slug` é específica para coleções de conteúdo e não vai estar disponível ao filtrar coleções de JSON ou YAML. -::: - -Você pode usar isso para filtrar por qualquer critério de conteúdo que você quiser. Por exemplo, você pode filtrar por propriedades como `draft` para evitar que quaisquer postagens do blog em rascunho sejam publicadas para seu blog: - -```js -// Exemplo: Filtrar entradas de conteúdo com `draft: true` -import { getCollection } from 'astro:content'; -const entradasPublicadasBlog = await getCollection('blog', ({ data }) => { - return data.draft !== true; -}); -``` - -Você também pode criar páginas de rascunho que são disponibilizadas ao executar o servidor de desenvolvimento, mas não são construídas em produção: - -```js -// Exemplo: Filtrar entradas de conteúdo com `draft: true` apenas ao fazer build para produção -import { getCollection } from 'astro:content'; -const entradasBlog = await getCollection('blog', ({ data }) => { - return import.meta.env.PROD ? data.draft !== true : true; -}); -``` - -O argumento de filtragem também suporta filtragem por pastas aninhadas dentro de uma coleção. Já que o `id` inclui o caminho aninhado completo, você pode filtrar pelo começo de cada `id` para retornar somente itens de uma pasta aninhada específica: - -```js -// Exemplo: Filtrar entradas por sub-pasta em uma coleção -import { getCollection } from 'astro:content'; -const entradasDocsIngles = await getCollection('docs', ({ id }) => { - return id.startsWith('en/'); -}); -``` - -### Usando conteúdo em templates do Astro - -Uma vez que você tenha consultado suas entradas de coleção, você pode acessar cada entrada diretamente do template do seu componente Astro. Isso permite que você renderize HTML para coisas como links para seu conteúdo (usando o `slug` do conteúdo) ou informação sobre seu conteúdo (usando a propriedade `data`). - -Para informações sobre renderizando seu conteúdo para HTML, veja [Renderizando Conteúdo para HTML](/pt-br/guides/content-collections/#renderizando-conteúdo-para-html) abaixo. - -```astro ---- -// src/pages/index.astro -import { getCollection } from 'astro:content'; -const entradasBlog = await getCollection('blog'); ---- --
- {entradasBlog.map(entradaPostagemBlog => (
-
- - {entradaPostagemBlog.data.titulo} - - - ))} -
Publicado em: {entry.data.publicado.toDateString()}
-{entrada.data.titulo}
-{postagemBlog.data.titulo} — {remarkPluginFrontmatter.tempoLeitura}
-``` - -{frontmatter.titulo}
-{frontmatter.dataPublicacao.toString().slice(0,10)}
-``` - -Para ver um exemplo de uso de `toLocaleDateString` para formatar o dia, o mês e o ano, consulte o [componente `Usuário
-{usuarioAleatorio.name.first} {usuarioAleatorio.name.last}
- - -{JSON.stringify(dados)}
;
-};
-
-export default Filmes;
-```
-
-
-### Consultas GraphQL
-
-Astro também pode utilizar `fetch()` para consultar um servidor GraphQL com qualquer consulta GraphQL válida.
-
-```astro title="src/components/Filme.astro" "await fetch"
----
-const resposta = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
- {
- method: 'POST',
- headers: {'Content-Type':'application/json'},
- body: JSON.stringify({
- query: `
- query getFilm ($id:ID!) {
- film(id: $id) {
- title
- releaseDate
- }
- }
- `,
- variables: {
- id: "ZmlsbXM6MQ==",
- },
- }),
- });
-
-const json = await resposta.json();
-const { film } = json.data;
----
-Buscando informações sobre Star Wars: Uma Nova Esperança
-Título: {film.title}
-Ano: {film.releaseDate}
-``` - -## Busque de um CMS Headless - -Componentes Astro podem buscar dados de seu CMS favorito e então renderizá-lo como o conteúdo de sua página. Utilizando [rotas dinâmicas](/pt-br/guides/routing/#rotas-dinâmicas), componentes podem até mesmo gerar páginas com base no conteúdo do seu CMS. - -Veja nossos [Guias de CMS](/pt-br/guides/cms/) para mais detalhes em como integrar o Astro com CMSes headless incluindo Storyblok, Contentful e WordPress. - -## Conteúdo feitos pela comunidade - -- [Criando uma aplicação Full-Stack com Astro + GraphQL (Em Inglês)](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/) diff --git a/src/content/docs/pt-br/guides/deploy/aws.mdx b/src/content/docs/pt-br/guides/deploy/aws.mdx deleted file mode 100644 index 34e73e250a348..0000000000000 --- a/src/content/docs/pt-br/guides/deploy/aws.mdx +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Faça Deploy do seu Site Astro na AWS -description: Como fazer o deploy do seu site Astro para web usando AWS. -type: deploy -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - -[AWS](https://aws.amazon.com/) é uma plataforma de hospedagem de aplicações web completa que pode ser utilizada para fazer o deploy de um site Astro. - -Para fazer deploy do seu projeto na AWS será necessário a utilização do [console AWS](https://aws.amazon.com/console/). (A maioria dessas ações também pode ser feitas usando o [AWS CLI](https://aws.amazon.com/cli/)). Este guia irá lhe mostrar o passo a passo para fazer deploy do seu site na AWS utilizando o [AWS Amplify](https://aws.amazon.com/amplify/), [hospedagem de websites estáticos com S3](https://aws.amazon.com/s3/), e [CloudFront](https://aws.amazon.com/cloudfront/). - -## AWS Amplify - -AWS Amplify é um conjunto de ferramentas e funcionalidades especialmente concebidas para que programadores front-end web e mobile construam aplicações completas na AWS de forma rápida e fácil. - -1. Crie um novo projeto na Amplify Hosting. -2. Conecte seu repositório ao Amplify. -3. Modifique suas configurações de build para corresponder ao processo de build de seu projeto. - -Use componentes React diretamente no Astro!
-
-
-```
-
-:::caution
-Apenas componentes **Astro** (`.astro`) podem conter componentes de múltiplos frameworks.
-:::
-
-## Passando Props Para Componentes de Frameworks
-
-Você pode passar props de componentes Astro para componentes de frameworks:
-
-```astro title="src/pages/props-frameworks.astro"
----
-import ListaDeFazeres from '../components/ListaDeFazeres.jsx';
-import Contador from '../components/Contador.svelte';
----
-
-
-```
-
-:::caution[passando funções como props]
-Você pode passar uma função como prop para um componente de framework, mas ela apenas funciona durante renderização no servidor. Se você tentar utilizar a função em um componente hidratado (por exemplo, como um event handler), um erro irá ocorrer.
-
-Isso acontece pois funções não podem ser _serializadas_ (transferidas do servidor para o cliente) pelo Astro.
-:::
-
-## Passando Filhos para Componentes de Frameworks
-
-Dentro de um componente Astro, você **pode** passar filhos para componentes de frameworks. Cada framework tem seus próprios padrões para como se referenciar a esses filhos: React, Preact, e Solid usam todos uma prop especial chamada `children`, enquanto Svelte e Vue usam o elemento `Aqui está uma barra lateral com algum texto e um botão.
-Menu
-Aqui está uma barra lateral com algum texto e um botão.
- -Aqui está uma barra lateral com algum texto e um botão.
-
-
-` ( ou em outro elemento ) para que você possa então estilizá-lo.
-
-A especificidade de estilos com escopo é preservada, os permitindo funcionar de forma consistente com outros arquivos ou bibliotecas CSS enquanto ainda se preserva os limites exclusivos que previnem que estilos sejam aplicados fora do componente.
-
-### Estilos Globais
-
-Ao mesmo tempo que nós recomendamos estilos com escopo para a maioria dos componentes, você pode eventualmente ter uma razão válida para escrever CSS global. Você pode optar por remover CSS com escopo automático adicionando o atributo `is:global` na tag `
-```
-
-Você pode também mesclar regras CSS globais e com escopo juntas na mesma tag `
-Isso será vermelho!
-```
-
-:::note[Estilos com escopo de componentes pais]
-Devido a presença do atributo `data-astro-cid-*`, que inclui o filho no escopo do pai, é possível que os estilos se propaguem do pai para o filho. Para evitar efeitos colaterais indesejados, certifique-se de usar nomes de classe exclusivos no componente filho.
-:::
-
-### Estilos em linha
-
-Você pode estilizar elementos HTML em linha usando o atributo `style`. Isso pode ser uma string CSS ou um objeto de propriedades CSS:
-
-```astro title="src/pages/index.astro"
-// Estes são equivalentes:
-Astro
-
-
-
-
-
- ```shell
- npx astro add tailwind
- ```
-
-
- ```shell
- pnpm astro add tailwind
- ```
-
-
- ```shell
- yarn astro add tailwind
- ```
-
-
-
-📚 Veja o [Guia de Integrações](/pt-br/guides/integrations-guide/) para instruções sobre instalação, importação, e configuração destas integrações.
-
-
-## Pré-processadores CSS
-
-Astro suporta pré-processadores tais como [Sass][sass], [Stylus][stylus], e [Less][less] através de [Vite][vite-preprocessors].
-
-### Sass e SCSS
-
-```shell
-npm install sass
-```
-
-Use `
-```
-
-Veja a [documentação do Vite](https://vite.dev/guide/assets.html#importing-asset-as-string) para detalhes completos.
-### Importação de CSS com `?url`
-
-Para casos de uso avançado, você pode importar uma referência URL direta para um arquivo CSS dentro de seu projeto no diretório `src/`. Isto pode ser útil quando você necessita de controle completo sobre como um arquivo é incluído na página. Entretanto, isto vai prevenir a otimização desse arquivo CSS com o resto do CSS da sua página.
-
-Isto não é recomendável para a maioria dos usuários. Em vez disso, coloque os arquivos CSS dentro de `public/` para conseguir uma referência URL consistente.
-
-:::caution
-Importar um arquivo CSS menor com `?url` talvez retorne o conteúdo dos arquivos CSS codificado em base64 como uma URL de dados, mas somente em sua build final. Sendo assim, você pode escrever seu código com suporte para URLs codificadas (`data:text/css;base64,...`) ou configurar a opção [`vite.build.assetsInlineLimit`](https://vite.dev/config/#build-assetsinlinelimit) para `0` para desabilitar esta funcionalidade.
-:::
-
-```astro title="src/components/UrlEstilosBrutos.astro" "?url"
----
-// Exemplo avançado! Não recomendável para a maioria dos usuários.
-import urlEstilos from '../estilos/principal.css?url';
----
-
-
-```
-
-Veja a [documentação do Vite](https://vite.dev/guide/assets.html#importing-asset-as-url) para detalhes completos.
-
-
-[less]: https://lesscss.org/
-[sass]: https://sass-lang.com/
-[stylus]: https://stylus-lang.com/
-[svelte-style]: https://svelte.dev/docs#component-format-style
-[tailwind]: /pt-br/guides/integrations-guide/tailwind/
-[vite-preprocessors]: https://vite.dev/guide/features.html#css-pre-processors
-[vue-css-modules]: https://vue-loader.vuejs.org/guide/css-modules.html
-[vue-scoped]: https://vue-loader.vuejs.org/guide/scoped-css.html
diff --git a/src/content/docs/pt-br/guides/testing.mdx b/src/content/docs/pt-br/guides/testing.mdx
deleted file mode 100644
index 65b7c73aa41c8..0000000000000
--- a/src/content/docs/pt-br/guides/testing.mdx
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: Testes
-description: Uma introdução para testes no Astro
-i18nReady: true
----
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-
-Fazer testes o ajuda a escrever e manter código Astro em funcionamento. O Astro suporta muitas ferramentas populares para testes de unidade, testes de componente e testes de ponta a ponta (e2e), incluindo Jest, Mocha, Jasmine, [Cypress](https://cypress.io) e [Playwright](https://playwright.dev). Você pode até mesmo instalar bibliotecas de testes específicos de frameworks como a React Testing Library, para testar seus componentes de frameworks de UI.
-
-Frameworks de testes permitem que você declare **afirmações** ou **expectativas** sobre como seu código deve se comportar em situações específicas e, em seguida, as compare com o comportamento real do seu código atual.
-
-## Vitest
-
-Vitest é um framework de testes de unidade nativo do Vite com suporte a ESM, TypeScript e JSX fornecido pelo esbuild.
-
-Use o auxiliar `getViteConfig()` do Astro no seu arquivo de configuração [`vitest.config.ts`](https://vitest.dev/config/) para configurar o Vitest com as configurações do seu projeto Astro.
-
-```js
-// vitest.config.ts
-import { getViteConfig } from 'astro/config';
-
-export default getViteConfig({
- test: {
- // opções de configuração do Vitest
- },
-});
-```
-
-Veja o [template inicial de Astro + Vitest](https://github.com/withastro/astro/tree/latest/examples/with-vitest) no GitHub.
-
-## Cypress
-
-Cypress é uma ferramenta de testes front-end construído para a web moderna. Cypress permite você escrever testes de ponta a ponta para o seu site em Astro.
-
-### Instalação
-
-Você pode instalar Cypress usando o gerenciador de pacotes da sua escolha.
-
-
-
- ```shell
- npm install -D cypress
- ```
-
- Isso vai instalar Cypress localmente como uma dependências de desenvolvimento para seu projeto.
-
-
- ```shell
- pnpm add cypress --save-dev
- ```
-
-
- ```shell
- yarn add cypress --dev
- ```
-
-
-
-### Configuração
-
-Na raiz do seu projeto, crie um arquivo `cypress.config.js` com o seguinte conteúdo:
-
-```js title="cypress.config.js"
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
- e2e: {
- supportFile: false
- }
-})
-```
-
-### Crie seu primeiro teste do Cypress
-
-1. Escolha uma página para testar. Este exemplo vai testar a página de exemplo `index.astro` abaixo.
-
- ```html title="src/pages/index.astro"
- ---
- ---
-
-
- Astro e incrível!
-
-
-
-
-
- ```shell
- npm init playwright@latest
- ```
-
-
- ```shell
- pnpm dlx create-playwright
- ```
-
-
- ```shell
- yarn create playwright
- ```
-
-
-
-### Crie seu primeiro teste com Playwright
-
-1. Escolha uma página para testar. Este exemplo vai testar a página de exemplo `index.astro` abaixo.
-
- ```html title="src/pages/index.astro"
- ---
- ---
-
-
- Astro é incrível!
-
-
-
-
- ```
-
-1. Crie uma nova pasta e adicione o seguinte arquivo de teste em `src/test`. Copie e cole o seguinte teste no arquivo para verificar se os metadados da página estão corretos. Atualize o valor do `` da página para corresponder à página que você está testando.
-
- ```jsx title="src/test/index.spec.ts" "Astro é incrível!"
- import { test, expect } from '@playwright/test';
-
- test('metadados estão corretos', async ({ page }) => {
- await page.goto("http://localhost:4321/");
-
- await expect(page).toHaveTitle('Astro é incrível');
- });
- ```
-
- :::tip[Defina a URL base]
- Você pode definir [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) no arquivo de configuração `playwright.config.ts` para usar `page.goto("/")` ao invés de `page.goto("http://localhost:4321/")` em prol de uma URL mais conveniente.
- :::
-
-### Executando seus testes com Playwright
-
-Você pode executar um único teste ou vários de uma vez, testando em um ou em vários navegadores. Por padrão, os resultados dos seus testes serão mostrados no terminal. Como opção, você pode abrir o HTML Test Reporter para mostrar um relatório completo e filtrar os resultados dos testes.
-
-1. Para executar nosso teste do exemplo anterior usando a linha de comando, use o comando `test`. Opcionalmente, inclua o nome do arquivo para executar um único teste:
-
- ```sh
- npx playwright test index.spec.ts
- ```
-
-1. Para ver o HTML Test Report completo, abra-o usando o seguinte comando:
-
- ```sh
- npx playwright show-report
- ```
-
-:::tip
-Execute seus testes no seu código em produção para estar mais próximo ao seu site real após deploy.
-:::
-
-#### Avançado: Iniciando um servidor web de desenvolvimento durante os testes
-
-Você também pode fazer com que o Playwright inicie seu servidor ao executar seu script de testes usando a opção de [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) no arquivo de configuração do Playwright.
-
-Aqui está um exemplo da configuração e dos comandos necessários utilizando o npm:
-
-1. Adicione um script de teste no arquivo `package.json` na raiz do projeto, como `"test:e2e": "playwright test"`.
-1. Em `playwright.config.ts`, adicione o objeto `webServer` e atualize o valor de `command` para `npm run preview`.
-
- ```js title="playwright.config.ts" ins={4-9} "npm run preview"
- import { defineConfig } from '@playwright/test';
-
- export default defineConfig({
- webServer: {
- command: 'npm run preview',
- url: 'http://localhost:4321/',
- timeout: 120 * 1000,
- reuseExistingServer: !process.env.CI,
- },
- use: {
- baseURL: 'http://localhost:4321/',
- },
- });
- ```
-
-1. Execute `npm run build`, e em seguida execute `npm run test:e2e` para rodar os testes do Playwright.
-
-Mais informações sobre o Playwright podem ser encontradas nos links abaixo:
-
-- [Getting started with Playwright](https://playwright.dev/docs/intro)
-- [Use a development server](https://playwright.dev/docs/test-webserver#configuring-a-web-server)
diff --git a/src/content/docs/pt-br/guides/troubleshooting.mdx b/src/content/docs/pt-br/guides/troubleshooting.mdx
deleted file mode 100644
index c9dc8cce16b14..0000000000000
--- a/src/content/docs/pt-br/guides/troubleshooting.mdx
+++ /dev/null
@@ -1,252 +0,0 @@
----
-title: Solucionando Problemas
-description: Precisa de ajuda? Travado em algo? Temos o que você precisa.
-i18nReady: true
----
-
-Astro providencia várias ferramentas diferentes para te ajudar a solucionar problemas e depurar o seu código.
-
-## Dicas e truques
-
-### Depuração com `console.log()`
-
-`console.log()` é um método simples, mas popular, de depurar seu código Astro. O local onde você escreve sua instrução `console.log()` determinará onde sua saída de depuração é impressa:
-
-```astro
----
-console.log('Oi! Estou no servidor. Isso vai aparecer no terminal que o Astro está executando.');
----
-
-<script>
-console.log('Oi! Estou no navegador. Isso irá aparecer no console do seu browser.');
-</script>
-```
-
-Uma instrução `console.log()` no frontmatter do Astro sempre produzirá saída no **terminal** em que a CLI do Astro está sendo executada. Isso ocorre porque o Astro é executado no servidor e nunca no navegador.
-
-O código escrito ou importado dentro de uma tag `<script>` do Astro é executado no navegador. Qualquer instrução `console.log()` ou outra saída de depuração será impressa no **console do seu navegador**.
-
-### Depuração de componentes de framework
-
-[Componentes de framework](/pt-br/guides/framework-components/) (como React e Svelte) são únicos: eles são renderizados no lado do servidor por padrão, o que significa que a saída de depuração do `console.log()` será visível no terminal. No entanto, eles também podem ser hidratados para o navegador, o que pode fazer com que os logs de depuração também apareçam no navegador.
-
-Isso pode ser útil para depurar diferenças entre a saída do SSR e os componentes hidratados no navegador.
-
-### Componente `<Debug />` do Astro
-
-Para ajudar na depuração de seus componentes Astro, o Astro fornece um componente embutido `<Debug />` que renderiza qualquer valor diretamente em seu modelo HTML de componente. Isso é útil para depuração rápida no navegador sem precisar alternar entre o terminal e o navegador.
-
-```astro {2,7}
----
-import { Debug } from 'astro:components';
-const soma = (a, b) => a + b;
----
-<!-- Exemplo: Irá aparecer {resposta: 6} no navegador -->
-<Debug resposta={soma(2, 4)} />
-```
-
-O componente de depuração suporta uma variedade de opções de sintaxe para depuração ainda mais flexível e concisa:
-
-```astro {2,7-9}
----
-import { Debug } from 'astro:components';
-const soma = (a, b) => a + b;
-const resposta = soma(2, 4);
----
-<!-- Exemplo: Todos os exemplos são equivalentes -->
-<Debug resposta={soma(2, 4)} />
-<Debug {{resposta: soma(2, 4)}} />
-<Debug {resposta} />
-```
-
-## Mensagens de Erro Comuns
-
-Aqui estão algumas mensagens de erro comuns que você pode encontrar no terminal, o que elas significam e o que fazer sobre elas. Consulte nosso [guia de referência de erros completo](/pt-br/reference/error-reference/) para uma lista completa de erros do Astro que você pode encontrar.
-
-### Cannot use import statement outside a module
-
-Em componentes Astro, tags `<script>` são movidas para o topo do escopo (hoisted) e carregadas como [módulos JS](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Modules) por padrão. Se você incluiu a [diretiva `is:inline`](/pt-br/reference/directives-reference/#isinline) ou qualquer outro atributo em sua tag, esse comportamento padrão é removido.
-
-**Solução**: Se você adicionou qualquer atributo a sua tag `<script>`, você também deve adicionar o atributo `type="module"` para ser capaz de usar declarações de importação.
-
-**Status**: Comportamento esperado do Astro, como pretendido.
-
-**Não tem certeza se este é o seu problema?**
-Verifique nossas issues e veja se mais alguém reportou [esse problema](https://github.com/withastro/astro/issues?q=is%3Aissue+is%3Aopen+Cannot+use+import+statement)!
-
-### `document` (or `window`) is not defined
-
-Esse erro ocorre ao tentar acessar `document` ou `window` no servidor.
-
-Componentes Astro são executados no servidor, então você não pode acessar esses objetos específicos do navegador dentro do frontmatter.
-
-Componentes de frameworks são executados no servidor por padrão, então esse erro pode ocorrer ao acessar `document` ou `window` durante a renderização.
-
-**Solução**: Determine o código que chama `document` ou `window`. Se você não estiver utilizando `document` ou `window` diretamente e ainda está recebendo esse erro, verifique para ver se algum pacote que você está importando foi feito para ser executado no cliente.
-
-- Se o código está em um componente Astro, mova-o para uma tag `<script>` fora do frontmatter. Isso diz ao Astro para executar esse código no cliente, onde `document` e `window` estão disponíveis.
-
-- Se o código está em um componente de framework, tente acessar esses objetos após renderizar usando métodos de lifecycle (e.x. [`useEffect()`](https://react.dev/reference/react/useEffect) no React, [`onMounted()`](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) no Vue e [`onMount()`](https://svelte.dev/docs#run-time-svelte-onmount) no Svelte). Você também pode prevenir o componente de ser renderizado no servidor ao adicionar a diretiva [`client:only`](/pt-br/reference/directives-reference/#clientonly).
-
-**Status**: Comportamento esperado do Astro, como pretendido.
-
-### Expected a default export
-
-Este erro pode ser lançado ao tentar importar ou renderizar um componente inválido, ou um que não está funcionando corretamente. (Esta mensagem em particular ocorre por causa da forma em que importar um componente de UI funciona no Astro.)
-
-**Solução**: Tente procurar erros em quaisquer componentes que você está importando e renderizando, e certifique-se que estão funcionando corretamente. Considere abrir um dos templates iniciais do Astro em [astro.new](https://astro.new) e tente solucionar o problema do seu componente em um projeto Astro mínimo.
-
-**Status**: Comportamento esperado do Astro, como pretendido.
-
-### Refused to execute inline script
-
-Você pode ver o seguinte erro no log do console do navegador:
-
-> Refused to execute inline script because it violates the following Content Security Policy directive: …
-
-Isso significa que a [Política de Segurança de Conteúdo](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CSP) (CSP) do seu site desativou a execução de tags `<script>` inline, que o Astro gera por padrão.
-
-**Solução:** Atualize sua CSP para incluir `script-src: 'unsafe-inline'` para permitir que scripts inline sejam executados.
-
-## Pegadinhas comuns
-
-### Meu componente não está sendo renderizado
-
-Primeiro, certifique-se de que você **importou o componente** no [script do seu componente `.astro`](/pt-br/basics/astro-components/#o-script-do-componente) ou no [arquivo `.mdx`](/pt-br/guides/markdown-content/#usando-componentes-no-mdx).
-
-Então verifique sua declaração de importação:
-
-- Estaria a sua importação vinculada ao lugar errado? (Verifique o caminho da importação.)
-
-- Sua importação tem o mesmo nome que o componente importado? (Verifique o nome do seu componente e se ele [segue a sintaxe do `.astro`](/pt-br/reference/astro-syntax/#diferenças-entre-astro-e-jsx).)
-
-- Você incluiu a extensão na importação? (Verifique se seu arquivo importado contém uma extensão. e.x. `.astro`, `.md`, `.jsx`, `.vue`, `.svelte`. Nota: Extensões de arquivo **não** são necessárias apenas para arquivos `.js(x)` e `.ts(x)`.)
-
-### Meu componente não é interativo
-
-Se o seu componente está sendo renderizado (veja acima) mas não está respondendo a interação do usuário, então você pode está esquecendo de uma [diretiva `client:*`](/pt-br/reference/directives-reference/#diretivas-de-cliente) para hidratar seu componente.
-
-Por padrão, um [componente de framework de UI não é hidratado no cliente](/pt-br/guides/framework-components/#hidratando-componentes-interativos). Se nenhuma diretiva `client:*` é providenciada, seu HTML é renderizado na página sem JavaScript.
-
-:::tip
-[Componentes Astro](/pt-br/basics/astro-components/) são componentes de templating de apenas HTML sem nenhum runtime no lado do cliente. Porém, você pode utilizar uma tag `<script>` no template do seu componente Astro para enviar JavaScript ao navegador para que seja executado no escopo global.
-:::
-
-### Cannot find package 'X'
-
-Se você encontrar um aviso `"Cannot find package 'react'"` (ou similar) ao iniciar o Astro, isso significa que você precisa instalar aquele pacote em seu projeto. Nem todos os gerenciadores de pacotes irão instalar as dependências de pares para você automaticamente. Se você estiver no Node v16+ e está utilizando npm, você não deve se preocupar com esta seção.
-
-React, por exemplo, é uma dependência de pares da integração `@astrojs/react`. Isso significa que você deve instalar os pacotes oficiais `react` e `react-dom` juntos da integração. Essa integração irá então utilizar esses pacotes automaticamente.
-
-```shell ins="react react-dom"
-# Exemplo: Instale integrações e frameworks juntos
-npm install @astrojs/react react react-dom
-```
-Veja o [guia de integrações do Astro](/pt-br/guides/integrations-guide/) para instruções em como adicionar renderers de frameworks, ferramentas de CSS e outros pacotes no Astro.
-
-### `Astro.glob()` - no matches found
-
-Quando estiver utilizando `Astro.glob` para importar arquivos, certifique-se de que você utilizou a sintaxe de glob correta que irá encontrar todos os arquivos que você precisa.
-
-#### Caminhos de arquivo
-
-Por exemplo, utilize `../components/**/*.js` em `src/pages/index.astro` para importar ambos os arquivos a seguir:
-- `src/components/MeuComponente.js`
-- `src/components/inclui/MeuOutroComponente.js`
-
-#### Valores Suportados
-
-`Astro.glob()` não suporta variáveis dinâmicas e interpolação de strings.
-
-Isto não é um bug no Astro. Isso acontece por conta de uma limitação na [função `import.meta.glob()` do Vite](https://vite.dev/guide/features.html#glob-import) que apenas suporta string literals estáticas.
-
-Uma solução comum é no lugar importar um largo conjunto de arquivos que inclui todos os arquivos que você precisa utilizando `Astro.glob()` e então os filtrar:
-
-```astro {6-7}
----
-// src/components/destaque.astro
-const { slugPostagem } = Astro.props;
-const caminhoParaPostagemDestacada = `src/pages/blog/${slugPostagem}.md`;
-
-const postagens = await Astro.glob('../pages/blog/*.md');
-const minhaPostagemDestacada = postagens.find(post => post.file.includes(caminhoParaPostagemDestacada));
----
-
-<p>
- Dê uma olhada na minha postagem favorita, <a href={minhaPostagemDestacada.url}>{minhaPostagemDestacada.frontmatter.titulo}</a>!
-</p>
-```
-
-### Utilizando Astro com Yarn 2+ (Berry)
-
-Yarn 2+, também conhecido como Berry, utiliza uma técnica chamada [Plug'n'Play (PnP)](https://yarnpkg.com/features/pnp) para armazenar e gerenciar módulos Node e que pode [causar problemas](https://github.com/withastro/astro/issues/3450) durante a inicialização de um novo projeto Astro utilizando `create astro` ou enquanto você trabalha com Astro. Uma solução para este problema é definir a [propriedade `nodeLinker`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) em `.yarnrc.yml` para `node-modules`:
-
-```yaml title=".yarnrc.yml"
-nodeLinker: "node-modules"
-```
-
-### Adicionando dependências ao Astro em um monorepo
-
-Quando trabalhando com Astro em uma configuração monorepo, as dependências do projeto devem ser adicionadas no arquivo `package.json` de cada um dos projetos.
-
-Entretanto, você pode também querer usar o Astro na raiz do monorepo (ex. [projetos Nx recomendam instalar dependências na raiz](https://github.com/nrwl/nx/issues/3023#issuecomment-630558318)). Nesse caso, adicione manualmente as dependências relacionadas ao Astro (ex. `@astrojs/vue`, `astro-component-lib`) para a parte `vite.ssr.noExternal` da configuração do Astro para garantir que essas dependências sejam apropriadamente instaladas e empacotadas:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config'
-export default defineConfig({
- vite: {
- ssr: {
- noExternal: [
- '@astrojs/vue',
- 'astro-component-lib',
- ]
- }
- }
-})
-```
-
-### Utilizando `<head>` em um componente
-
-No Astro, utilizar uma tag `<head>` funciona como qualquer outra tag HTML: ela não é movida para o topo da página ou combinada com a `<head>` existente. Por causa disso, você geralmente apenas quer incluir uma tag `<head>` pela a página. Nós recomendamos escrever aquela única `<head>` e seus conteúdos em um [componente de layout](/pt-br/basics/layouts/).
-
-### Um `<script>` ou `<style>` inesperado foi incluído
-
-Você pode notar as tags `<script>` ou `<style>` de um componente importado no seu código-fonte HTML mesmo que o componente não apareça no resultado final. Por exemplo, isso irá ocorrer com componentes [renderizados condicionalmente](/pt-br/reference/astro-syntax/#html-dinâmico) que não são mostrados.
-
-O processo de build do Astro trabalha no gráfico de módulos: assim que um componente é incluído no template, suas tags `<script>` e `<style>` são processadas, otimizadas e passam por bundle, independente de aparecer no resultado final ou não. Isso não se aplica a scripts quando a diretiva `is:inline` é aplicada.
-
-## Criando reproduções mínimas
-
-Enquanto estiver procurando a solução de problemas em seu código, pode ser útil criar uma **reprodução mínima** do problema que você possa compartilhar. Isto seria um projeto Astro menor e simplificado que demonstra seu problema. Tendo uma reprodução funcional em um novo projeto ajuda a confirmar que este é um problema repetível, e não é causado por outra coisa em seu ambiente pessoal ou projeto existente.
-
-Compartilhar uma reprodução mínima é útil quando estiver pedindo por ajuda em nossas threads de suporte e é muitas vezes obrigatória quando estiver registrando um relatório de bug para o Astro.
-
-### Crie um StackBlitz pelo [astro.new](https://astro.new)
-
-Você pode usar [astro.new](https://astro.new) para criar um novo projeto Astro em um único clique. Para reproduções mínimas, nós recomendamos fortemente começar a partir do exemplo mínimo (vazio) rodando no [StackBlitz](https://stackblitz.com), com o mínimo de código extra possível.
-
-StackBlitz vai rodar esse projeto Astro no navegador, fora do seu ambiente local. Ele também vai te fornecer um link compartilhável para que qualquer mantenedor do Astro ou membro da equipe de suporte possa ver a sua reprodução mínima fora de seus próprios ambientes locais. Isso significa que todos estão vendo exatamente o mesmo projeto, com as mesmas configurações e dependências. Isso torna fácil para alguém ajudar a resolver os problemas em seu código. Se o problema é reproduzível, isso permite que você verifique que o problema está dentro do próprio código do Astro e você pode se sentir confiante enviando um relatório de bug.
-
-Note que nem todos os problemas são reproduzíveis no StackBlitz. Por exemplo, seu problema pode ser dependente de um ambiente específico, ou gerenciador de pacotes, ou pode envolver streaming de HTML, que não é suportado no StackBlitz. Nesse caso, crie um projeto Astro mínimo (vazio) usando o CLI, reproduza o problema, e envie o projeto para um repositório do GitHub. Ao invés de compartilhar a URL do StackBlitz, forneça o link para o repositório GitHub da sua reprodução mínima.
-### Código mínimo
-
-Uma vez que seu projeto vazio esteja configurado, prossiga com os passos para reproduzir seu problema. Isso pode incluir adicionar pacotes, mudar configurações e escrever código.
-
-Você deve adicionar somente o mínimo de código necessário para reproduzir o problema. Não reproduza outros elementos do seu projeto existente, e remove todo o código que não é diretamente relacionado com o problema.
-
-### Crie uma issue
-
-Se seu problema pode ser reproduzido, então é hora de criar uma issue e registrar um relatório de bug!
-
-Vá para o repositório apropriado do Astro no GitHub e abre uma nova issue. A maioria dos repositórios possuem um modelo de issue que vai fazer perguntas ou solicitar informações para poder enviar. É importante que você siga esses modelos por que se você não providenciar as informações que nós precisamos, então teremos que pedir pra você por elas... e ninguém estará trabalhando na sua issue!
-
-Inclua o link para a sua reprodução mínima no StackBlitz (ou repositório do GitHub, se necessário). Comece com uma descrição do que era esperado em comparação com o comportamento real para fornecer contexto para a issue. Depois, inclua claramente, instruções passo a passo de como replicar o problema em um projeto Astro.
-
-## Precisa de mais?
-
-Venha e fale conosco no [Discord](https://astro.build/chat) e explique seu problema no canal `#support`. Nós estamos sempre felizes em ajudar!
-
-Visite os atuais [issues abertos no Astro](https://github.com/withastro/astro/issues/) para ver se você está enfrentando um problema conhecido ou para reportar um bug.
-
-Você também pode visitar as [Discussões de RFC](https://github.com/withastro/rfcs/discussions/) para ver se você encontrou uma limitação conhecida do Astro, e verifique para ver se existem propostas atuais relacionadas ao seu caso de uso.
diff --git a/src/content/docs/pt-br/guides/typescript.mdx b/src/content/docs/pt-br/guides/typescript.mdx
deleted file mode 100644
index 57fecf1b18c40..0000000000000
--- a/src/content/docs/pt-br/guides/typescript.mdx
+++ /dev/null
@@ -1,331 +0,0 @@
----
-title: TypeScript
-description: Aprenda como utilizar o suporte integrado a TypeScript do Astro.
-i18nReady: true
----
-import Since from '~/components/Since.astro'
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-Astro vem com suporte integrado para [TypeScript](https://www.typescriptlang.org/). Você pode importar arquivos `.ts` e `.tsx` em seu projeto Astro, escrever código TypeScript dentro de seu [componente Astro](/pt-br/basics/astro-components/#o-script-do-componente), e até mesmo utilizar um arquivo [`astro.config.ts`](/pt-br/guides/configuring-astro/#o-arquivo-de-configuração-astro) se você quiser.
-
-Usando TypeScript, você pode evitar erros em tempo de execução ao definir os formatos dos objetos e componentes no seu código. Por exemplo, se você usa TypeScript para definir o [tipo das props do seu componente](#propriedades-de-componentes), você vai receber um erro no seu editor se você definir uma prop que seu componente não aceita.
-
-Você não precisa escrever código TypeScript nos seus projetos com Astro para se beneficiar dele. O Astro sempre trata seu código do componente como TypeScript, e a [extensão para VSCode do Astro](/pt-br/editor-setup/) vai inferir o tanto quanto pode para fornecer preenchimento automático, dicas e erros no seu editor.
-
-O servidor de desenvolvimento do Astro não executará nenhuma checagem de tipos, mas você pode usar um [script separado](#checagem-de-tipos) para checar erros de tipo pela linha de comando.
-
-## Configuração
-Projetos iniciais do Astro incluem um arquivo `tsconfig.json` no seu projeto. Mesmo que você não escreva código TypeScript, esse arquivo é importante para que ferramentas como o Astro e o VS Code saibam como entender o seu projeto. Algumas funcionalidades (como importação de pacotes do npm) não são completamente suportadas em nosso editor sem um arquivo `tsconfig.json`. Se você instalar Astro manualmente, certifique-se de criar esse arquivo.
-
-### Templates TypeScript
-
-Três templates extensíveis de `tsconfig.json` são inclusos no Astro: `base`, `strict` e `strictest`. O template `base` habilita suporte para funcionalidades modernas do JavaScript e também é usado como uma base para os outros templates. Nós recomendamos usar `strict` (estrito) ou `strictest` (mais estrito) se você planeja escrever TypeScript em seu projeto. Você pode ver e comparar a configuração dos três templates em [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).
-
-Para herdar de um dos templates, utilize [a opção `extends`](https://www.typescriptlang.org/tsconfig#extends):
-
-```json title="tsconfig.json"
-{
- "extends": "astro/tsconfigs/base"
-}
-```
-
-Adicionalmente, nossos templates incluem um arquivo `env.d.ts` dentro do diretório `src` para providenciar [tipos de cliente do Vite](https://vite.dev/guide/features.html#client-types) para seu projeto:
-
-```typescript title="env.d.ts"
-/// <reference path="../.astro/types.d.ts" />
-```
-
-### Plugin TypeScript para editores
-
-O [plugin Astro TypeScript](https://www.npmjs.com/package/@astrojs/ts-plugin) pode ser instalado separadamente quando você não estiver utilizando a [extensão oficial Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Esse plugin é instalado automaticamente e configurado pela extensão VSCode, e você não precisa instalar os dois.
-
-Esse plugin executa apenas no editor. Ao executar `tsc` no terminal, arquivos `.astro` são completamente ignorados. Em vez disso, você pode usar [o comando CLI `astro check`](/pt-br/reference/cli-reference/#astro-check) para conferir ambos arquivos `.astro` e `.ts`.
-Esse plugin também suporta importar arquivos `.astro` de arquivos `.ts` (que podem ser úteis para re-exportar).
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- npm install @astrojs/ts-plugin
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- pnpm add @astrojs/ts-plugin
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- yarn add @astrojs/ts-plugin
- ```
- </Fragment>
-</PackageManagerTabs>
-
-Então, adicione o seguinte no seu `tsconfig.json`:
-
-```json title="tsconfig.json"
- "compilerOptions": {
- "plugins": [
- {
- "name": "@astrojs/ts-plugin"
- },
- ],
- }
-```
-
-Para checar que o plugin está funcionando, crie um arquivo `.ts` e importe um componente do Astro nele. Você não deve ter nenhuma mensagem de aviso do seu editor.
-
-
-### Frameworks de UI
-
-Se o seu projeto utiliza um [framework de UI](/pt-br/guides/framework-components/), configurações adicionais dependendo do framework podem ser necessárias. Por favor veja a documentação do TypeScript do seu framework para mais informações. ([Vue](https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript), [React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript))
-
-## Importações de Tipos
-
-Utilize importações e exportações explícitas de tipos sempre que possível.
-
-```js del={1} ins={2} ins="type"
-import { AlgumTipo } from './script';
-import type { AlgumTipo } from './script';
-```
-
-Dessa forma, você evita casos extremos onde o bundler do Astro pode tentar incorretamente fazer bundle do seus tipos importados como se fossem JavaScript.
-
-Você pode configurar o TypeScript para aplicar importações de tipos no seu arquivo `tsconfig.json`. Defina [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) como `true`. O TypeScript verificará suas importações e informará quando `import type` deve ser usado. Esta configuração é habilitada por padrão em todas as nossas predefinições.
-
-```json title="tsconfig.json" ins={3}
- {
- "compilerOptions": {
- "verbatimModuleSyntax": true
- }
- }
-```
-
-## Aliases de Importação
-
-Astro suporta [aliases de importação](/pt-br/guides/imports/#aliases) que você define na configuração `paths` do seu `tsconfig.json`. [Leia nosso guia](/pt-br/guides/imports/#aliases) para aprender mais.
-
-
-```astro title="src/pages/sobre/nate.astro" "@components" "@layouts"
----
-import OlaMundo from '@components/OlaMundo.astro';
-import Layout from '@layouts/Layout.astro';
----
-```
-
-```json title="tsconfig.json" {5-6}
-{
- "compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@components/*": ["src/components/*"],
- "@layouts/*": ["src/layouts/*"]
- }
- }
-}
-```
-
-## Estendendo `window` e `globalThis`
-
-Você pode querer adicionar uma propriedade para o objeto global. Você pode fazer isso adicionando declarações de nível superior usando a palavra-chave `declare` ao seu arquivo `env.d.ts`:
-
-```ts title="env.d.ts"
-declare var minhaString: string;
-declare function minhaFuncao(): boolean;
-```
-
-Isso fornecerá tipos para `globalThis.minhaString` e `globalThis.minhaFuncao`, assim como para `window.minhaString` e `window.minhaFuncao`.
-
-Note que `window` só está disponível no código no lado do cliente. O `globalThis` está disponível no lado do servidor e no lado do cliente, mas seu valor no lado do servidor não é compartilhado com o cliente.
-
-Se você só quer definir o tipo de uma propriedade no objeto `window`, forneça uma interface `Window` ao invés disso:
-
-```ts title="env.d.ts"
-interface Window {
- minhaFuncao(): boolean;
-}
-```
-
-## Propriedades de Componentes
-
-O Astro suporta a tipagem das propriedades dos seus componentes via TypeScript. Para habilitar, adicione uma interface TypeScript `Props` ao frontmatter do seu componente. Uma declaração `export` pode ser utilizada, mas não é necessária. A [extensão para VSCode do Astro](/pt-br/editor-setup/) automaticamente buscará pela interface `Props` e oferecerá suporte TypeScript adequado quando você utilizar aquele componente dentro de outro template.
-```astro title="src/components/OlaProps.astro" ins={2-5}
----
-interface Props {
- nome: string;
- saudacao?: string;
-}
-const { saudacao = 'Olá', nome } = Astro.props;
----
-<h2>{saudacao}, {nome}!</h2>
-```
-
-### Padrões comuns de tipos de prop
-
-- Se seu componente não recebe props ou conteúdo em slot, você pode usar `type Props = Record<string, never>`.
-
-- Se seu componente deve receber filhos em seu slot padrão, você pode impor isso usando `type Props = { children: any; };`.
-
-## Utilitários de Tipagem
-
-<Since v="1.6.0" />
-
-O Astro vem com alguns tipos utilitários integrados para padrões de tipo de props comuns. Eles estão disponíveis dentro do entrypoint `astro/types`.
-
-### Atributos HTML integrados
-
-O Astro fornece os tipos `HTMLAttributes` para checar que sua marcação está usando atributos HTML válidos. Você pode usar esses tipos para ajudar a construir as props de componentes.
-
-Por exemplo, se você está construindo um componente `<Link>`, você pode fazer o seguinte para espelhar os atributos padrão de tags `<a>` nos tipos da prop do seu componente.
-
-```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
----
-import type { HTMLAttributes } from 'astro/types';
-// use um `type`
-type Props = HTMLAttributes<'a'>;
-// ou estenda com uma `interface`
-interface Props extends HTMLAttributes<'a'> {
- minhaProp?: boolean;
-}
-const { href, ...attrs } = Astro.props;
----
-<a href={href} {...attrs}>
- <slot />
-</a>
-```
-
-Também é possível estender as definições JSX padrões para adicionar atributos que não são padrões redeclarando o namespace `astroHTML.JSX` em um arquivo `d.ts`.
-
-```ts
-// src/custom-attributes.d.ts
-
-declare namespace astroHTML.JSX {
- interface HTMLAttributes {
- 'data-count'?: number;
- 'data-label'?: string;
- }
-
- // Adiciona uma propriedade CSS personalizada ao objeto de estilo
- interface CSSProperties {
- '--theme-color'?: 'black' | 'white';
- }
-}
-```
-
-:::note
-`astroHTML` é injetado globalmente dentro de componentes `.astro`. Para utilizá-lo em arquivos TypeScript, utilize uma [diretiva de barra tripla](https://www.typescriptlang.org/pt/docs/handbook/triple-slash-directives.html):
-
-```ts
-/// <reference types="astro/astro-jsx" />
-
-type MeusAtributos = astroHTML.JSX.ImgHTMLAttributes;
-```
-:::
-
-### `ComponentProps` type
-
-<p><Since v="4.3.0" /></p>
-
-Esta exportação de tipo permite que você referencie as `Props` aceitas por outro componente, mesmo que o componente não exporte o tipo `Props` diretamente.
-
-O exemplo seguinte mostra a utilidade de usar `ComponentProps` de `astro/types` para referenciar os tipos `Props` de um componente `<Button />`:
-
-```astro title="src/pages/index.astro"
----
-import type { ComponentProps } from 'astro/types';
-
-import Button from "./Button.astro";
-
-type ButtonProps = ComponentProps<typeof Button>;
----
-```
-
-### Tipo polimórfico
-
-<p><Since v="2.5.0" /></p>
-
-Astro inclui um utilitário para tornar mais fácil construir componentes que podem renderizar como elementos HTML diferentes com total segurança de tipo. Isso é útil para componentes como `<Link>` que podem renderizar como `<a>` ou `<button>` dependendo das props passadas para ele.
-
-O exemplo abaixo implementa um componente totalmente tipado e polimórfico que pode renderizar como qualquer elemento HTML. O tipo [`HTMLTag`](#atributos-html-integrados) é usado para garantir que a prop `as` é um elemento HTML válido.
-
-```astro
----
-import type { HTMLTag, Polymorphic } from 'astro/types';
-
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
-
-const { as: Tag, ...props } = Astro.props;
----
-
-<Tag {...props} />
-```
-
-### Inferir tipos de `getStaticPaths()`
-
-<p><Since v="2.1.0" /></p>
-
-Astro inclui utilitários para trabalhar com os tipos retornados pela sua função [`getStaticPaths()`](/pt-br/reference/routing-reference/#getstaticpaths) para rotas dinâmicas.
-
-Você pode obter o tipo de [`Astro.params`](/pt-br/reference/api-reference/#params) com `InferGetStaticParamsType` e o tipo de [`Astro.props`](/pt-br/reference/api-reference/#props) com `InferGetStaticPropsType`:
-
-```astro title="src/pages/posts/[...slug].astro" {2,14-15}
----
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
-
-export const getStaticPaths = (async () => {
- const posts = await getCollection('blog');
- return posts.map((post) => {
- return {
- params: { slug: post.slug },
- props: { draft: post.data.draft, title: post.data.title },
- };
- });
-}) satisfies GetStaticPaths;
-
-type Params = InferGetStaticParamsType<typeof getStaticPaths>;
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { slug } = Astro.params as Params;
-// ^? { slug: string; }
-const { title } = Astro.props;
-// ^? { draft: boolean; title: string; }
----
-```
-
-## Checagem de Tipos
-
-Para ver erros de tipagem em seu editor, por favor certifique-se de que você tem a [extensão Astro para VS Code](/pt-br/editor-setup/) instalada. Por favor note que os comandos `astro start` e `astro build` irão transpilar o código com esbuild, porém não executarão nenhuma checagem de tipos. Para prevenir o seu código de fazer build quando conter erros de TypeScript, mude o seu script "build" no `package.json` para o seguinte:
-
-```json title="package.json" del={2} ins={3} ins="astro check &&"
- "scripts": {
- "build": "astro build",
- "build": "astro check && astro build",
- },
-```
-
-:::note
-`astro check` verifica todos os arquivos incluídos em seu projeto TypeScript. Para verificar tipos em arquivos Svelte e Vue, você pode usar os pacotes [`svelte-check`](https://www.npmjs.com/package/svelte-check) e [`vue-tsc`](https://www.npmjs.com/package/vue-tsc), respectivamente.
-:::
-
-import ReadMore from '~/components/ReadMore.astro'
-
-<ReadMore>Leia mais sobre [a importação de arquivos `.ts`](/pt-br/guides/imports/#typescript) no Astro.</ReadMore>
-
-<ReadMore>Leia mais sobre [Configuração TypeScript](https://www.typescriptlang.org/tsconfig/).</ReadMore>
-
-## Solução de Problemas
-
-### Erros ao fazer a tipagem de múltiplos frameworks JSX ao mesmo tempo
-
-Um problema pode surgir ao se utilizar múltiplos frameworks JSX no mesmo projeto, já que cada framework requer configurações diferentes, e às vezes até conflitantes, dentro de `tsconfig.json`.
-
-**Solução**: Defina a [configuração `jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) para `react` (padrão), `preact` ou `solid-js` dependendo do seu framework mais utilizado. Então, utilize um [comentário pragma](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx) dentro de qualquer arquivo conflitante de outro framework.
-
-Para a opção padrão de `jsxImportSource: react`, você usaria:
-
-```jsx
-// Para Preact
-/** @jsxImportSource preact */
-
-// Para Solid
-/** @jsxImportSource solid-js */
-```
diff --git a/src/content/docs/pt-br/guides/upgrade-to/v2.mdx b/src/content/docs/pt-br/guides/upgrade-to/v2.mdx
index 16cd743f5b03a..c992e283bb65c 100644
--- a/src/content/docs/pt-br/guides/upgrade-to/v2.mdx
+++ b/src/content/docs/pt-br/guides/upgrade-to/v2.mdx
@@ -224,7 +224,7 @@ export default defineConfig({
#### Adicionado: Mais opções de configuração MDX para se igualar ao Markdown
-Astro v2.0 permite que você agora defina individualmente [cada opção da configuração Markdown disponível](/pt-br/reference/configuration-reference/#opções-de-markdown) (exceto `drafts`) separadamente na sua configuração da integração MDX.
+Astro v2.0 permite que você agora defina individualmente [cada opção da configuração Markdown disponível](/pt-br/reference/configuration-reference/#markdown-options) (exceto `drafts`) separadamente na sua configuração da integração MDX.
```js
// astro.config.mjs
diff --git a/src/content/docs/pt-br/guides/upgrade-to/v3.mdx b/src/content/docs/pt-br/guides/upgrade-to/v3.mdx
deleted file mode 100644
index 5157d9da92eb9..0000000000000
--- a/src/content/docs/pt-br/guides/upgrade-to/v3.mdx
+++ /dev/null
@@ -1,684 +0,0 @@
----
-title: Atualize para o Astro v3
-description: Como atualizar seu projeto para a versão mais recente do Astro (v3.0).
-i18nReady: true
----
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-Este guia vai te ajudar a migrar do Astro v2 para o Astro v3.
-
-Precisa atualizar um projeto antigo para a v2? Veja nosso [antigo guia de migração](/pt-br/guides/upgrade-to/v2/).
-
-## Atualize Astro
-
-Atualize a versão do Astro de seu projeto para a versão mais recente utilizando seu gerenciador de pacotes. Se você está utilizando integrações Astro, por favor também as atualize para a versão mais recente.
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- # Atualize para Astro v3.x
- npm install astro@latest
-
- # Exemplo: atualize as integrações React e Tailwind
- npm install @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- # Atualize para v3.x
- pnpm add astro@latest
-
- # Exemplo: atualize as integrações React e Tailwind
- pnpm add @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- # Atualize para v3.x
- yarn add astro@latest
-
- # Exemplo: atualize as integrações React e Tailwind
- yarn add @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
-</PackageManagerTabs>
-
-:::note[É necessário continuar?]
-Após atualizar Astro para a versão mais recente, você pode não precisar fazer quaisquer mudanças ao seu projeto afinal!
-
-Porém, se você notar erros ou comportamentos inesperados, por favor veja abaixo o que mudou que pode precisar ser atualizado em seu projeto.
-:::
-
-## Flags Experimentais Removidas do Astro v3.0
-
-Remova as seguintes flags experimentais de `astro.config.mjs`:
-
-```js del={5-8}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- experimental: {
- assets: true,
- viewTransitions: true,
- },
-})
-```
-
-Essas funcionalidades agora estão disponíveis por padrão:
-
-- Transições de Visualização para transições de página animadas e ilhas persistentes. Veja as [mudanças radicais da API de transições de visualização e dicas para atualização](/pt-br/guides/view-transitions/#atualize-para-v30-da-v2x) se você estava utilizando essa flag experimental.
-- Uma nova API de serviço de imagem `astro:assets` para utilizar imagens no Astro, incluindo um novo componente `<Image />` e a função `getImage()`. Por favor leia as detalhadas [dicas de atualização para imagens](/pt-br/guides/images/#atualize-para-v30-da-v2x) **se você estava ou não utilizando essa flag experimental** para ver como isso pode afetar seu projeto.
-
-Leia mais sobre essas duas funcionalidades eletrizantes e mais na [postagem do blog sobre a 3.0](https://astro.build/blog/astro-3/)!
-
-
-
-## Mudanças Radicais do Astro v3.0
-
-Astro v3.0 inclui algumas mudanças radicais, assim como a remoção de algumas funcionalidades anteriormente depreciadas. Se o seu projeto não funciona como esperado após atualizar para a v3.0, veja este guia para uma visão geral sobre todas as mudanças radicais e instruções em como atualizar sua base de código.
-
-Veja o [registro de mudanças](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) para as notas completas do lançamento.
-
-### Removido: Suporte para o Node 16
-
-Node 16 está marcado para chegar seu Fim de Vida em setembro de 2023.
-
-Astro v3.0 tira o suporte para Node 16 completamente para que todos os usuários do Astro se aproveitem das funcionalidades mais modernas do Node.
-
-#### O que devo fazer?
-
- Verifique eu tanto seu ambiente de desenvolvimento quanto seu ambiente de deployment estão utilizando **Node `18.14.1` ou superior**.
-
-1. Verifique sua versão local do Node utilizando:
-
- ```sh
- node -v
- ```
-
-
-
-2. Verifique a própria documentação do seu [ambiente de deployment](/pt-br/guides/deploy/) para verificar que ele suporta Node 18.
-
- Você pode especificar Node `18.14.1` para seu projeto Astro tanto em uma opção da configuração do painel de controle ou em um arquivo `.nvmrc`.
-
- ```bash title=".nvmrc"
- 18.14.1
- ```
-
-### Removido: Suporte para TypeScript 4
-
-Na Astro v2.x, as predefinições de `tsconfig.json` incluiam suporte para ambos TypeScript 4.x e 5.x.
-
-Astro v3.0 atualiza as predefinições de `tsconfig.json` para apenas suportar TypeScript 5.x. Astro agora assume que você utiliza TypeScript 5.0 (Março de 2023), ou que seu editor o inclui (e.x. VS Code 1.77).
-
-#### O que devo fazer?
-
-Se você tem o TypeScript instalado localmente, atualize pelo menos para a v5.0.
-
-```bash
-npm install typescript@latest --save-dev
-```
-
-### Removido: `@astrojs/image`
-
-No Astro v2.x, Astro oferecia uma integração de imagens oficial que incluia os componentes Astro `<Image />` e `<Picture />`.
-
-Astro v3.0 remove essa integração da base de código completamente. A nova solução para imagens do Astro é uma API integrada de serviços de imagem: `astro:assets`.
-
-#### O que devo fazer?
-
-Remova a integração `@astrojs/image` do seu projeto. Você irá precisar não só desinstalar a integração mas também atualizar ou remover quaisquer declarações de importação e quaisquer componentes `<Image />` e `<Picture />` existentes. Você também vai precisar configurar um serviço de processamento de imagem padrão de sua preferência.
-
-Você irá encontrar [instruções passo a passo completas para remover a integração de imagens antiga](/pt-br/guides/images/#remova-astrojsimage) em nosso guia de Imagens.
-
-Migrar para `astro:assets` também irá trazer algumas novas opções de imagem e funcionalidades que você pode desejar utilizar agora. Por favor veja as [dicas de atualização para imagens da v3.0](/pt-br/guides/images/#atualize-para-v30-da-v2x) para mais detalhes!
-
-```js del={3,7}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- integrations: [
- image(),
- ]
-})
-```
-
-### Removido: Componente `<Markdown />`
-
-No Astro v1.x, Astro depreciou o componente `<Markdown />` e o moveu para um pacote externo.
-
-Astro v3.0 remove completamente o pacote `@astrojs/markdown-component`. O componente `<Markdown />` do Astro não irá mais funcionar no seu projeto.
-
-#### O que devo fazer?
-
-Remova todas as instâncias de `@astrojs/markdown-component`.
-
-```astro del={2} title="src/components/MeuComponenteAstro.astro"
----
-import Markdown from '@astrojs/markdown-component';
----
-```
-
-Para continuar utilizando um componente `<Markdown />` similar no seu código, considere utilizar [integrações da comunidade](https://astro.build/integrations/) assim como [`astro-remote`](https://github.com/natemoo-re/astro-remote). Certifique-se de atualizar as importações e atributos do seu componente `<Markdown />` conforme necessário, de acordo com a documentação da própria integração.
-
-Como alternativa, delete todas as referências importando o componente `<Markdown />` do Astro e o próprio componente em seus arquivos `.astro`. Você vai precisar escrever novamente seu conteúdo como HTML diretamente ou [importar Markdown](/pt-br/guides/markdown-content/#importando-markdown) de um arquivo `.md`.
-
-### Removido: APIs depreciadas da 1.x
-
-No Astro v1.x, Astro depreciou nossas configurações originais assim como o suporte a `<style global>` e `<script hoist>`. Entretanto, esses ainda foram suportados por compatibilidade com versões anteriores.
-
-Astro v3.0 remove essas APIs depreciadas completamente. As [definições de configuração](/pt-br/reference/configuration-reference/) oficialmente suportadas e a sintaxe moderna `<style is:global>` e `<script>` devem ser usadas ao invés disso.
-
-#### O que devo fazer?
-
-Se você continua utilizando APIs da v1.x, utilize as novas APIs para cada uma das funcionalidades no lugar:
-
-- Opções depreciadas da configuração: Veja [o guia de migração da 0.26](/pt-br/guides/upgrade-to/v1/#new-configuration-api)
-- Tipos de atributo de script/style depreciados: Veja [o guia de migração da 0.26](/pt-br/guides/upgrade-to/v1/#new-default-script-behavior)
-
-### Removido: Correções parciais para APIs da Web no código do servidor
-
-No Astro v2.x, Astro forneceu correções parciais para APIs da Web como `document` ou `localStorage` em código renderizado pelo servidor. Essas correções eram muitas vezes incompletas e não confiáveis.
-
-Astro v3.0 remove essas correções parciais inteiramente. APIs da Web não estão mais disponíveis em código renderizado pelo servidor.
-
-#### O que devo fazer?
-
-Se você está usando APIs da Web em componentes renderizados pelo servidor, você vai precisar de ou fazer uso dessas APIs condicionalmente ou usar [a diretiva de cliente `client:only`](/pt-br/reference/directives-reference/#clientonly).
-
-### Removido: `image` do `astro:content` no esquema de coleções de conteúdo
-
-No Astro v2.x, a API de coleções de conteúdo depreciou a exportação `image` do `astro:content` utilizada no esquema de suas coleções de conteúdo.
-
-Astro v3.0 remove essa exportação completamente.
-
-#### O que devo fazer?
-
-Se você está utilizando o `image()` depreciado do `astro:content`, o remova, já que ele não existe mais. Valide imagens através do [utilitário `image` de `schema`](/pt-br/guides/images/#atualize-esquemas-de-coleções-de-conteúdo) no lugar:
-
- ```ts title="src/content/config.ts" del={1} ins={2} "({ image })"
-import { defineCollection, z, image } from "astro:content";
-import { defineCollection, z } from "astro:content";
-
- defineCollection({
- schema: ({ image }) =>
- z.object({
- image: image(),
- }),
-});
-```
-
-### Removido: nomes de temas do Shiki pré-0.14
-
-No Astro v2.x, alguns nomes de tema do Shiki foram renomeados, mas os nomes originais foram mantidos por compatibilidade com versões anteriores.
-
-Astro v3.0 remove os nomes originais em favor dos nomes de tema renomeados.
-
-#### O que devo fazer?
-
-Se o seu projeto utiliza qualquer um dos temas abaixo, os renomeie para seu nome atualizado:
-
-- `material-darker` -> `material-theme-darker`
-- `material-default` -> `material-theme`
-- `material-lighter` -> `material-theme-lighter`
-- `material-ocean` -> `material-theme-ocean`
-- `material-palenight` -> `material-theme-palenight`
-
-### Removido: Funcionalidades do `class:list`
-
-No Astro v2.x, a [diretiva `class:list`](/pt-br/reference/directives-reference/#classlist) utilizava uma implementação customizada, inspirada por [`clsx`](https://github.com/lukeed/clsx) com algumas funcionalidades extras como desduplicação e suporte para `Set`.
-
-Astro v3.0 agora utiliza `clsx` diretamente para `class:list`, que não suporta desduplicação ou valores `Set`.
-
-#### O que devo fazer?
-
-Substitua quaisquer elementos `Set` passados para a diretiva `class:list` com um `Array` plano.
-
-```astro title="src/components/MeuComponenteAstro.astro" del={4} ins={5}
-<Componente class:list={[
- 'a',
- 'b',
- new Set(['c', 'd'])
- ['c', 'd']
-]} />
-```
-
-### Removido: passar `class:list` como uma prop
-
-No Astro v2.x, [valores de `class:list`](/pt-br/reference/directives-reference/#classlist) eram passados para componentes através de [`Astro.props['class:list']`](/pt-br/reference/api-reference/#props).
-
-Astro v3.0 normaliza valores de `class:list` em uma string antes de os enviar para componentes através de `Astro.props['class']`
-
-#### O que devo fazer?
-
-Remova qualquer código que espera receber a prop `class:list`.
-
-```astro title="src/components/MeuComponenteAstro.astro" del={2,3,7} ins={4,8} "classList" "'class:list': classList"
----
-import { clsx } from 'clsx';
-const { class: className, 'class:list': classList } = Astro.props;
-const { class: className } = Astro.props;
----
-<div
- class:list={[className, classList]}
- class:list={[className]}
-/>
-```
-
-### Removido: transformação de variáveis CSS de camelCase para kebab-case
-
-No Astro v2.x, [variáveis CSS](/pt-br/guides/styling/#variáveis-no-css) camelCase passadoas para o atributo `style` eram renderizadas tanto como camelCase (assim como foi escrito) como em kebab-case (mantido por compatibilidade com versões anteriores).
-
-Astro v3.0 remove a transformação para kebab-case de nomes de variáveis CSS em camelCase, e apenas a variável CSS original em camelCase é renderizada.
-
-```astro "meu-valor"
----
-// src/components/MeuComponenteAstro.astro
-const meuValor = "red"
----
-<!-- input -->
-<div style={{ "--meuValor": meuValor }}></div>
-
-<!-- resultado (Astro 2.x) -->
-<div style="--meu-valor:var(--meuValor);--meuValor:red"></div>
-<!-- resultado (Astro 3.0) -->
-<div style="--meuValor:red"></div>
-```
-
-#### O que devo fazer?
-
-Se você dependia no Astro para transformar em kebab-case em seus estilos, atualize seus estilos existentes para camelCase para prevenir estilos faltando. Por exemplo:
-
-```astro del={3} ins={4} title="src/components/MeuComponenteAstro.astro"
-<style>
- div {
- color: var(--meu-valor);
- color: var(--meuValor);
- }
-</style>
-```
-
-### Removido: Planificação automática do valor de retorno de `getStaticPaths()`
-
-No Astro v2.x, o valor de retorno de [`getStaticPaths()`](/pt-br/reference/routing-reference/#getstaticpaths) era automaticamente planificado para te permitir retornar um array sem nenhum erro.
-
-Astro v3.0 remove a planificação automática do resultado de `getStaticPaths()`.
-
-#### O que devo fazer?
-
-Se você está retornando um array de arrays no lugar de um array de _objetos_ (como é esperado), `.flatMap` e `.flat` agora devem ser usados para garantir que você está retornando um array plano.
-
-Uma [mensagem de erro indicando que o valor de retorno de `getStaticPath()` deve ser um array de objetos](/pt-br/reference/errors/invalid-get-static-paths-entry/#o-que-deu-errado) será providenciado se você precisa atualizar seu código.
-
-### Movido: `astro check` agora requer um pacote externo
-
-No Astro v2.x, [`astro check`](/pt-br/reference/cli-reference/#astro-check) era incluso com o Astro por padrão, e suas dependências eram embutidas no Astro. Isso significava em um pacote maior, independente se você usava ou não `astro check`. Isso também te prevenia de ter controle sobre a versão do TypeScript e o Servidor de Linguagem do Astro a se utilizar.
-
-
-Astro v3.0 move o comando `astro check` para fora do núcleo do Astro e agora requer o pacote externo `@astrojs/check`. Adicionalmente, você deve instalar `typescript` em seu projeto para utilizar o comando `astro check`.
-
-#### O que devo fazer?
-
-Execute o comando `astro check` após atualizar para o Astro v3.0 e siga as instruções para instalar as dependências necessárias, ou manualmente instale `@astrojs/check` e `typescript` em seu projeto.
-
-### Depreciado: `build.excludeMiddleware` e `build.split`
-
-No Astro v2.x, `build.excludeMiddleware` e `build.split` eram utilizados para mudar como arquivos específicos eram emitidos ao utilizar um adaptador no modo SSR.
-
-Astro v3.0 substitui essas opções de configuração da build com novas [opções de configuração de adaptadores SSR](/pt-br/guides/integrations-guide/#integrações-oficiais) para realizar as mesmas tarefas: `edgeMiddleware` e `functionPerRoute`.
-
-#### O que devo fazer?
-
-Atualize o arquivo de configuração do Astro para agora utilizar as novas opções **na configuração do adaptador** diretamente.
-
-```js title="astro.config.mjs" del={5-7} ins={9}
-import { defineConfig } from "astro/config";
-import vercel from "@astrojs/vercel/serverless";
-
-export default defineConfig({
- build: {
- excludeMiddleware: true
- },
- adapter: vercel({
- edgeMiddleware: true
- }),
-});
-```
-
-```js title="astro.config.mjs" del={5-7} ins={9}
-import { defineConfig } from "astro/config";
-import netlify from "@astrojs/netlify/functions";
-
-export default defineConfig({
- build: {
- split: true
- },
- adapter: netlify({
- functionPerRoute: true
- }),
-});
-```
-
-### Depreciado: `markdown.drafts`
-
-No Astro v2.x, a configuração `markdown.drafts` te permitia ter páginas de rascunho que eram disponibilizadas ao executar o servidor de desenvolvimento, mas não na build para produção.
-
-Astro v3.0 deprecia essa funcionalidade em favor do método de coleções de conteúdo de manipular páginas de rascunho filtrando manualmente no lugar, o que te dá mais controle sobre a funcionalidade.
-
-#### O que devo fazer?
-
-Para continuar a marcar algumas páginas em seu projeto como rascunhos, [migue para coleções de conteúdo](/pt-br/guides/content-collections/#migrando-do-roteamento-baseado-em-arquivos) e [filtre páginas manualmente](/pt-br/guides/content-collections/#filtrando-consultas-de-coleção) com a propriedade do frontmatter `draft: true` no lugar.
-
-### Depreciado: retornar um objeto simples de endpoints
-
-No Astro v2.x, endpoints podiam retornar um objeto simples, que seria convertido para uma resposta JSON.
-
-Astro v3.0 deprecia esse comportamento em favor de retornar um objeto `Response` diretamente.
-
-#### O que devo fazer?
-
-Atualize seus endpoints para reotrnar um objeto `Response` diretamente.
-
-```ts title="endpoint.json.ts" del={2} ins={3}
-export async function GET() {
- return { body: { "titulo": "Blog do Bob" }};
- return new Response(JSON.stringify({ "titulo": "Blog do Bob" }));
-}
-```
-
-Se você realmente precisar manter o formato anterior, você pode utilizar o objeto `ResponseWithEncoding`, mas isso será depreciado no futuro.
-
-```ts title="endpoint.json.ts" del={2} ins={3}
-export async function GET() {
- return { body: { "titulo": "Blog do Bob" } };
- return new ResponseWithEncoding({ body: { "titulo": "Blog do Bob" }});
-}
-```
-
-### Padrão alterado: `verbatimModuleSyntax` nas predefinições de tsconfig.json
-
-No Astro v2.x, a configuração [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) era desativada por padrão, com seu equivalente `importsNotUsedAsValues` do TypeScript 4.x sendo habilitado na predefinição `strict`.
-
-No Astro v3.0, `verbatimModuleSyntax` está habilitado em todas as predefinições.
-
-#### O que devo fazer?
-
-Esta opção requer que os tipos sejam importados usando a sintaxe `import type`.
-
-```astro title="src/components/MeuComponenteAstro.astro" "type"
----
-import { type CollectionEntry, getEntry } from "astro:content";
----
-```
-
-Enquanto nós recomendamos manter ele ativado e apropriadamente fazer suas importações de tipo com `type` (como mostrado acima), você pode desativar ele definindo `verbatimModuleSyntax: false` no seu arquivo `tsconfig.json` se isso causa algum problema.
-
-```json title="tsconfig.json" "false"
-{
- "compilerOptions": {
- "verbatimModuleSyntax": false
- }
-}
-```
-
-### Padrão modificado: porta `3000`
-
-No Astro v2.x, Astro era executado na porta `3000` por padrão.
-
-Astro v3.0 muda a [porta padrão](/pt-br/reference/cli-reference/#--port-numero) para `4321`. 🚀
-
-#### O que devo fazer?
-
-Atualize quaisquer referências a `localhost:3000`, por exemplo em testes ou em seu `README`, para refletir a nova porta `localhost:4321`.
-
-
-### Padrão modificado: import.meta.env.BASE_URL `trailingSlash`
-
-No Astro v2.x, `import.meta.env.BASE_URL` anexava sua opção [`base`](/pt-br/reference/configuration-reference/#base) com [`trailingSlash`](/pt-br/reference/configuration-reference/#trailingslash) por padrão. `trailingSlash: "ignore"` também anexava com uma barra final.
-
-Astro v3.0 não mais anexa `import.meta.env.BASE_URL` com uma barra final por padrão, nem quando `trailingSlash: "ignore"` é definido. (O comportamento existente de `base` em combinação com `trailingSlash: "always"` ou `trailingSlash: "never"` não mudou.)
-
-#### O que devo fazer?
-
-Se sua `base` já tem uma barra final, nenhuma mudança é necessária.
-
-Se sua `base` não tem uma barra final, adicione uma se você deseja preservar o comportamento padrão anterior (ou `trailingSlash: "ignore"`):
-
-```js title="astro.config.mjs" del={4} ins={5}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- base: 'minha-base',
- base: 'minha-base/',
-});
-```
-
-### Padrão modificado: `compressHTML`
-
-No Astro v2.x, Astro apenas comprimia seu HTML emitido quando [`compressHTML`](/pt-br/reference/configuration-reference/#compresshtml) era explicitamente definido como `true`. O valor padrão era `false`.
-
-Astro v3.0 agora comprime HTML emitido por padrão.
-
-#### O que devo fazer?
-
-Agora você pode remover `compressHTML: true` de sua configuração já que esse é o novo comportamento padrão.
-
-```js title="astro.config.mjs" del={4}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- compressHTML: true
-})
-```
-
-Agora você deve definir `compressHTML: false` para optar por sair da compressão de HTML.
-
-### Padrão modificado: `scopedStyleStrategy`
-
-No Astro v2.x, o valor padrão de [`scopedStyleStrategy`](/pt-br/reference/configuration-reference/#scopedstylestrategy) era `"where"`.
-
-Astro v3.0 introduz um novo valor padrão: `"attribute"`. Por padrão, estilos agora são aplicados utilizando atributos `data-*`.
-
-#### O que devo fazer?
-
-Para manter o [escopo dos estilos](/pt-br/guides/styling/#estilos-com-escopo), atualize o arquivo de configuração para o valor padrão anterior:
-
-
-```js title="astro.config.mjs" ins={4}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- scopedStyleStrategy: "where"
-})
-```
-
-### Padrão modificado: `inlineStyleSheets`
-
-No Astro v2.x, todas as folhas de estilo foram enviadas como tags link por padrão. Você poderia optar por adicioná-las inline em tags `<style>` toda vez com `"always"`, ou adicionar inline apenas folhas de estilo abaixo de um certo tamanho com `"auto"` definindo a configuração [`build.inlineStylesheets`](/pt-br/reference/configuration-reference/#buildinlinestylesheets). A opção padrão era `"never"`.
-
-Astro v3.0 modifica o valor padrão de `inlineStylesheets` para `"auto"`. Folhas de estilo menores que `ViteConfig.build.assetsInlineLimit` (padrão: 4kb) são adicionadas inline por padrão. Caso contrário, estilos do projeto eram enviados como folhas de estilo externas.
-
-#### O que devo fazer?
-Se você quer manter o comportamento atual do seu projeto, defina `build.inlineStylesheets` para o padrão anterior, `"never"`:
-
-
-```js title="astro.config.mjs" ins={4-6}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- build: {
- inlineStylesheets: "never"
- }
-})
-```
-
-### Padrão modificado: serviço de imagem
-
-No Astro v2.x, Squoosh era o [serviço padrão de processamento de imagem](/pt-br/guides/images/#serviço-de-imagem-padrão).
-
-Astro v3.0 agora inclui Sharp como o novo serviço de processamento de imagem padrão e fornece uma opção da configuração para utilizar Squoosh no lugar.
-
-#### O que devo fazer?
-
-:::note
-Ao usar um [gerenciador de pacotes rigoroso](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) como o `pnpm`, talvez seja necessário instalar o Sharp manualmente o seu projeto, mesmo que seja uma dependência do Astro:
-
-```bash
-pnpm add sharp
-```
-:::
-
-Se você preferir continuar a usar Squoosh para transformar suas imagens, atualize sua configuração com o seguinte:
-
-```ts title="astro.config.mjs" ins={4-6}
-import { defineConfig, squooshImageService } from "astro/config";
-
-export default defineConfig({
- image: {
- service: squooshImageService(),
- }
-})
-```
-
-### Modificado: Capitalização dos métodos de requisição HTTP
-
-No Astro v2.x, [métodos de requisição HTTP](/pt-br/guides/endpoints/#métodos-http) eram escritos usando nomes de função em letras minúsculas: `get`, `post`, `put`, `all` e `del`.
-
-Astro v3.0 utiliza nomes de função em letras maiúsculas, incluindo `DELETE` ao invés de `del`.
-
-#### O que devo fazer?
-
-Renomeie todas as funções para seus equivalentes em letras maiúsculas:
-
-- `get` para `GET`
-- `post` para `POST`
-- `put` para `PUT`
-- `all` para `ALL`
-- `del` para `DELETE`
-
-```js title="endpoint.ts" del={1} ins={2}
-export function get() {
-export function GET() {
- return new Response(JSON.stringify({ "titulo": "Blog do Bob" }));
-}
-```
-
-### Modificado: Configuração de múltiplos frameworks JSX
-
-No Astro v2.x, você poderia utilizar [múltiplas integrações de frameworks JSX](/pt-br/guides/integrations-guide/#integrações-oficiais) (React, Solid, Preact) no mesmo projeto sem precisar identificar quais arquivos pertenciam a qual framework.
-
-Astro v3.0 agora requer que você especifique qual framework utilizar para seus arquivos com as novas opções `include` e `exclude` da configuração de integrações quando você tiver integrações de frameworks JSX instaladas. Isso permite Astro suportar melhor o uso de um único framework, assim como funcionalidades avançadas como Fast Refresh do React.
-
-#### O que devo fazer?
-
-Se você estiver utilizando múltiplos frameworks JSX no mesmo projeto, defina `include` (e opcionalmente `exclude`) como um array de arquivos e/ou pastas. Coringas podem ser utilizados para incluir o caminho de múltiplos arquivos.
-
-Nós recomendamos colocar componentes de frameworks em comum na mesma pasta (e.x. `/components/react/` e `/components/solid/`) para fazer especificar suas inclusões mais fácil, mas isso não é necessário:
-
-```js ins={13,16,19}
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-import react from '@astrojs/react';
-import svelte from '@astrojs/svelte';
-import vue from '@astrojs/vue';
-import solid from '@astrojs/solid-js';
-
-export default defineConfig({
- // Habilite múltiplos frameworks a suportarem todos os tipos de componentes.
- // Nenhum `include` é necessário se você está usando apenas um único framework!
- integrations: [
- preact({
- include: ['**/preact/*']
- }),
- react({
- include: ['**/react/*']
- }),
- solid({
- include: ['**/solid/*'],
- }),
- ]
-});
-```
-
-### Modificado: `Astro.cookies.get(key)` pode retornar `undefined`
-
-No Astro v2.x, `Astro.cookies.get(key)` sempre retornaria um objeto `AstroCookie`, mesmo se o cookie não existisse. Para verificar sua existência, você precisava utilizar `Astro.cookies.has(key)`.
-
-Astro v3.0 retorna `undefined` em `Astro.cookies.get(key)` se o cookie não existir.
-
-#### O que devo fazer?
-
-Esta mudança não irá quebrar nenhum código que verifica pela existência do objeto `Astro.cookie` antes de utilizar `Astro.cookies.get(key)`, mas não é mais necessário.
-
-Você pode com segurança remover qualquer código que utiliza `has()` para verificar se o valor de `Astro.cookies` é `undefined`:
-
-```js del={1-3} ins={5-7}
-if (Astro.cookies.has(id)) {
- const id = Astro.cookies.get(id)!;
-}
-
-const id = Astro.cookies.get(id);
-if (id) {
-}
-```
-
-### Modificado: executando a CLI do Astro programaticamente
-
-No Astro v2.x, o entrypoint do pacote `"astro"` exportava e executava a CLI do Astro diretamente. Não é recomendado executar Astro dessa forma na prática.
-
-Astro v3.0 remove a CLI do entrypoint, e exporta um novo conjunto de APIs experimentais JavaScript, incluindo `dev()`, `build()`, `preview()` e `sync()`.
-
-#### O que devo fazer?
-
-Para [executar a CLI do Astro programaticamente](/pt-br/reference/cli-reference/#apis-avançadas-experimental), utilize as novas APIs JavaScript experimentais:
-
-```js
-import { dev, build } from "astro";
-
-// Inicie o servidor de desenvolvimento do Astro
-const devServer = await dev();
-await devServer.stop();
-
-// Faça a build do seu projeto Astro
-await build();
-```
-
-
-### Modificado: caminhos de exportação do entrypoint interno da API do Astro
-
-No Astro v2.x, você poderia importar APIs internas do Astro a partir de `astro/internal/*` e `astro/runtime/server/*`.
-
-Astro v3.0 remove os dois entrypoints em favor do entrypoint existente `astro/runtime/*`. Adicionalmente, uma nova exportação `astro/compiler-runtime` foi adicionada para código em runtime específico do compilador.
-
-#### O que devo fazer?
-
-Esses entrypoints são para APIs internas do Astro e não devem afetar seu projeto. Mas se você utiliza esses entrypoints, atualize como mostrado abaixo:
-
-```js del={1,4,10} ins={2,5,11}
-import 'astro/internal/index.js';
-import 'astro/runtime/server/index.js';
-
-import 'astro/server/index.js';
-import 'astro/runtime/server/index.js';
-```
-
-```js ins={5} del={4}
-import { transform } from '@astrojs/compiler';
-
-const resultado = await transform(source, {
- internalURL: 'astro/runtime/server/index.js',
- internalURL: 'astro/compiler-runtime',
- // ...
-});
-```
-
-## Recursos da Comunidade
-
-Conhece um bom recurso para Astro v3.0? [Edite esta página](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v3.mdx) e adicione um link abaixo!
-
-## Problemas Conhecidos
-
-Atualmente, não há problemas conhecidos.
diff --git a/src/content/docs/pt-br/guides/upgrade-to/v4.mdx b/src/content/docs/pt-br/guides/upgrade-to/v4.mdx
deleted file mode 100644
index dc969953559e3..0000000000000
--- a/src/content/docs/pt-br/guides/upgrade-to/v4.mdx
+++ /dev/null
@@ -1,385 +0,0 @@
----
-title: Atualize para o Astro v4
-description: Como atualizar seu projeto para a versão mais recente do Astro (v4.0).
-i18nReady: true
----
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-Este guia vai te ajudar a migrar do Astro v3 para o Astro v4.
-
-Precisa atualizar um projeto antigo para a v3? Veja nosso [antigo guia de migração](/pt-br/guides/upgrade-to/v3/).
-
-Precisa ver a documentação da v3? Visite essa [versão antiga do site de documentação (snapshot v3.6 não mantido)](https://docs-git-v3-docs-unmaintained-astrodotbuild.vercel.app/).
-
-## Atualize o Astro
-
-Atualize a versão do Astro e de todas as integrações oficiais em seu projeto para a versão mais recente utilizando seu gerenciador de pacotes.
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- # Atualiza o Astro e integrações oficiais juntos
- npx @astrojs/upgrade
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- # Atualiza o Astro e integrações oficiais juntos
- pnpm dlx @astrojs/upgrade
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- # Atualiza o Astro e integrações oficiais juntos
- yarn dlx @astrojs/upgrade
- ```
- </Fragment>
-</PackageManagerTabs>
-
-Você também pode atualizar suas integrações do Astro manualmente se preferir, e você pode precisar atualizar outras dependências no seu projeto.
-
-:::note[É necessário continuar?]
-Após atualizar Astro para a versão mais recente, você pode não precisar fazer quaisquer mudanças ao seu projeto afinal!
-
-Porém, se você notar erros ou comportamentos inesperados, por favor veja abaixo o que mudou que pode precisar ser atualizado em seu projeto.
-:::
-
-Astro v4.0 inclui [mudanças potencialmente radicais](#mudanças-radicais), assim como [remoção de funcionalidades anteriormente descontinuadas](#funcionalidades-previamente-descontinuadas-agora-removidas).
-
-Se seu projeto não funcionar como o esperado após atualizar para a v4.0, veja esse guia para uma visão geral de todas as mudanças radicais e instruções sobre como atualizar sua base de código.
-
-Veja o [registro de mudanças](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) para as notas completas do lançamento.
-
-## Flags Experimentais Removidas no Astro v4.0
-
-Remova a flag experimental `devOverlay` e mova qualquer configuração `i18n` para o primeiro nível em `astro.config.mjs`:
-
-```js del={5-9} ins={11-14} title="astro.config.mjs"
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- experimental: {
- devOverlay: true,
- i18n: {
- defaultLocale: "en",
- locales: ["en", "fr", "pt-br", "es"],
- }
- },
- i18n: {
- defaultLocale: "en",
- locales: ["en", "fr", "pt-br", "es"],
- },
-})
-```
-
-Essas configurações, `i18n` e o renomeado `devToolbar` agora estão disponíveis no Astro v4.0.
-
-Leia mais sobre essas excitantes nos funcionalidades no [blog post v4.0](https://astro.build/blog/astro-4/)!
-
-## Atualizações
-
-Toda atualização major de dependências do Astro pode causar mudanças radicais em seu projeto.
-
-### Atualizado: Vite 5.0
-
-No Astro v3.0, Vite 4 foi utilizado como o servidor de desenvolvimento e bundler de produção.
-
-Astro v4.0 atualiza do Vite 4 para o Vite 5.
-
-#### O que eu preciso fazer?
-
-Se você estiver utilizando plugins, configurações, ou APIs específicos do Vite, veja o [guia de migração do Vite](https://pt.vite.dev/guide/migration) para saber as mudanças radicais deles e atualize seu projeto conforme necessário. Não há mudanças radicais no próprio Astro.
-
-### Atualizado: dependências de unified, remark, e rehype
-
-No Astro v3.0, unified v10 e seus pacotes remark/rehype compatíveis relacionados foram utilizados para procesar Markdown e MDX.
-
-Astro v4.0 atualiza [unified para v11](https://github.com/unifiedjs/unified/releases/tag/11.0.0) e os outros pacotes remark/rehype para a última versão.
-
-#### O que eu preciso fazer?
-
-Se você utiliza pacotes remark/rehype customizados, atualize todos eles para a última versão utilizando o seu gerenciador de pacotes para garantir que eles suportem unified v11. Os pacotes que você está usando podem ser encontrados em `astro.config.mjs`.
-
-Não deve haver nenhuma mudança radical significativa se você estiver utilizando pacotes ativamente atualizados, mas alguns pacotes podem ainda não ser compatíveis com o unified v11.
-Inspecione visualmente suas páginas Markdown/MDX antes de fazer um deploy para garantir que seu site está funcionando como o planejado.
-
-## Mudanças radicais
-
-As seguintes mudanças são consideradas mudanças radicais no Astro. Mudanças radicais podem manter temporariamente compatibilidade com versões anteriores ou não, e toda a documentação é atualizada para se referir exclusivamente ao código suportado atual.
-
-Se você precisar consultar a documentação para um projeto v3.x, você pode acessar esse [snapshot (não mantido) da docs de antes da v4.0 ser lançada](https://docs-git-v3-docs-unmaintained-astrodotbuild.vercel.app/).
-
-### Renomeado: `entrypoint` (API de Integrações)
-
-No Astro v3.x, a propriedade da API de integrações `injectRoute` que especificava o ponto de entrada da rota foi nomeado `entryPoint`.
-
-Astro v4.0 renomeia essa propriedade para `entrypoint` para ser consistente com outras APIs Astro. A propriedade `entryPoint` foi descontinuada, mas ainda continua a funcionar e emite um aviso requisitando que atualize seu código.
-
-#### O que eu preciso fazer?
-
-Se você tiver integrações que usem a API `injectRoute`, renomeie a propriedade `entryPoint` para `entrypoint`. Se você é autor de uma biblioteca que quer suportar tanto Astro 3 quanto 4, você pode especicar ambos `entryPoint` e `entrypoint`, nesse caso, nenhum aviso será emitido.
-
-```js ins={4} del={3}
-injectRoute({
- pattern: '/fancy-dashboard',
- entryPoint: '@fancy/dashboard/dashboard.astro'
- entrypoint: '@fancy/dashboard/dashboard.astro'
-});
-```
-
-### Alterado: assinatura de `app.render` na API de Integrações
-
-No Astro v3.0, o método `app.render()` aceitava `routeDate` e `locals` como argumentos separados, ambos opcionais.
-
-Astro v4.0 muda a assinatura de `app.render()`. Essas duas propriedades agora estão disponíveis em um único objeto. Tanto o objeto quanto essas duas propriedades ainda são opcionais.
-
-#### O que eu preciso fazer?
-
-Se você mantém um adaptador, a assinatura atual continuará funcionando até a próxima versão major. Para migrar para a nova assinatura, passe `routeData` e `local` como propriedades de um objeto ao invés de múltiplos argumentos independentos.
-
-```diff lang="js"
-- app.render(request, routeData, locals)
-+ app.render(request, { routeData, locals })
-```
-
-### Alterado: adaptadores agora devem especificar funcionalidades suportadas
-
-No Astro v3.0, adaptadores não era obrigados a especificar as funcionalidades que suportavam.
-
-Astro v4.0 requer que adaptadores passem a propriedade `supportedAstroFeatures` para especificar a lista de funcionalidades que suportam. Essa propriedade não é mais opcional.
-
-#### O que eu preciso fazer?
-
-Autores de adaptadores precisam passar a opção `supportedAstroFeatures` para especificar a lista de funcionalidades que suportam.
-
-```js title="meu-adaptador.mjs" ins={9-11}
-export default function createIntegration() {
- return {
- name: '@matthewp/meu-adaptador',
- hooks: {
- 'astro:config:done': ({ setAdapter }) => {
- setAdapter({
- name: '@matthewp/meu-adaptador',
- serverEntrypoint: '@matthewp/meu-adaptador/server.js',
- supportedAstroFeatures: {
- staticOutput: 'stable'
- }
- });
- },
- },
- };
-}
-```
-
-### Removido: propriedade `path` de linguagem do Shiki
-
-No Astro v3.x, a linguagem do Shiki passada para `markdown.shikiConfig.langs` era automaticamente convertida para uma linguagem compatível com Shikiji. Shikiji é a ferramenta interna utilizada para syntax highlight pelo Astro.
-
-Astro v4.0 remove o suporte à propriedade `path` de uma linguagem do Shiki, que era confusa de configurar. Ela foi substituída por um import que pode ser passado `langs` diretamente.
-
-#### O que eu preciso fazer?
-
-O arquivo JSON de linguagem deve ser importado e passado para a opção correta.
-
-```diff lang="js"
-// astro.config.js
-+ import customLang from './custom.tmLanguage.json'
-
-export default defineConfig({
- markdown: {
- shikiConfig: {
- langs: [
-- { path: '../../custom.tmLanguage.json' },
-+ customLang,
- ],
- },
- },
-})
-```
-
-## Descontinuado
-
-As seguntes funcionalidades descontinuadas não são mais suportadas nem documentadas. Por favor, atualize seu projeto conforme apropriado.
-
-Algumas funcionalidades descontinuadas podem continuar funcionando temporariamente até serem completamente removidas. Outras podem silenciosamente não ter nenhum efeito, ou causar um erro requisitando que atualize seu código.
-
-### Descontinuado: `handleForms` para eventos `submit` em Transições de Visualização
-
-No Astro v3.x, projetos utilizando o componente `<ViewTransitions />` precisavam optar por tratar eventos `submit` para elementos `form`. Isso era feito passando a prop `handleForms`.
-
-Astro v4.0 trata eventos `submit` para elementos `form` por padrão quando `<ViewTransitions />` é utilizado. A prop `handleForms` foi descontinuada e não tem mais nenhum efeito.
-
-#### O que eu devo fazer?
-
-Remova a propriedade `handleForms` do seu componente `<ViewTransitions />`. Ela não é mais necessária.
-
-```astro title="src/pages/index.astro" del="handleForms"
----
-import { ViewTransitions } from "astro:transitions";
----
-<html>
- <head>
- <ViewTransitions handleForms />
- </head>
- <body>
- <!-- stuff here -->
- </body>
-</html>
-```
-
-Para optar por não ter o tratamento dos eventos `submit`, adicione o atributo `data-astro-reload` nos elementos `form` relevantes.
-
-```astro title="src/components/Form.astro" ins="data-astro-reload"
-<form action="/contact" data-astro-reload>
- <!-- -->
-</form>
-```
-
-## Funcionalidades previamente descontinuadas agora removidas
-
-As seguintes funcionalidades descontinuadas foram agora inteiramente removidas da base de código enão podem mais ser usadas. Algumas dessas funcionalidades podem ter continuado a funcionar em seu projeto mesmo depois de serem descontinuadas. Outras podem ter silenciosamente ficado sem efeito.
-
-Agora projetos contendo essas funcionalidades removidas ficaram impossibilitados de fazer o build, e não haverá mais qualquer documentação auxiliar pedindo-lhe para remover essas funcionalidades.
-
-### Removido: retornar objetos simples de endpoints
-
-No Astro v3.x, retornar objetos simples de endpoints foi descontinuado, mas ainda era suportado para manter compatibilidade com Astro v2. O utilitário `ResponseWithEncoding` também foi disponibilizado para facilitar a migração.
-
-Astro v4.0 remove o suporte a objetos simples e exige que endpoints sempre retornem uma resposta (`Respons`). O utilitário `ResponseWithEncoding` também foi removido em favor do tipo `Response` apropriado.
-
-#### O que eu preciso fazer?
-
-Atualize seus endpoints para retornarem um objeto `Response` diretamente.
-
-```diff lang="ts"
- export async function GET() {
-- return { body: { "title": "Bob's blog" }};
-+ return new Response(JSON.stringify({ "title": "Bob's blog" }));
- }
-```
-
-Para remover o uso de `ResponseWithEncoding`, refatore seu código para utilizar um `ArrayBuffer` no lugar:
-
-```diff lang="ts"
- export async function GET() {
- const file = await fs.readFile('./bob.png');
-- return new ResponseWithEncoding(file.toString('binary'), undefined, 'binary');
-+ return new Response(file.buffer);
- }
-```
-
-### Removido: `build.split` e `build.excludeMiddleware`
-
-No Astro v3.0, as opções da configuração de build `build.split` e `build.excludeMiddleware` foram descontinuadas e substituídas por [opções de configuração de adaptadores](/pt-br/reference/adapter-reference/#funcionalides-do-adaptador) que cumprem a mesma tarefa.
-
-Astro v4.0 remove completamente essas propriedades.
-
-#### O que eu preciso fazer?
-
-Se você está utilizando as opções descontinuadas `build.split` ou `build.excludeMiddleware`, você deve agora removê-las visto que elas não existem mais.
-
-Por favor veja o guia de migração v3 para [substituir essas propriedades descontinuadas do middleware](/pt-br/guides/upgrade-to/v3/#depreciado-buildexcludemiddleware-e-buildsplit) por configurações de adaptador.
-
-### Removido: `Astro.request.params`
-
-No Astro v3.0, a API `Astro.request.params` foi descontinuada, mas preservada por compatibilidade com versões anteriores.
-
-Astro v4.0 remove completamente essa opção.
-
-#### O que eu preciso fazer?
-
-Atualize todas as ocorrências para [`Astro.params`](/pt-br/reference/api-reference/#params), que é o substituto suportado.
-
-```astro del={1} ins={2}
-const { id } = Astro.request.params;
-const { id } = Astro.params;
-```
-
-### Removido: `markdown.drafts`
-
-No Astro v3.0, utilizar `markdown.drafts` para controlar o build de rascunhos foi descontinuado.
-
-Astro v4.0 remove completamente essa opção.
-
-#### O que eu preciso fazer?
-
-Se você está utilizando a opção `markdown.drafts` descontinuada, você deve removê-la visto que ela não existe mais.
-
-Para continue a marcar algumas páginas de seu projeto como rascunho, [migre para coleções de conteúdo](/pt-br/guides/content-collections/#migrando-do-roteamento-baseado-em-arquivos) e [filtre manualmente as páginas](/pt-br/guides/content-collections/#filtrando-consultas-de-coleção) com a propriedade `draft: true` do frontmatter.
-
-### Removido: `getHeaders()`
-
-No Astro v3.0, o export `getHeaders()` de Markdowns foi descontinuado e substituído por `getHeadings()`.
-
-Astro v4.0 remove completamente essa opção.
-
-#### O que eu preciso fazer?
-
-Se você está utilizando o `getHeaders()` descontinuado, você deve removê-lo visto que ele não existe mais. Substitua todas as ocorrências por `getHeadings()`, que é o substituto suportado.
-
-```js del={2} ins={3}
-const posts = await Astro.glob('../content/blog/*.mdx');
-const firstPostHeadings = posts.at(0).getHeaders();
-const firstPostHeadings = posts.at(0).getHeadings();
-```
-
-### Removido: utilizar `rss` em `getStaticPaths()`
-
-No Astro v3.0, utilizar o utilitário descontinuado `rss` em `getStaticPaths()` soltaria um erro.
-
-Astro v4.0 remove completamente essa opção.
-
-#### O que eu preciso fazer?
-
-Se você está utilizando o método não suportado para gerar feeds RSS, você deve agora utilizar a [integração `@astrojs/rss`](/pt-br/recipes/rss/) para uma configuração RSS completa.
-
-### Removido: métodos HTTP em letras minúsculas
-
-No Astro v3.0, utilizar métodos de chamada HTTP em letras minúsculas (`get`, `post`, `put`, `all`, `del`) foi descontinuado.
-
-Astro v4.0 remove o suporte a métodos em letras minúsculas completamente. Todos os métodos de chamadas HTTML agora devem ser escritos com letras maiúsculas.
-
-#### O que eu preciso fazer?
-
-Se você está usando os nomes em letras minúsculas descontinuados, você deve substituí-los pelos equivalentes em letras maiúsculas.
-
-Por favor veja o guia de migração v3 para [orientações sobre o uso de métodos de chamada HTTP em letras maiúsculas](/pt-br/guides/upgrade-to/v3/#modificado-capitalização-dos-métodos-de-requisição-http).
-
-### Removido: redirecionamentos 301 na falta do prefixo `base`
-
-No Astro v3.x, o servidor de pré-visualização do Astro retornava um redirectionamento 301 ao acessar recursos do diretório `public` sem um caminho base.
-
-Astro v4.0 retorna um status 404 sem o prefixo do caminho base para recursos do diretório `public` quando o servidor de pré-visualização, replicando o comportamento do servidor de desenvolvimento.
-
-#### O que eu preciso fazer?
-
-Ao utilizar o servidor de pré-visualização do AStro, todos os imports e URLs de seus recursos estáticos do diretório `public` devem ter [o valor `base`](/pt-br/reference/configuration-reference/#base) prefixado ao caminho.
-
-```astro title="src/pages/index.astro" ins="/docs"
-// To access public/images/my-image.png:
-
-<img src="/docs/images/my-image.png" alt="">
-```
-
-### Removido: conversão automática de `astro/client-image`
-
-No Astro v3.x, o tipo `astro/client-image` (utilizado para a descontinuada integração de imagem) foi removido, mas automaticamente convertido para o tipo `astro/client` padrão do Astro se encontrado em seu arquivo `env.d.ts`.
-
-Astro v4.0 ignora `astro/client-image` e não vai mais atualizar `env.d.ts` automaticamente para você.
-
-#### O que eu preciso fazer?
-
-Se você tinha tipos configurados para `@astrojs/image` em `src/env.d.ts` e atualizar para v3.0 não converteu automaticamente o tipo para você, substitua o tipo `astro/client-image` manualmente por `astro/client`.
-
-```ts title="src/env.d.ts" del={1} ins={2}
- /// <reference types="astro/client-image" />
- /// <reference types="astro/client" />
-```
-
-## Recursos da comunidade
-
-Conhece algum bom recurso para Astro v4.0? [Edite essa página](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v4.mdx) e adicione um link abaixo!
-
-## Problemas conhecidos
-
-Por favor confira [as issues do Astro no GitHub](https://github.com/withastro/astro/issues/) por problemas reportados, ou para reportar um problema você mesmo.
diff --git a/src/content/docs/pt-br/guides/view-transitions.mdx b/src/content/docs/pt-br/guides/view-transitions.mdx
deleted file mode 100644
index b1818f3267cf8..0000000000000
--- a/src/content/docs/pt-br/guides/view-transitions.mdx
+++ /dev/null
@@ -1,599 +0,0 @@
----
-title: Transições de Visualização
-description: >-
- Habilite navegação fluída entre páginas no Astro com transições de visualização.
-i18nReady: true
----
-
-import Since from '~/components/Since.astro'
-
-Astro suporta **transições de visualização, opcionais, por página** com apenas algumas linhas de código. Transições de visualização atualizam o conteúdo de sua página sem a atualização normal, atualizando a página inteira, do navegador e oferece animações suaves entre páginas.
-
-Astro oferece um componente de roteamento `<ViewTransitions />` que pode ser adicionado ao `<head>` de uma página para controlar as transições de página conforme você navega para outras páginas. Ele fornece um leve roteador no lado do cliente que [intercepta a navegação](#processo-de-navegação-no-lado-do-cliente) e permite você personalizar a transição entre páginas.
-
-Adicione esse componente em um componente `.astro` reutilizável, como um cabeçalho ou layout em comum, para ter [transições de página animadas através de todo o seu site (modo SPA)](#transições-de-visualização-em-todo-o-site-modo-spa).
-
-O suporte para transições de visualização do Astro é possível graças à nova API de [Transições de Visualização](https://developer.chrome.com/docs/web-platform/view-transitions/) do navegador e também inclui:
-
-- Algumas [opções de animação integradas](#diretivas-de-animação-integradas), como `fade`, `slide` e `none`.
-- Suporte a animações de navegação tanto avançando quanto retornando.
-- A habilidade de [customizar completamente todos os aspectos da animação de transição](#customizando-animações), e construir suas próprias animações.
-- A opção de [impedir navegação no lado do cliente para links que não são páginas](#prevenção-de-navegação-do-lado-do-cliente).
-- [Controle sobre o comportamento de fallback](#controle-de-fallback) para navegadores que ainda não suportam as APIs de Transição de Visualização.
-- Suporte automático para [`prefers-reduced-motion`](#prefers-reduced-motion).
-
-
-:::note
-Por padrão, toda página irá utilizar a navegação regular, da página inteira, do navegador. Você deve optar pelas transições de visualização e pode utilizá-las seja por página ou no site inteiro.
-:::
-
-## Adicionando Transições de Visualização em uma Página
-
-Opte por utilizar transições de visualização em páginas individuais importando e adicionando o componente de roteamento `<ViewTransitions />` ao `<head>` de toda página desejada.
-
-```astro title="src/pages/index.astro" ins={2,7}
----
-import { ViewTransitions } from 'astro:transitions';
----
-<html lang="pt-BR">
- <head>
- <title>Minha página inicial
-
Título
-Olá
-``` - -📚 Veja nossa [página de referência de diretivas](/pt-br/reference/directives-reference/#definevars) para saber mais sobre `define:vars`. - -### Passando `class` para um componente filho - -No Astro, atributos HTML como `class` não são passados automaticamente para componente filhos. - -Ao invés disso, aceite uma prop `class` no componente filho e aplique-a no elemento raiz. Ao fazer desestruturação, você precisa renomeá-la, pois `class` é uma [palavra reservada](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#palavras-chave_reservadas_do_ecmascript_2015) no JavaScript. - -Ao usar a estratégia de estilo com escopo padrão, você também deve passar o atributo `data-astro-cid-*`. Você pode fazer isso passando o `...rest` das props para o componente. Se você alterou a propriedade `scopedStyleStrategy` para `'class'` ou `'where'`, a prop `...rest` não é necessária. - -```astro title="src/components/MeuComponente.astro" {2,4} ---- -const { class: nomeClasse, ...resto } = Astro.props; ---- -
-
-```
-
-```astro title="src/pages/index.astro"
----
-import MeuComponente from "../components/MeuComponente.astro"
----
-
-Meu texto
-Meu texto
-``` - -## Estilos Externos - -Há duas formas para incluir folhas de estilos globais e externas: uma importação ESM para arquivos dentro de seu projeto, e com um link URL absoluto para arquivos em seu diretório `public/` ou disponíveis fora de seu projeto. - -📚 Leia mais sobre como utilizar [assets estáticos](/pt-br/guides/imports/) localizados no diretório `public/` ou `src/`. - -### Importe uma Folha de Estilos Local - -:::caution[Utilizando um pacote do npm?] -Você talvez precise atualizar o seu astro.config quando estiver importando CSS de pacotes do npm. Veja a [seção de importação de uma folha de estilos de um pacote do npm](#importe-uma-folha-de-estilos-de-um-pacote-do-npm) abaixo. -::: - -Você pode importar folhas de estilos no frontmatter do seu componente Astro usando a sintaxe de importação ESM. Importação de CSS funcionam como [qualquer outra importação ESM em um componente Astro](/pt-br/basics/astro-components/#o-script-do-componente), que deve ser referenciada **relativo para o componente** e obrigatoriamente deve ser escrito no **início** do script do seu componente junto com outras importações. - -```astro title="src/pages/index.astro" {4} ---- -// Astro irá fazer bundle e otimizar este CSS para você automaticamente -// Isto também funciona para arquivos pré-processados como .scss, .styl, etc. -import '../estilos/utils.css'; ---- - -``` - -`import` de CSS por meio de ESM é suportado dentro de qualquer arquivo JavaScript, incluindo componentes JSX como React e Preact. Isto pode ser útil para escrever estilos por componente de forma granular para seus componentes React. - -### Importe uma Folha de Estilos de um Pacote do NPM - -Você talvez precise incluir uma folha de estilos de um pacote externo. Isso é especialmente comum para utilitários como [Open Props](https://open-props.style/). Se seu pacote **recomenda usar uma extensão de arquivo** (ex.: `nome-do-pacote/estilos.css` ao invés de `nome-do-pacote/estilos`), isso deve funcionar como qualquer importação de uma folha de estilos local. - -```astro {3} ---- -// src/pages/página-qualquer.astro -import 'nome-do-pacote/estilos.css'; ---- - -``` - -Se seu pacote **não recomenda usar uma extensão de arquivo** (ex.: `nome-do-pacote/estilos`), antes, você vai precisar atualizar sua configuração Astro! - -Digamos que você está importando um arquivo CSS de um `nome-do-pacote` chamado `normalize` (com a extensão omitida). Para garantir que nós podemos pré-renderizar sua página corretamente, adicione `nome-do-pacote` para [o array vite.ssr.noExternal](https://vite.dev/config/ssr-options.html#ssr-noexternal): - -```js ins={7} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - vite: { - ssr: { - noExternal: ['nome-do-pacote'], - } - } -}) -``` - -:::note -Isso é uma [configuração específica do Vite](https://vite.dev/config/ssr-options.html#ssr-noexternal) que não tem relação com (ou necessita de) [SSR do Astro](/pt-br/guides/on-demand-rendering/). -::: - -Agora, você está livre para importar `nome-do-pacote/normalize`. Isto passará por bundle e será otimizado pelo Astro como qualquer outra folha de estilos local. - - -```astro {3} ---- -// src/pages/página-qualquer.astro -import 'nome-do-pacote/normalize'; ---- - -``` - -### Inclua uma Folha de Estilos Estática via tags link - -Você pode também usar o elemento `` para incluir uma folha de estilos na página. Isto deve ser um caminho de URL absoluto para um arquivo CSS localizado no seu diretório `/public`, ou uma URL para um website externo. Note que valores relativos de href para o elemento `` não são suportados. - -```html title="src/pages/index.astro" {3,5} - - - - - - -``` - -Como esta abordagem usa o diretório `public/`, ela pula o processamento normal do CSS, o processo de bundle e outras otimizações feitas por Astro. Sendo assim, se você precisa desses recursos, use o método de [importe uma folha de estilos](#importe-uma-folha-de-estilos-local) ensinado acima. - -## Ordem de Cascata - -Componentes Astro as vezes terão que analisar múltiplas fontes de CSS. Por exemplo, seu componente pode importar uma folha de estilos CSS, incluir sua própria tag ` -
-
-```
-
-Se duas regras tem a mesma especificidade, então a _ordem de aparecimento_ é avaliada e o valor da última regra terá precedência:
-```astro title="MeuComponente.astro"
-
-- Esse título será roxo! -
-
-
-```
-
-As regras de CSS do Astro são avaliadas nessa ordem de aparecimento:
-
-- **tags `` na head** (menor precedência)
-- **estilos importados**
-- **estilos com escopo** (maior precedência)
-
-### Estilos com Escopo
-
-Utilizar [estilos com escopo](#estilos-com-escopo) não aumenta a _especificidade_ do seu CSS, porém eles sempre irão vir por último na _ordem de aparecimento_. Logo eles tomarão precedência sobre outros estilos de mesma especificidade. Por exemplo, se você importar uma folha de estilos que conflita com um estilo com escopo, o valor do estilo com escopo será aplicado:
-
-```css title="o-faça-roxo.css"
-h1 {
- color: purple;
-}
-```
-```astro title="MeuComponente.astro"
----
-import "./o-faça-roxo.css"
----
-
-- Esse título será vermelho! -
-
-
-```
-
-Se você fazer o estilo importado _mais específico_, ele terá uma maior precedência sobre o estilo com escopo:
-
-```css title="o-faça-roxo.css"
-div > h1 {
- color: purple;
-}
-```
-```astro title="MeuComponente.astro"
----
-import "./o-faça-roxo.css"
----
-
-- Esse título será vermelho! -
-
-
-```
-
-### Ordem de Importação
-
-Ao importar múltiplas folhas de estilo em um componente Astro, as regras de CSS são analisadas na ordem em que são importadas. Uma maior especificidade sempre irá determinar quais estilos serão mostrados, não importa onde o CSS é analisado. Porém, quando estilos conflitantes tem a mesma especificidade, o _último a ser importado_ ganha:
-
-```css title="o-faça-roxo.css"
-div > h1 {
- color: purple;
-}
-```
-```css title="o-faça-verde.css"
-div > h1 {
- color: green;
-}
-```
-```astro title="MeuComponente.astro"
----
-import "./o-faça-verde.css"
-import "./o-faça-roxo.css"
----
-
-- Esse título será roxo! -
-
-
-```
-
-Enquanto tags `
-- Esse título será roxo! -
-
-
-```
-
-:::tip
-Um padrão comum no Astro é importar CSS global dentro de um [componente de Layout](/pt-br/basics/layouts/). Certifique-se de importar o componente de Layout antes de outras importações para que ele tenha a menor precedência.
-:::
-
-### Tags Link
-Folhas de estilo carregadas via [tags link](#inclua-uma-folha-de-estilos-estática-via-tags-link) são analisadas em ordem, antes de quaisquer outros estilos em um arquivo Astro. Portanto, esses estilos terão menor precedência que folhas de estilo importadas e estilos com escopo:
-
-```astro title="index.astro"
----
-import "../components/o-faça-roxo.css"
----
-
-
-
-
-
-
-
- - Esse título será roxo! -
-
-
-
-
-```
-
-## Integrações CSS
-
-Astro vem com suporte para adicionar bibliotecas, ferramentas e frameworks CSS populares para seu projeto como [Tailwind](https://tailwindcss.com) e mais!
-
-### Tailwind
-
-Para usar o Tailwind no seu projeto, instale a [integração para Tailwind oficial do Astro][tailwind] usando o comando `astro add` no seu gerenciador de pacotes:
-
-