Incorpore comentários do Discourse em outro site usando Javascript

As centenas de vezes que estive naquela página CSS, e nunca notei o CSS para incorporações…

1 curtida

Se alguém estiver com dificuldades para encontrar a aparência da página de incorporação, aqui está:

Tentei implementar isso hoje, mas tenho alguns problemas:

  • No post do fórum, a URL derivada (de discourseEmbedUrl?) é convertida para minúsculas, quebrando URLs que diferenciam maiúsculas de minúsculas no link após o texto “Este é um tópico de discussão complementar para a entrada original em…”
  • Na primeira carga da página, o embed exibe “Carregando discussão…” e trava. Na segunda carga da página, tudo funciona.
  • Paginação: quando o iframe está carregando, ele terá uma altura padrão, mas se nenhum comentário for encontrado, a altura encolhe de volta para exibir apenas uma linha com “Iniciar Discussão”. Isso piora o bug de “carregando discussão”, pois mantém uma grande altura vertical aberta.
  • Seria bom se os dados extraídos do pai do embed favorecessem uma meta tag em vez de converter a página inteira em texto, suponho que isso seja um comportamento mais generalizado do Discourse.

A maior surpresa foi descobrir que toda vez que você visita uma URL com um embed, um novo tópico é criado. Isso está no OP:

A única solução que consigo pensar é hacky, dependendo de SSR/cache de curto prazo para acionar o endpoint do embed:

então acho que a lógica seria:

  1. verificar $discourse/embed/info?embed_url=$link

  2. se o tópico existir, mostrar o embed como de costume.

  3. se não, mostrar um botão “iniciar conversa” que vincula a $discourse/new-topic?subject=$link.

Isso funcionaria, ou há alguma outra ligação que precisa acontecer?

Um novo tópico é criado apenas quando uma página com o embed é visitada pela primeira vez. Em visitas subsequentes, ele renderiza o tópico existente associado à URL.

Se você não quiser a criação automática de tópicos, pode criá-los via chamadas de API da maneira que melhor lhe convier e, em seguida, passar o topicID para o embed para controlar manualmente a associação.

Entendido, isso é brutal para o meu caso, pois existem dezenas de milhares de páginas

Como isso?

  1. API verifica se o tópico existe
  2. não existe, mostra botão
  3. clica no botão, API adiciona tópico
  4. bem-sucedido, o contêiner do botão se transforma em embed

…isso também tem alguns problemas, como cliques de botão sem engajamento posterior.

Existe alguma maneira de criar o tópico apenas quando um usuário realmente comentou, algo como isso?:

$discourse/new-topic?subject=$link.

ou o problema aqui é que não podemos passar o topicID para acoplamento determinístico?

Não, não é possível responder a um tópico que não existe no Discourse.

Para atender a essa necessidade, tornamos possível criar todos os tópicos incorporados como tópicos não listados que são listados automaticamente na primeira vez que alguém responde.

Eu acho que criar o tópico exigirá uma solicitação autenticada que é executada no servidor. Se você não quiser lidar com isso, outra abordagem seria adicionar um botão à interface do usuário que acione um código semelhante a este (o código que de outra forma seria adicionado automaticamente à tag head da página): discourse/public/javascripts/embed.js at 581dbca97f2b55c9bbbe40dc3b58a9df7409d77f · discourse/discourse · GitHub. É apenas criar um elemento iframe usando estes dados:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'http://127.0.0.1:4200/',
    discourseEmbedUrl: 'EMBED_URL',
    // className: 'CLASS_NAME',
  };
</script>

Editar: Eu tive que tentar. Isso é apenas uma prova de conceito: discourse-embed-iframe-test/app/routes/triggering-embed-code.tsx at main · scossar/discourse-embed-iframe-test · GitHub. Eu não acho que seja uma ótima solução para o seu problema.

