- No se usan sistemas de comentarios tradicionales (Disqus, hosting propio, GitHub Issues, etc.) debido a problemas de velocidad, rastreo, carga de mantenimiento y límites de usuarios
- Bluesky es adecuado para comentarios de blog porque no necesita mantenimiento de infraestructura, soporta contenido enriquecido, usa cuentas basadas en identidad real y permite conversaciones cross-platform
- La implementación funciona así: publicar el post del blog → compartirlo en Bluesky → añadir el AT URI a los metadatos del post → cargar y mostrar el hilo de comentarios de ese post
- El sistema se separa en tres componentes: listado completo de comentarios, renderizado de comentario individual + respuesta anidada, y manejo de embeds como imágenes o enlaces
- Las respuestas se muestran de forma recursiva con un máximo de 5 niveles de profundidad; la cuadrícula de imágenes y el modal, tarjetas de enlaces y mensajes alternativos para embeds no soportados también están contemplados
- Integración de Astro + React, carga en cliente con
client:load, y activación al agregar DID y postCid en frontmatter
- Para robustez de tipos se usan los tipos de TypeScript de
@atcute/client, y el contenido principal se muestra correctamente incluso con JavaScript desactivado gracias a una arquitectura de mejora progresiva
- Se logra rendimiento al usar la API de Bluesky y CDN, sin servidor ni base de datos propios
- Este enfoque mejora la escalabilidad e independencia al conectar con la plataforma que ya usa la audiencia, en lugar de recrear funciones sociales para cada sitio
Por qué elegir Bluesky como sistema de comentarios
- No se requiere mantenimiento de infraestructura
- Soporta contenido rico como imágenes, enlaces y publicaciones citadas
- Confianza y responsabilidad gracias a cuentas de Bluesky
- Posible intercambio de tráfico entre el blog y redes sociales
- Separación de propiedad de contenido (el post pertenece al autor, los comentarios al autor del comentario)
Entendiendo el protocolo AT
- DID: identificador de usuario descentralizado
- CID: identificador de contenido
- AT URI: dirección con formato
at://did:.../app.bsky.feed.post/...
- Es posible obtener el hilo de comentarios con la llamada al API
getPostThread, sin necesidad de autenticación
Estructura de componentes
- Componente principal de comentarios
- Componente de renderizado de comentario individual + respuestas
- Componente para procesar embeds de imágenes, enlaces, etc.
Manejo de comentarios anidados
- Renderizado recursivo con un límite máximo de 5 niveles de profundidad
- Representación jerárquica mediante sangría visual
Manejo de contenido enriquecido
- Imágenes: se sirven desde CDN, vista en cuadrícula y modal para múltiples imágenes
- Enlaces externos: se renderizan como tarjetas con miniatura y descripción
- Otros embeds: se muestra un texto alternativo
Integración con Astro
- Uso de componentes de React +
client:load
- Se activa con comentarios al añadir Bluesky DID y postCid en frontmatter
Experiencia de desarrollo
- Estabilidad gracias al tipado de TypeScript
- Mejora progresiva: el contenido principal no se ve afectado si hay una falla del API
- Sin sobrecarga de servidor o base de datos al aprovechar la infraestructura de Bluesky
Conclusión
- Evita los problemas de los sistemas de comentarios tradicionales y se conecta con una plataforma que los usuarios ya usan
- Puede crecer el número de participantes junto con el crecimiento de Bluesky
- Al estar basado en ATProto, es fácil migrar a otro AppView o a una implementación propia
Aún no hay comentarios.