From ef7b19a27aa90283c9e25cbe96639edbbabffbdb Mon Sep 17 00:00:00 2001 From: AntonioHamilton <48774981+AntonioHamilton@users.noreply.github.com> Date: Sat, 8 Feb 2020 12:57:55 -0300 Subject: [PATCH 1/2] =?UTF-8?q?tradu=C3=A7=C3=A3o=20do=20customizing-compo?= =?UTF-8?q?nents.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Acredito que esse arquivo não possa ficar em markdown por causa da tabela, os elementos dela explicitam o markdown e isso pode ser problemático na hora de colocar no site --- docs/contributing/customizing-components.md | 60 +++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 docs/contributing/customizing-components.md diff --git a/docs/contributing/customizing-components.md b/docs/contributing/customizing-components.md new file mode 100644 index 000000000..f83d4a893 --- /dev/null +++ b/docs/contributing/customizing-components.md @@ -0,0 +1,60 @@ +# Customizando Componentes + +Usando o MDX, você pode substituir cada elemento HTML que o Markdown processa por uma implementação customizada. Isso permite que você utilize um conjunto de componentes do sistema de design ao renderizar. + +```javascript +import { MDXProvider } from "@mdx-js/react" +import * as DesignSystem from "your-design-system" + +export default function Layout({ children }) { + return ( +

, + }} + > + {children} + + ) +} +``` + +Os seguintes componentes podem ser customizados com o MDXProvider: + +|Tag|Name|Syntax| +|---|-----|------| +| p | [Parágrafo](https://github.com/syntax-tree/mdast#paragraph) | +| h1 | [Título 1](https://github.com/syntax-tree/mdast#heading) | # | +| h2 | [Título 2](https://github.com/syntax-tree/mdast#heading) | ## | +| h3 | [Título 3](https://github.com/syntax-tree/mdast#heading) | ### | +| h4 | [Título 4](https://github.com/syntax-tree/mdast#heading) | #### | +| h5 | [Título 5](https://github.com/syntax-tree/mdast#heading) | ##### | +| h6 | [Título 6](https://github.com/syntax-tree/mdast#heading) | ###### | +| thematicBreak | [Quebra de tema](https://github.com/syntax-tree/mdast#thematicbreak) | *** | +| blockquote | [Citação](https://github.com/syntax-tree/mdast#blockquote) | > | +| ul | [Lista](https://github.com/syntax-tree/mdast#list) | - | +| ol | [Lista Ordenada](https://github.com/syntax-tree/mdast#list) | 1. | +| li | [Lista](https://github.com/syntax-tree/mdast#listitem) | item | +| table | [Tabela](https://github.com/syntax-tree/mdast#table) | --- \| --- \| --- \| ---| +| tr | [Linha de tabela](https://github.com/syntax-tree/mdast#tablerow) | Linha | Isso \| é \| uma \| Linha de tabela | +| td/th | [Célula de tabela](https://github.com/syntax-tree/mdast#tablecell) | +| pre | [Pre](https://github.com/syntax-tree/mdast#code) | ```js console.log()``` | +| code| [Código](https://github.com/syntax-tree/mdast#code) | `console.log()` | +| em | [Itálico](https://github.com/syntax-tree/mdast#emphasis) | _Itálico_ | +| strong | [Negrito](https://github.com/syntax-tree/mdast#strong) | **Negrito** | +| delete | [Corte horizontal](https://github.com/syntax-tree/mdast#delete) | ~~strikethrough~~ | +| code | [Código em linha](https://github.com/syntax-tree/mdast#inlinecode) | `console.log()` | +| hr | [Quebra / Pausa](https://github.com/syntax-tree/mdast#break) | --- | +| a | [Link](https://github.com/syntax-tree/mdast#link) | or [MDX](https://mdxjs.com) | +| img| [Imagem](https://github.com/syntax-tree/mdast#image) | ![alt](https://mdx-logo.now.sh) | + +### Como isso funciona? +Componentes passados para o MDXProvider são usados para renderizar o elemento HTML que o Markdown cria. Isso usa [React's Context API](https://reactjs.org/docs/context.html) + +### Relacionado +- [MDX components](https://mdxjs.com/getting-started) From 08d6e51a15eb30f06e5a41b50a7906f65e57f4b5 Mon Sep 17 00:00:00 2001 From: AntonioHamilton <48774981+AntonioHamilton@users.noreply.github.com> Date: Tue, 10 Nov 2020 13:20:44 -0300 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Italo --- docs/contributing/customizing-components.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/contributing/customizing-components.md b/docs/contributing/customizing-components.md index f83d4a893..ffe769db1 100644 --- a/docs/contributing/customizing-components.md +++ b/docs/contributing/customizing-components.md @@ -1,4 +1,4 @@ -# Customizando Componentes +# Customizando Componentes Markdown Usando o MDX, você pode substituir cada elemento HTML que o Markdown processa por uma implementação customizada. Isso permite que você utilize um conjunto de componentes do sistema de design ao renderizar. @@ -23,7 +23,7 @@ export default function Layout({ children }) { ) } ``` - +**Note**: you can also provide your own custom components to the `MDXProvider` that make them globally available while writing MDX. You can find more details about this pattern in the [Importing and Using Components in MDX guide](/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes). Os seguintes componentes podem ser customizados com o MDXProvider: |Tag|Name|Syntax| @@ -53,8 +53,8 @@ Os seguintes componentes podem ser customizados com o MDXProvider: | a | [Link](https://github.com/syntax-tree/mdast#link) | or [MDX](https://mdxjs.com) | | img| [Imagem](https://github.com/syntax-tree/mdast#image) | ![alt](https://mdx-logo.now.sh) | -### Como isso funciona? -Componentes passados para o MDXProvider são usados para renderizar o elemento HTML que o Markdown cria. Isso usa [React's Context API](https://reactjs.org/docs/context.html) +## Como isso funciona? +Componentes passados para o MDXProvider são usados para renderizar o elemento HTML que o Markdown cria. Isso usa [React's Context API](https://pt-br.reactjs.org/docs/context.html) -### Relacionado +## Relacionado - [MDX components](https://mdxjs.com/getting-started)