L'esperienza di Tecnoblog con i commenti di Discourse

Ah, ora capisco. Pensavo che lo scopo di embedMaxHeight fosse quello di rendere i commenti in uno stile più nativo, riducendo al minimo lo scorrimento possibile (tranne che in discussioni molto lunghe, che richiederebbero comunque lo scorrimento). Ecco perché l’ho impostato a 15000px. Lo ridurrò un po’.

In tal caso, credo che embedMinHeight potrebbe non funzionare come previsto. Anche impostandolo a 400px, l’embed ha comunque un’altezza di almeno 600px, con un piccolo spazio residuo alla fine.

5 Mi Piace

Ciao!

Il nuovo modulo per i commenti ridisegnato è nettamente superiore, specialmente nell’esperienza mobile! Tuttavia, ho individuato due piccoli problemi:

  1. la larghezza del modulo supera quella dello schermo, rendendo necessario uno scorrimento orizzontale non previsto;
  2. il componente di navigazione che indica il numero di post continua a sovrapporsi al modulo durante lo scorrimento.

3 Mi Piace

Esatto! @keegan lo ha sviluppato pensando proprio a questo come caso d’uso principale, siamo felici che ti piaccia. L’abbiamo unito al codice principale solo poche ore fa, quindi stiamo ancora lavorando su alcuni affinamenti, come la larghezza che si rompe nella barra degli strumenti e il comportamento di invio con il tasto Invio.

4 Mi Piace

Mi chiedo se non sarebbe una buona idea mostrare questo modulo direttamente nel thread (su Discourse) anche. Avere il modulo aperto è solitamente molto più accogliente e user-friendly per un pubblico non tecnico. Forse vale la pena fare un test per vedere se aumenta l’engagement?

3 Mi Piace

Si trattava effettivamente di un bug, l’ho appena corretto in

2 Mi Piace

Questo è stato corretto ora, per favore aggiornate!

1 Mi Piace

Ho notato un altro problema sul tuo sito. Vedo che hai integrato il sistema darkmode/lightmode del tuo blog con il nuovo embed di Discourse, in modo che cambiando la modalità del blog cambi automaticamente anche quella dell’embed. Tuttavia, mentre l’integrazione funziona bene su Firefox e Chrome, non funziona su Safari. Immagino che si tratti di un problema di Discourse, dato che non solo il popup “Consenti accesso” è rilevante solo per Safari, ma anche un altro problema relativo al funzionamento errato della barra di scorrimento riguarda esclusivamente Safari.

Metendo da parte tutto ciò, sono curioso di sapere come hai realizzato l’integrazione tra darkmode e lightmode. Ho avviato un post intitolato Modalità scura automatica per i commenti incorporati alcuni anni fa, e grazie a ciò sono riuscito a far scrivere a qualcuno uno script utilizzando postMessage per far funzionare insieme i due sistemi. Ma con il nuovo sistema completo di embed dei commenti di Discourse, lo script sembra essere stato interrotto (con l’impostazione predefinita stranamente che è la modalità scura del tema di Discourse). Quindi la mia domanda è: avevi già uno script postMessage scritto in precedenza, che hai aggiornato per il nuovo sistema di embed di Discourse? E in tal caso (anche se tu usi WordPress e io uso Ghost), ti importerebbe condividere il tuo codice? Forse potrei confrontare il tuo codice con quello che ho io per provare a far funzionare le cose con Ghost e con la mia configurazione di darkmode del blog.

Se sia il tuo blog che Discourse utilizzano la modalità scura automatica in base alle impostazioni di sistema, rimarranno sincronizzati.

Abbiamo aggiunto la modalità scura automatica a Discourse in Automatic Dark Mode color scheme switching

2 Mi Piace

Sì, ma se ho capito bene e ricordo correttamente, ciò permette a Discourse di rilevare se il sistema operativo sta utilizzando la modalità scura e di adattarsi di conseguenza. Il post che ho avviato, che era una risposta a quello a cui hai linkato (e che a sua volta vi faceva riferimento), riguardava il pulsante/interruttore in un blog che commuta manualmente tra le modalità chiara e scura del blog (indipendentemente dalla modalità del sistema operativo). Sembra corretto (e di conseguenza rende rilevante la mia domanda precedente)?

Per chiarezza, questo è lo script che ho fatto scrivere a qualcuno per l’uso sul mio blog, che ora credo abbia bisogno di qualche aggiustamento (forse ha solo bisogno di alcune classi modificate, non sono sicuro).

<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');
        // Aggiorna gli elementi dopo 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>

Ho appena aggiornato Discourse all’ultima versione, ma sto riscontrando due problemi:

  1. Il campo di testo non funziona: non appare nulla quando digiti
    1. Funziona se cambio la modalità in Markdown.
  2. L’embed mostra ancora una barra di scorrimento orizzontale su Safari/iOS;

