Skip to content

Commit

Permalink
i18n(pt-BR): Update styling.mdx and markdown-content.mdx translat…
Browse files Browse the repository at this point in the history 
…ions (withastro#2394)

* i18n(pt-BR): Update `styling.mdx` translation

* Update `styling.mdx` to most recent changes

* Update `markdown-content.mdx` translation

* Apply suggestion

Co-authored-by: Chris Swithinbank <[email protected]>

Co-authored-by: Chris Swithinbank <[email protected]>
  • Loading branch information
@yanthomasdev @delucis
yanthomasdev and delucis authored Jan 20, 2023
1 parent 3ff3fa2 commit e97adb6
Show file tree
Hide file tree
Showing 2 changed files with 254 additions and 7 deletions.
22 changes: 21 additions & 1 deletion src/pages/pt-br/guides/markdown-content.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ description: Aprenda como criar conteúdo usando Markdown ou MDX no Astro
i18nReady: true
---
import Tabs from '../../../components/tabs/Tabs';
import Since from '~/components/Since.astro'
import Since from '~/components/Since.astro';
import FileTree from '~/components/FileTree.astro';


[Markdown](https://daringfireball.net/projects/markdown/) é comumente usado para criar conteúdo com muito texto, como postagens de blog e documentação. Astro inclui suporte nativo para arquivos Markdown padrão (`.md`).
Expand All @@ -16,6 +17,23 @@ Use um ou ambos os tipos de arquivo para escrever seu conteúdo Markdown!

## Páginas Markdown e MDX

### Coleções de conteúdo

Você pode gerenciar seus arquivos Markdown e MDX no Astro em um diretório especial `src/content/`. [Coleções de conteúdo](/pt-br/guides/content-collections/) te ajudam a organizar seu conteúdo, validar seu frontmatter e a providenciar segurança de tipos do TypeScript automaticamente enquanto trabalha no seu conteúdo.

<FileTree>
- src/content/
- **newsletter/**
- semana-1.md
- semana-2.md
- **autores/**
- grace-hopper.md
- alan-turing.md
</FileTree>


Veja mais sobre como utilizar [coleções de conteúdo no Astro](/pt-br/guides/content-collections/).

### Roteamento baseado em arquivos

Astro trata qualquer arquivo `.md` (ou extensão alternativa suportada) ou `.mdx` dentro do diretório `/src/pages/` como uma página.
Expand Down Expand Up @@ -134,6 +152,8 @@ const {frontmatter} = Astro.props;
</html>
```

Você também pode [estilizar seu Markdown](/pt-br/guides/styling/#estilização-de-markdown) no seu componente de layout.

📚 Aprenda mais sobre [Layouts Markdown](/pt-br/core-concepts/layouts/#layouts-markdownmdx).

### IDs de Títulos
Expand Down
239 changes: 233 additions & 6 deletions src/pages/pt-br/guides/styling.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: ~/layouts/MainLayout.astro
title: Estlização e CSS
description: Aprenda como estilizar componentes com Astro.
title: Estilos e CSS
description: Aprenda como estilizar componentes no Astro com estilos com escopo, CSS externo e ferramentas como Sass e PostCSS.
i18nReady: true
---
import Since from '../../../components/Since.astro';
Expand Down Expand Up @@ -72,6 +72,25 @@ Isto é uma ótima forma de estilizar coisas como postagens em blogs ou document

Estilos com escopo são recomendados para serem usados sempre que possível. E estilos globais, quando necessários.

### Combinando classes com `class:list`

Se você precisa combinar classes em um elemento dinamicamente, você pode utilizar o atributo utilitário `class:list` em arquivos `.astro`.

```astro title="src/components/ClassList.astro" /class:list={.*}/
---
const { isVermelho } = Astro.props;
---
<!-- Se `isVermelho` for verdadeiro, a classe será "caixa vermelha". -->
<!-- Se `isVermelho` for falso, a classe será "caixa". -->
<div class:list={['caixa', { vermelha: isVermelho }]}><slot /></div>
<style>
.caixa { border: 1px solid blue; }
.vermelha { border-color: red; }
</style>
```

📚 Veja nossa página de [referência de diretivas](/pt-br/reference/directives-reference/#classlist) para aprender mais sobre `class:list`.

### Variáveis no CSS

<Since v="0.21.0" />
Expand All @@ -94,6 +113,39 @@ const corPlanoFundo = "rgb(24 121 78)";

📚 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.

```astro title="src/components/MeuComponente.astro" {2,4}
---
const { class: nomeClasse } = Astro.props;
---
<div class={nomeClasse}>
<slot/>
</div>
```

```astro title="src/pages/index.astro"
---
import MeuComponente from "../components/MeuComponente.astro"
---
<style>
.vermelho {
color: red;
}
</style>
<MeuComponente class="vermelho">Isso será vermelho!</MeuComponente>
```

Esse padrão te permite estilizar componentes filhos diretamenta. Astro irá passar o nome de classe com escopo do pai (e.x. `astro-HHNQFKH6`) através da prop `class` automaticamente, incluindo o filho no seu escopo de pai.

:::note[Classes com escopo de componentes pai]
Por conta da prop `class` incluir o filho no escopo do seu pai, é possível que estilos cascatem do pai para o filho. Para evitar que isso tenha efeitos colaterais indesejados, certifique-se de utilizar nomes de classe únicos no componente filho.
:::

## 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.
Expand Down Expand Up @@ -162,7 +214,7 @@ import 'nome-do-pacote/normalize';
<html><!-- Sua página aqui --></html>
```

### Inclua uma Folha de Estilos Estática via "link" tags
### Inclua uma Folha de Estilos Estática via tags link

Você pode também usar o elemento `<link>` 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 `<link>` não são suportados.

Expand All @@ -178,6 +230,173 @@ Você pode também usar o elemento `<link>` para incluir uma folha de estilos na

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 `<style>` tag *e* ser renderizada dentro de um layout que importa CSS.

Quando regras conflitantes de CSS são aplicadas ao mesmo elemento, navegadores primeiro utilizam _especificidade_ e depois _ordem de aparecimento_ para determinar qual valor mostrar.

Se uma regra é mais _específica_ que outra, não importa onde a regra de CSS aparece, seu valor terá precedência:

```astro title="MeuComponente.astro"
<style>
h1 { color: red }
div > h1 {
color: purple
}
</style>
<div>
<h1>
Esse título será roxo!
</h1>
</div>
```

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"
<style>
h1 { color: purple }
h1 { color: red }
</style>
<div>
<h1>
Esse título será vermelho!
</h1>
</div>
```

As regras de CSS do Astro são avaliadas nessa ordem de aparecimento:

- **tags `<link>` 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ê importart 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"
---
<style>
h1 { color: red }
</style>
<div>
<h1>
Esse título será vermelho!
</h1>
</div>
```

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"
---
<style>
h1 { color: red }
</style>
<div>
<h1>
Esse título será roxo!
</h1>
</div>
```

### 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"
---
<style>
h1 { color: red }
</style>
<div>
<h1>
Esse título será roxo!
</h1>
</div>
```

Enquanto tags `<style>` possuem escopo e apenas é aplicada ao componente que a declara, CSS _importado_ pode "vazar". Importar um componente aplica qualquer CSS que ele importa, mesmo que o componente nunca seja utilizado:

```astro title="ComponenteRoxo.astro"
---
import "./o-faça-roxo.css"
---
<div>
<h1>Eu importo CSS roxo.</h1>
</div>
```
```astro title="MeuComponente.astro"
---
import "./o-faça-verde.css"
import ComponenteRoxo from "./ComponenteRoxo.astro";
---
<style>
h1 { color: red }
</style>
<div>
<h1>
Esse título será roxo!
</h1>
</div>
```

:::tip
Um padrão comum no Astro é importar CSS global dentro de um [componente de Layout](/pt-br/core-concepts/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"
---
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<link rel="stylesheet" href="/styles/o-faça-azul.css" />
</head>
<body>
<div>
<h1>Isso será roxo</h1>
</div>
</body>
</html>
```

## Integrações CSS

Expand All @@ -190,7 +409,7 @@ Astro vem com suporte para adicionar bibliotecas, ferramentas, e frameworks CSS

Astro suporta pré-processadores tais como [Sass][sass], [Stylus][stylus], e [Less][less] através de [Vite][vite-preprocessors].

### Sass
### Sass e SCSS

```shell
npm install -D sass
Expand Down Expand Up @@ -221,7 +440,7 @@ Você pode também usar todos os pré-processadores CSS listados acima dentro de

## PostCSS

Astro vem com PostCSS incluído como parte de [Vite](https://vitejs.dev/guide/features.html#postcss). E para configurar PostCSS para seu projeto, crie um arquivo `postcss.config.cjs` na raiz de seu projeto. Você pode importar plugins usando `require()` após os instalar (por exemplo `npm i autoprefixer`).
Astro vem com PostCSS incluído como parte de [Vite](https://vitejs.dev/guide/features.html#postcss). E para configurar PostCSS para seu projeto, crie um arquivo `postcss.config.cjs` na raiz de seu projeto. Você pode importar plugins usando `require()` após os instalar (por exemplo `npm install autoprefixer`).

```js title="postcss.config.cjs" ins={3-4}
module.exports = {
Expand Down Expand Up @@ -255,6 +474,14 @@ Em Astro, Vue suporta os mesmos métodos que `vue-loader` suporta:

Em Astro, Svelte também funciona como esperado: [Documentação de estilização no Svelte][svelte-style].

## Estilização de Markdown

Quaisquer métodos de estilização no Astro estão disponíveis em um [componente de layout Markdown](/pt-br/core-concepts/layouts/#layouts-markdownmdx).

Você pode aplicar estilos globais ao seu conteúdo Markdown ao adicionar [tags `<style>`](#estilos-globais) e [folhas de estilo importadas](#estilos-externos) ao layout que envolve o conteúdo da sua página. Você também pode adicionar [integrações CSS](#integrações-css) incluindo [Tailwind](/pt-br/guides/integrations-guide/tailwind/).

Se você estiver utilizando Tailwind, o [plugin typography](https://tailwindcss.com/docs/typography-plugin) pode ser útil para estilizar Markdown.

## Avançado

:::caution
Expand All @@ -275,7 +502,7 @@ import estilosCSSBruto from '../estilos/principal.css?raw';
<style is:inline set:html={estilosCSSBruto}></style>
```

Veja a [documentação do Vite](https://vitejs.dev/guide/assets.html#importing-asset-as-url) para detalhes completos.
Veja a [documentação do Vite](https://vitejs.dev/guide/assets.html#importing-asset-as-string) para detalhes completos.

### Importação de CSS com `?url`

Expand Down

0 comments on commit e97adb6

Please sign in to comment.