L'expérience de Tecnoblog avec les commentaires Discourse

Ah, je comprends maintenant. J’avais pensé que le but de embedMaxHeight était d’afficher les commentaires dans un style plus natif, en réduisant au maximum le défilement (sauf dans les fils de discussion très longs, qui nécessiteraient toujours de faire défiler). C’est pourquoi je l’avais défini à 15000 px. Je vais le réduire un peu.

Dans ce cas, je pense que embedMinHeight ne fonctionne peut-être pas comme prévu. Même avec une valeur de 400 px, l’incrustation a toujours une hauteur d’au moins 600 px, avec un petit espace restant à la fin.

5 « J'aime »

Salut !

Le nouveau formulaire de commentaires, entièrement repensé, est nettement supérieur, surtout sur mobile ! Cependant, j’ai relevé deux petits problèmes :

  1. la largeur du formulaire dépasse celle de l’écran, ce qui impose un défilement horizontal non souhaité ;
  2. le composant de navigation indiquant le nombre de publications reste superposé au formulaire lors du défilement.

3 « J'aime »

Oui ! @keegan l’a conçu en prenant un cas d’usage comme priorité principale, nous sommes ravis que cela vous plaise. Nous ne l’avons fusionné que depuis quelques heures, nous travaillons donc encore sur les suites, comme la largeur cassée de la barre d’outils et le comportement d’envoi avec la touche 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 la peine de faire un test pour voir si cela augmente l’engagement ?

3 « J'aime »

Il s’agissait effectivement d’un bug, je viens de le corriger dans

2 « J'aime »

Ceci a été corrigé maintenant, 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/clair de votre blog avec la nouvelle intégration Discourse, de sorte que le changement de mode du blog modifie automatiquement le mode de l’intégration. Cependant, bien que l’intégration fonctionne correctement dans Firefox et Chrome, elle ne fonctionne pas avec Safari. Je suppose qu’il s’agit d’un problème de Discourse, car non seulement la fenêtre contextuelle « Autoriser l’accès » ne concerne que Safari, mais un autre problème lié au défilement incorrect de la barre de défilement affecte également uniquement Safari.

Ceci étant dit, je suis curieux de savoir comment vous avez réussi à faire fonctionner l’intégration du mode sombre/clair. J’ai lancé un sujet Mode sombre automatique pour les commentaires intégrés il y a plusieurs années, et grâce à cela, quelqu’un a pu écrire un script utilisant postMessage pour faire fonctionner les deux systèmes ensemble. Mais avec la nouvelle intégration complète des commentaires de Discourse, le script semble être cassé (le mode sombre du thème Discourse étant étrangement le défaut par défaut). 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 (même si vous utilisez WordPress et que j’utilise Ghost), seriez-vous d’accord pour 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 avec la configuration du mode sombre de mon blog.

Si votre blog et Discourse utilisent tous deux le mode sombre automatique qui suit les paramètres 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 je me souviens correctement, cela permet à Discourse de détecter si le système d’exploitation utilise le mode sombre, puis de s’ajuster en conséquence. Le post que j’ai initié, qui était une réponse à celui que vous avez lié (et qui y renvoyait également), concernait le bouton de bascule dans un blog qui commute manuellement entre les modes clair et sombre d’un blog (indépendamment du mode du système d’exploitation). Cela semble-t-il correct (et rend-il ainsi ma question précédente pertinente) ?

Pour être clair, voici le script qu’une personne a écrit pour l’utiliser sur mon blog, ce qui, je suppose, nécessite maintenant quelques ajustements (peut-être qu’il suffit de modifier 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 à jour Discourse vers la dernière version, mais je constate 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 horizontale 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) {
     /* Arrière-plan principal de l'Iframe */
    html, body {
        font-family: 'Inter', sans-serif;
    }
}
    
@media (prefers-color-scheme: dark) {
    /* Arrière-plan 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;
    }

    /* Arrière-plan 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 n'apparaissent pas) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Assure 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 surveillance sans lancer l’intégralité du tag. La configuration actuelle fausse nos analyses car elle déclenche un événement page_view, ce qui gonfle artificiellement toutes les statistiques du site.

Durant la nuit, nos pages vues ont grimpé en flèche, mais ces chiffres sont artificiels — ils n’ont aucun sens commercial.

Sans compter que nous dupliquons actuellement le chargement et le traitement des scripts.

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, et plus encore.

Concernant les analyses natives de Discourse, je suggère un ajustement supplémentaire : segmenter le trafic d’intégration dans sa propre catégorie. Cela nous permettrait de consulter séparément le trafic de la communauté et le trafic d’intégration.

2 « J'aime »

Merci beaucoup pour cela, j’apprécie. Cela me laisse cependant un peu perplexe. Lorsque j’essayais de faire fonctionner le bouton de mode sombre sur mon blog utilisant Ghost avec l’intégration Discourse (car cela ne fonctionnait pas par défaut), on m’a finalement dit que je devrais implémenter un code utilisant postMessage (que quelqu’un a créé pour moi et qui a fait l’affaire). Or, le code que vous avez fourni ne contient aucun JavaScript, ce qui n’a pas de sens pour moi, et je ne vois pas pourquoi cela fonctionnerait immédiatement grâce à l’utilisation de WordPress. Quoi qu’il en soit, merci quand même.

Bonjour à tous, je fais un petit point pour voir si quelqu’un a eu l’occasion d’examiner cela.

Mes utilisateurs signalent qu’ils ne peuvent pas du tout utiliser le formulaire en raison du problème avec le champ de texte, ce qui devient un véritable blocage pour notre communauté.

LucasMiller : L’interface de commentaires sous les articles présente un bug ; je ne peux rien taper pour publier (testé sur iPhone et Android/Xiaomi). Vous cliquez sur le champ de texte pour écrire, mais aucune saisie n’est enregistrée. Merci de jeter un coup d’œil quand vous le pourrez !

Cela ne se produit que sur les articles où il s’agirait du premier commentaire.

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

Le contournement via Markdown aide, mais ce n’est pas idéal pour l’utilisateur moyen. Toute information ou solution temporaire serait grandement appréciée ! Merci encore pour votre aide.

cc @Falco

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

Cela devrait régler le problème, cela sera déployé plus tard aujourd’hui.

Merci @renato

4 « J'aime »

Merci @renato, c’est corrigé !

Juste un petit rappel : le défilement horizontal s’affiche toujours sur mobile, quand vous aurez un moment pour jeter un œil.

1 « J'aime »

Je ne parviens pas à reproduire cela sur mon téléphone.

1 « J'aime »

Cela se produit pour moi sur tous les articles. Peut-être est-ce un problème spécifique à iOS ? Voici quelques captures d’écran provenant de Safari et Chrome.

1 « J'aime »

Pas de reproduction pour moi, sur iOS également.