Certamente,

Questo è il CSS che sto utilizzando in 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) {
     /* Sfondo principale dell'Iframe */
    html, body {
        font-family: 'Inter', sans-serif;
    }
}
    
@media (prefers-color-scheme: dark) {
    /* Sfondo principale dell'Iframe */
    html, body {
        background-color: #1e2021 !important; /* Il tuo --bg */
        color: #f7f7f7 !important; /* Il tuo --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);
    }
    
    /* Colore del testo principale */
    .embedded-posts, 
    .embedded-posts p,
    .embedded-posts h1, 
    .embedded-posts h2, 
    .embedded-posts h3 {
        color: #f7f7f7 !important;
    }

    /* Sfondo dei blocchi, come il footer dell'embed (opzioni di risposta) */
    .embedded-footer {
        background: #27292b !important; /* Il tuo --bg-2 */
        border-top: 1px solid #27292b !important;
    }

    /* Colore dei bordi (per evitare che i bordi chiari appaiano) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Assicura che i link/bottoni abbiano il colore corretto */
    // a:link, a:visited, .topic-post .post-action-list button {
    //     color: #35bcf1 !important; /* Il tuo --link-color */
    // }
}

In questo caso, credo che l’approccio corretto sia attivare l’evento di monitoraggio senza eseguire l’intero tag. L’impostazione attuale distorce le nostre analisi perché attiva un evento page_view, che gonfia artificialmente tutte le statistiche del sito.

Nel corso della notte, le nostre visualizzazioni di pagina sono schizzate alle stelle, ma questi numeri sono artificiali: non hanno alcun senso commerciale.

Per non parlare del fatto che stiamo duplicando il caricamento e l’elaborazione degli script.

Nel caso di GTM (Google Tag Manager), la situazione è ancora peggiore: ogni altro script nell’account viene iniettato due volte, inclusi i pixel di Google e Meta Ads, gli script di reti pubblicitarie di terze parti e altro ancora.

Per quanto riguarda le analisi native di Discourse, suggerisco un’ulteriore modifica: segmentare il traffico Embed in una propria categoria. Questo ci permetterebbe di visualizzare separatamente il traffico della community e quello degli embed.

2 Mi Piace

Grazie mille per questo, lo apprezzo molto. Tuttavia, mi lascia un po’ confuso. Quando stavo cercando di far funzionare l’interruttore per la modalità scura sul mio blog basato su Ghost con l’embedding di Discourse (poiché non funzionava di default), mi è stato detto che avrei dovuto implementare del codice che utilizza postMessage (qualcuno me lo ha costruito e ha funzionato). Ma il codice che hai fornito non include affatto JavaScript, il che non ha senso per me, e non riesco a capire come possa funzionare tutto immediatamente a causa dell’uso di WordPress. Comunque, grazie lo stesso.

Ciao a tutti, volevo solo verificare se qualcuno ha avuto modo di dare un’occhiata a questo problema finora?

I miei utenti segnalano di non poter utilizzare affatto il modulo a causa del problema con il campo di testo, quindi sta diventando un vero ostacolo per la nostra community.

LucasMiller: L’interfaccia dei commenti sotto gli articoli presenta un bug; non riesco a digitare nulla per pubblicare (testato sia su iPhone che su Android/Xiaomi). Clicchi sul campo di testo per scrivere, ma semplicemente non registra alcun input. Per favore, dateci un’occhiata quando potete!

Questo succede solo negli articoli dove sarebbe il primo commento.

LucasMiller: Sono riuscito a pubblicare solo creando una citazione senza aggiungere testo. Solo dopo essere stato reindirizzato all’interfaccia della Community (invece di rimanere sotto l’articolo) sono stato effettivamente in grado di aggiungere il mio commento.

Il workaround di Markdown aiuta, ma non è l’ideale per l’utente medio. Qualsiasi approfondimento o soluzione temporanea sarebbe molto apprezzato! Grazie ancora per l’aiuto.

cc @Falco

1 Mi Piace
4 Mi Piace

Questo dovrebbe risolvere il problema, sarà implementato più tardi oggi

Grazie @renato

4 Mi Piace

Grazie @renato, è stato risolto!

Solo un avviso: la scorrimento orizzontale è ancora visibile su mobile, quando hai modo di dare un’occhiata

1 Mi Piace

Non riesco a riprodurlo sul mio telefono

1 Mi Piace

Per me succede in tutti gli articoli. Forse è una cosa solo per iOS? Ecco alcuni screenshot da Safari e Chrome.

1 Mi Piace

Nessuna riproduzione per me, nemmeno su iOS.