From e97adb6c64315ff958de7760d1b4481031fa83fb Mon Sep 17 00:00:00 2001 From: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Date: Fri, 20 Jan 2023 14:11:16 -0300 Subject: [PATCH] i18n(pt-BR): Update `styling.mdx` and `markdown-content.mdx` translations (#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 Co-authored-by: Chris Swithinbank --- src/pages/pt-br/guides/markdown-content.mdx | 22 +- src/pages/pt-br/guides/styling.mdx | 239 +++++++++++++++++++- 2 files changed, 254 insertions(+), 7 deletions(-) diff --git a/src/pages/pt-br/guides/markdown-content.mdx b/src/pages/pt-br/guides/markdown-content.mdx index 57e9a297d2680..9707efab6b9c8 100644 --- a/src/pages/pt-br/guides/markdown-content.mdx +++ b/src/pages/pt-br/guides/markdown-content.mdx @@ -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`). @@ -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. + + +- src/content/ + - **newsletter/** + - semana-1.md + - semana-2.md + - **autores/** + - grace-hopper.md + - alan-turing.md + + + +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. @@ -134,6 +152,8 @@ const {frontmatter} = Astro.props; ``` +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 diff --git a/src/pages/pt-br/guides/styling.mdx b/src/pages/pt-br/guides/styling.mdx index 0ea9b909321f1..3b36e39afcc0d 100644 --- a/src/pages/pt-br/guides/styling.mdx +++ b/src/pages/pt-br/guides/styling.mdx @@ -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'; @@ -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; +--- + + +
+ +``` + +📚 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 @@ -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; +--- +
+ +
+``` + +```astro title="src/pages/index.astro" +--- +import MeuComponente from "../components/MeuComponente.astro" +--- + +Isso será vermelho! +``` + +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. @@ -162,7 +214,7 @@ import 'nome-do-pacote/normalize'; ``` -### 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 `` 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 `` não são suportados. @@ -178,6 +230,173 @@ Você pode também usar o elemento `` 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 ` +
+

+ Esse título será roxo! +

+
+``` + +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" + +
+

+ Esse título será vermelho! +

+
+``` + +As regras de CSS do Astro são avaliadas nessa ordem de aparecimento: + +- **tags `` 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" +--- + +
+

+ Esse título será vermelho! +

+
+``` + +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" +--- + +
+

+ Esse título será roxo! +

+
+``` + +### 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" +--- + +
+

+ Esse título será roxo! +

+
+``` + +Enquanto tags ` +
+

+ Esse título será roxo! +

+
+``` + +:::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" +--- + + + + + + + Astro + + + +
+

Isso será roxo

+
+ + +``` ## Integrações CSS @@ -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 @@ -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 = { @@ -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 ` ``` -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`