Los bots
son herramientas que ayudan a automatizar procesos repetitivos. Hoy se implementará un bot que genere previews basados en los meta tags
de una URL y los publique en Mastodon.
Antes de empezar, se usará de guía la implementación de backend del siguiente post:
El blog genera meta tags
de open-graph y twitter por cada post. Hay para escoger, de momento será suficiente con open-graph-scraper
.
Para utilizarlo basta con enviarle la URL del recurso:
import ogs from 'open-graph-scraper'
const { result } = await ogs({
url: 'https://moloxeio.pages.dev/blog/oneko'
})
result
:
{
ogTitle: 'Oneko - Moloxe',
ogDescription: 'Tags: tech, art, culture, ent.',
ogUrl: 'https://moloxe.io/blog/oneko',
twitterTitle: 'Oneko - Moloxe',
twitterDescription: 'Tags: tech, art, culture, ent.',
ogImage: [
{
url: 'https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif',
type: 'gif'
}
],
twitterImage: [ { url: 'https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif' } ],
ogLocale: 'es',
favicon: '/favicon.svg',
charset: 'utf-8',
requestUrl: 'https://moloxeio.pages.dev/blog/oneko',
success: true
}
Para trabajar de forma más limpia, se puede mapear a un tipado específico:
type Post = {
title: string
description: string
url: string
image: string
categories: string[]
}
Resultado mapeado:
{
title: 'Oneko',
description: 'Tags: tech, art, culture, ent.',
url: 'https://moloxe.io/blog/oneko',
image: 'https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif',
categories: [ 'tech', 'art', 'culture', 'ent' ]
}
Se tiene lo necesario para generar el preview. Generar imágenes es algo que puede requerir de dependencias muy pesadas, por suerte encontré jimp
.
Esta parte puede ser innecesaria de explicar, su documentación es bastante clara. Puedes echarle un vistazo:
Este sería el resultado de la función que genera el preview:
Se dejó con baja resolución intencionalmente para darle un toque distintivo. Si ya es difícil editar imágenes, imagínense a través de código 🥲
Mastodon es una red social descentralizada. Hoy, lo importante es que ofrece una API que permite hacer publicaciones (toots). Para la implementación se usó mastodon-api
y me guié del siguiente tutorial:
https://youtube.com/playlist?list=PLRqwX-V7Uu6byiVX7_Z1rclitVhMBmNFQ&si=va6EJWho2TbWHOTp
El bot solo tendría que llamar a la siguiente función para generar el preview y hacer la publicación:
async function postFromUrl(url: string) {
const post = await getPostFromOg(url)
let message = 'Recién horneado! 👨🍳'
message += '\n\n' + post.title
message += '\n\n' + post.url
message += '\n\n' + post.categories.map((c) => `#${c}`).join(' ')
const imagePath = await getImageFromPost(post)
const mediaId = await tootMedia(imagePath, `Portada del post: ${post.title}`)
const tootUrl = await tootPost(message, mediaId)
console.log(tootUrl)
}
Listo!
Menos chamba 🙂
Se puede cuestionar la naturaleza del bot, tengo que hacer un proceso manual para ejecutarlo. Pero, en su definición está que automatiza procesos y es lo que hace al generar los previews 🤖