Ah, entendi agora. Eu achava que o propósito do embedMaxHeight era renderizar os comentários de um estilo mais nativo, minimizando a rolagem o máximo possível (exceto em threads extensas, que ainda exigiriam rolagem). Foi por isso que defini como 15000px. Vou reduzir um pouco.
Nesse caso, acredito que o embedMinHeight pode não estar funcionando como o esperado. Mesmo com ele definido em 400px, o embed ainda tem uma altura de pelo menos 600px, com um pequeno espaço vazio restante no final.
E aí!
O formulário de comentários redesenhado é muito superior, especialmente na experiência móvel! No entanto, identifiquei dois pequenos problemas:
É! @keegan o construiu com isso como um dos principais casos de uso, fico feliz que você goste. Mas acabamos de mesclá-lo há algumas horas, então ainda estamos trabalhando em ajustes, como a largura da barra de ferramentas e o comportamento de envio ao pressionar Enter.
Será que não seria uma boa ideia exibir este formulário diretamente no tópico (no Discourse) também? Ter o formulário aberto geralmente é muito mais convidativo e amigável para um público não técnico. Talvez valha a pena testar para ver se isso aumenta o engajamento?
Isso era realmente um bug, acabei de corrigi-lo em
Isso já foi corrigido, por favor, atualize!
Percebi outro problema no seu site. Vejo que você integrou o sistema de modo escuro/claro do seu blog com o novo embed do Discourse, de modo que alterar o modo do blog muda automaticamente o modo do embed. No entanto, embora a integração funcione bem no Firefox e no Chrome, ela não funciona no Safari. Estou presumindo que isso seja um problema do Discourse, já que não apenas o popup de “Permitir acesso” é relevante apenas para o Safari, mas outro problema com a barra de rolagem funcionando incorretamente também afeta apenas o Safari.
Deixando isso um pouco de lado, estou curioso para saber como você conseguiu fazer a integração do modo escuro/claro funcionar. Iniciei um post sobre Modo escuro automático para comentários incorporados há vários anos, e a partir disso consegui que alguém escrevesse um script usando postMessage para fazer os dois sistemas trabalharem juntos. Mas com o novo sistema de embed de comentários completos do Discourse, o script parece ter sido quebrado (com o padrão estranhamente sendo o modo escuro do tema do Discourse). Então minha pergunta é: Você tinha um script postMessage escrito anteriormente, que atualizou para o novo sistema de embed do Discourse? E se sim (e mesmo que você use WordPress e eu use Ghost), você poderia compartilhar seu código? Talvez eu pudesse comparar seu código com o que eu tenho para tentar fazer as coisas funcionarem com o Ghost e com a configuração de modo escuro do meu blog.
Se o seu blog e o Discourse usarem o modo escuro automático seguindo o sistema, eles ficarão sincronizados.
Adicionamos o modo escuro automático ao Discourse em Automatic Dark Mode color scheme switching
Sim, mas, se entendi e me lembro corretamente, isso permite que o Discourse detecte se o sistema operacional está usando o modo escuro e, em seguida, se ajuste de acordo. A postagem que iniciei, que foi uma resposta à que você vinculou (e que também a vinculou), tratava do botão/toggle em um blog que alterna manualmente entre os modos claro e escuro de um blog (independentemente do modo do sistema operacional). Isso parece correto (e, consequentemente, torna minha pergunta anterior relevante)?
Para deixar claro, este é o script que pedi para alguém escrever para uso no meu blog, que acho que agora precisa de alguns ajustes (talvez precise apenas alterar algumas classes, não tenho certeza).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// Atualizar elementos após domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>
Acabei de atualizar o Discourse para a versão mais recente, mas estou vendo dois problemas:
Claro,
Este é o CSS que estou usando no Discourse
header a.button {
color: #fff;
padding: 6px 8px;
background-color: var(--tertiary);
display: inline-block;
}
.username a.staff {
padding: 2px 5px;
border-radius: 4px;
color: var(--tertiary-hover);
// text-shadow: 0px 0px 14px var(--tertiary-400);
background-color: var(--tertiary-400);
}
@media (prefers-color-scheme: light) {
/* Fundo principal do Iframe */
html, body {
font-family: 'Inter', sans-serif;
}
}
@media (prefers-color-scheme: dark) {
/* Fundo principal do Iframe */
html, body {
background-color: #1e2021 !important; /* Seu --bg */
color: #f7f7f7 !important; /* Seu --body-color */
font-family: 'Inter', sans-serif;
}
header.discourse {
border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
}
article.post {
border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
}
/* Cor do texto principal */
.embedded-posts,
.embedded-posts p,
.embedded-posts h1,
.embedded-posts h2,
.embedded-posts h3 {
color: #f7f7f7 !important;
}
/* Fundo de blocos, como o rodapé do embed (opções de resposta) */
.embedded-footer {
background: #27292b !important; /* Seu --bg-2 */
border-top: 1px solid #27292b !important;
}
/* Cor das bordas (para bordas claras não aparecerem) */
.embedded-posts, .embedded-footer {
border-color: #27292b !important;
}
/* Garante que links/botões tenham a cor correta */
// a:link, a:visited, .topic-post .post-action-list button {
// color: #35bcf1 !important; /* Seu --link-color */
// }
}
Nesse caso, acredito que a abordagem correta seria disparar o evento de monitoramento sem acionar a tag inteira. A configuração atual distorce nossas análises porque dispara um evento page_view, o que infla artificialmente todas as estatísticas do site.
Durante a noite, nossas visualizações de página dispararam, mas esses números são artificiais — não fazem nenhum sentido comercial.
Sem mencionar que, no momento, estamos duplicando o carregamento e o processamento dos scripts.
No caso do GTM (Google Tag Manager), a situação é ainda pior: cada outro script na conta está sendo injetado duas vezes, incluindo os pixels do Google e Meta Ads, scripts de redes de anúncios de terceiros e outros.
Quanto às análises nativas do Discourse, sugiro mais um ajuste: segmentar o tráfego do Embed em sua própria categoria. Isso nos permitiria visualizar o tráfego da comunidade e o tráfego do embed separadamente.
Muito obrigado por isso, eu aprecio muito. No entanto, isso me deixa um pouco confuso. Quando eu estava tentando fazer o botão de modo escuro no meu blog que usa Ghost funcionar com o embed do Discourse (já que não funcionava por padrão), fui informado de que precisaria implementar algum código usando postMessage (que eu contratei alguém para criar, e que funcionou). Mas o código que você forneceu não inclui nenhum JS, o que não faz sentido para mim, e não consigo entender por que tudo funcionaria automaticamente por causa do uso do WordPress. De qualquer forma, obrigado mesmo assim.
Olá a todos, só passando para ver se alguém teve a chance de analisar isso ainda?
Meus usuários estão relatando que não conseguem usar o formulário de forma alguma por causa do problema do campo de texto, então está se tornando um pouco um bloqueador para nossa comunidade.
LucasMiller: A interface de comentários abaixo dos artigos tem um bug; não consigo digitar nada para postar (testado tanto no iPhone quanto no Android/Xiaomi). Você clica no campo de texto para digitar, mas simplesmente não registra nenhuma entrada. Por favor, dê uma olhada quando puder!
Isso só está acontecendo em artigos onde seria o 1º comentário.
LucasMiller: Só consegui postar criando uma citação sem adicionar nenhum texto. Só depois que me redirecionou para a interface da Comunidade (em vez de ficar abaixo do artigo) é que consegui realmente adicionar meu comentário.
A solução alternativa com Markdown ajuda, mas não é ideal para o usuário médio. Quaisquer insights ou correções temporárias seriam muito apreciadas! Obrigado mais uma vez pela ajuda.
cc @Falco
Isso deve corrigir o problema, a correção será lançada mais tarde hoje
Obrigado @renato
Obrigado @renato, está corrigido!
Apenas um aviso: a rolagem horizontal ainda está aparecendo no celular, quando puder dar uma olhada
Isso está acontecendo em todos os artigos para mim. Talvez seja algo exclusivo do iOS? Aqui estão algumas capturas de tela do Safari e do Chrome.
