- Não usei sistemas de comentários existentes (Disqus, hospedagem própria, GitHub Issues etc.) por causa de problemas como desempenho, rastreamento, sobrecarga de manutenção e limite de usuários
- O Bluesky é adequado para comentários de blog porque não precisa de manutenção de infraestrutura, suporta conteúdo rico, usa contas com identidade real e permite conversa entre plataformas
- A implementação funciona assim: publicar no blog → compartilhar no Bluesky → adicionar o AT URI aos metadados do post → carregar e exibir a thread de comentários desse post
- Os componentes ficam separados em 3 partes: exibição de todos os comentários, exibição de comentário individual + resposta, e tratamento de embeds como imagem e link
- O tratamento de respostas é feito de forma recursiva, com limite de até 5 níveis, grade e modal de imagens, card de links e texto alternativo para embeds não suportados
- Integração Astro + React, carregamento no cliente com
client:load, e habilitações feitas ao adicionar DID e postCid ao frontmatter
- Para segurança de tipos, usei os tipos TypeScript do
@atcute/client; com JavaScript desativado, o conteúdo principal ainda aparece por meio de uma estrutura de progressive enhancement
- Sem servidor nem banco de dados, foi possível garantir desempenho usando a API do Bluesky e a CDN
- Essa abordagem evita reimplementar recursos sociais em cada site e ganha escalabilidade e independência ao conectar com a plataforma que o usuário já usa
Por que escolhi o Bluesky como sistema de comentários
- Não precisa manter infraestrutura
- Suporta conteúdo rico como imagem, link e citação de posts
- Confiabilidade e responsabilidade baseadas em contas do Bluesky
- Possibilidade de tráfego cruzado entre blog e mídia social
- Separação de propriedade de conteúdo (post do blog é do dono, comentários pertencem aos autores)
Entendendo o protocolo AT
- DID: identificador de usuário descentralizado
- CID: identificador de conteúdo
- AT URI: endereço no formato
at://did:.../app.bsky.feed.post/...
- É possível buscar a thread de comentários via chamada da API
getPostThread, sem necessidade de autenticação
Estrutura de componentes
- Componente principal de comentários
- Componente de renderização de comentário + resposta
- Componente de tratamento de embeds de imagem, link etc.
Tratamento de comentários aninhados
- Renderização recursiva, limite máximo de 5 níveis
- Representação hierárquica por meio de indentação visual
Tratamento de conteúdo rico
- Imagem: fornecida via CDN, grade de múltiplas imagens e visualização em modal
- Link externo: renderização de card com thumbnail e descrição
- Outros embeds: exibição de texto de fallback
Integração com Astro
- Uso de componente React +
client:load
- Adicionar DID e postCid do Bluesky no frontmatter para ativar os comentários
Experiência de desenvolvimento
- Garantia de estabilidade com suporte de tipos do TypeScript
- Com Progressive Enhancement, o conteúdo não é afetado se a API ficar indisponível
- Sem carga de servidor/DB usando a infraestrutura do Bluesky
Conclusão
- Em vez de manter os problemas de sistemas de comentários tradicionais, conecte-se à plataforma que o usuário já utiliza
- O aumento de participantes pode acompanhar o crescimento do Bluesky
- Por ser baseado em ATProto, também facilita a troca para outro AppView ou implementação própria
Ainda não há comentários.