Experiencia de Tecnoblog con los comentarios de Discourse

Ah, ahora entiendo. Había pensado que el propósito de `embedMaxHeight` era renderizar los comentarios en un estilo más nativo, minimizando el desplazamiento tanto como fuera posible (excepto en hilos extensos, que aún requerirían desplazamiento). Por eso lo establecí en 15000px. Lo reduciré un poco.

En ese caso, creo que `embedMinHeight` puede no estar funcionando como se pretende. Incluso con él establecido en 400px, el embed todavía tiene una altura de al menos 600px, con un pequeño espacio restante al final.

5 Me gusta

¡Hola!

El formulario de comentarios rediseñado es mucho mejor, especialmente en la experiencia móvil. Sin embargo, he identificado dos pequeños problemas:

  1. el ancho del formulario supera el del dispositivo, lo que obliga a un desplazamiento horizontal no deseado;
  2. el componente de navegación que indica el número de publicaciones sigue superponiéndose al formulario al desplazarse.

3 Me gusta

¡Así es! @keegan lo construyó teniendo esto como uno de los casos de uso principales, me alegra que te guste. Lo fusionamos hace solo unas horas, así que aún estamos trabajando en mejoras posteriores, como el ancho de la barra de herramientas y el comportamiento de enviar al presionar Enter.

4 Me gusta

Me pregunto si no sería una buena idea mostrar este formulario directamente en el hilo (en Discourse) también. Tener el formulario abierto suele ser mucho más invitante y amigable para el usuario para una audiencia no técnica. Quizás valga la pena hacer una prueba para ver si aumenta la participación.

3 Me gusta

Efectivamente era un error, acabo de corregirlo en

2 Me gusta

¡Ya está corregido, por favor, actualiza!

1 me gusta

He notado otro problema en tu sitio. Veo que has integrado el sistema de modo oscuro/claro de tu blog con el nuevo embed de Discourse, de modo que cambiar el modo del blog cambia automáticamente el modo del embed. Sin embargo, aunque la integración funciona bien en Firefox y Chrome, no funciona en Safari. Supongo que se trata de un problema de Discourse, ya que no solo el mensaje emergente de “Permitir acceso” es exclusivo de Safari, sino que otro problema con la barra de desplazamiento que funciona incorrectamente también afecta únicamente a Safari.

Dejando eso un poco de lado, me pregunto cómo lograste que funcionara la integración del modo oscuro/claro. Inicié una publicación sobre Modo oscuro automático para comentarios incrustados hace varios años, y a partir de eso pude conseguir que alguien escribiera un script usando postMessage para hacer que los dos sistemas funcionaran juntos. Pero con el nuevo sistema de incrustación de comentarios completos de Discourse, el script parece haber dejado de funcionar (con el valor predeterminado siendo, extrañamente, el modo oscuro del tema de Discourse). Así que mi pregunta es: ¿Tuviste que escribir previamente un script de postMessage, que luego actualizaste para el nuevo sistema de incrustación de Discourse? Y si es así (y aunque tú usas WordPress y yo uso Ghost), ¿te importaría compartir tu código? Quizás pueda compararlo con el que tengo para intentar que funcione con Ghost y con la configuración de modo oscuro de mi blog.

Si tanto tu blog como Discourse utilizan el modo oscuro automático siguiendo el sistema, se mantendrán sincronizados.

Añadimos el modo oscuro automático a Discourse en Automatic Dark Mode color scheme switching

2 Me gusta

Sí, pero si entiendo y recuerdo correctamente, eso permite que Discourse detecte si el sistema operativo está utilizando el modo oscuro y, a continuación, se ajuste en consecuencia. La publicación que inicié, que fue una respuesta a la que enlazaste (y que también enlazaba a ella), tenía que ver con el interruptor/botón en un blog que cambia manualmente entre los modos claro y oscuro de un blog (independientemente del modo del sistema operativo). ¿Suena correcto (y, a su vez, hace relevante mi pregunta anterior)?

Para aclarar, este es el script que alguien escribió para usar en mi blog, que supongo que ahora necesita algunos ajustes (quizás solo necesite cambiar algunas clases, no estoy seguro).

<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');
        // Actualizar elementos después de 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>

Acabo de actualizar Discourse a la última versión, pero veo dos problemas:

  1. El campo de texto está roto: no aparece nada al escribir.
    1. Funciona si cambio el modo a Markdown.
  2. El contenido incrustado sigue mostrando una barra de desplazamiento horizontal en Safari/iOS;

