Adicionei uma seção de comentários do Bluesky ao meu blog

• Um exemplo de implementação que exibe comentários usando a API do Bluesky mesmo em sites estáticos
• Como o Bluesky cuida de autenticação de conta, gerenciamento de spam, armazenamento e moderação, não é necessário manter um servidor separado
• A implementação tem cerca de 200 linhas de código TypeScript e usa @bluesky/api e Tanstack react-query
• Os comentários são exibidos em modo somente leitura, com o ID do post do Bluesky vinculado aos metadados de cada post do blog para carregamento automático
• Uma implementação experimental que mostra a possibilidade de combinar uma plataforma social aberta com um blog estático

---

Contexto da implementação da seção de comentários do Bluesky

• O ponto de partida foi a dificuldade de hospedar diretamente um recurso de comentários em um site gerado estaticamente
  • Conteúdo estático publicado em CDN não permite armazenar dados dinâmicos
  • Operar um VPS ou serviço em nuvem separado traz custo e carga de manutenção elevados
• O Bluesky já oferece, como plataforma aberta baseada em API pública e no protocolo AT, os recursos necessários para gerenciar comentários
  • O Bluesky cuida de autenticação de conta, filtragem de spam, armazenamento e moderação
  • Do lado do blog, basta chamar a API para exibir os comentários

Outras alternativas e por que o Bluesky foi escolhido

• Também foram consideradas alternativas como Twitter, Disqus e giscus (baseado em GitHub Discussions)
• O Bluesky é construído sobre o protocolo AT descentralizado, o que reduz o risco de controle por uma empresa específica
• Em comparação com soluções baseadas no GitHub, ele é mais adequado para hospedar comentários por ser uma plataforma centrada em conversas

Forma de implementação

• Embora tenha servido de referência o pacote bluesky-comments publicado por Cory Zue, foi escolhida uma implementação própria
  • O código foi escrito internamente para permitir customização de acordo com o estilo do site e futura expansão
  • A implementação completa, incluindo componentes de UI e funções de API, tem cerca de 200 linhas
• No início, também foi considerada a publicação direta via OAuth, mas ela foi descartada devido à complexidade da UI e à limitação de tempo
  • Como resultado, foi implementado apenas um recurso de exibição de comentários em modo somente leitura

Stack técnica

• O site foi construído com React Server Components e Parcel
  • O conteúdo é escrito em MDX, o que permite incluir JavaScript/JSX diretamente
  • Cada post inclui bskyPostId no objeto metadata para vinculá-lo ao post do Bluesky
• O SDK TypeScript do Bluesky (@bluesky/api) é usado para receber os dados da thread de comentários pelo endpoint getPostThread
• As requisições de API são gerenciadas com Tanstack react-query
  • Estados de erro, carregamento e retry são tratados automaticamente

Design da UI

• Apenas o conteúdo de texto é extraído da resposta do Bluesky e exibido em uma UI de comentários simples
• A estrutura em thread é distinguida por indentação e uma borda à esquerda
  • A imagem de perfil e a data da publicação seguem como referência o design do Bluesky
• No topo, foi adicionado um link para o post original no Bluesky para incentivar a participação na conversa
• Não há função para escrever comentários; os usuários deixam respostas diretamente no Bluesky

Possibilidades futuras

• Se necessário, essa implementação pode ser publicada como pacote independente
  • No entanto, o código atual está ajustado ao site pessoal do autor
  • Como a estrutura é simples, outros desenvolvedores também podem consultar o código-fonte e implementar facilmente
• Ainda não está claro se a integração de comentários do Bluesky ajudará a aumentar o engajamento do blog

Reações dos usuários do Bluesky

• Vários usuários do Bluesky deixaram reações positivas nos comentários, como “boa ideia”, “resposta rápida” e “adequado como alternativa ao Disqus”
• Alguns levantaram questões sobre gerenciamento de spam, tratamento de comentários aninhados e suporte a anexos
• O autor explicou que é possível ocultar comentários específicos com o recurso de moderação pessoal do Bluesky

[GN⁺]

Comentários do Hacker News

