Ricostruzione del tema Meta Branded: nuove icone, homepage personalizzata e una prima occhiata all'API Blocks

Abbiamo appena rilasciato una seconda iterazione della nostra ricostruzione del tema. Mentre il primo aggiornamento era un restyling visivo basato sul precedente tema Meta Branded, questa versione è sostanzialmente un nuovo tema ricostruito da zero. Il nuovo linguaggio del brand è stato già introdotto con la release precedente, quindi non ci sono grandi cambiamenti visibili da quel punto di vista. Ciò che è cambiato significativamente con questo aggiornamento è l’implementazione del tema stesso e ciò che essa rivela sulla direzione che stiamo prendendo per la personalizzazione di Discourse in generale.

Vi guiderò attraverso alcuni dettagli implementativi, partendo dagli elementi più piccoli:

Icone Lucide

Lucide è una raccolta open-source di icone moderne a tratto, e la stiamo adottando in diversi progetti di personalizzazione. Con questa iterazione l’abbiamo inclusa anche nel tema Meta Branded. Non ci sono piani per sostituire Font Awesome nel core di Discourse, ma il piano gratuito di Font Awesome offre solo una selezione limitata di icone a tratto, non sufficiente a formare un sistema coerente di icone a tratto. Il componente del tema è disponibile su Discourse Lucide Icons.

Modificatore del tema per limitare le palette di colori

Abbiamo aggiunto un nuovo modificatore del tema only_theme_color_schemes che limita le palette di colori disponibili per un determinato tema, sia per gli amministratori che per gli utenti nelle preferenze dell’interfaccia. Meta dispone di più palette selezionabili dagli utenti che entrerebbero in conflitto con l’identità visiva del tema Meta Branded. Con questo modificatore, vengono proposte come opzioni solo le palette incluse nel tema. :link: PR: FEATURE: add modifier to restrict theme color schemes

Layout a larghezza intera

Stiamo anche sperimentando alcune modifiche al componente Discourse Full-width per centrare meglio il contenuto principale nella pagina. Ci sono molti elementi dinamici nell’intestazione che complicano la configurazione e finora questa è una funzionalità sperimentale disponibile solo su un ramo del componente.

Trasformatore di valore per controllare la visibilità del Banner di Benvenuto

Abbiamo utilizzato un nuovo trasformatore di valore welcome-banner-display-for-route per controllare programmaticamente su quali route appare il Banner di Benvenuto core. Lo usiamo per garantire che il banner appaia solo sulla homepage personalizzata predefinita e non sulle pagine che un utente potrebbe aver impostato come propria pagina di atterraggio personale. :link: PR: DEV: Add welcome-banner-display-for-route value transformer

Questo ci porta ai due cambiamenti più significativi:

Homepage personalizzata tramite modificatore del tema

Il modificatore del tema custom_homepage è disponibile da quasi due anni, ma questa è la prima volta che lo utilizziamo per plasmare l’esperienza della homepage su Meta stessa. Stiamo introducendo una landing page personalizzata popolata con componenti in evidenza. Per il lancio iniziale, questo include categorie in evidenza selezionate e un’anteprima degli ultimi argomenti di discussione.

Abbiamo costruito questi componenti in evidenza utilizzando la nostra nuova API sperimentale Blocks, che ci porta al cambiamento più importante:

API Blocks: Primo utilizzo in produzione

L’API Blocks è un nuovo framework per creare layout modulari e componibili in Discourse. Consente agli sviluppatori di temi di assemblare pagine partendo da componenti autonomi e riutilizzabili che possono essere inseriti in aree di layout definite. Il tema Meta è la nostra prima implementazione in produzione di questo framework.

Il framework offre un ricco set di strumenti per gli sviluppatori: abilitando gli strumenti di sviluppo, è possibile ispezionare la struttura dei blocchi di qualsiasi pagina con un overlay integrato che visualizza tutte le aree di layout attive e i loro componenti.

Oltre alla homepage, stiamo utilizzando i blocchi anche per renderizzare banner personalizzati per le categorie che mostrano le sottocategorie di ciascuna categoria:

Questa è ancora una preview iniziale del sistema in un contesto di produzione. Prevediamo di pubblicare documentazione e altri esempi a breve. :link: PR: DEV: Add Block API for declarative, validated UI extension points

19 Mi Piace

È una buona scelta. Questo set ha attirato la mia attenzione mentre stavo valutando quali set di icone fossero disponibili per Discourse. È raffinato ed elegante.

La totale assenza di icone piene ha causato alcuni problemi; ad esempio, l’indicatore di non lettura era appena visibile come un cerchio colorato, oppure il pulsante per passare dalla modalità scura a quella chiara sarebbe stato difficile da rendere correttamente senza una parte piena.

Ho notato che hai risolto questi problemi nel tema brandizzato di meta. Hai aggiunto icone personalizzate per questo?


A proposito, il logo di Discourse in alto a sinistra non è cliccabile nel tema brandizzato di meta (credo che sia così da mesi) :grimacing:

