Reconstruyendo el tema con marca Meta: nuevos iconos, una página de inicio personalizada y un primer vistazo a la API de Blocks

Acabamos de lanzar una segunda iteración de nuestra reconstrucción del tema. Mientras que la primera actualización fue una renovación visual construida sobre el tema anterior de Meta Branded, esta versión es esencialmente un nuevo tema reconstruido desde cero. El nuevo lenguaje de marca ya se había introducido con la versión anterior, por lo que no hay muchos cambios visibles en ese aspecto. Lo que ha cambiado significativamente con esta actualización es la propia implementación del tema, y lo que esta muestra sobre hacia dónde nos dirigimos en cuanto a la personalización de Discourse en general.

Repasaré algunos detalles de implementación, comenzando por los elementos más pequeños:

Iconos Lucide

Lucide es un conjunto de código abierto de iconos modernos de trazo, y lo hemos estado adoptando en varios de nuestros proyectos de personalización. Con esta iteración, también lo hemos incluido en el tema Meta Branded. No hay planes de reemplazar Font Awesome en el núcleo de Discourse, pero la capa gratuita de Font Awesome solo ofrece una selección limitada de iconos de estilo de trazo, insuficiente para formar un sistema coherente de iconos de trazo. El componente del tema está disponible en Discourse Lucide Icons.

Modificador de tema para restringir paletas de colores

Hemos añadido un nuevo modificador de tema only_theme_color_schemes que restringe qué paletas de colores están disponibles para un tema determinado, tanto para administradores como para usuarios en sus preferencias de interfaz. Meta tiene múltiples paletas seleccionables por el usuario que entrarían en conflicto con la identidad visual del tema Meta Branded. Con este modificador, solo se ofrecen como opciones las paletas incluidas con el tema. :link: PR: FEATURE: add modifier to restrict theme color schemes

Diseño de ancho completo

También estamos probando algunos ajustes en el componente de ancho completo de Discourse para centrar mejor el contenido principal en la página. Hay muchos elementos dinámicos en el encabezado que complican la configuración y, hasta ahora, esto es experimental y solo está disponible en una rama del componente.

Transformador de valores para controlar la visibilidad del banner de bienvenida

Hemos utilizado un nuevo transformador de valores welcome-banner-display-for-route para controlar programáticamente en qué rutas aparece el banner de bienvenida principal. Lo utilizamos para asegurar que el banner solo se muestre en la página de inicio personalizada predeterminada y no en las páginas que un usuario pueda haber configurado como su página de aterrizaje personal. :link: PR: DEV: Add welcome-banner-display-for-route value transformer

Esto nos lleva a los dos cambios más importantes:

Página de inicio personalizada mediante modificador de tema

El modificador de tema custom_homepage ha estado disponible durante casi dos años, pero esta es la primera vez que lo utilizamos para dar forma a la experiencia de la página de inicio en Meta mismo. Estamos introduciendo una página de aterrizaje personalizada poblada con componentes destacados. Para el lanzamiento inicial, esto incluye categorías destacadas resaltadas y una vista previa de los últimos temas de discusión.

Hemos construido estos componentes destacados utilizando nuestra nueva API experimental de Bloques, lo que nos lleva al cambio más importante:

API de Bloques: Primer uso en producción

La API de Bloques es un nuevo marco para construir diseños modulares y composables en Discourse. Permite a los desarrolladores de temas ensamblar páginas a partir de componentes autocontenidos y reutilizables que pueden colocarse en áreas de diseño definidas. El tema de Meta es nuestra primera implementación en producción de esta API.

El marco cuenta con un rico conjunto de herramientas para desarrolladores: si activas las herramientas de desarrollador, puedes inspeccionar la estructura de bloques de cualquier página con una superposición integrada que visualiza todas las áreas de diseño activas y sus componentes.

Más allá de la página de inicio, también estamos utilizando bloques para renderizar banners de categorías personalizados que muestran las subcategorías de cada categoría:

Esta sigue siendo una vista previa temprana del sistema en un contexto de producción. Planeamos publicar documentación y más ejemplos pronto. :link: PR: DEV: Add Block API for declarative, validated UI extension points

19 Me gusta

Es una buena elección. Este conjunto llamó mi atención cuando estaba revisando qué conjuntos de iconos estaban disponibles para Discourse. Es refinado y elegante.

La falta total de iconos rellenos estaba causando algunos problemas; por ejemplo, el indicador de no leído apenas era visible como un círculo de color, o el botón de cambio entre modo oscuro/claro resultaba difícil de renderizar correctamente sin una parte rellena.

Noto que solucionaste esos problemas en el tema con marca de meta. ¿Añadiste iconos personalizados para esto?


Por cierto, el logotipo de Discourse en la esquina superior izquierda no es clicable en el tema con marca de meta (creo que ha sido así durante meses) :grimacing:

1 me gusta

