Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/docs/pt-br/basics/astro-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Componentes Astro são extremamente flexíveis. Geralmente, um componente Astro

A coisa mais importante de entender sobre componentes Astro é que eles **não renderizam no lado do cliente**. Eles renderizam para HTML em tempo de build ou sob demanda usando [renderização no lado do servidor (SSR)](/pt-br/guides/on-demand-rendering/). Você pode incluir código JavaScript dentro do frontmatter do seu componente, e todo esse código vai ser removido da página final enviada para o navegador dos seus usuários. O resultado é um site mais rápido, sem nenhum JavaScript adicionado por padrão.

Quando seu componente Astro realmente precisar de interatividade no lado do cliente, você pode adicionar [tags `<script>` tradicionais do HTML](/pt-br/guides/client-side-scripts/) ou [componentes de um Framework de UI](/pt-br/guides/framework-components/#hidratando-componentes-interativos).
Quando seu componente Astro realmente precisar de interatividade no lado do cliente, você pode adicionar [tags `<script>` tradicionais do HTML](/pt-br/guides/client-side-scripts/) ou [componentes de um Framework de UI](/pt-br/guides/framework-components/#hydrating-interactive-components).


## Estrutura do Componente
Expand Down Expand Up @@ -63,7 +63,7 @@ O template do componente está abaixo da cerca do código e determina o HTML que

Se você escrever HTML puro aqui, o seu componente irá renderizar esse HTML em qualquer página Astro em que ele é importado e utilizado.

Porém, a [sintaxe do template do componente Astro](/pt-br/reference/astro-syntax/) também suporta **expressões JavaScript**, tags [`<style>`](/pt-br/guides/styling/#estilização-em-astro) e [`<script>`](/pt-br/guides/client-side-scripts/#utilizando-script-no-astro) do Astro, **componentes importados**, e [**diretivas especiais do Astro**](/pt-br/reference/directives-reference/). Dados e valores definidos no script do componente podem ser utilizados no template do componente para produzir HTML criado dinamicamente.
Porém, a [sintaxe do template do componente Astro](/pt-br/reference/astro-syntax/) também suporta **expressões JavaScript**, tags [`<style>`](/pt-br/guides/styling/#styling-in-astro) e [`<script>`](/pt-br/guides/client-side-scripts/#client-side-scripts) do Astro, **componentes importados**, e [**diretivas especiais do Astro**](/pt-br/reference/directives-reference/). Dados e valores definidos no script do componente podem ser utilizados no template do componente para produzir HTML criado dinamicamente.

```astro title="src/components/MeuPokemonFavorito.astro"
---
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/pt-br/basics/astro-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Astro suporta os seguintes tipos de arquivo no diretório `src/pages/`:

Astro aproveita uma estratégia de roteamento chamada **roteamento baseado em arquivos**. Cada arquivo no diretório `src/pages` torna-se um endpoint no site com base no caminho do arquivo.

Um único arquivo também pode gerar múltiplas páginas utilizando [roteamento dinâmico](/pt-br/guides/routing/#rotas-dinâmicas). Isso permite que você crie páginas mesmo que seu conteúdo esteja fora do diretório especial `/pages/`, como em uma [coleção de conteúdo](/pt-br/guides/content-collections/) ou em um [CMS](/pt-br/guides/cms/).
Um único arquivo também pode gerar múltiplas páginas utilizando [roteamento dinâmico](/pt-br/guides/routing/#dynamic-routes). Isso permite que você crie páginas mesmo que seu conteúdo esteja fora do diretório especial `/pages/`, como em uma [coleção de conteúdo](/pt-br/guides/content-collections/) ou em um [CMS](/pt-br/guides/cms/).

<ReadMore>Leia mais sobre [Roteamento no Astro](/pt-br/guides/routing/).</ReadMore>

Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/pt-br/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Nós convenientemente utilizamos o termo "layout" para componentes Astro que for

Porém, não há nada de especial sobre um componente de layout! Eles podem [receber props](/pt-br/basics/astro-components/#props-do-componente) e [importar e utilizar outros componentes](/pt-br/basics/astro-components/#estrutura-do-componente) como qualquer outro componente Astro. Eles podem incluir [componentes de frameworks de UI](/pt-br/guides/framework-components/) e [scripts no lado do cliente](/pt-br/guides/client-side-scripts/). Eles nem precisam fornecer uma casco completo da página, e podem ser utilizados como templates parciais de UI ao invés disso.

Componentes de layout são comumente inseridos em um diretório `src/layouts` no seu projeto por organização, mas isso não é uma obrigação; você pode escolher colocar eles em qualquer lugar em seu projeto. Você pode até colocar componentes de layout juntamente das suas páginas [prefixando os nomes dos layouts com `_`](/pt-br/guides/routing/#excluindo-páginas).
Componentes de layout são comumente inseridos em um diretório `src/layouts` no seu projeto por organização, mas isso não é uma obrigação; você pode escolher colocar eles em qualquer lugar em seu projeto. Você pode até colocar componentes de layout juntamente das suas páginas [prefixando os nomes dos layouts com `_`](/pt-br/guides/routing/#excluding-pages).

## Layout de Exemplo

Expand Down Expand Up @@ -60,7 +60,7 @@ import LayoutDoMeuSite from '../layouts/LayoutDoMeuSite.astro';

## Layouts Markdown

Layouts de páginas são especialmente úteis para [páginas Markdown e MDX](/pt-br/guides/markdown-content/#páginas-markdown-e-mdx) que caso contrário não teriam nenhuma formatação.
Layouts de páginas são especialmente úteis para [páginas Markdown e MDX](/pt-br/guides/markdown-content/#individual-markdown-pages) que caso contrário não teriam nenhuma formatação.

Astro fornece a propriedade frontmatter especial `layout` para especificar qual componente `.astro` deve ser utilizado como o layout da página.

Expand Down Expand Up @@ -105,7 +105,7 @@ const { frontmatter } = Astro.props;
</html>
```

Você pode definir o [tipo `Props`](/pt-br/guides/typescript/#propriedades-de-componentes) de um layout com os tipos utilitários `MarkdownLayoutProps` ou `MDXLayoutProps`:
Você pode definir o [tipo `Props`](/pt-br/guides/typescript/#component-props) de um layout com os tipos utilitários `MarkdownLayoutProps` ou `MDXLayoutProps`:

```astro title="src/layouts/LayoutBase.astro" ins={2,4-9}
---
Expand Down Expand Up @@ -185,7 +185,7 @@ Astro.props = {
```

:::note
Um layout Markdown/MDX terá acesso a todas as [propriedades exportadas](/pt-br/guides/markdown-content/#propriedades-exportadas) do arquivo pelo `Astro.props` **com algumas diferenças principais:**
Um layout Markdown/MDX terá acesso a todas as [propriedades exportadas](/pt-br/guides/markdown-content/#importing-markdown) do arquivo pelo `Astro.props` **com algumas diferenças principais:**

* Informação de título (ou seja, elementos `h1 -> h6`) está disponível a partir do array `headings`, ao invés de pela função `getHeadings()`.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/pt-br/concepts/islands.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ O mais óbvio benefício de se construir com Ilhas Astro é performance: a maior

Outro benefício é carregamento paralelo. Na ilustração de exemplo acima, a ilha de baixa prioridade "carrossel de imagens" não precisa bloquear a ilha de alta prioridade "cabeçalho". Os dois são carregados em paralelo e hidratados de forma isolada, o que significa que o cabeçalho se torna interativo imediatamente sem precisar esperar que o carrossel, mais pesado, desacelere o carregamento da página.

Melhor ainda, você pode dizer para o Astro exatamente como e quando renderizar cada componente. Se o carrossel de imagens é realmente caro de se carregar, você pode adicionar uma [diretiva de cliente](/pt-br/reference/directives-reference/#diretivas-de-cliente) especial que diz ao Astro para apenas carregar o carrossel de imagens quando ele estiver visível na página. Se o usuário nunca o ver, ele nunca será carregado.
Melhor ainda, você pode dizer para o Astro exatamente como e quando renderizar cada componente. Se o carrossel de imagens é realmente caro de se carregar, você pode adicionar uma [diretiva de cliente](/pt-br/reference/directives-reference/#client-directives) especial que diz ao Astro para apenas carregar o carrossel de imagens quando ele estiver visível na página. Se o usuário nunca o ver, ele nunca será carregado.

No Astro, cabe a você como desenvolvedor explicitamente dizer ao Astro quais componentes na página também precisam ser executados no navegador. Astro irá apenas hidratar exatamente o que é necessário na página e deixar o resto do seu website como HTML estático.

Expand Down
193 changes: 0 additions & 193 deletions src/content/docs/pt-br/guides/authentication.mdx

This file was deleted.

32 changes: 0 additions & 32 deletions src/content/docs/pt-br/guides/backend/index.mdx

This file was deleted.

Loading