Die Erfahrung von Tecnoblog mit Discourse-Kommentaren

[Thiago_Mobilon]

@Falco

Ich denke, du wirst dort einen max-height-Wert auf einen vernünftigeren Wert setzen müssen, zum Beispiel 1000 bis 1500px.

So wird dieses Feature dein ursprüngliches Problem lösen:

@Thiago_Mobilon

Wenn ein Beitrag keine Kommentare hat, entsteht eine seltsame leere Lücke.

Ah, jetzt verstehe ich. Ich dachte, der Zweck von embedMaxHeight sei es, die Kommentare in einem natürlicheren Stil darzustellen und das Scrollen so weit wie möglich zu minimieren (außer bei umfangreichen Threads, die weiterhin Scrollen erfordern würden). Deshalb habe ich es auf 15000px gesetzt. Ich werde es etwas reduzieren.

In diesem Fall glaube ich, dass embedMinHeight möglicherweise nicht wie beabsichtigt funktioniert. Auch wenn es auf 400px gesetzt ist, hat das Embed immer noch eine Höhe von mindestens 600px, wobei am Ende eine kleine Lücke bleibt.

[Thiago_Mobilon]

Hey!

Das neu gestaltete Kommentarformular ist deutlich besser, insbesondere im mobilen Bereich! Allerdings habe ich zwei kleinere Probleme festgestellt:

1. Die Breite des Formulars überschreitet die des Displays, was zu einem unbeabsichtigten horizontalen Scrollen führt;
2. Das Navigations-Element, das die Anzahl der Beiträge anzeigt, überlagert das Formular beim Scrollen weiterhin.

[Falco]

@Thiago_Mobilon

Das neu gestaltete Kommentarformular ist deutlich besser, insbesondere für die mobile Nutzung!

Ja! @keegan hat es mit genau diesem Anwendungsfall im Kern entwickelt, freut mich, dass es dir gefällt. Wir haben es aber erst vor ein paar Stunden gemerged, also arbeiten wir noch an Folgemaßnahmen, wie z. B. der Breitenanpassung der Symbolleiste und dem Versenden bei Enter-Taste.

[Thiago_Mobilon]

Ich frage mich, ob es nicht eine gute Idee wäre, dieses Formular auch direkt im Thread (auf Discourse) anzuzeigen. Ein offenes Formular wirkt in der Regel einladender und benutzerfreundlicher für ein nicht-technisches Publikum. Vielleicht ist es einen Test wert, um zu sehen, ob es die Interaktion steigert?

[Falco]

@Thiago_Mobilon

In diesem Fall vermute ich, dass embedMinHeight nicht wie beabsichtigt funktioniert. Selbst wenn es auf 400px eingestellt ist, hat das Embed immer noch eine Höhe von mindestens 600px, mit einem kleinen Abstand am Ende.

Das war tatsächlich ein Bug, den ich gerade behoben habe:

