Emojis personalizados para el blog
emojissuperchulisjeje
0
La última pieza del rompecabezas que era para mi escribir cosas en este blog era poder usar emojis personalizados, así que he diseñado un sistema bastante guapo y sencillo de usar
Voy a explicar rápidamente cómo funciona:
- Subo un emoji como un archivo de imagen cualquiera (.png, .svg, .jpg, etc.) a la carpeta
assets/emojiscon el nombre que quiera. - Escribo
:nombre_del_emoji:y mágicamente se convierte en el emoji personalizado.
Es la puta ostia . Esto le da muchísima personalidad a mi blog, y me encanta. Ahora a dibujar un huevo de expresiones random para poder usarlas en los posts. De hecho ya he cambiado unos cuantos post, os invito a que los revisitéis para encontrar los nuevos emojis
Parte friki
Si no te interesa el código, ignora todo lo siguiente.
El fichero src/_data/emojis.js se encarga de leer todos los ficheros de la carpeta assets/emojis, y crear un objeto con el nombre del emoji sin la extensión como clave, y la ruta de la imagen como valor.
Luego se configura un preprocessor de 11ty en la configuración que convierte los textos :nombre_del_emoji: en la etiqueta <span><img> correspondiente usando el objeto generado anteriormente.
Y ya estaría, el resto es un barullo de CSS para que se vea bien en los párrafos. Sencillo, efectivo, muy personalizable. Me flipa . Podéis ver el código completo en el repositorio del blog.
Ahora a dibujar más emojis
PD: he estado bastante ocupado esta semana haciendo un proyecto secreto con Hytale, pero estoy preparando una nueva reseña. Si no os queréis hacer spoiler, no miréis la carpeta de reviews del repositorio