Claro,

Este es el CSS que estoy usando en 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) {
     /* Fondo principal del Iframe */
    html, body {
        font-family: 'Inter', sans-serif;
    }
}
    
@media (prefers-color-scheme: dark) {
    /* Fondo principal del Iframe */
    html, body {
        background-color: #1e2021 !important; /* Tu --bg */
        color: #f7f7f7 !important; /* Tu --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);
    }
    
    /* Color del texto principal */
    .embedded-posts, 
    .embedded-posts p,
    .embedded-posts h1, 
    .embedded-posts h2, 
    .embedded-posts h3 {
        color: #f7f7f7 !important;
    }

    /* Fondo de bloques, como el pie de página del embed (opciones de respuesta) */
    .embedded-footer {
        background: #27292b !important; /* Tu --bg-2 */
        border-top: 1px solid #27292b !important;
    }

    /* Color de los bordes (para que no aparezcan bordes claros) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Garantiza que los enlaces/botones tengan el color correcto */
    // a:link, a:visited, .topic-post .post-action-list button {
    //     color: #35bcf1 !important; /* Tu --link-color */
    // }
}

En este caso, creo que el enfoque correcto sería activar el evento de monitoreo sin ejecutar la etiqueta completa. La configuración actual distorsiona nuestros Analíticos porque activa un evento de page_view, lo que infla artificialmente todas las estadísticas del sitio.

Durante la noche, nuestras visualizaciones de página se dispararon, pero estos números son artificiales: no tienen ningún sentido comercial.

Por no mencionar que, actualmente, estamos duplicando la carga y el procesamiento de scripts.

En el caso de GTM (Google Tag Manager), es aún peor: se están inyectando dos veces todos los demás scripts de la cuenta, incluidos los píxeles de Google y Meta Ads, scripts de redes publicitarias de terceros, entre otros.

Con respecto a los analíticos nativos de Discourse, sugiero un ajuste adicional: segmentar el tráfico del Embed en su propia categoría. Esto nos permitiría ver el tráfico de la comunidad y el tráfico del embed por separado.

2 Me gusta

Muchas gracias por eso, lo aprecio. Sin embargo, me deja un poco confundido. Cuando estaba intentando hacer que el interruptor de modo oscuro en mi blog que usa Ghost funcionara con el incrustado de Discourse (ya que no funcionaba por defecto), finalmente me dijeron que tendría que implementar algún código que usara postMessage (que alguien construyó para mí y que funcionó). Pero el código que proporcionaste no incluye ningún JS en absoluto, lo cual no tiene sentido para mí, y no puedo ver por qué funcionaría todo de forma automática debido al uso de WordPress. De todos modos, gracias de todas formas.

Hola a todos, solo quería preguntar si alguien ha tenido la oportunidad de investigar esto todavía.

Mis usuarios están reportando que no pueden usar el formulario en absoluto debido al problema del campo de texto, por lo que se está convirtiendo en un obstáculo para nuestra comunidad.

LucasMiller: La interfaz de comentarios debajo de los artículos tiene un error; no puedo escribir nada para publicar (probado tanto en iPhone como en Android/Xiaomi). Haces clic en el campo de texto para escribir, pero simplemente no registra ninguna entrada. ¡Por favor, échale un vistazo cuando puedas!

Esto solo está ocurriendo en artículos donde sería el primer comentario.

LucasMiller: Solo logré publicar creando una cita sin agregar ningún texto. Solo después de que me redirigió a la interfaz de la Comunidad (en lugar de permanecer debajo del artículo) pude agregar realmente mi comentario.

La solución alternativa con Markdown ayuda, pero no es ideal para el usuario promedio. ¡Cualquier insight o solución temporal sería muy apreciada! Gracias nuevamente por la ayuda.

cc @Falco

1 me gusta
4 Me gusta

Esto debería solucionarlo, se implementará más tarde hoy.

Gracias @renato

4 Me gusta

Gracias @renato, ¡ya está arreglado!

Solo para avisarte: el desplazamiento horizontal sigue apareciendo en móviles, cuando tengas un momento para echarle un vistazo.

1 me gusta

No puedo reproducirlo en mi teléfono

1 me gusta

A mí me ocurre en todos los artículos. ¿Quizás sea algo exclusivo de iOS? Aquí tienes algunas capturas de pantalla de Safari y Chrome.

1 me gusta

No se reproduce en mi caso, tampoco en iOS.