FIX: Allow fullApp embed iframe to shrink with content (#39376)

[Falco]

@Thiago_Mobilon

die Breite des Formulars übersteigt die des Displays, was zu einem unbeabsichtigten horizontalen Scrollen führt;

Dies wurde jetzt behoben, bitte aktualisieren!

[stromfeldt (Allan Strømfeldt Christensen)]

@Thiago_Mobilon

Allerdings habe ich zwei kleinere Probleme identifiziert

Ich habe ein weiteres Problem auf Ihrer Website festgestellt. Es scheint, dass Sie das Darkmode/Lightmode-System Ihres Blogs mit dem neuen Discourse-Embed integriert haben, sodass eine Änderung des Blog-Modus automatisch den Embed-Modus ändert. Allerdings funktioniert die Integration zwar in Firefox und Chrome einwandfrei, nicht jedoch in Safari. Ich vermute, dass dies ein Discourse-Problem ist, da nicht nur das „Zugriff erlauben“-Popup nur für Safari relevant ist, sondern auch ein weiteres Problem mit der fehlerhaften Funktion der Bildlaufleiste nur Safari betrifft.

Davon einmal abgesehen, bin ich neugierig, wie Sie die Darkmode/Lightmode-Integration zum Laufen gebracht haben. Ich habe vor einigen Jahren einen Beitrag über Automatisches Darkmode für eingebettete Kommentare gestartet, und daraufhin hat jemand ein Skript mit postMessage geschrieben, um die beiden Systeme zusammenarbeiten zu lassen. Doch mit Discourses neuem vollständigen Kommentarsystem-Embed scheint das Skript nicht mehr zu funktionieren (wobei der Standard seltsamerweise das Darkmode des Discourse-Themas ist). Meine Frage ist also: Haben Sie ein postMessage-Skript geschrieben, das Sie für Discourses neues Embed-System aktualisiert haben? Und falls ja (und obwohl Sie WordPress verwenden und ich Ghost), würden Sie bereit sein, Ihren Code zu teilen? Vielleicht könnte ich Ihren Code mit meinem vergleichen, um die Integration mit Ghost und meinem Blog-Darkmode zum Laufen zu bringen.

[Falco]

@stromfeldt

Davon mal abgesehen, ich bin neugierig, wie du die Darkmode/Lightmode-Integration zum Laufen gebracht hast.

Wenn sowohl dein Blog als auch Discourse den automatischen Darkmode verwenden, der dem System folgt, bleiben sie synchronisiert.

Wir haben den automatischen Darkmode zu Discourse hinzugefügt in Automatic Dark Mode color scheme switching

[stromfeldt (Allan Strømfeldt Christensen)]

@Falco

Wenn sowohl dein Blog als auch Discourse den automatischen Dunkelmodus des Systems verwenden, bleiben sie synchron.

Wir haben den automatischen Dunkelmodus in Discourse in Automatischer Farbwechslung für den Dunkelmodus hinzugefügt.

Ja, aber wenn ich es richtig verstehe und mich richtig erinnere, ermöglicht das Discourse, zu erkennen, ob das Betriebssystem den Dunkelmodus verwendet, und sich entsprechend anzupassen. Der Beitrag, den ich gestartet habe, der eine Antwort auf den von dir verlinkten Beitrag war (und der auch auf diesen verlinkte), betraf den Schalter/die Schaltfläche in einem Blog, der/die manuell zwischen den hellen und dunklen Modi eines Blogs wechselt (unabhängig vom Modus des Betriebssystems). Klingt das richtig (und macht meine vorherige Frage damit relevant)?

Um es klarzustellen: Dies ist das Skript, das jemand für die Verwendung auf meinem Blog geschrieben hat, das jetzt wohl etwas angepasst werden muss (vielleicht müssen nur ein paar Klassen geändert werden, ich bin mir nicht sicher).

<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');
        // Elemente nach domContentLoaded aktualisieren
        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 ? "dunkel" : "hell",
                discourseUrl
            );
        }
    };

  window.addEventListener("message", handleMessageListener);
</script>

[Thiago_Mobilon]

@Falco

@Thiago_Mobilon

the form’s width exceeds that of the display, necessitating an unintended horizontal scroll;

Das wurde jetzt behoben, bitte aktualisieren!

Ich habe Discourse gerade auf die neueste Version aktualisiert, aber ich sehe zwei Probleme:

1. Das Textfeld ist defekt — es erscheint nichts, wenn man tippt
   1. Es funktioniert, wenn ich den Modus auf Markdown umstelle.
2. Das Embed zeigt immer noch eine horizontale Bildlaufleiste auf Safari/iOS;

[Thiago_Mobilon]

@stromfeldt

Könntest du deinen Code teilen?

Klar,

Das ist das CSS, das ich in Discourse verwende

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) {
     /* Haupt-Hintergrund des Iframes */
    html, body {
        font-family: 'Inter', sans-serif;
    }
}
    
@media (prefers-color-scheme: dark) {
    /* Haupt-Hintergrund des Iframes */
    html, body {
        background-color: #1e2021 !important; /* Dein --bg */
        color: #f7f7f7 !important; /* Dein --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);
    }
    
    /* Farbe des Haupttextes */
    .embedded-posts, 
    .embedded-posts p,
    .embedded-posts h1, 
    .embedded-posts h2, 
    .embedded-posts h3 {
        color: #f7f7f7 !important;
    }

    /* Hintergrund von Blöcken, wie dem Footer des Embeds (Antwortoptionen) */
    .embedded-footer {
        background: #27292b !important; /* Dein --bg-2 */
        border-top: 1px solid #27292b !important;
    }

    /* Farbe der Ränder (damit helle Ränder nicht sichtbar sind) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Stellt sicher, dass Links/Buttons die richtige Farbe haben */
    // a:link, a:visited, .topic-post .post-action-list button {
    //     color: #35bcf1 !important; /* Dein --link-color */
    // }
}

