Agregué una sección de comentarios de Bluesky a mi blog

• Un ejemplo de implementación que permite mostrar comentarios usando la API de Bluesky incluso en sitios estáticos
• Como Bluesky se encarga de la autenticación de cuentas, la gestión de spam, el almacenamiento y la moderación, no hace falta mantener un servidor aparte
• La implementación consiste en unas 200 líneas de código TypeScript y aprovecha @bluesky/api y Tanstack react-query
• Los comentarios se muestran en formato de solo lectura, y se cargan automáticamente enlazando el ID de una publicación de Bluesky en los metadatos de cada entrada del blog
• Una implementación experimental que muestra la posibilidad de combinar una plataforma social abierta con un blog estático

---

Contexto de la implementación de una sección de comentarios con Bluesky

• El punto de partida fue la dificultad de alojar directamente una función de comentarios en un sitio generado de forma estática
  • El contenido estático desplegado en un CDN no puede almacenar datos dinámicos
  • Operar un VPS o un servicio en la nube por separado implica costos y una carga adicional de administración
• Bluesky, como plataforma abierta basada en API pública y el protocolo AT, ya ofrece las funciones necesarias para gestionar comentarios
  • Bluesky se encarga de la autenticación de cuentas, el filtrado de spam, el almacenamiento y la moderación
  • Del lado del blog, basta con llamar a la API y mostrar los comentarios

Otras alternativas y por qué se eligió Bluesky

• También se consideraron alternativas como Twitter, Disqus y giscus (basado en GitHub Discussions)
• Bluesky está construido sobre el protocolo AT descentralizado, por lo que el riesgo de quedar bajo el control de una sola empresa es menor
• Frente a las opciones basadas en GitHub, resulta más adecuado para alojar comentarios por ser una plataforma centrada en conversaciones

Forma de implementación

• Se tomó como referencia el paquete bluesky-comments publicado por Cory Zue, pero se optó por una implementación propia
  • Se escribió código propio para poder personalizarlo según el estilo del sitio y facilitar futuras ampliaciones
  • La implementación completa, incluidos los componentes de UI y las funciones de API, ronda las 200 líneas
• Al principio también se consideró la publicación directa mediante OAuth, pero se descartó por la complejidad de la UI y las limitaciones de tiempo
  • Como resultado, solo se implementó una función de visualización de comentarios en modo de solo lectura

Stack técnico

• El sitio está construido con React Server Components y Parcel
  • El contenido se escribe en MDX, por lo que puede incluir JavaScript/JSX directamente
  • Cada entrada incluye bskyPostId en el objeto metadata para vincularla con una publicación de Bluesky
• Se usa el SDK de TypeScript de Bluesky (@bluesky/api) para obtener los datos del hilo de comentarios desde el endpoint getPostThread
• Las solicitudes a la API se gestionan con Tanstack react-query
  • Maneja automáticamente los estados de error, carga y reintento

Diseño de la UI

• De la respuesta de Bluesky se extrae solo el contenido de texto para mostrarlo en una UI de comentarios simple
• La estructura del hilo se distingue mediante sangría y una línea de borde a la izquierda
  • La imagen de perfil y la fecha de publicación toman como referencia el diseño de Bluesky
• En la parte superior se agrega un enlace a la publicación original de Bluesky para invitar a participar en la conversación
• No hay función para escribir comentarios; los usuarios dejan sus respuestas directamente en Bluesky

Posibilidades a futuro

• Si hace falta, esta implementación podría publicarse como paquete independiente
  • Por ahora, el código está adaptado al sitio personal
  • Como la estructura es simple, otros desarrolladores también pueden tomar el código fuente como referencia e implementarlo fácilmente
• Todavía no está claro si integrar comentarios de Bluesky ayudará a mejorar la participación en el blog

Reacciones de usuarios de Bluesky

• Varios usuarios de Bluesky dejaron comentarios positivos como “buena idea”, “respuesta rápida” y “adecuado como alternativa a Disqus”
• Algunos plantearon preguntas sobre gestión de spam, manejo de comentarios anidados y soporte para archivos adjuntos
• El autor explicó que, gracias a la función de moderación personal de Bluesky, es posible ocultar ciertos comentarios

