Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(pt-BR): Translate upgrade-to/v3 and update smaller 3.0 changes #4386

Merged
merged 11 commits into from
Aug 30, 2023
2 changes: 1 addition & 1 deletion src/content/docs/pt-br/concepts/why-astro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,6 @@ Um dos nossos provérbios favoritos é: **opte por mais complexidade.** Nós fiz

**Astro é um framework web tudo em um que vem com tudo o que você precisa para construir um website.** Astro inclui uma sintaxe de componentes, roteamento baseado em arquivos, manipulação de assetes, processo de build, bundling, otimizações, busca de dados e mais. Você pode construir ótimos websites sem se aproximar de funcionalidades fora do núcleo do Astro.

Se você precisar de mais controle, você pode expandir o Astro com [+100 integrações](https://astro.build/integrations/) como [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), [otimização de imagens](https://www.npmjs.com/package/@astrojs/image) e mais. [Conectar o seu CMS favorito](/pt-br/guides/cms/) ou [fazer deploy para seu host favorito](/pt-br/guides/deploy/) com apenas um comando.
Se você precisar de mais controle, você pode expandir o Astro com [+100 integrações](https://astro.build/integrations/) como [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx) e mais. [Conectar o seu CMS favorito](/pt-br/guides/cms/) ou [fazer deploy para seu host favorito](/pt-br/guides/deploy/) com apenas um comando.

Astro é agnóstico a UI, o que significa que você pode **Trazer o seu Próprio Framework de UI (BYOF, do inglês, "Bring Your Own Ui Framework")**. React, Preact, Solid, Svelte, Vue e Lit são todos oficialmente suportados no Astro. Você pode até misturar diferentes frameworks na mesma página, fazendo migrações futuras mais fáceis e prevenindo que você fique preso a um único framework.
127 changes: 61 additions & 66 deletions src/content/docs/pt-br/core-concepts/endpoints.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,39 @@ O Astro permite que você crie endpoints customizados para servir e processar to
Em sites gerados de forma estática, seus endpoints customizados são chamados durante a fase de build para produzir arquivos estáticos. Já em sites usando o [modo SSR](/pt-br/guides/server-side-rendering/#habilitando-o-ssr-em-seu-projeto) seus endpoints customizados se tornarão endpoints reais executados a cada requisição. Endpoints estáticos e SSR são definidos de maneira similar, mas os endpoints SSR suportam funcionalidades adicionais.

## Endpoints de Arquivos Estáticos

Para criar um endpoint customizado, adicione um arquivo `.js` ou `.ts` no diretório `/pages`. A extensão do arquivo será removida durante o processo de build, portanto o nome do arquivo deve conter a extensão que você deseja que os dados usem, por exemplo `src/pages/data.json.ts` se tornará a rota `/data.json`.

Seus endpoints devem exportar uma função `get` (opcionalmente assíncrona) que recebe um [objeto de contexto](/pt-br/reference/api-reference/#contexto-de-endpoint) com propriedades similares a global `Astro`. Ele retorna um objeto com um `body`, que o Astro irá chamar durante a build e utilizar seu conteúdo para gerar o arquivo.
Seus endpoints devem exportar uma função `GET` (opcionalmente assíncrona) que recebe um [objeto de contexto](/pt-br/reference/api-reference/#contexto-de-endpoint) com propriedades similares a global `Astro`. Aqui, ele retorna um objeto `Response` com um `name` e `url`, que o Astro irá chamar durante a build e utilizar seu conteúdo para gerar o arquivo.

```ts
// Exemplo: src/pages/builtwith.json.ts
// Se tornará: /builtwith.json
export async function get({params, request}) {
return {
body: JSON.stringify({
export async function GET({params, request}) {
return new Response(
JSON.stringify({
name: 'Astro',
url: 'https://astro.build/',
}),
};
url: 'https://astro.build/'
})
)
}
```

O objeto retornado também pode conter a propriedade `encoding`. Ela deve ser uma string válida do tipo [`BufferEncoding`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/bdd02508ddb5eebcf701fdb8ffd6e84eabf47885/types/node/buffer.d.ts#L169) aceita pelo método `fs.writeFile` do Node.js. Por exemplo, para gerar uma imagem no formato png retornamos:
Desde o Astro v3.0, 0 objeto `Response` retornado não tem mais que incluir a propriedade `encoding`. Por exemplo, para produzir uma imagem binária png:

```ts title="src/pages/builtwith.json.ts" {6}
export async function get({ params, request }) {
```ts title="src/pages/builtwith.json.ts" {3}
export async function GET({ params, request }) {
const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
const buffer = Buffer.from(await response.arrayBuffer());
return {
body: buffer,
encoding: 'binary',
};
};
return new Response(await response.arrayBuffer());
}
```

Também é possível adicionar validação de tipo à sua função com o tipo `APIRoute`:

```ts
import type { APIRoute } from 'astro';

export const get: APIRoute = async ({ params, request }) => {
...
export const GET: APIRoute = async ({ params, request }) => {...}
```

### Roteamento dinâmico e a propriedade `params`
Expand All @@ -56,45 +52,47 @@ Os endpoints suportam as mesmas funcionalidades de [roteamento dinâmico](/pt-br
```ts title="src/pages/api/[id].json.ts"
import type { APIRoute } from 'astro';

const usuarios = ["Sarah", "Chris", "Dan"]
const usuarios = ["Sarah", "Chris", "Yan", "Elian"]

export const get: APIRoute = ({ params, request }) => {
export const GET: APIRoute = ({ params, request }) => {
const id = params.id;
return {
body: JSON.stringify({
return new Response(
JSON.stringify({
name: usuarios[id]
})
}
};
)
}

export function getStaticPaths () {
export function getStaticPaths() {
return [
{ params: { id: "0"} },
{ params: { id: "1"} },
{ params: { id: "2"} },
{ params: { id: "3"} }
]
}
```

Dessa forma serão gerados três endpoints JSON durante a build: `/api/0.json`, `/api/1.json` e `/api/2.json`. O roteamento dinâmico com endpoints funciona da mesma forma que nas páginas, porém, como um endpoint é uma função e não uma página, [props](/pt-br/reference/api-reference/#passagem-de-dados-com-props) não são suportadas.
Isso irá gerar quatro endpoints JSON durante a build: `/api/0.json`, `/api/1.json`, `/api/2.json` e `/api/3.json`. O roteamento dinâmico com endpoints funciona da mesma forma que nas páginas, porém, como um endpoint é uma função e não uma página, [props](/pt-br/reference/api-reference/#passagem-de-dados-com-props) não são suportadas.

### `request`

Todos os endpoints recebem uma propriedade `request`, porém no modo estático você só tem acesso a propriedade `request.url`. Ela retorna o URL completo do endpoint atual e funciona da mesma forma que [Astro.request.url](/pt-br/reference/api-reference/#astrorequest) funciona em páginas.

```ts title="src/pages/request-path.json.ts"
import type { APIRoute } from 'astro';

export const get: APIRoute = ({ params, request }) => {
return {
body: JSON.stringify({
export const GET: APIRoute = ({ params, request }) => {
return new Response(JSON.stringify({
path: new URL(request.url).pathname
})
};
)
}
```

## Endpoints do Servidor (Rotas de API)
Tudo descrito na seção de endpoints de arquivos estáticos também pode ser utilizado no modo SSR: arquivos podem exportar uma função `get` que recebe um [objeto de contexto](/pt-br/reference/api-reference/#contexto-de-endpoint) com propriedades similares a global `Astro`.

Tudo descrito na seção de endpoints de arquivos estáticos também pode ser utilizado no modo SSR: arquivos podem exportar uma função `GET` que recebe um [objeto de contexto](/pt-br/reference/api-reference/#contexto-de-endpoint) com propriedades similares a global `Astro`.

Porém, diferente do modo `static`, quando você configura o modo `server`, os endpoints serão construídos no momento em que são requisitados. Isso desbloqueia novas funcionalidades que estão indisponíveis durante a build e permite que você construa rotas de API que respondem requisições e seguramente executam código no servidor em runtime.

Expand All @@ -109,7 +107,7 @@ Os endpoints do servidor tem acesso a propriedade `params` sem exportar a funç
```js title="src/pages/[id].json.js"
import { getProduct } from '../db';

export async function get({ params }) {
export async function GET({ params }) {
const id = params.id;
const product = await getProduct(id);

Expand All @@ -120,12 +118,14 @@ export async function get({ params }) {
});
}

return new Response(JSON.stringify(product), {
status: 200,
headers: {
"Content-Type": "application/json"
return new Response(
JSON.stringify(product), {
status: 200,
headers: {
"Content-Type": "application/json"
}
}
});
);
}
```

Expand All @@ -134,7 +134,7 @@ Esse código responderá a qualquer requisição que corresponda à rota dinâmi
No modo SSR, certos provedores requerem que o cabeçalho `Content-Type` retorne uma imagem. Neste caso, utilize um objeto `Response` para especificar uma propriedade `headers`. Por exemplo, para produzir uma imagem `.png` binária:

```ts title="src/pages/astro-logo.png.ts"
export async function get({ params, request }) {
export async function GET({ params, request }) {
const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
const buffer = Buffer.from(await response.arrayBuffer());
return new Response(buffer, {
Expand All @@ -144,55 +144,49 @@ export async function get({ params, request }) {
```

### Métodos HTTP
Além da função `get`, você pode exportar uma função com o nome de qualquer [método HTTP](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods). Assim, quando uma requisição for recebida, o Astro irá checar o método e chamar a função correspondente.

Também é possível exportar uma função `all` para corresponder a todos os métodos que já não tenham suas respectivas funções exportadas. Se houver uma requisição sem método correspondente, ela será redirecionada para a sua [página de 404](/pt-br/core-concepts/astro-pages/#página-customizada-de-erro-404).
Além da função `GET`, você pode exportar uma função com o nome de qualquer [método HTTP](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods). Assim, quando uma requisição for recebida, o Astro irá checar o método e chamar a função correspondente.

:::note
Como `delete` é uma palavra reservada do JavaScript, exporte uma função chamada `del` para corresponder ao método delete.
:::
Também é possível exportar uma função `ALL` para corresponder a todos os métodos que já não tenham suas respectivas funções exportadas. Se houver uma requisição sem método correspondente, ela será redirecionada para a sua [página de 404](/pt-br/core-concepts/astro-pages/#página-customizada-de-erro-404).

```ts title="src/pages/methods.json.ts"
export const get: APIRoute = ({ params, request }) => {
return {
body: JSON.stringify({
message: "Método GET"
export const GET: APIRoute = ({ params, request }) => {
return new Response(JSON.stringify({
message: "Isso foi um GET!"
})
}
};
)
}

export const post: APIRoute = ({ request }) => {
return {
body: JSON.stringify({
message: "Método POST!"
export const POST: APIRoute = ({ request }) => {
return new Response(JSON.stringify({
message: "Isso foi um POST!"
})
}
)
}

export const del: APIRoute = ({ request }) => {
return {
body: JSON.stringify({
message: "Método DELETE!"
export const DELETE: APIRoute = ({ request }) => {
return new Response(JSON.stringify({
message: "Isso foi um DELETE!"
})
}
)
}

export const all: APIRoute = ({ request }) => {
return {
body: JSON.stringify({
message: `Método ${request.method}!`
export const ALL: APIRoute = ({ request }) => {
return new Resonse(JSON.stringify({
message: `Isso foi um ${request.method}!`
})
}
)
}
```

<RecipeLinks slugs={["pt-br/recipes/captcha", "pt-br/recipes/build-forms-api" ]}/>

### `request`

No modo SSR, a propriedade `request` retorna um objeto [`Request`](https://developer.mozilla.org/pt-BR/docs/Web/API/Request) completamente utilizável que se refere a requisição atual. Isso permite que você aceite dados e cheque cabeçalhos:

```ts title="src/pages/test-post.json.ts"
export const post: APIRoute = async ({ request }) => {
export const POST: APIRoute = async ({ request }) => {
if (request.headers.get("Content-Type") === "application/json") {
const body = await request.json();
const name = body.name;
Expand All @@ -207,12 +201,13 @@ export const post: APIRoute = async ({ request }) => {
```

### Redirecionamentos

O contexto do endpoint exporta um utilitário `redirect()` similar ao `Astro.redirect`:

```js title="src/pages/links/[id].js" {14}
import { getLinkUrl } from '../db';

export async function get({ params, redirect }) {
export async function GET({ params, redirect }) {
const { id } = params;
const link = await getLinkUrl(id);

Expand Down
4 changes: 0 additions & 4 deletions src/content/docs/pt-br/core-concepts/project-structure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,6 @@ Alguns arquivos (como componentes Astro) nem sequer são enviados ao navegador c
Enquanto esse guia descreve algumas convenções populares usadas na comunidade do Astro, as únicas pastas reservadas pelo Astro são `src/pages/` e `src/content`. Você é livre para renomear e reorganizar quaisquer outras pastas de uma forma que funciona melhor para você.
:::

### `src/assets`

A pasta [`src/assets`](/pt-br/guides/assets/) é a pasta recomendada para armazenar assets (e.x. imagens) a serem processados pelo Astro. Isso não é obrigatório, e esta não é uma pasta especial reservada.

### `src/components`

**Componentes** são pedaços reutilizáveis de código para suas páginas HTML. Eles podem ser [componentes Astro](/pt-br/core-concepts/astro-components/) ou [componentes de frameworks de UI](/pt-br/core-concepts/framework-components/) como React ou Vue. É comum agrupar e organizar todos os componentes do seu projeto nesta pasta.
Expand Down
13 changes: 12 additions & 1 deletion src/content/docs/pt-br/guides/content-collections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,17 @@ const entradasPublicadasBlog = await getCollection('blog', ({ data }) => {
});
```


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
Expand Down Expand Up @@ -706,7 +717,7 @@ Esse guia mostra como converter um projeto com Astro existente com arquivos Mark
import rss from "@astrojs/rss";
import { getCollection } from "astro:content";

export async function get() {
export async function GET() {
const postagens = await getCollection('postagens');
return rss({
title: 'Astro Learner | Blog',
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/pt-br/guides/deploy/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ Você também pode criar um site na Netlify e vincular o seu repositório Git in

### Defina uma versão do Node.js

Se você está usando uma [imagem de build](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) legada (Xenial) na Netlify, certifique-se de que a versão do Node.js está definida. Astro requer `v16.12.0` ou superior.
Se você está usando uma [imagem de build](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) legada (Xenial) na Netlify, certifique-se de que a versão do Node.js está definida. Astro requer `v18.14.1` ou superior.

Você pode [especificar a versão do Node.js na Netlify](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) usando:
- um arquivo [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) em seu diretório base.
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/pt-br/guides/deploy/render.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ Você pode fazer deploy do seu projeto Astro no [Render](https://render.com/), u
4. Dê um nome ao seu site, selecione a branch e especifique o comando de build e diretório de publicação
- **build command:** `npm run build`
- **publish directory:** `dist`
- **Environment variables (advanced)**: Por padrão, o Render utiliza Node.js 14.17.0, mas o Astro [requer uma versão maior](/pt-br/install/auto/#pré-requisitos). Adicione uma variável de ambiente com uma **Variable key** de `NODE_VERSION` e um **Value** de `16.12.0` ou maior para instruir o Render a usar uma versão compatível do Node.js. Alternativamente, adicione um arquivo [`.node-version`](https://render.com/docs/node-version) ou [`.nvmrc`](https://render.com/docs/node-version) em seu projeto para especificar uma versão do Node.js.
- **Environment variables (advanced)**: Por padrão, o Render utiliza Node.js 14.17.0, mas o Astro [requer uma versão maior](/pt-br/install/auto/#pré-requisitos). Adicione uma variável de ambiente com uma **Variable key** de `NODE_VERSION` e um **Value** de `18.14.1` ou maior para instruir o Render a usar uma versão compatível do Node.js. Alternativamente, adicione um arquivo [`.node-version`](https://render.com/docs/node-version) ou [`.nvmrc`](https://render.com/docs/node-version) em seu projeto para especificar uma versão do Node.js.
5. Clique no botão **Create Static Site**
2 changes: 1 addition & 1 deletion src/content/docs/pt-br/guides/deploy/vercel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,4 @@ Você pode utilizar `vercel.json` para sobrescrever o comportamento padrão da V

### Atualizando para Astro 2.0

Astro v2.0 remove suporte para Node 14, então certifique-se de que seu projeto está utilizando **Node `16.12.0` ou maior**. Você pode [definir a versão do Node.js](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings) usada durante a Etapa de Build e Funções Serverless pela página "General" em "Project Settings".
Astro v2.0 remove suporte para Node 14, então certifique-se de que seu projeto está utilizando **Node `18.14.1` ou maior**. Você pode [definir a versão do Node.js](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings) usada durante a Etapa de Build e Funções Serverless pela página "General" em "Project Settings".
10 changes: 5 additions & 5 deletions src/content/docs/pt-br/guides/integrations-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -126,17 +126,17 @@ Para remover uma integração, primeiro desinstale a integração do seu projeto
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm uninstall @astrojs/image
npm uninstall @astrojs/react
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm uninstall @astrojs/image
pnpm uninstall @astrojs/react
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn remove @astrojs/image
yarn remove @astrojs/react
```
</Fragment>
</PackageManagerTabs>
Expand All @@ -146,11 +146,11 @@ Depois, remova a integração do seu arquivo `astro.config.*`:
```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config'

import image from "@astrojs/image";
import react from "@astrojs/react";

export default defineConfig({
integrations: [
image()
react()
]
})
```
Expand Down
Loading