i18n(pt-BR): update tutorial/4-layout files (#9529)

* i18n(pt-BR): update tutorial/4-layouts/1.mdx * i18n(pt-BR): update `tutorial/4-layouts/2.mdx` file --------- Co-authored-by: Yan <[email protected]>
withastro · Oct 2, 2024 · bf2cd17 · bf2cd17
1 parent 2974c7f
commit bf2cd17
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/src/content/docs/pt-br/tutorial/4-layouts/1.mdx b/src/content/docs/pt-br/tutorial/4-layouts/1.mdx
@@ -11,7 +11,7 @@ import Checklist from '~/components/Checklist.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
+import { Steps } from '@astrojs/starlight/components';
 
 
 <PreCheck>
@@ -24,7 +24,8 @@ Você ainda tem alguns componentes Astro repetidamente renderizados em cada pág
 
 ## Crie seu primeiro componente de layout
 
-1. Crie um novo arquivo em `src/layouts/BaseLayout.astro`. (Você irá preciasr criar uma nova pasta `layouts` primeiro.)
+<Steps>
+1. Crie um novo arquivo em `src/layouts/BaseLayout.astro`. (Você precisará criar uma nova pasta `layouts` primeiro.)
 
 2. Copie **todo o conteúdo** de `index.astro` para seu novo arquivo, `BaseLayout.astro`.
 
@@ -53,9 +54,11 @@ Você ainda tem alguns componentes Astro repetidamente renderizados em cada pág
       </body>
     </html>
     ```
+  </Steps>
 
 ## Utilize seu layout em uma página
 
+<Steps>
 3. Substitua o código em `src/pages/index.astro` com o seguinte:
 
     ```astro title="src/pages/index.astro"
@@ -68,9 +71,9 @@ Você ainda tem alguns componentes Astro repetidamente renderizados em cada pág
     </BaseLayout>
     ```
 
-4. Verifique a pré-visualização do navegador novamente para notar o que (ou, alerta de spoiler: _não_) mudou.
+4. Verifique a pré-visualização do navegador novamente para observar o que (ou, alerta de spoiler: _não_!) mudou.
 
-5. Adicione um elemento `<slot />` ao `src/layouts/BaseLayout.astro` acima do componente de Rodapé, e então verifique a pré-visualização do navegador de sua página Início e note o que realmente _de fato_ mudou desta vez!
+5. Adicione um elemento `<slot />` ao `src/layouts/BaseLayout.astro` acima do componente de rodapé, e então verifique a pré-visualização do navegador de sua página de Início e observe o que de fato _realmente_ mudou desta vez!
 
     ```astro title="src/layouts/BaseLayout.astro" ins={18}
     ---
@@ -98,12 +101,14 @@ Você ainda tem alguns componentes Astro repetidamente renderizados em cada pág
       </body>
     </html>
     ```
+  </Steps>
 
- O `<slot />` te permite injetar (ou "encaixar") **conteúdo filho** escrito entre as tags de abertura e fechamento `<Componente></Componente>` em qualquer arquivo `Componente.astro`.
+ O `<slot />` permite que você injete (ou "encaixe") **conteúdo filho** escrito entre as tags de abertura e fechamento `<Componente></Componente>` em qualquer arquivo `Componente.astro`.
 
 ## Passe valores específicos da página como props
 
-1. Passe o título da página para seu componente de layout de `index.astro` utilizando um atributo do componente: 
+<Steps>
+6. Passe o título da página para seu componente de layout de `index.astro` utilizando um atributo do componente: 
 
     ```astro title="src/pages/index.astro" 'pageTitle={pageTitle}'
     ---
@@ -115,7 +120,7 @@ Você ainda tem alguns componentes Astro repetidamente renderizados em cada pág
     </BaseLayout>
     ```
 
-2. Modifique o script do seu componente de layout `BaseLayout.astro` para receber um título da página através de `Astro.props` ao invés de definí-lo como uma constante.
+7. Modifique o script do seu componente de layout `BaseLayout.astro` para receber um título da página através de `Astro.props` em vez de definí-lo como uma constante.
 
     ```astro title="src/layouts/BaseLayout.astro" del={5} ins={6}
     ---
@@ -127,26 +132,28 @@ Você ainda tem alguns componentes Astro repetidamente renderizados em cada pág
     ---
     ```
 
-3. Verifique a pré-visualização da sua página para verificar que o título da sua página não mudou. Ele tem o mesmo valor, mas agora está sendo renderizado dinamicamente. E agora, cada página individual pode especificar seu próprio título para o layout.
-
+8. Confira a pré-visualização no navegador para verificar que o título da página não mudou. Ele tem o mesmo valor, mas agora está sendo apresentado dinamicamente. E agora, cada página individual poderá especificar seu próprio título para o layout.
+</Steps>
 
 <Box icon="puzzle-piece">
 
 ## Tente você mesmo - Utilize seu layout em todo lugar
 
-**Refatore** suas outras páginas (`blog.astro` e `about.astro`) para que elas utilizem seu novo componente `<BaseLayout>` para renderizar elementos comuns da página.
+**Refatore** suas outras páginas (`blog.astro` e `about.astro`) para que elas utilizem seu novo componente `<BaseLayout>` para mostrar elementos comuns da página. (Nota: usar o BaseLayout para mostrar sua página `about.astro` significa que você perderá a tag `<style>` adicionada ao `<head>` dessa página. Se você quer manter o estilo personalizado `<h1>`, mova a tag de estilo para o corpo do componente de página.)
 
 Não se esqueça de:
 
-- Passar o título da página como props através de um atributo do componente.
+- Passar o título da página como props via atributo do componente.
+
+- Deixar o layout como responsável pela apresentação HTML de quaisquer elementos comuns.
 
-- Deixar o layout como responsável pela renderização HTML de quaisquer elementos comuns.
+- Mover quaisquer tags `<style>` do `<head>` da página com estilos que você quer manter para o modelo de página HTML.
 
-- Excluir qualquer coisa de cada página que aquela página não é mais responsável por renderizar, pois está sendo lidado pelo layout, incluindo: 
+- Excluir qualquer coisa de cada página individual que agora é manipulada pelo layout, incluindo: 
 
   - Elementos HTML
   - Componentes e suas importações 
-  - Regras CSS em uma tag `<style>` (e.x. `<h1>` na sua página Sobre)
+  - Regras CSS em uma tag `<style>` (como `<h1>` na sua página Sobre)
   - Tags `<script>`
 </Box>
 
@@ -156,7 +163,7 @@ Não se esqueça de:
 
 ### Teste seu conhecimento
 
-1. Um componente Astro (arquivo `.astro`) pode funcionar como um(a):
+1. Um componente Astro (arquivo `.astro`) pode funcionar como:
 
     <MultipleChoice>
       <Option>página</Option>
@@ -165,37 +172,37 @@ Não se esqueça de:
       <Option isCorrect>todas as alternativas acima, pois componentes Astro são muito funcionais! 🏗️</Option>
     </MultipleChoice>
 
-2. Para mostrar o título da página na página, você pode:
+2. Para mostrar o título de uma página na página, você pode:
 
     <MultipleChoice>
       <Option>
-        utilizar um elemento HTML padrão na página com texto estático (e.x `<h1>Página Inicial</h1>`)
+        usar um elemento HTML padrão na página com texto estático (como `<h1>Página Inicial</h1>`)
       </Option>
       <Option>
-        utilizar um elemento HTML padrão na página referenciando uma variável definida no script frontmatter do seu componente (e.x. `<h1>{tituloPagina}</h1>`)
+        usar um elemento HTML padrão na página referenciando uma variável definida no script frontmatter do seu componente (como `<h1>{tituloPagina}</h1>`)
       </Option>
       <Option>
-        utilizar um componente de layout na página, passando o título como um atributo do componente (e.x. `<LayoutBase titulo="Página Inicial" />` ou `<LayoutBase titulo={tituloPagina} />`)
+        usar um componente de layout na página, passando o título como atributo do componente (como `<BaseLayout titulo="Página Inicial" />` ou `<BaseLayout titulo={tituloPagina} />`)
       </Option>
       <Option isCorrect>
-        todas as alternativas acima, pois Astro te permite utilizar HTML simples ou incrementá-lo com alguns scripts e componentes! 💪
+        todas as alternativas acima, pois Astro permite que você use HTML simples ou turbine-o com alguns scripts e componentes! 💪
       </Option>
     </MultipleChoice>
 
 3. Informação pode ser passada de um componente para outro ao:
 
     <MultipleChoice>
       <Option>
-        importar um componente de UI e renderizá-lo no template de outro componente
+        importar um componente de UI e mostrá-lo no modelo de outro componente
       </Option>
       <Option>
         passar props para um componente onde ele é renderizado através de um atributo do componente
       </Option>
       <Option>
-        enviar conteúdo HTML para ser renderizado dentro de outro componente utilizando um `<slot />` de placeholder
+        enviar conteúdo HTML para ser mostrado dentro de outro componente utilizando um `<slot />` de placeholder
       </Option>
       <Option isCorrect>
-        todas as alternativas acima, pois Astro foi construido para se aproveitar do design baseado em componentes! 🧩
+        todas as alternativas acima, pois Astro foi construido para aproveitar o design baseado em componentes! 🧩
       </Option>
     </MultipleChoice>
 

diff --git a/src/content/docs/pt-br/tutorial/4-layouts/2.mdx b/src/content/docs/pt-br/tutorial/4-layouts/2.mdx
@@ -3,6 +3,7 @@ type: tutorial
 title: Crie e passe dados para um layout customizado do blog
 description: >-
   Tutorial: Construa seu primeiro blog Astro —
+
   Crie um layout de postagem do blog para seus arquivos Markdown e passe seus
   valores do frontmatter como props
 i18nReady: true
@@ -113,7 +114,6 @@ const { frontmatter } = Astro.props;
 <Box icon="question-mark">
 
 ### Teste seu conhecimento
-
 Você consegue descobrir o que deve ir nos espaços em branco para que os dois componentes juntos a seguir produzam código Astro funcional?
 
 1.  ```markdown title="src/pages/posts/learning-astro.md"