A lógica está inteiramente no cliente (a função loader é apenas para conveniência). Infelizmente, não há uma boa maneira para o cliente saber se o tópico existe no Discourse. Portanto, não é possível personalizar a interface do usuário com base na existência ou não do tópico. Existem maneiras de resolver isso, mas provavelmente exigiriam a escrita de algo no banco de dados do aplicativo.

O Discourse está usando Window: postMessage() para passar dados do iframe para o documento pai. Por exemplo, quando um link de resposta é clicado nos comentários incorporados: discourse/app/assets/javascripts/discourse/scripts/embed-application.js at 581dbca97f2b55c9bbbe40dc3b58a9df7409d77f · discourse/discourse · GitHub. Eu me pergunto se uma mensagem poderia ser enviada ao documento pai para indicar que um tópico foi criado. Isso permitiria que sites fizessem coisas como definir spinners de carregamento personalizados ou exibir uma interface diferente, dependendo se o tópico estava pronto para receber comentários ou não.

1 curtida

Não acho que precise ser o caso se fosse possível atribuir um link primário a uma nova postagem:

$discourse/new-topic-link?link=$link

O que presumivelmente seria encaminhado para o tópico se ele já existisse e usasse a lógica existente no admin de incorporação. Talvez com modelos?

Acho que outra maneira de resolver isso é pesquisar por quaisquer postagens que se refiram ao link em questão e exibir quaisquer correspondências como parte de uma conversa em todo o site, renderizando diretamente na página via SSR. Isso pode ser equivalente, dado que as incorporações são apenas para visualização. O problema mais óbvio seria escolher para qual tópico enviar o usuário quando ele quisesse participar.

editar: se eu conseguir descobrir como pesquisar postagens por conteúdo de link

Estou me perguntando se este recurso pode ser usado para atacar um fórum Discourse. Especificamente, é possível que alguém falsifique visitas a páginas sob vários URLs de um host e crie muitos tópicos?

Olá comunidade Discourse!

Estou animado para compartilhar um plugin que desenvolvi para aqueles que usam Docusaurus v3 e desejam incorporar comentários do Discourse em seus sites.

docusaurus-plugin-discourse-comments

Este plugin facilita a integração de comentários do Discourse em seu site Docusaurus v3. Aqui estão alguns recursos principais:

  • Integração perfeita com Docusaurus v3
  • Rotas de incorporação configuráveis
  • Modo de depuração para solução de problemas fácil
  • Tratamento automático de URLs de incorporação
  • Posicionamento personalizável de comentários

Se você está usando Docusaurus v3 e deseja adicionar comentários do Discourse à sua documentação ou postagens de blog, este plugin simplifica significativamente o processo.

Você pode encontrar o plugin no npm: docusaurus-plugin-discourse-comments

4 curtidas

Digamos que eu tenha um único host incorporável, blog.example.com e uma lista de permissões de caminho curinga como /.*.

Eu gostaria de adicionar uma incorporação adicional usando o mesmo host, mas desta vez com uma lista de permissões diferente, por exemplo, /new-release.* e com uma tag extra, digamos releases.

Obviamente, o tópico de “novo lançamento” pode corresponder a ambas as combinações de host/caminho, mas qual dos dois teria precedência? Em que ordem as regras são avaliadas?

Ainda é o caso que não podemos incorporar um tópico de um fórum privado em um host separado? Meu caso de uso é que usamos o Kajabi para hospedar o produto e o Discourse como nossa plataforma de comentários. Cada um exige logins separados, então suspeito que a resposta ainda seja “não é possível”, mas este é um dos fatores limitantes para nossos usuários e um grande problema, pois temos mais de 750 módulos, cada um com um espaço de discussão dedicado. Se eu pudesse incorporar o tópico do Discourse para cada módulo do Kajabi na mesma página, mesmo sem poder comentar na página, isso simplificaria tudo e permitiria um fácil link para o tópico relevante no Discourse.

Então, há algum progresso nisso ou isso sempre será uma limitação de fóruns privados?

Vejo que não é possível incorporar comentários de um fórum privado (em um site que usa um domínio separado):