[Thiago_Mobilon]

@Falco

@Thiago_Mobilon

2. Analytics-Chaos

Derzeit löst das Embed Google-Analytics-/GTM-Skripte aus. Dies verdoppelt unsere Seitenaufrufe (ein Hit für den Beitrag, ein weiterer für das iframe), was unsere Daten verfälscht. Es wäre ideal, wenn das System erkennen könnte, dass es sich in einem iframe befindet, und alle Tracking-Skripte automatisch deaktivieren würde (auch die Discourse-Analytics).

Ich habe mich dafür entschieden, diese zu taggen.

In diesem Fall wäre meiner Meinung nach der richtige Ansatz, das Monitoring-Event auszulösen, ohne das gesamte Tag zu feuern. Die aktuelle Konfiguration verzerrt unsere Analytics, da sie ein page_view-Event auslöst, was alle Website-Statistiken künstlich aufbläht.

Über Nacht sind unsere Seitenaufrufe in die Höhe geschossen, aber diese Zahlen sind künstlich – sie machen aus kommerzieller Sicht keinen Sinn.

Ganz zu schweigen davon, dass wir aktuell das Laden und Verarbeiten von Skripten duplizieren.

Im Fall von GTM (Google Tag Manager) ist es sogar noch schlimmer: Jedes andere Skript im Konto wird doppelt injiziert, einschließlich Google- und Meta-Anzeigen-Pixel, Skripte von Drittanbieter-Werbenetzwerken und mehr.

Was die nativen Discourse-Analytics betrifft, schlage ich eine weitere Anpassung vor: Segmentieren Sie den Embed-Verkehr in eine eigene Kategorie. Dies würde es uns ermöglichen, Community-Verkehr und Embed-Verkehr separat anzuzeigen.

[stromfeldt (Allan Strømfeldt Christensen)]

Vielen Dank dafür, ich schätze das sehr. Es lässt mich jedoch etwas verwirrt zurück. Als ich versuchte, den Dark-Mode-Umschalter auf meinem Ghost-Blog mit dem Discourse-Embed zum Laufen zu bringen (da dies standardmäßig nicht funktionierte), wurde mir letztlich gesagt, dass ich Code implementieren müsste, der postMessage verwendet (was jemand für mich erstellt hat und der tatsächlich funktioniert hat). Der von Ihnen bereitgestellte Code enthält jedoch überhaupt kein JavaScript, was für mich keinen Sinn ergibt, und ich kann nicht nachvollziehen, warum alles aufgrund der WordPress-Nutzung automatisch funktionieren sollte. Auf jeden Fall trotzdem vielen Dank.

[Thiago_Mobilon]

@Thiago_Mobilon

Ich habe Discourse gerade auf die neueste Version aktualisiert, aber ich sehe zwei Probleme:

1. Das Textfeld ist fehlerhaft – es erscheint nichts, wenn man tippt.
2. Es funktioniert, wenn ich den Modus auf Markdown umstelle.
3. Die Einbettung zeigt weiterhin eine horizontale Bildlaufleiste auf Safari/iOS.

Hallo zusammen, ich wollte nur nachfragen, ob sich jemand bereits damit befasst hat.

Meine Benutzer melden, dass sie das Formular aufgrund des Textfeldproblems überhaupt nicht verwenden können, was für unsere Community zu einem gewissen Blockierungspunkt wird.

LucasMiller: Die Kommentar-Schnittstelle unter den Artikeln hat einen Fehler; ich kann nichts eingeben, um einen Kommentar zu posten (getestet auf iPhone und Android/Xiaomi). Man klickt auf das Textfeld zum Tippen, aber es registriert keine Eingabe. Bitte schaue dir das an, wenn du kannst!

Dies geschieht nur bei Artikeln, bei denen es der erste Kommentar wäre.

LucasMiller: Ich konnte nur posten, indem ich ein Zitat ohne Text erstellte. Erst nachdem ich zur Community-Schnittstelle weitergeleitet wurde (statt unter dem Artikel zu bleiben), konnte ich meinen Kommentar tatsächlich hinzufügen.

