Changes to use codepen-snippet component

Author: ErickPetru

src/guide/introduction.md

@@ -1,14 +1,14 @@
 # Introdução
 
-::: tip NOTE
-Já conhece o Vue 2 e só quer saber o que há de novo no Vue 3? Confira o [Gia de Migração](/guide/migration/introduction.html)!
+::: tip NOTA
+Conhece o Vue 2 e só quer ver o que há de novo no Vue 3? Confira o [Guia de Migração](/guide/migration/introduction.html)!
 :::
 
 ## O que é Vue.js?
 
 Vue (pronuncia-se /vjuː/, como **view**, em inglês) é um **framework progressivo** para a construção de interfaces de usuário. Ao contrário de outros _frameworks_ monolíticos, Vue foi projetado desde sua concepção para ser adotável incrementalmente. A biblioteca principal é focada exclusivamente na camada visual (_view layer_), sendo fácil adotar e integrar com outras bibliotecas ou projetos existentes. Por outro lado, Vue também é perfeitamente capaz de dar poder a sofisticadas _Single-Page Applications_ quando usado em conjunto com [ferramentas modernas](../guide/single-file-component.html) e [bibliotecas de apoio](https://github.com/vuejs/awesome-vue#components--libraries).
 
-Se você gostaria de saber mais sobre Vue antes de mergulhar nele, nós <a id="modal-player" class="vuemastery-trigger" href="#">criamos um vídeo</a> passeando pelos princípios básicos e um exemplo de projeto.
+Se você gostaria de saber mais sobre Vue antes de mergulhar nele, nós <a id="modal-player" class="vuemastery-trigger" href="#">criamos um vídeo</a> (em inglês) passeando pelos princípios básicos e um exemplo de projeto.
 
 <common-vuemastery-video-modal/>
 
@@ -20,7 +20,7 @@ Se você gostaria de saber mais sobre Vue antes de mergulhar nele, nós <a id="m
   </ActionLink>
 </p>
 
-::: tip
+::: tip DICA
 O guia oficial supõe um nível intermediário em HTML, CSS e JavaScript. Se você é totalmente novo no mundo do _frontend_, mergulhar diretamente em um _framework_ pode não ser a melhor ideia para começar - compreenda primeiro o básico e depois volte! Experiência anterior com outros _frameworks_ ajuda, mas não é obrigatória.
 :::
 
@@ -91,12 +91,7 @@ const AttributeBinding = {
 Vue.createApp(AttributeBinding).mount('#bind-attribute')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="KKpRVvJ" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Interligação dinâmica de atributos">
-  <span>Veja o exemplo <a href="https://codepen.io/vuejs-br/pen/BaKqxbR">
-  Interligação dinâmica de atributos</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
-  no <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Interligação dinâmica de atributos" slug="BaKqxbR" />
 
 Aqui nos deparamos com algo novo. O atributo `v-bind` que você está vendo é chamado de **diretiva**. Diretivas são prefixadas com `v-` para indicar que são atributos especiais providos pelo Vue, e como você deve ter percebido, aplicam comportamento especial de reatividade ao DOM renderizado. Neste caso, basicamente estamos dizendo: "_mantenha o atributo `title` do elemento sempre atualizado em relação à propriedade `message` da instância atualmente ativa_".
 
@@ -131,13 +126,7 @@ const EventHandling = {
 Vue.createApp(EventHandling).mount('#event-handling')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="dyoeGjW" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Escutas em eventos">
-  <span>Veja o exemplo <a href="https://codepen.io/vuejs-br/pen/LYNgmKY">
-  Escutas em eventos</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
-  no <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
+<common-codepen-snippet title="Escutas em eventos" slug="LYNgmKY" />
 
 Observe que neste método atualizamos o estado da aplicação sem tocar no DOM - todas as manipulações são tratadas pelo Vue e o código que você escreve é focado na lógica de manipulação de dados.
 
@@ -162,12 +151,7 @@ const TwoWayBinding = {
 Vue.createApp(TwoWayBinding).mount('#two-way-binding')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="poJVgZm" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Interligação de mão dupla">
-  <span>Veja o exemplo <a href="https://codepen.io/vuejs-br/pen/JjXmvQg">
-  Interligação de mão dupla</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
-  no <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Interligação de mão dupla" slug="JjXmvQg" />
 
 ## Condicionais e Repetições
 
@@ -195,12 +179,7 @@ Este exemplo demonstra que nós podemos interligar dados não apenas ao texto e
 
 Você pode alterar `seen` de `true` para `false` no exemplo abaixo para ver em ação:
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="oNXdbpB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Renderização condicional">
-  <span>Veja o exemplo <a href="https://codepen.io/vuejs-br/pen/yLOGzVK">
-  Renderização condicional</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
-  no <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Renderização condicional" slug="yLOGzVK" />
 
 Existem mais algumas diretivas, cada uma com sua própria funcionalidade. Por exemplo, a diretiva `v-for` pode ser usada para exibir uma lista de itens usando dados de um Array:
 
@@ -230,12 +209,7 @@ const ListRendering = {
 Vue.createApp(ListRendering).mount('#list-rendering')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="mdJLVXq" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Renderização de listas">
-  <span>Veja o exemplo <a href="https://codepen.io/vuejs-br/pen/GRZPMrZ">
-  Renderização de listas</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
-  no <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Renderização de listas" slug="GRZPMrZ" />
 
 ## Composição com Componentes
 
@@ -319,12 +293,7 @@ app.component('todo-item', {
 app.mount('#todo-list-app')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="VwLxeEz" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Introdução a componentes">
-  <span>Veja o exemplo <a href="https://codepen.io/vuejs-br/pen/gOrZZXJ">
-  Introdução a componentes</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
-  no <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Introdução a componentes" slug="gOrZZXJ" />
 
 Este é um exemplo fictício, mas conseguimos separar nossa aplicação em duas pequenas unidades, sendo que o componente filho está razoavelmente bem desacoplado do componente pai graças à funcionalidade de `props`. Podemos agora melhorar nosso componente `<todo-item>` com _template_ e lógica mais complexos, sem afetar o restante.
 
@@ -350,7 +319,7 @@ Você pode ter notado que componentes Vue são similares aos **Elementos Customi
 
 2. Componentes Vue oferecem importantes recursos não disponíveis em elementos customizados tradicionais, mais notavelmente: fluxo de dados entre componentes, comunicação com eventos customizados e integração com ferramentas de _build_.
 
-Embora o Vue não use elementos personalizados internamente, ele tem [ótima interoperabilidade](https://custom-elements-everywhere.com/#vue) quando se trata de consumir ou distribuir como elementos personalizados. O Vue CLI também suporta a criação de componentes Vue que se registram como elementos personalizados nativos.
+Embora o Vue não use elementos personalizados internamente, há [ótima interoperabilidade](https://custom-elements-everywhere.com/#vue) quando se trata de consumir ou distribuir como elementos personalizados. O Vue CLI também suporta a criação de componentes Vue que se registram como elementos personalizados nativos.
 
 ## Pronto para Mais?