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:

Antes de empezar, se usará de guía la implementación de backend del siguiente post:

https://moloxe.io/blog/backend-con-typescript-y-esbuild

Obtener datos de la URL

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' ]
}

Generar preview

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:

https://www.npmjs.com/package/jimp

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 🥲

Publicar en Mastodon

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)
}

Resultados

https://tkz.one/@moloxe/112181090681071131

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 🤖