1 Mi Piace

No, semplicemente non abbiamo mappato alcune icone come circle e square alla versione Lucide. O meglio, abbiamo mappato solo la versione tratteggiata di Fontawesome per queste icone (far-circle, ecc.). Potrebbero esserci altri casi in cui dobbiamo continuare a migliorare la mappatura.

Ad esempio, l’icona del cuore è complicata. Penso che una versione riempita sarebbe meglio quando è “mi piace”, ma finora non sono sicuro di come farlo al meglio..

Non riesco a riprodurlo, hai più dettagli?

3 Mi Piace

Sono curioso, qual è la differenza che Blocks introduce rispetto a Plugin Outlets?

2 Mi Piace

Testato solo su Chrome ed Edge, e si verifica solo su desktop:

Il div di attivazione della barra laterale copre il logo, rendendolo non cliccabile.

(e sì, il cuore di mi piace con il contorno sembra brutto :broken_heart: )

1 Mi Piace

Non mi piace per niente l’icona attuale per “risposto a”:

Immagino sia temporanea, dato che non esiste un’equivalente FA valido in Lucide?


Le icone nella lista degli argomenti sono molto, molto piccole:

Modifica: è lo stesso anche negli altri temi.


Le icone delle categorie sembrano più piccole di quelle dei tag, ed è strano. Ho la sensazione che la dimensione scelta per le icone delle categorie sia stata complessivamente limitata dallo stile delle categorie in riquadro, che lascia meno spazio… :thinking:

3 Mi Piace

Non mi aspettavo di vedere qualcosa come Lucide aggiunto a un tema ufficiale in questo modo. Sembra fantastico! Vorrei solo che il cuore fosse pieno. A parte questa piccola osservazione, il tema mi sembra incredibile su mobile.

Sembra che non ci sia padding per il corpo nei messaggi privati:

2 Mi Piace

Concordo!

E concordo con quanto sopra, il cuore vuoto non è buono.

2 Mi Piace

Hmm… una cosa che ritengo potrebbe essere cambiata è l’icona della chat da message-square-text a message-square? Le linee sembrano un po’ di disturbo.

1 Mi Piace

Grazie per tutti i feedback sugli icone! Ho appena creato un argomento dedicato per il set: Discourse Lucide Icons.

Idealmente, vorremmo raccogliere ulteriori feedback lì e continuare a perfezionare il set man mano che procediamo.

Concordo che le icone siano quasi illeggibili con l’attuale dimensione di .74em. Servirebbe circa 1em.

1 Mi Piace

È la mia immaginazione o il padding verticale all’interno dell’elenco dei argomenti è aumentato oggi? O è meno denso, o sono io che sono più denso.

1 Mi Piace

Ho notato anche io questo, ho provato a revertinglo manualmente (perché preferisco la densità di informazioni all’estetica) ma senza successo :frowning:

La differenza principale, da un punto di vista progettuale, è che uno PluginOutlet è un punto di inserimento. Si inietta direttamente il proprio componente in un template principale. Ogni personalizzazione modifica effettivamente la struttura dell’applicazione.

Un BlockOutlet è invece un frame di layout. Si registrano uno o più componenti con il frame. Le personalizzazioni avvengono quindi all’interno di quel frame piuttosto che nei template dell’app. In questo modo otteniamo layout più prevedibili e stabili.

Un’altra grande differenza è che l’API dei Blocchi può gestire l’intero spettro della logica di rendering condizionale. Non è necessario aggiungerla al proprio componente. Un componente di blocco può concentrarsi esclusivamente su contenuto e template, riducendo notevolmente la logica ripetuta.

1 Mi Piace

Se qualcuno volesse avere un elenco di argomenti più compatto, ecco cosa ha funzionato per me:

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

Il nuovo tema con il marchio Meta ha, secondo il mio gusto, troppo spazio su mobile.

  • Uno spazio tra il bordo dello schermo e il contenitore del contenuto
  • Un secondo spazio tra il contenitore della pagina e il contenuto effettivo

Gli altri temi non presentano questo primo spazio tra il bordo dello schermo e il contenitore del contenuto.

Ciò rende il contenuto leggermente “schiacciato” orizzontalmente; c’è molto poco spazio. È ben visibile nella pagina “il mio post”, rispetto a Horizon:

Horizon può mostrare molto più contenuto senza perdere leggibilità.

Capisco l’intenzione dello sfondo con il “contorno” viola, affinché l’aspetto del marchio del tema sia visibile su una pagina a contenuto completo, ma penso che si perda troppo spazio su quegli schermi stretti.

Altre piccole critiche:

L’icona in alto a sinistra non è perfettamente rotonda. È leggermente schiacciata.
image image

Il popup per categoria/tag lascia che l’area di testo esca leggermente (non sono sicuro che sia correlato a questo tema):

. Sarebbe meglio se la coprisse.

1 Mi Piace