Der Markdown-Workaround hilft, aber er ist nicht ideal für den durchschnittlichen Benutzer. Jegliche Einblicke oder vorübergehende Lösungen wären sehr dankenswert! Vielen Dank nochmals für die Hilfe.

cc @Falco

[Falco]

@Thiago_Mobilon

Im Fall von GTM (Google Tag Manager) ist es noch schlimmer: Jeder zweite Skript im Konto wird doppelt eingefügt, einschließlich Google- und Meta-Anzeigen-Pixel, Skripten von Drittanbieter-Werbenetzwerken und mehr.

FIX: Skip third-party analytics tags in full app embed iframes (#39534)

@Thiago_Mobilon

Bezüglich der nativen Discourse-Analyse schlage ich eine weitere Anpassung vor: Unterteile den Embed-Verkehr in eine eigene Kategorie. Dies würde es uns ermöglichen, Community-Verkehr und Embed-Verkehr separat anzuzeigen.

FEATURE: Route full app embed pageviews into a dedicated `page_view_embed` counter (#39535)

[Falco]

@Thiago_Mobilon

@Thiago_Mobilon

Ich habe Discourse gerade auf die neueste Version aktualisiert, aber ich habe zwei Probleme festgestellt:

1. Das Textfeld ist defekt – es erscheint nichts, wenn man tippt.
2. Es funktioniert, wenn ich den Modus auf Markdown umstelle.
3. Die Einbettung zeigt auf Safari/iOS weiterhin eine horizontale Bildlaufleiste an.

Hallo zusammen, ich wollte nur nachhaken, ob sich jemand bereits darum gekümmert hat?

Meine Nutzer melden, dass sie das Formular aufgrund des Problems mit dem Textfeld überhaupt nicht verwenden können, was für unsere Community zu einem gewissen Blockierfaktor wird.

LucasMiller: Die Kommentarschnittstelle unter den Artikeln hat einen Fehler; ich kann nichts eingeben, um einen Kommentar zu posten (auf iPhone und Android/Xiaomi getestet). Man klickt auf das Textfeld, um zu tippen, aber es registriert einfach keine Eingabe. Bitte schaut euch das an, wenn ihr könnt!

Das passiert nur bei Artikeln, bei denen es der erste Kommentar sein würde.

LucasMiller: Ich konnte nur posten, indem ich ein Zitat ohne Text erstellt habe. Erst nachdem ich zur Community-Schnittstelle weitergeleitet wurde (statt unter dem Artikel zu bleiben), konnte ich meinen Kommentar tatsächlich hinzufügen.

Der Markdown-Workaround hilft, aber er ist für den durchschnittlichen Nutzer nicht ideal. Jede Einsicht oder temporäre Lösung wäre sehr willkommen! Nochmal danke für die Hilfe.

cc @Falco

Das sollte das Problem beheben, es wird heute noch eingefügt.

FIX: Prevent `DockedComposer` from wiping its draft in rich editor mode (#39537)

Danke @renato

[Thiago_Mobilon]

@Falco

Das sollte es beheben, es wird heute noch gepusht.

FIX: Prevent `DockedComposer` from wiping its draft in rich editor mode - Pull Request #39537 - discourse/discourse - GitHub

Danke @renato, es ist behoben!

Nur zur Info: Das horizontale Scrollen ist auf dem Handy immer noch zu sehen, wenn du mal Zeit hast, dich drum zu kümmern.

[Falco]

@Thiago_Mobilon

die horizontale Bildlaufleiste wird auf dem Handy weiterhin angezeigt, wenn du mal Zeit findest, dir das anzuschauen

Ich kann das auf meinem Handy nicht nachvollziehen

[Thiago_Mobilon]

@Falco

@Thiago_Mobilon

Das horizontale Scrollen ist auf dem Handy immer noch zu sehen, wann immer du dazu kommst, dir das anzusehen.

Ich kann das auf meinem Handy nicht reproduzieren.

Bei mir tritt das Problem bei allen Artikeln auf. Vielleicht ist es ein iOS-spezifisches Problem? Hier sind einige Screenshots von Safari und Chrome.

[pmusaraj (Penar Musaraj)]

Bei mir lässt sich das nicht reproduzieren, auch nicht unter iOS.