Reconstruction du thème Meta Brandé : nouvelles icônes, une page d'accueil personnalisée et un premier aperçu de l'API Blocks

Nous venons de publier la deuxième itération de notre refonte du thème. Alors que la première mise à jour était un rafraîchissement visuel construit sur la base du thème précédent « Meta Branded », cette version est essentiellement un nouveau thème entièrement reconstruit à partir de zéro. Le nouveau langage de marque avait déjà été introduit avec la version précédente, il n’y a donc pas de changement visible majeur de ce côté. Ce qui a considérablement changé avec cette mise à jour, c’est l’implémentation du thème elle-même, ainsi que ce qu’elle révèle de notre orientation en matière de personnalisation de Discourse dans son ensemble.

Je vais vous présenter quelques détails d’implémentation, en commençant par les éléments les plus petits :

Icônes Lucide

Lucide est un ensemble open source d’icônes modernes au trait, et nous l’avons adopté dans plusieurs de nos projets de personnalisation. Avec cette itération, nous l’avons également intégré au thème Meta Branded. Il n’est pas prévu de remplacer Font Awesome dans le cœur de Discourse, mais la version gratuite de Font Awesome ne propose qu’un choix limité d’icônes au trait, insuffisant pour former un système cohérent d’icônes au trait. Le composant de thème est disponible sur github.com/discourse/discourse-lucide-icons.

Modificateur de thème pour restreindre les palettes de couleurs

Nous avons ajouté un nouveau modificateur de thème only_theme_color_schemes qui restreint les palettes de couleurs disponibles pour un thème donné, tant pour les administrateurs que pour les utilisateurs dans leurs préférences d’interface. Meta propose plusieurs palettes sélectionnables par l’utilisateur qui entreraient en conflit avec l’identité visuelle du thème Meta Branded. Grâce à ce modificateur, seules les palettes fournies avec le thème sont proposées comme options. :link: PR : FEATURE: add modifier to restrict theme color schemes

Mise en page pleine largeur

Nous testons également quelques ajustements au composant Discourse Full-width pour mieux centrer le contenu principal de la page. De nombreux éléments dynamiques dans l’en-tête compliquent la configuration, et pour l’instant, cette fonctionnalité est expérimentale et disponible uniquement sur une branche du composant.

Transformateur de valeur pour contrôler la visibilité de la bannière de bienvenue

Nous avons utilisé un nouveau transformateur de valeur welcome-banner-display-for-route pour contrôler programmatiquement sur quelles routes la bannière de bienvenue principale s’affiche. Nous l’utilisons pour nous assurer que la bannière n’apparaît que sur la page d’accueil personnalisée par défaut et non sur les pages qu’un utilisateur aurait définies comme sa page d’atterrissage personnelle. :link: PR : DEV: Add welcome-banner-display-for-route value transformer

Cela nous amène aux deux changements plus importants :

Page d’accueil personnalisée via un modificateur de thème

Le modificateur de thème custom_homepage est disponible depuis près de deux ans, mais c’est la première fois que nous l’utilisons pour façonner l’expérience de la page d’accueil sur Meta lui-même. Nous introduisons une page d’atterrissage personnalisée remplie de composants mis en avant. Pour le lancement initial, cela comprend des catégories mises en avant et un aperçu des derniers sujets de discussion.

Nous avons créé ces composants mis en avant en utilisant notre nouvelle API Blocks expérimentale, ce qui nous amène au changement le plus important :

API Blocks : Première utilisation en production

L’API Blocks est un nouveau framework pour créer des mises en page modulaires et composites dans Discourse. Il permet aux développeurs de thèmes d’assembler des pages à partir de composants autonomes et réutilisables qui peuvent être placés dans des zones de mise en page définies. Le thème Meta est notre premier déploiement en production de cette API.

Le framework dispose d’un ensemble riche d’outils de développement : activez les outils de développement et vous pourrez inspecter la structure des blocs de n’importe quelle page avec une superposition intégrée qui visualise toutes les zones de mise en page actives et leurs composants.

Au-delà de la page d’accueil, nous utilisons également des blocs pour afficher des bannières de catégorie personnalisées qui montrent les sous-catégories de chaque catégorie :

Il s’agit toujours d’une prévisualisation précoce du système dans un contexte de production. Nous prévoyons de publier une documentation et plus d’exemples sous peu. :link: PR : DEV: Add Block API for declarative, validated UI extension points

14 « J'aime »

C’est un bon choix. Cet ensemble a attiré mon attention lorsque j’examinais les jeux d’icônes disponibles pour Discourse. Il est raffiné et élégant.

L’absence totale d’icônes pleines posait quelques problèmes : par exemple, l’indicateur de non-lu était à peine visible sous forme de cercle coloré, ou le bouton de bascule entre le mode sombre et clair était difficile à rendre correctement sans partie pleine.

Je remarque que vous avez résolu ces problèmes sur le thème de marque de meta. Avez-vous ajouté des icônes personnalisées pour cela ?


D’ailleurs, le logo Discourse en haut à gauche n’est pas cliquable sur le thème de marque de meta (cela fait des mois, je crois) :grimacing:

1 « J'aime »

Non, nous n’avons tout simplement pas mappé certaines icônes comme circle et square vers la version Lucide. Ou plutôt, nous avons uniquement mappé la version contour de Fontawesome pour ces icônes (far-circle, etc.). Il pourrait y avoir d’autres cas où nous devrons continuer à améliorer ce mappage.

Par exemple, l’icône cœur est délicate. Je pense qu’une version remplie serait préférable lorsqu’un contenu est liké, mais pour l’instant, je ne suis pas sûr de la meilleure façon de procéder..

[quote=“Canapin, post:5, topic:400013”]
Au fait, le logo Discourse en haut à gauche n’est pas cliquable sur le thème officiel de Meta (je crois que c’est le cas depuis des mois).
[/quote] Je n’arrive pas à reproduire ce problème. Avez-vous plus de détails ?

2 « J'aime »

Je suis curieux, quelle est la différence que Blocks apporte et que Plugin Outlets n’offre pas ?

Testé uniquement sur Chrome et Edge, et le problème ne se produit que sur ordinateur de bureau :

Le div de bascule de la barre latérale recouvre le logo, le rendant impossible à cliquer.

(et oui, le cœur liké en contour n’est pas très joli :broken_heart: )

1 « J'aime »

Je n’aime pas du tout l’icône actuelle pour « répondu à » :

Je suppose que c’est temporaire, car il n’existe pas de bonne équivalence FA dans Lucide ?


Les icônes sur la liste des sujets sont très, très petites :

2 « J'aime »

Je ne m’attendais pas à voir quelque chose comme Lucide ajouté à un thème officiel de cette manière. Ça a l’air super ! J’aurais juste préféré que le cœur soit rempli. Mis à part ce détail, le thème est magnifique sur mobile, à mon avis.

Il semble qu’il n’y ait pas de padding sur le corps dans les messages privés :

1 « J'aime »

Je suis d’accord !

Et je suis d’accord avec ce qui précède, le cœur vide n’est pas bien.