feat: add diagrams (#613)

content/en/guides/directory-structure/components.md

@@ -4,6 +4,8 @@ description: The components directory contains your Vue.js Components. Component
 position: 3
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/03_components?fontsize=14&hidenavigation=1&theme=dark
+img: /guides/components.png
+imgAlt: nuxt components module
 questions:
   - question:
     answers:
@@ -75,6 +77,8 @@ See the chapter on [fetch()](/guides/features/data-fetching#the-fetch-method) fo
 
 ## Components Discovery
 
+<app-modal :src="img" :alt="imgAlt"></app-modal>
+
 Starting from `v2.13`, Nuxt can auto import your components when used in your templates, to activate this feature, set `components: true` in your configuration:
 
 ```js{}[nuxt.config.js]

content/en/guides/directory-structure/content.md

@@ -3,6 +3,8 @@ title: content
 description: Empower your Nuxt.js application with `@nuxtjs/content` module where you can write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
 position: 4
 category: directory-structure
+img: /guides/nuxt-content.svg
+imgAlt: nuxt content module
 questions:
   - question: What is the default directory name of the directory where you add your markdown files?
     answers:
@@ -70,6 +72,8 @@ questions:
 
 Empower your Nuxt.js application with `@nuxtjs/content` module where you can write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
 
+<app-modal :src="img" :alt="imgAlt"></app-modal>
+
 ### Hot reload in development
 
 The content module is blazing fast when it comes to hot reloading in development due to not having to go through webpack when you make changes to your markdown files. You can also listen to the `content:update` event and create a plugin so that every time you update a file in your content directory it will dispatch a fetchCategories method for example.

content/pt/guides/directory-structure/components.md

@@ -4,6 +4,8 @@ description: O diretório components contém seus componentes Vue.js. Os compone
 position: 3
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/03_components?fontsize=14&hidenavigation=1&theme=dark
+img: /guides/components.png
+imgAlt: nuxt components module
 questions:
   - question:
     answers:
@@ -75,6 +77,8 @@ Veja o capítulo sobre [fetch()](/guides/features/data-fetching#the-fetch-method
 
 ## Descoberta de componentes
 
+<app-modal :src="img" :alt="imgAlt"></app-modal>
+
 A partir de `v2.13`, Nuxt pode importar automaticamente seus componentes quando usados ​​em seus templates, para ativar este recurso, defina`components: true` em sua configuração:
 
 ```js{}[nuxt.config.js]

content/pt/guides/directory-structure/content.md

@@ -3,6 +3,8 @@ title: content
 description: Empodere sua aplicacão Nuxt.js com o módulo `@nuxtjs/content`, no qual você pode escrever em um diretório `content/` e requisitar seus arquivos Markdown, JSON, YAML e CSV através de um API no semelhante ao MongoDB, agindo como um **CMS Headless baseado em Git**.
 position: 4
 category: directory-structure
+img: /guides/nuxt-content.svg
+imgAlt: nuxt content module
 questions:
   - question: Qual é o nome do diretório padrão onde você adiciona seus arquivos markdown?
     answers:
@@ -70,6 +72,8 @@ questions:
 
 Empodere sua aplicacão Nuxt.js com o módulo `@nuxtjs/content`, no qual você pode escrever em um diretório `content/` e requisitar seus arquivos Markdown, JSON, YAML e CSV através de uma API no semelhante ao MongoDB, agindo como um **CMS Headless baseado em Git**.
 
+<app-modal :src="img" :alt="imgAlt"></app-modal>
+
 ### Hot reload no desenvolvimento
 
 O módulo content é extremamente rápido quando se trata de hot reloading no desenvolvimento, devido a não ter que passar pelo webpack ao fazer alterações em seus arquivos markdown. Você também pode ouvir o evento `content:update` e criar um plugin para que toda vez que você atualizar um arquivo em seu diretório content ele despache um método fetchCategories, por exemplo.