No, simplemente no mapeamos algunos iconos como circle y square a la versión de Lucide. O más bien, solo mapeamos la versión de trazo de FontAwesome para estos iconos (far-circle,…). Podría haber otros casos en los que necesitemos seguir mejorando el mapeo.

Por ejemplo, el icono de corazón es complicado. Creo que una versión rellena sería mejor cuando se da «me gusta», pero por ahora no estoy seguro de cuál es la mejor manera de hacerlo…

No puedo reproducirlo. ¿Tienes más detalles?

3 Me gusta

Tengo curiosidad, ¿qué diferencia aporta Blocks que no aporte Plugin Outlets?

2 Me gusta

Solo se ha probado en Chrome y Edge, y solo ocurre en escritorio:

El div del interruptor de la barra lateral cubre el logotipo, impidiendo que se haga clic en él.

(y sí, el corazón dado me gusta con contorno se ve mal :broken_heart: )

1 me gusta

No me gusta en absoluto el icono actual para “respondido a”:

Supongo que es temporal, ¿no hay un equivalente de FA adecuado en Lucide?


Los iconos en la lista de temas son muy, muy pequeños:

Edición: es lo mismo en otros temas.


Los iconos de categoría parecen más pequeños que los de etiqueta, lo cual es extraño. Siento que el tamaño elegido para los iconos de categoría en general estuvo limitado por el estilo de categoría en cuadro, lo que deja menos espacio… :thinking:

3 Me gusta

No esperaba ver algo como Lucide añadido a un tema oficial de esta manera. ¡Se ve genial! Aunque desearía que el corazón estuviera relleno. Aparte de ese pequeño detalle, el tema se ve increíble en el móvil, por lo que a mí me concierne.

Parece que no hay relleno en el cuerpo de los mensajes privados:

2 Me gusta

¡Estoy de acuerdo!

Y también estoy de acuerdo con lo anterior, el corazón hueco no es bueno.

2 Me gusta

Hmm… una cosa que creo que se podría cambiar es el icono del chat, de message-square-text a message-square. Las líneas parecen un poco distractores. El cambio hace que la interfaz sea “más limpia”, es un cambio bastante agradable.

1 me gusta

¡Gracias por todos los comentarios sobre los iconos! Acabo de crear un tema dedicado para el conjunto: Iconos Lucide de Discourse.

Idealmente, nos gustaría recopilar más comentarios allí y seguir puliendo el conjunto a medida que avancemos.

Estoy de acuerdo en que los iconos son casi ilegibles con el tamaño actual de 0,74 em. Necesitan alrededor de 1 em.

1 me gusta

¿Es mi imaginación o el relleno vertical dentro de la lista de temas aumentó hoy? O es menos denso, o soy yo el que está más despistado.

1 me gusta

Yo también noté esto, intenté revertirlo manualmente (porque prefiero la densidad de información a la estética) pero no tuve suerte :frowning:

La diferencia principal desde una perspectiva de diseño es que un PluginOutlet es un punto de inserción. Inyectas tu componente directamente en una plantilla principal. Cada personalización modifica realmente la estructura de la aplicación.

Un BlockOutlet es un marco de diseño. Registras uno o varios componentes con el marco. Luego, las personalizaciones ocurren dentro de ese marco en lugar de en las plantillas de la aplicación. Así obtenemos diseños más predecibles y estables.

Otra gran diferencia es que la API de Blocks puede manejar todo el espectro de lógica de renderizado condicional. No necesitas agregar eso a tu componente. Un componente de bloque puede enfocarse puramente en el contenido y la plantilla, y tenemos mucha menos lógica repetida.

1 me gusta

Si alguien desea tener una lista de temas más compacta, esto es lo que funcionó para mí:

.topic-list .topic-list-data {
  padding: 8px 0px;
  line-height: 0px;
}

El nuevo tema con marca de Meta tiene demasiado espacio, según mi gusto, en móviles.

  • Un primer espacio entre el borde de la pantalla y el contenedor del contenido
  • Un segundo espacio entre el contenedor de la página y el contenido real

Otros temas no tienen este primer hueco entre el borde de la pantalla y el contenedor del contenido.

Hace que el contenido se vea un poco “aplastado” horizontalmente; hay muy poco espacio. Se nota claramente en la página “mi publicación”, en comparación con Horizon:

Horizon puede mostrar mucho más contenido sin perder legibilidad.

Entiendo la intención del fondo morado con “borde” para que el aspecto de marca del tema sea visible en una página de contenido completo, pero creo que perdemos demasiado espacio en esas pantallas estrechas.

Otras pequeñas críticas:

El icono en la esquina superior izquierda no es perfectamente redondo. Está ligeramente achatado.
image image

El cuadro emergente de categoría/etiqueta permite que el área de texto se desborde ligeramente (no estoy seguro de que esté relacionado con este tema):

. Sería mejor si lo cubriera por completo.

1 me gusta