L'expérience de Tecnoblog avec les commentaires Discourse

Ah, je comprends maintenant. Je pensais que le but de `embedMaxHeight` était d’afficher les commentaires dans un style plus « natif », en minimisant le défilement autant que possible (sauf pour les fils de discussion très longs, qui nécessiteraient quand même de faire défiler). C’est pourquoi je l’avais fixé à 15000px. Je vais le réduire un peu.

Dans ce cas, je crois que `embedMinHeight` ne fonctionne pas comme prévu. Même avec une valeur de 400px, l’intégration a toujours une hauteur d’au moins 600px, avec un petit espace vide qui reste à la fin.

5 « J'aime »

Salut !

Le formulaire de commentaires récemment redessiné est nettement supérieur, en particulier dans l’expérience mobile ! Cependant, j’ai identifié deux petits problèmes :

  1. la largeur du formulaire dépasse celle de l’écran, ce qui entraîne un défilement horizontal involontaire ;
  2. l’élément de navigation indiquant le nombre de messages continue de se superposer au formulaire pendant le défilement.

3 « J'aime »

Ouais ! @keegan l’a construit avec cela comme cas d’utilisation principal, content que ça te plaise. On ne l’a fusionné que il y a quelques heures, donc on travaille encore sur les suites, comme la rupture de largeur de la barre d’outils et le comportement d’envoi sur Entrée.

4 « J'aime »

Je me demande s’il ne serait pas judicieux d’afficher ce formulaire directement dans le fil de discussion (sur Discourse) également. Avoir le formulaire ouvert est généralement beaucoup plus accueillant et convivial pour un public non technique. Peut-être vaut-il le coup de tester pour voir si cela augmente l’engagement ?

3 « J'aime »

C’était effectivement un bug, je viens de le corriger ici :

2 « J'aime »

Cela a été corrigé, veuillez mettre à jour !

1 « J'aime »

J’ai remarqué un autre problème sur votre site. Je vois que vous avez intégré le système de mode sombre/lumineux de votre blog avec le nouvel intégration Discourse, de sorte que changer le mode du blog change automatiquement le mode de l’intégration. Cependant, bien que l’intégration fonctionne bien dans Firefox et Chrome, elle ne fonctionne pas avec Safari. Je suppose que c’est un problème de Discourse, car non seulement la popup “Autoriser l’accès” est uniquement pertinente pour Safari, mais un autre problème de défilement incorrect affecte également uniquement Safari.

Ceci mis à part, je suis curieux de savoir comment vous avez réussi à faire fonctionner l’intégration du mode sombre/lumineux. J’ai initié un post sur le mode sombre automatique pour les commentaires intégrés il y a plusieurs années, et j’ai pu faire écrire un script à quelqu’un en utilisant postMessage pour faire fonctionner les deux systèmes ensemble. Mais avec le nouveau système d’intégration de commentaires complets de Discourse, le script semble être cassé (avec le défaut étrange étant le mode sombre du thème Discourse). Ma question est donc : aviez-vous un script postMessage écrit précédemment, que vous avez mis à jour pour le nouveau système d’intégration de Discourse ? Et si oui (et même si vous utilisez WordPress et moi Ghost), seriez-vous prêt à partager votre code ? Peut-être pourrais-je comparer votre code avec ce que j’ai pour essayer de faire fonctionner les choses avec Ghost et la configuration du mode sombre de mon blog.

Si votre blog et Discourse utilisent tous deux le mode sombre automatique en fonction du système, ils resteront synchronisés.

Nous avons ajouté le mode sombre automatique à Discourse dans Automatic Dark Mode color scheme switching

2 « J'aime »

Oui, mais si je comprends bien et si ma mémoire est bonne, cela permet à Discourse de détecter si le système d’exploitation utilise le mode sombre, puis de s’ajuster en conséquence. Le sujet que j’ai initié, qui était une réponse à celui que vous avez lié (et qui le liait également), concernait le basculeur/bouton sur un blog qui permet de passer manuellement entre les modes clair et sombre d’un blog (indépendamment du mode du système d’exploitation). Est-ce que cela semble correct (et rend ainsi ma question précédente pertinente) ?

Pour être clair, voici le script que quelqu’un a écrit pour mon blog, qui nécessite probablement quelques ajustements (peut-être juste changer quelques classes, je ne suis pas sûr).

<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');
        // Mettre à jour les éléments aprè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>

Je viens de mettre Discourse à jour vers la dernière version, mais je rencontre deux problèmes :

  1. Le champ de texte est cassé — rien n’apparaît lorsque vous tapez
    1. Cela fonctionne si je passe en mode Markdown.
  2. L’intégration affiche toujours une barre de défilement horizontal sur Safari/iOS ;

