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

Acabamos de lanzar una segunda iteración de nuestra reconstrucción del tema. Aunque la primera actualización fue una renovación visual basada en el tema anterior Meta Branded, esta versión es esencialmente un tema nuevo 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 implementación del tema en sí misma, y lo que esta muestra sobre el rumbo que estamos tomando con la personalización de Discourse de manera más amplia.

Revisaré 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 de trazo modernos, 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 para reemplazar Font Awesome en el núcleo de Discourse, pero la versión 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 github.com/discourse/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 dado, 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 la cabecera 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 haya establecido 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 grande:

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 nuestro primer despliegue en producción de esta API.

El marco cuenta con un rico conjunto de herramientas para desarrolladores: si habilitas 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 personalizados de categorías que muestran las subcategorías de cada categoría:

Esto 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

14 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?

2 Me gusta

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

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, ¿verdad? ¿No hay un equivalente bueno de FA en Lucide?


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

2 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:

1 me gusta

¡Estoy de acuerdo!

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