feat(blog): update all posts

assets/css/posts.css

@@ -2,47 +2,27 @@ article > .nuxt-content {
   font-size: 1.125rem;
 }
 
-article > .nuxt-content h2 {
+.nuxt-content h2 {
   margin-top: 30px;
   margin-bottom: 10px;
   font-size: 1.5rem;
   font-weight: bold;
   color: theme('colors.blue-main.700');
 }
 
-article > .nuxt-content .vue {
+.nuxt-content .vue {
   background-color: theme('colors.green-main.400');
   color: white;
   padding: 0 3px;
 }
 
-article > .nuxt-content .code {
+.nuxt-content .code {
   background-color: theme('colors.blue-main.750');
   color: theme('colors.gray-main.950');
   padding: 0 3px;
 }
 
-article > .nuxt-content a {
-  /* TODO: integrate tailwind */
-  text-decoration: none;
-  color: #1f8ed5;
-  font-weight: bold;
-  opacity: 1;
-  border-bottom: solid 1px transparent;
-  -webkit-transition: opacity 0.2s ease-out, border-bottom-color 0.4s ease-out;
-  -moz-transition: opacity 0.2s ease-out, border-bottom-color 0.4s ease-out;
-  -ms-transition: opacity 0.2s ease-out, border-bottom-color 0.4s ease-out;
-  -o-transition: opacity 0.2s ease-out, border-bottom-color 0.4s ease-out;
-  transition: opacity 0.2s ease-out, border-bottom-color 0.4s ease-out;
-}
-
-article > .nuxt-content a:hover {
-  /* TODO: integrate tailwind */
-  opacity: 0.8;
-  border-bottom: solid 1px #1f8ed5;
-}
-
-article > .nuxt-content pre {
+.nuxt-content .nuxt-content-highlight pre {
   border-radius: 5px;
   font-size: 0.875rem;
   margin: 1.5rem 0 2rem;

components/ui/TheLink.vue

@@ -0,0 +1,37 @@
+<template>
+  <a class="link" target="_blank" :href="url">
+    <slot />
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'TheLink',
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.link {
+  text-decoration: none;
+  opacity: 1;
+  border-bottom: solid 1px transparent;
+  -webkit-transition: opacity 0.2s ease-out, border-bottom-color 0.2s ease-out;
+  -moz-transition: opacity 0.2s ease-out, border-bottom-color 0.2s ease-out;
+  -ms-transition: opacity 0.2s ease-out, border-bottom-color 0.2s ease-out;
+  -o-transition: opacity 0.2s ease-out, border-bottom-color 0.2s ease-out;
+  transition: opacity 0.2s ease-out, border-bottom-color 0.2s ease-out;
+
+  @apply text-blue-main-300 font-bold;
+
+  &:hover {
+    opacity: 0.8;
+    border-bottom: solid 1px #1f8ed5;
+  }
+}
+</style>

content/blog/add-i18n-vue.md

@@ -5,7 +5,7 @@ date: 2019-02-01
 timeToRead: 5
 ---
 
-¿Hoy en día quién no necesita acceder a una web y poder visitarla en su propio idioma? La respuesta es obvia y con el plugin <a target='_blank' href='https://kazupon.github.io/vue-i18n/'>vue-i18n</a> podemos configurar nuestra aplicación para que sea multilenguaje.
+¿Hoy en día quién no necesita acceder a una web y poder visitarla en su propio idioma? La respuesta es obvia y con el plugin <the-link url='https://kazupon.github.io/vue-i18n/'>vue-i18n</the-link> podemos configurar nuestra aplicación para que sea multilenguaje.
 
 Para poder seguir estas instrucciones es necesario tener ya generado un proyecto con Vue.
 
@@ -101,7 +101,7 @@ Ahora vamos a usar esas traducciones, para eso, nos vamos a cualquier componente
 <h1>{{ $t('hello') }}</h1>
 ```
 
-Para usar el plugin de internalización simplemente usaremos <span class='code'>\$t</span> y entre paréntesis añadiremos como un string la key deseada.
+Para usar el plugin de internalización simplemente usaremos <span class='code'>$t</span> y entre paréntesis añadiremos como un string la key deseada.
 
 En el caso de tener más elementos dentro del objeto anterior, podremos modificarlo así:
 
@@ -238,6 +238,6 @@ Este cambio se debe a que en el data no tienes acceso a la propiedad <span class
 
 Finalmente, si volvemos a lanzar el comando <span class='code'>npm run serve</span> podremos comprobar los cambios que hemos realizado anteriormente.
 
-He creado un repositorio con todos estos cambios realizados <a target='_blank' href='https://github.com/pablosirera/seed-vue-i18n'>Seed Vue i18n</a>
+He creado un repositorio con todos estos cambios realizados <the-link url='https://github.com/pablosirera/seed-vue-i18n'>Seed Vue i18n</the-link>
 
 <b>P.D.:</b> Quizás has pensado...¿y si tengo muchos textos para traducir? El archivo <span class='code'>i18n.js</span> se puede hacer muy complicado de leer...esto es cierto y para evitarlo se pueden añadir todos los textos en ficheros específicos para cada idioma. De todo esto hablaré con más detenimiento en el próximo post.

content/blog/create-vue-app.md

@@ -0,0 +1,8 @@
+---
+title: 'Crear una aplicación Vue desde cero'
+description: 'Tutorial sobre cómo crear una aplicación vue desde cero'
+date: 2020-05-01
+timeToRead: 5
+---
+
+Llevo un tiempo haciendo directos en

content/blog/deploy-vue-app.md

@@ -13,9 +13,9 @@ Primero de todo, cámbiate a otra rama diferente de master, esta la usaremos par
 git checkout -b github-pages
 ```
 
-El motivo de esto, es que al hacer a continuación el deploy de la aplicación, la carpeta <span class='code'>/dist</span> se subirá a master y no estará el contenido de la aplicación, sino el de la carpeta <span class='code'>/dist</span>.
+El motivo de esto, es que al hacer a continuación el deploy de la aplicación, la carpeta <span class="code">/dist</span> se subirá a master y no estará el contenido de la aplicación, sino el de la carpeta <span class="code">/dist</span>.
 
-En el siguiente paso, habrá que crear el archivo `github-pages.sh` en la raíz del proyecto con el siguiente contenido:
+En el siguiente paso, habrá que crear el archivo <span class="code">github-pages.sh</span> en la raíz del proyecto con el siguiente contenido:
 
 ```shell
 #!/usr/bin/env sh

content/blog/event-bus.md

@@ -70,15 +70,15 @@ export default {
 }
 ```
 
-En el componente donde recibimos el evento cargamos, en el lifecycle <span class='code'>mounted</span>, los eventos que queremos escuchar, para que así, cuando lancemos el <span class='code'>\$emit</span> se llame a nuestro callback que pasamos por parámetro.
+En el componente donde recibimos el evento cargamos, en el lifecycle <span class='code'>mounted</span>, los eventos que queremos escuchar, para que así, cuando lancemos el <span class='code'>$emit</span> se llame a nuestro callback que pasamos por parámetro.
 
-Si solo quisieramos escuchar el evento una sola vez, usaríamos <span class='code'>EventBus.\$once(nameEvent, callback)</span>
+Si solo quisieramos escuchar el evento una sola vez, usaríamos <span class='code'>EventBus.$once(nameEvent, callback)</span>
 
 ## Eliminar el evento
 
-Por último, cabe decir que una vez que queramos terminar de escuchar el evento deberíamos eliminar dicho registro. Para ello usáremos el método <span class='code'>EventBus.\$off</span>, al cual podemos pasarle el nombre del evento que queremos eliminar y un callback o simplemente pasándole el nombre del evento.
+Por último, cabe decir que una vez que queramos terminar de escuchar el evento deberíamos eliminar dicho registro. Para ello usáremos el método <span class='code'>EventBus.$off</span>, al cual podemos pasarle el nombre del evento que queremos eliminar y un callback o simplemente pasándole el nombre del evento.
 
-Si quisiéramos eliminar todos los eventos, simplemente habría que usar <span class='code'>EventBus.\$off()</span>.
+Si quisiéramos eliminar todos los eventos, simplemente habría que usar <span class='code'>EventBus.$off()</span>.
 
 ```js
 import { EventBus } from '@/utils/event-bus.js'

content/blog/scaffolding-vue.md

@@ -51,6 +51,6 @@ La idea de shared es mantener lo nativo de <span class='vue'>Vue</span> en la ca
 
 Por último, me gustaría remarcar que aunque para mi este scaffolding es el más útil para trabajar no tiene que ser así para todo el mundo. Así que os animo a todos a probar día a día cual es el que más se adapta a vuestra forma de trabajo.
 
-Espero que pueda serviros de ayuda y cualquier feedback por <a target='_blank' href='https://twitter.com/pablosirera'>twitter</a> será bienvenido ✌️.
+Espero que pueda serviros de ayuda y cualquier feedback por <the-link url='https://twitter.com/pablosirera'>twitter</the-link> será bienvenido ✌️.
 
-Os dejo también el link al repo de <a target='_blank' href='https://github.com/pablosirera/scaffolding-vue'>github</a>, por si os queréis descargar este ejemplo.
+Os dejo también el link al repo de <the-link url='https://github.com/pablosirera/scaffolding-vue'>github</the-link>, por si os queréis descargar este ejemplo.

plugins/global.js

@@ -1,4 +1,6 @@
 import Vue from 'vue'
 import CustomImage from '@/components/blog/CustomImage.vue'
+import TheLink from '@/components/ui/TheLink.vue'
 
 Vue.component('custom-image', CustomImage)
+Vue.component('the-link', TheLink)

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
           950: '#1a1a1a',
         },
         'blue-main': {
+          300: '#09f',
           400: '#1f8ed5',
           500: '#526488',
           600: '#0366d6',