Bien sûr,

Voici le CSS que j’utilise dans 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) {
     /* Fond principal de l'Iframe */
    html, body {
        font-family: 'Inter', sans-serif;
    }
}
    
@media (prefers-color-scheme: dark) {
    /* Fond principal de l'Iframe */
    html, body {
        background-color: #1e2021 !important; /* Votre --bg */
        color: #f7f7f7 !important; /* Votre --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);
    }
    
    /* Couleur du texte principal */
    .embedded-posts, 
    .embedded-posts p,
    .embedded-posts h1, 
    .embedded-posts h2, 
    .embedded-posts h3 {
        color: #f7f7f7 !important;
    }

    /* Fond des blocs, comme le pied de page de l'embed (options de réponse) */
    .embedded-footer {
        background: #27292b !important; /* Votre --bg-2 */
        border-top: 1px solid #27292b !important;
    }

    /* Couleur des bordures (pour que les bordures claires ne soient pas visibles) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Garantit que les liens/boutons aient la bonne couleur */
    // a:link, a:visited, .topic-post .post-action-list button {
    //     color: #35bcf1 !important; /* Votre --link-color */
    // }
}

Dans ce cas, je pense que la bonne approche serait de déclencher l’événement de suivi sans exécuter la balise entière. La configuration actuelle fausse nos analyses car elle déclenche un événement page_view, ce qui gonfle artificiellement toutes les statistiques du site.

Du jour au lendemain, nos pages vues ont explosé, mais ces chiffres sont artificiels — ils n’ont aucun sens commercial.

Sans parler du fait que nous chargeons et traitons actuellement les scripts en double.

Dans le cas de GTM (Google Tag Manager), c’est encore pire : chaque autre script du compte est injecté deux fois, y compris les pixels Google et Meta Ads, les scripts de réseaux publicitaires tiers, etc.

Concernant les analyses natives Discourse, je suggère un autre ajustement : segmenter le trafic des iframes dans une catégorie distincte. Cela nous permettrait de distinguer le trafic de la communauté du trafic des iframes.

2 « J'aime »

Merci beaucoup pour cela, je vous en suis reconnaissant. Cela me laisse toutefois un peu perplexe. Lorsque j’ai essayé de faire fonctionner le basculement du mode sombre sur mon blog utilisant Ghost avec l’intégration Discourse (puisque cela ne fonctionnait pas par défaut), on m’a finalement indiqué que je devais implémenter du code utilisant postMessage (que j’ai fait développer par quelqu’un, et qui a fait l’affaire). Mais le code que vous avez fourni ne contient aucun JS, ce qui ne me paraît pas logique, et je ne vois pas pourquoi tout fonctionnerait automatiquement grâce à l’utilisation de WordPress. Quoi qu’il en soit, merci quand même.

Salut tout le monde, je passe juste voir si quelqu’un a eu l’occasion de regarder ça de plus près ?

Mes utilisateurs me signalent qu’ils ne peuvent pas utiliser le formulaire à cause du problème avec le champ de texte, donc ça commence à bloquer un peu notre communauté.

LucasMiller : L’interface de commentaire sous les articles a un bug ; je ne peux rien taper pour publier (testé sur iPhone et Android/Xiaomi). On clique sur le champ de texte pour écrire, mais il ne prend aucune saisie en compte. Merci de jeter un œil quand vous pourrez !

Cela n’arrive que sur les articles où ce serait le premier commentaire.

LucasMiller : Je n’ai réussi à publier qu’en créant une citation sans ajouter de texte. Ce n’est qu’après avoir été redirigé vers l’interface Communauté (au lieu de rester sous l’article) que j’ai pu ajouter mon commentaire.

La solution avec Markdown aide, mais ce n’est pas idéal pour l’utilisateur moyen. Tout éclairage ou correctif temporaire serait très apprécié ! Merci encore pour votre aide.

cc @Falco

1 « J'aime »
4 « J'aime »

Cela devrait résoudre le problème, cela sera intégré plus tard aujourd’hui.

Merci @renato

4 « J'aime »

Merci @renato, c’est corrigé !

Juste pour information : le défilement horizontal est toujours visible sur mobile, quand tu auras un moment pour jeter un œil.

1 « J'aime »

Je n’arrive pas à reproduire ce problème sur mon téléphone.

1 « J'aime »

Ça m’arrive sur tous les articles. C’est peut-être un problème spécifique à iOS ? Voici quelques captures d’écran depuis Safari et Chrome.

1 « J'aime »

Je ne reproduis pas le problème, sur iOS non plus.