[GN⁺]

Opiniones de Hacker News

• Si renderizas tu blog o sitio web con un static site generator, se propone traer los comentarios como archivos de contenido e incluirlos en el proceso de build

  1. recopilar los comentarios por correo electrónico, scripts CGI, programas de servidor, etc.
  2. revisarlos manualmente y borrar el spam
  3. guardar los comentarios como archivos .md o .html
  4. y renderizarlos junto con el sitio durante el build
     Este proceso requiere bastante trabajo manual, pero tiene las ventajas de bloquear el spam y de tener propiedad total de los datos
  • Yo también implementé un sistema parecido basado en email. Lo expliqué en detalle en una entrada de mi blog
  • Si es un sitio pequeño, solo hay que gestionar unos pocos comentarios al día, así que la revisión manual es totalmente viable. Además, se puede automatizar fácilmente con actualización automática de archivos Markdown
  • Bromea diciendo: “Yo solo acepto comentarios por fax ;)”
  • Otra persona responde que “suena horrible” y que es ineficiente

• Si no quieres usar React, puedes revisar el web component de comentarios de Bluesky que hice
  Se puede ver en el repositorio de GitHub y en el playground de temas.
  Es muy fácil de personalizar visualmente

• Tomando la idea del post original, alguien lo implementó como un sistema de comentarios basado en Mastodon
  Se puede ver en detalle en una entrada de su blog

  • En realidad, esta clase de integración de comentarios del Fediverse ya se venía intentando desde antes con Mastodon o Bluesky
    Referencia: entrada relacionada

• Hay quien comenta que, por las leyes de la UE sobre discurso de odio, si el operador del sitio no filtra los comentarios podría recibir sanciones, y se pregunta qué tan real es eso
  Por eso decidió desactivar por completo los comentarios

  • No soy experto legal, pero ese riesgo muchas veces se exagera con intenciones políticas. La legislación de la UE toma en cuenta el tamaño y propósito del sitio. Nunca he oído de un sitio personal pequeño que haya sido sancionado
  • Usando el moderation labeler de Bluesky se puede hacer filtrado previo. No hay uno ajustado a los criterios de la UE, pero podrías crear tu propio labeler para filtrar solo los comentarios problemáticos
  • Más allá de la ley, no quiero que haya discurso de odio en un sitio que lleva mi nombre

• Mi blog es completamente estático, y con un script de Cloudflare Worker de 50 líneas recibo comentarios y los agrego directamente al Markdown.
  Se puede implementar sin necesidad de embeber una función de comentarios

  • Sería interesante usar los comentarios como commits automáticos en Pull Requests, de modo que los PR sirvan como herramienta de revisión de comentarios
  • Alguien bromea: “Sería aún mejor si eso fuera realmente ColdFusion”
  • También hay quien pregunta si puede compartir el enlace o detalles de la implementación

• Aprovechando la API de Bluesky, también se podría automatizar para encontrar automáticamente la primera publicación que incluya el enlace de cierto blog y conectar los comentarios a partir de ahí

• Alguien creó una cuenta para probarlo porque cree que también podría ayudar al crecimiento de Bluesky. Parece una idea de growth hacking bastante divertida

  • Pero también opinan que una red social con fines de lucro terminará volviéndose como Twitter.
    Idealmente, un sistema de comentarios autoalojado o basado en el Fediverse sería más sostenible
  • También hay quien dice que es difícil triunfar solo con el mensaje de “no somos esa otra plataforma”

• Mi blog no es muy popular, pero antes pasé por un verdadero infierno de spam y comentarios de odio
  Por eso no pienso volver a habilitar comentarios en un blog personal

• Incluso en un sistema basado en Bluesky, se puede agregar un labeler propio y hacer censura propia filtrando comentarios con ciertas etiquetas

• Yo también hice algo parecido: además de mi blog, agregué en cartes.app una función de comentarios por lugar en OSM
  Se pueden dejar reseñas con una cuenta de ATproto, y los datos se guardan en el PDS como JSON propiedad del usuario

  • Alguien comenta: “Está realmente genial. ¿Cómo recopilas esos datos? ¿Será escuchando el firehose de Bluesky?”