• Se você renderiza um blog ou site com um static site generator, foi sugerido trazer os comentários como arquivos de conteúdo e incluí-los no processo de build

  1. coletar os comentários por e-mail, script CGI, programa de servidor etc.
  2. revisar manualmente e remover spam
  3. salvar os comentários como arquivos .md ou .html
  4. renderizá-los junto na build do site
     Esse processo dá trabalho, mas tem as vantagens de bloquear spam e de ter propriedade total dos dados
  • Eu também implementei um sistema parecido baseado em e-mail. Os detalhes estão neste post do meu blog
  • Para um site pequeno, como só é preciso gerenciar alguns comentários por dia, a revisão manual é totalmente viável. Além disso, dá para automatizar facilmente com atualização automática de arquivos Markdown
  • Fez a piada: “Eu só aceito comentários por fax ;)”
  • Outra pessoa reagiu dizendo: “Isso parece horrível”

• Se você não quer usar React, pode dar uma olhada no web component de comentários do Bluesky que eu fiz
  Dá para ver no repositório no GitHub e no playground de temas.
  É muito fácil de customizar o tema

• Pegando a ideia do post original, alguém implementou isso como um sistema de comentários baseado em Mastodon
  Dá para ver os detalhes neste post do meu blog

  • Na verdade, esse tipo de integração de comentários com o Fediverse já vinha sendo tentado há algum tempo com Mastodon e Bluesky
    Referência: post relacionado

• Existe a história de que, por causa das leis da UE sobre discurso de ódio, se o dono do site não filtrar os comentários pode acabar sendo punido, e alguém queria saber como isso funciona na prática
  Por isso, eu simplesmente desativei os comentários

  • Não sou especialista em direito, mas esse tipo de risco muitas vezes é exagerado por motivações políticas. A legislação da UE leva em conta o tamanho e o propósito do site. Nunca ouvi falar de um site pessoal pequeno ter sido punido
  • Dá para usar o moderation labeler do Bluesky para fazer filtragem prévia. Não existe um alinhado aos critérios da UE, mas você mesmo pode criar um labeler para barrar só os comentários problemáticos
  • Antes mesmo da questão legal, eu não quero discurso de ódio num site que leva o meu nome

• Meu blog é totalmente estático, e um script de Cloudflare Worker com 50 linhas recebe os comentários e os adiciona direto ao Markdown.
  Dá para implementar isso sem embutir uma funcionalidade de comentários

  • Seria divertido usar PRs como ferramenta de revisão de comentários, por exemplo fazendo commit automático dos comentários via Pull Request
  • Outra piada: “Seria ainda mais legal se isso fosse ColdFusion de verdade”
  • Também teve gente perguntando: “Você pode compartilhar o link ou os detalhes da implementação?”

• Usando a API do Bluesky, também daria para automatizar isso encontrando automaticamente o primeiro post que contém o link de um determinado blog e conectando-o aos comentários

• Achei que isso também poderia ajudar no crescimento do Bluesky, então criei uma conta para testar. Parece uma ideia bem divertida de growth hacking

  • Mas há quem ache que uma rede social com fins lucrativos inevitavelmente vai acabar como o Twitter.
    Idealmente, um sistema de comentários self-hosted ou baseado no Fediverse seria mais sustentável
  • Também houve a opinião de que não dá para ter sucesso apenas com a mensagem “nós não somos aquela outra plataforma”

• Meu blog não é muito popular, mas no passado eu já passei por um verdadeiro inferno de spam e comentários de ódio
  Por isso, nunca mais pretendo reabrir comentários em blog pessoal

• Mesmo num sistema baseado em Bluesky, dá para adicionar seu próprio labeler e fazer uma censura própria, filtrando os comentários que recebam determinados rótulos

• Eu também fiz algo parecido: além do meu blog, adicionei na cartes.app uma função de comentários por local do OSM
  Dá para deixar avaliações com uma conta ATproto, e os dados ficam armazenados no PDS como JSON de propriedade do usuário

  • Alguém respondeu perguntando: “Muito legal. Como você agrega esses dados? Está ouvindo o firehose do Bluesky por acaso?”