Experiência do Tecnoblog com comentários no Discourse

Ah, entendi agora. Eu achava que o propósito de embedMaxHeight era renderizar os comentários em um estilo mais nativo, minimizando a rolagem tanto quanto possível (exceto em discussões extensas, que ainda exigiriam rolagem). Por isso, eu o configurei para 15000px. Vou reduzi-lo um pouco.

Nesse caso, acredito que embedMinHeight pode não estar funcionando como esperado. Mesmo com ele configurado para 400px, o embed ainda tem uma altura de pelo menos 600px, com uma pequena lacuna restante no final.

5 curtidas

Olá!

O formulário de comentários recém-redesenado é muito superior, especialmente na experiência mobile! No entanto, identifiquei dois pequenos problemas:

  1. a largura do formulário excede a da tela, exigindo uma rolagem horizontal indesejada;
  2. o componente de navegação que indica a contagem de postagens continua sobrepondo o formulário durante a rolagem.

3 curtidas

Sim! @keegan o construiu tendo um dos casos de uso principais como base. Ficamos felizes que você tenha gostado. Nós o mesclamos há apenas algumas horas, então ainda estamos trabalhando em melhorias, como a quebra de largura da barra de ferramentas e o comportamento de envio ao pressionar Enter.

4 curtidas

Será que não seria uma boa ideia exibir esse 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 fazer um teste para ver se isso aumenta o engajamento?

3 curtidas

Isso foi realmente um bug, acabei de corrigi-lo em

2 curtidas

Isso foi corrigido agora, por favor atualize!

1 curtida

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 altera 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 supondo que isso seja um problema do Discourse, já que não apenas o popup “Permitir acesso” é relevante apenas para o Safari, mas outro problema, em que a barra de rolagem funciona incorretamente, também afeta apenas o Safari.

Deixando isso de lado por enquanto, estou curioso sobre como você conseguiu fazer a integração do modo escuro/claro funcionar. Iniciei um tópico Modo escuro automático para comentários incorporados há alguns anos, e a partir disso consegui que alguém escrevesse um script usando postMessage para fazer os dois sistemas funcionarem juntos. Mas com o novo sistema de embed de comentários completos do Discourse, o script parece ter sido quebrado (sendo que o padrão, de forma estranha, é o modo escuro do tema do Discourse). Então minha pergunta é: você já tinha um script postMessage escrito anteriormente, que você atualizou para o novo sistema de embed do Discourse? E, se sim (mesmo que você use WordPress e eu use Ghost), você se importaria de compartilhar seu código? Talvez eu pudesse comparar seu código com o que tenho para tentar fazer as coisas funcionarem com o Ghost e com a configuração de modo escuro do meu blog.

Se tanto seu blog quanto o Discourse usarem o modo escuro automático seguindo o sistema, eles permanecerão sincronizados.

Adicionamos o modo escuro automático ao Discourse em Automatic Dark Mode color scheme switching

2 curtidas

Sim, mas, se entendi e lembro corretamente, isso permite que o Discourse detecte se o sistema operacional está usando o modo escuro e, em seguida, se ajuste de acordo. O post que iniciei, que foi uma resposta ao que você vinculou (e que também vinculou a ele), tratava do botão de alternância em um blog que muda manualmente entre os modos claro e escuro do blog (independentemente do modo do sistema operacional). Isso parece correto (e, por sua vez, torna minha pergunta anterior relevante)?

Para deixar claro, este é o script que fiz alguém escrever para uso no meu blog, que, acho, agora precisa de alguns ajustes (talvez apenas precise de algumas classes alteradas, 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:

  1. O campo de texto está quebrado — nada aparece quando você digita
    1. Funciona se eu mudar o modo para Markdown.
  2. O embed ainda mostra uma barra de rolagem horizontal no Safari/iOS;

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 footer 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 */
    // }
}

Neste caso, acredito que a abordagem correta seria disparar o evento de monitoramento sem acionar a tag completa. A configuração atual distorce nossos Analytics 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.

Para não mencionar que, atualmente, estamos duplicando o carregamento e o processamento de scripts.

No caso do GTM (Google Tag Manager), é ainda pior: todos os outros scripts da conta estão sendo injetados duas vezes, incluindo pixels do Google e Meta Ads, scripts de redes de anúncios de terceiros e muito mais.

Em relação aos analytics nativos do Discourse, sugiro um ajuste adicional: 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.

2 curtidas

Muito obrigado por isso, eu aprecio. No entanto, isso me deixa um pouco confuso. Quando eu estava tentando fazer o alternador de modo escuro do meu blog que usa o Ghost funcionar com o embed do Discourse (já que não funcionava por padrão), fui finalmente informado de que teria que implementar algum código usando postMessage (que alguém construiu para mim e que resolveu o problema). Mas o código que você forneceu não inclui nenhum JS, o que não faz sentido para mim, e não consigo ver por que tudo funcionaria imediatamente devido ao uso do WordPress. De qualquer forma, obrigado mesmo assim.

Olá a todos, só passando para ver se alguém já teve a oportunidade de investigar isso.

Meus usuários estão relatando que não conseguem usar o formulário de forma alguma devido ao problema com o campo de texto, então isso está se tornando um bloqueio para nossa comunidade.

LucasMiller: A interface de comentários abaixo dos artigos tem um bug; não consigo digitar nada para postar (testei tanto no iPhone quanto no Android/Xiaomi). Você clica no campo de texto para digitar, mas ele simplesmente não registra nenhuma entrada. Por favor, dê uma olhada quando puder!

Isso só está acontecendo em artigos onde seria o primeiro comentário.

LucasMiller: Consegui postar apenas criando uma citação sem adicionar nenhum texto. Só depois que fui redirecionado para a interface da Comunidade (em vez de permanecer abaixo do artigo) que pude realmente adicionar meu comentário.

A solução alternativa com Markdown ajuda, mas não é ideal para o usuário comum. Qualquer insight ou correção temporária seria muito apreciada! Obrigado novamente pela ajuda.

cc @Falco

1 curtida
4 curtidas

Isso deve corrigir o problema; a correção será implementada ainda hoje.

Obrigado, @renato.

4 curtidas

Obrigado, @renato, está corrigido!

Apenas um aviso: a rolagem horizontal ainda aparece no celular, sempre que puder dar uma olhada.

1 curtida

Não consigo reproduzir isso no meu celular

1 curtida

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.

1 curtida

Sem reprodução para mim, também no iOS.