Experiencia de Tecnoblog con los comentarios de Discourse

Ah, ahora entiendo. Pensé que el propósito de embedMaxHeight era renderizar los comentarios con 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 15000 px. Lo reduciré un poco.

En ese caso, creo que embedMinHeight podría no estar funcionando como se pretende. Incluso con él configurado en 400 px, el incrustado aún tiene una altura de al menos 600 px, con un pequeño espacio restante al final.

5 Me gusta

¡Hola!

El formulario de comentarios recién rediseñado es muy superior, ¡especialmente en la experiencia móvil! Sin embargo, he identificado dos problemas menores:

  1. el ancho del formulario excede el de la pantalla, 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 durante el desplazamiento.

3 Me gusta

¡Sí! @keegan lo construyó pensando en uno de los casos de uso principales. Nos alegra que te guste. Sin embargo, solo lo fusionamos hace unas horas, así que todavía estamos trabajando en las siguientes mejoras, como el problema del ancho de la barra de herramientas y el comportamiento de envío 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 atractivo y amigable para una audiencia no técnica. ¿Quizás valga la pena probarlo para ver si aumenta la participación?

3 Me gusta

Efectivamente, se trataba de un error. Acabo de solucionarlo en:

2 Me gusta

Esto ya ha sido 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 incrustado de Discourse, de modo que cambiar el modo del blog cambia automáticamente el modo del incrustado. Sin embargo, aunque la integración funciona bien en Firefox y Chrome, no funciona con Safari. Supongo que se trata de un problema de Discourse, ya que no solo la ventana emergente de “Permitir acceso” es relevante solo para Safari, sino que otro problema relacionado con el funcionamiento incorrecto de la barra de desplazamiento también afecta solo a Safari.

Dejando eso a un lado, me intriga cómo lograste que funcionara la integración del modo oscuro/claro. Inicié una publicación hace varios años titulada Modo oscuro automático para comentarios incrustados, y gracias a ello pude conseguir que alguien escribiera un script usando postMessage para hacer que ambos sistemas funcionaran juntos. Pero con el nuevo sistema de comentarios completo de Discourse, el script parece haberse roto (y, curiosamente, el modo por defecto es el modo oscuro del tema de Discourse). Mi pregunta es: ¿Tuviste un script postMessage escrito previamente que actualizaste para el nuevo sistema de incrustado de Discourse? Y si es así (aunque tú uses WordPress y yo Ghost), ¿te importaría compartir tu código? Quizás podría comparar tu código con el mío 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 que sigue la configuración del sistema, se mantendrán sincronizados.

Agregamos 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á usando el modo oscuro y, a continuación, se ajuste en consecuencia. El post que inicié, que fue una respuesta al que enlazaste (y que también enlazaba a este), 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 eso (y a su vez hace que mi pregunta anterior sea relevante)?

Para ser claro, este es el script que hice escribir a alguien para usar en mi blog, el cual, supongo, 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 estoy viendo dos problemas:

  1. El campo de texto no funciona: no aparece nada al escribir.
    1. Funciona si cambio el modo a Markdown.
  2. El elemento incrustado aún muestra 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 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 los bordes claros no aparezcan) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Asegura 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 toda la etiqueta. La configuración actual distorsiona nuestras analíticas porque activa un evento page_view, lo que infla artificialmente todas las estadísticas del sitio.

Overnight, nuestras páginas vistas 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: cada otro script de la cuenta se está inyectando dos veces, incluidos los píxeles de Google y Meta Ads, scripts de redes publicitarias de terceros y más.

Con respecto a las analíticas nativas de Discourse, sugiero un ajuste adicional: segmentar el tráfico de los contenidos incrustados en su propia categoría. Esto nos permitiría ver por separado el tráfico de la comunidad y el tráfico de los contenidos incrustados.

2 Me gusta

Muchas gracias por eso, lo aprecio. Sin embargo, me deja un poco confundido. Cuando intenté hacer que el interruptor de modo oscuro en mi blog que usa Ghost funcionara con la incrustación de Discourse (ya que no funcionaba de forma predeterminada), finalmente me dijeron que tendría que implementar algún código que usara postMessage (alguien lo construyó para mí y funcionó). Pero el código que proporcionaste no incluye ningún JS en absoluto, lo cual no tiene sentido para mí, y no veo por qué todo debería funcionar sin problemas de inmediato debido al uso de WordPress. De todos modos, gracias de todos modos.

Hola a todos, solo quería preguntar si alguien ha tenido oportunidad de revisar esto ya.

Mis usuarios reportan que no pueden usar el formulario en absoluto debido al problema del campo de texto, por lo que se está convirtiendo en un bloqueo 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, echen un vistazo cuando puedan!

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 quedarse debajo del artículo) pude agregar realmente mi comentario.

La solución alternativa de Markdown ayuda, pero no es ideal para el usuario promedio. ¡Cualquier información o solución temporal sería muy apreciada! Gracias de nuevo 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á solucionado!

Solo un aviso: el desplazamiento horizontal sigue apareciendo en dispositivos móviles, cuando tengas oportunidad de echar un vistazo.

1 me gusta

No puedo reproducirlo en mi teléfono.

1 me gusta

Esto me está ocurriendo 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 tengo el problema, tampoco en iOS.