i18n(pt-br): Updated some EC text markers and frames (#1311)

* `overriding-components.md` #1168 * `getting-started.mdx` (#1241) * `components.mdx` (#1102) * `css-and-tailwind.mdx` (#1102) * `customization.mdx` (#1102) * `manual-setup.mdx` (#1102) * translate filename in `components.mdx` * fix: indentation Co-authored-by: Chris Swithinbank <[email protected]> --------- Co-authored-by: Chris Swithinbank <[email protected]>
withastro · Jan 3, 2024 · ba99daa · ba99daa
1 parent 4117bf1
commit ba99daa
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 35 deletions.
diff --git a/docs/src/content/docs/pt-br/getting-started.mdx b/docs/src/content/docs/pt-br/getting-started.mdx
@@ -135,27 +135,27 @@ Como o Starlight é um software em beta, haverá frequentes atualizações e mel
 Certifique-se de atualizar Starlight constantemente!
 :::
 
-Starlight é uma integração Astro, e é atualizado como qualquer outra integração `@astrojs/*`:
+Starlight é uma integração Astro. Você pode atualiza-lo e outros pacotes Astro com o seguinte comando em seu terminal:
 
 <Tabs>
 <TabItem label="npm">
 
 ```sh
-npm install @astrojs/starlight@latest
+npx @astrojs/upgrade
 ```
 
 </TabItem>
 <TabItem label="pnpm">
 
 ```sh
-pnpm upgrade @astrojs/starlight --latest
+pnpm dlx @astrojs/upgrade
 ```
 
 </TabItem>
 <TabItem label="Yarn">
 
 ```sh
-yarn upgrade @astrojs/starlight --latest
+yarn dlx @astrojs/upgrade
 ```
 
 </TabItem>

diff --git a/docs/src/content/docs/pt-br/guides/components.mdx b/docs/src/content/docs/pt-br/guides/components.mdx
@@ -17,7 +17,7 @@ Elas se parecem com tags HTML porém começam com uma letra maiúscula correspon
 
 ```mdx
 ---
-# src/content/docs/index.mdx
+# src/content/docs/exemplo.mdx
 title: Bem-vindo a minha documentação
 ---
 
@@ -39,7 +39,7 @@ Aprenda mais sobre como [utilizar componentes no MDX](https://docs.astro.build/p
 Starlight aplica estilos padrões para seu conteúdo Markdown, como por exemplo, adicionando margem entre elementos.
 Se esses estilos conflitam com a aparência do seu componente, defina a classe `not-content` no seu componente para desabilitá-los.
 
-```astro
+```astro 'class="not-content"'
 ---
 // src/components/Exemplo.astro
 ---
@@ -62,6 +62,8 @@ Você pode mostrar uma interface com abas utilizando os componentes `<Tabs>` e `
 Cada `<TabItem>` tem que ter uma `label` para mostrar aos usuários.
 
 ```mdx
+# src/content/docs/exemplo.mdx
+
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
@@ -87,6 +89,8 @@ Coloque múltiplos cartões no componente `<CardGrid>` para mostrar cartões lad
 Um `<Card>` precisa de um `title` e pode opcionalmente incluir o atributo `icon` para definir o nome de um dos [ícones integrados do Starlight](#todos-os-ícones).
 
 ```mdx
+# src/content/docs/exemplo.mdx
+
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <Card title="Veja isso">Conteúdo interessante que você quer destacar.</Card>
@@ -135,6 +139,8 @@ Um `<LinkCard>` precisa de um `title` e um atributo [`href`](https://developer.m
 Agrupe múltiplos componentes `<LinkCard>` em `<CardGrid>` para mostrar cartões lado a lado quando houver espaço suficiente.
 
 ```mdx
+# src/content/docs/exemplo.mdx
+
 import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
 <LinkCard
@@ -180,6 +186,8 @@ Starlight providencia um conjunto comum de ícones que você pode mostrar em seu
 Cada `<Icon>` requer um [`name`](#todos-os-ícones) e pode opcionalmente incluir um atributo `label`, `size` e `color`.
 
 ```mdx
+# src/content/docs/exemplo.mdx
+
 import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />

diff --git a/docs/src/content/docs/pt-br/guides/css-and-tailwind.mdx b/docs/src/content/docs/pt-br/guides/css-and-tailwind.mdx
@@ -22,7 +22,7 @@ Customize os estilos aplicados ao seu site Starlight ao fornecer arquivos CSS ad
 
 2. Adicione o caminho para seu arquivo CSS ao array `customCss` do Starlight em `astro.config.mjs`:
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -32,8 +32,8 @@ Customize os estilos aplicados ao seu site Starlight ao fornecer arquivos CSS ad
    		starlight({
    			title: 'Documentação com CSS Customizado',
    			customCss: [
-   				// Caminho relativo ao seu arquivo CSS customizado
-   				'./src/styles/customizado.css',
+   +				// Caminho relativo ao seu arquivo CSS customizado
+   +				'./src/styles/customizado.css',
    			],
    		}),
    	],

diff --git a/docs/src/content/docs/pt-br/guides/customization.mdx b/docs/src/content/docs/pt-br/guides/customization.mdx
@@ -28,7 +28,7 @@ Adicionar uma logo customizada ao cabeçalho do site é uma forma rápida de adi
 
 2. Adicione o caminho para sua logo como a opção [`logo.src`](/pt-br/reference/configuration/#logo) do Starlight em `astro.config.mjs`:
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -38,7 +38,7 @@ Adicionar uma logo customizada ao cabeçalho do site é uma forma rápida de adi
    		starlight({
    			title: 'Documentação com Minha Logo',
    			logo: {
-   				src: './src/assets/minha-logo.svg',
+   +				src: './src/assets/minha-logo.svg',
    			},
    		}),
    	],
@@ -49,7 +49,7 @@ Por padrão, a logo será mostrada ao lado do `title` do seu site.
 Se sua imagem da logo já inclui o título do site, você pode esconder o texto do título visualmente ao definir a opção `replacesTitle`.
 O texto do `title` ainda será incluido para leitores de tela para que o cabeçalho continue acessível.
 
-```js
+```js {5}
 starlight({
   title: 'Documentação com Minha Logo',
   logo: {
@@ -78,12 +78,12 @@ Você pode mostrar diferentes versões da sua logo no modo claro e escuro.
 
 2. Adicione o caminho para suas variantes da logo como as opções `light` e `dark` ao invés de `src` em `astro.config.mjs`:
 
-   ```js
+   ```diff lang="js"
    starlight({
      title: 'Documentação com Minha Logo',
      logo: {
-       light: './src/assets/logo-clara.svg',
-       dark: './src/assets/logo-escura.svg',
+   +    light: './src/assets/logo-clara.svg',
+   +    dark: './src/assets/logo-escura.svg',
      },
    }),
    ```
@@ -92,7 +92,7 @@ Você pode mostrar diferentes versões da sua logo no modo claro e escuro.
 
 O Starlight possui suporte integrado para a geração de um sitemap. Habilite a geração do sitemap definindo sua URL como `site` em `astro.config.mjs`:
 
-```js
+```js {4}
 // astro.config.mjs
 
 export default defineConfig({
@@ -108,7 +108,7 @@ Por padrão, páginas do Starlight usam um layout com uma barra de navegação l
 Você pode aplicar um layout de página maior sem barras laterais definindo [`template: splash`](/pt-br/reference/frontmatter/#template) no frontmatter de uma página.
 Isso funciona particularmente bem para páginas iniciais e você pode vê-lo em ação na [página inicial deste site](/pt-br/).
 
-```md
+```md {5}
 ---
 # src/content/docs/index.md
 
@@ -127,7 +127,7 @@ Por padrão, cabeçalhos `<h2>` e `<h3>` são inclusos no índice. Modifique qua
 <Tabs>
   <TabItem label="Frontmatter">
 
-```md
+```md {4-6}
 ---
 # src/content/docs/exemplo.md
 title: Página com apenas H2s no índice
@@ -140,13 +140,13 @@ tableOfContents:
   </TabItem>
   <TabItem label="Configuração global">
 
-```js
+```js {7}
 // astro.config.mjs
 
 defineConfig({
 	integrations: [
 		starlight({
-			title: '',
+			title: 'Documentação com configuração de sumário personalizado',
 			tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 2 },
 		}),
 	],
@@ -161,7 +161,7 @@ Desabilite o índice completamente definindo a opção `tableOfContents` como `f
 <Tabs>
   <TabItem label="Frontmatter">
 
-```md
+```md {4}
 ---
 # src/content/docs/exemplo.md
 title: Página sem um índice
@@ -172,7 +172,7 @@ tableOfContents: false
   </TabItem>
   <TabItem label="Configuração global">
 
-```js
+```js {7}
 // astro.config.mjs
 
 defineConfig({
@@ -195,7 +195,7 @@ Starlight tem suporte integrado para adicionar links de suas contas de redes soc
 Você pode encontrar uma lista completa de ícones suportados na [Referência de Configuração](/pt-br/reference/configuration/#social).
 Nos avise no GitHub ou Discord se você precisa de suporte para outro serviço!
 
-```js
+```js {9-12}
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
@@ -231,7 +231,7 @@ Se o seu projeto Starlight não está na raiz do seu repositório, inclua o cami
 
 Este exemplo mostra o link de edição configurado para a documentação do Starlight, que vive no subdiretório `docs/` da branch `main` do repositório `withastro/starlight` no GitHub:
 
-```js
+```js {9-11}
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
@@ -266,7 +266,7 @@ Você pode customizá-la adicionando um arquivo `404.md` (ou `404.mdx`) ao seu d
 
 Você pode utilizar todas as técnicas de customização e layout de página do Starlight em sua página 404. Por exemplo, a página 404 padrão utiliza o [template `splash`](#layout-da-página) e o componente [`hero`](/pt-br/reference/frontmatter/#hero) no frontmatter:
 
-```md
+```md {4,6-8}
 ---
 title: '404'
 template: splash
@@ -322,7 +322,7 @@ Para utilizar Google Fonts, siga o [guia de configuração do Fontsource](#confi
 
 3. Adicione o caminho para seu arquivo `font-face.css` ao array `customCss` do Starlight em `astro.config.mjs`:
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -332,8 +332,8 @@ Para utilizar Google Fonts, siga o [guia de configuração do Fontsource](#confi
    		starlight({
    			title: 'Documentação Com Meu Tipo de Letra Customizado',
    			customCss: [
-   				// Caminho relativo para seu arquivo CSS @font-face.
-   				'./src/fonts/font-face.css',
+   +				// Caminho relativo para seu arquivo CSS @font-face.
+   +				'./src/fonts/font-face.css',
    			],
    		}),
    	],
@@ -381,7 +381,7 @@ Ele providencia módulos do npm que você pode isntalar para as fontes que você
 
 3.  Adicione os arquivos CSS do Fontsource ao array `customCss` do Starlight em `astro.config.mjs`:
 
-    ```js
+    ```diff lang="js"
     // astro.config.mjs
     import { defineConfig } from 'astro/config';
     import starlight from '@astrojs/starlight';
@@ -391,9 +391,9 @@ Ele providencia módulos do npm que você pode isntalar para as fontes que você
     		starlight({
     			title: 'Documentação Com Meu Tipo de Letra Customizado',
     			customCss: [
-    				// Arquivos do Fontsource para as espessuras de fonte regular e semi-negrito.
-    				'@fontsource/ibm-plex-serif/400.css',
-    				'@fontsource/ibm-plex-serif/600.css',
+    +				// Arquivos do Fontsource para as espessuras de fonte regular e semi-negrito.
+    +				'@fontsource/ibm-plex-serif/400.css',
+    +				'@fontsource/ibm-plex-serif/600.css',
     			],
     		}),
     	],

diff --git a/docs/src/content/docs/pt-br/guides/overriding-components.md b/docs/src/content/docs/pt-br/guides/overriding-components.md
@@ -1,8 +1,6 @@
 ---
 title: Substituindo Componentes
 description: Aprenda como substituir os componentes nativos do Starlight para adicionar elementos personalizados a UI do seu site de documentação.
-sidebar:
-  badge: New
 ---
 
 <!---

diff --git a/docs/src/content/docs/pt-br/manual-setup.mdx b/docs/src/content/docs/pt-br/manual-setup.mdx
@@ -44,7 +44,7 @@ A integração Starlight é configurada no seu arquivo `astro.config.mjs`.
 
 Adicione um `title` para começar:
 
-```js {7-9}
+```js ins={8}
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';