O que um colega está usando para comentários em um site Ghost, no entanto, é um fórum público (em um domínio completamente diferente), publicando a maioria dos posts gratuitos. Ele publicou recentemente seu primeiro post apenas para membros e, como mudei o tópico associado no Discourse para uma categoria onde não é visível por “Todos”, mas sim por um Grupo específico (associado a membros pagantes no site Ghost), o embed agora exibe a mensagem “Erro ao Incorporar”.

Embora o OP tenha dito que fóruns privados (em domínios separados) não permitirão que o embed funcione, este é um fórum público, mas com uma categoria privada. O problema que estou vendo se deve a uma categoria privada em um fórum público ser funcionalmente o mesmo que um fórum privado? Afinal, li o seguinte comentário, que parece apoiar essa afirmação:

Se for o caso de que tópicos de categorias privadas em fóruns públicos não podem ser incorporados imediatamente, há alguma maneira de fazer isso com algum ajuste no embed (e/ou na plataforma)? Não estou com pressa para (esperançosamente) “corrigir” este problema, pois estou um pouco conformado em definir temporariamente a categoria privada como pública (já que o Discourse não pode raspar o post privado do Ghost e, assim, exibir inadvertidamente seu conteúdo para usuários não pagantes no Discourse), mas se conseguir fazer isso funcionar, não me importaria em contratar alguém mais tarde para alterar o embed e/ou enviar um PR para a plataforma.

Olá, estou usando a funcionalidade de incorporação com meu blog Ghost, no entanto, estou encontrando alguns problemas em relação a como as postagens do blog acabam no meu fórum. Tenho as configurações de host abaixo:

Devido a desafios com a configuração de subdomínio (tenho meu domínio com um provedor de internet diferente de onde tenho meu fórum Discourse), decidi usar a rota de Tags.

O problema que encontro é que todas as minhas postagens de blog acabam na categoria Blog no meu fórum Discourse. Estou usando um usuário administrador para o autor da postagem no Discourse, todas as 3 categorias permitem que administradores criem novos tópicos.

Alguma ideia sobre o que pode estar causando isso?

Talvez especificar os caminhos para cada um? Por exemplo, se as postagens que deveriam ir para a categoria blog estão em /blog/<slug>, se não me engano, você pode fazer /blog/*.

1 curtida

Isso não funciona com o blog Ghost (pelo menos não com uma instalação bastante padrão). Estou usando meu domínio principal (alphagamer.net), o blog Ghost basicamente adiciona o caminho automaticamente com base no título da postagem do blog após o domínio. Tentei adicionar um caminho, mas ele simplesmente o remove.

1 curtida

Eu estava me perguntando se os comentários do Discourse (tópico) poderiam ser incorporados em um tópico do Discourse? Talvez com um Iframe que inclua o botão de resposta, mas não o resto do site. Ou seja, sem cabeçalho ou rodapé.

Eu o usei com o Ghost sem problemas, exceto pela falta de integração SSO, o que deixa os usuários chateados.

Lembro que precisei ajustar um pouco o código de exemplo.

Acho que funciona bem se você tiver 1 embed. Acho que se você estiver tentando incorporar diferentes tipos de posts de blog em diferentes categorias do Discourse, isso exigirá um pouco mais de ajuste.

Pensei que poderia fazer funcionar usando as Tags, mas as tags sozinhas não parecem resolver (para a minha configuração). Acredito que no Ghost precisarei criar Coleções de Conteúdo que basicamente me permitem adicionar uma estrutura de pastas (como alphagamer.net/blog/ e as outras que preciso). Tentarei isso durante o fim de semana, atualizarei minha “lista de permissões de caminho” e postarei aqui se conseguir fazer isso funcionar.

A lista de permissões pode ser separada por vírgulas como esta?

/blog/.*,/articles/.*

Editar: parece que isso não funciona. Isso também não funciona:

/(blog|articles)/.*

Talvez eles precisem ser dois hosts separados?