Recriando o tema Meta Branded: novos ícones, uma homepage personalizada e um primeiro olhar na Blocks API

Contribuir Feedback do site
,
1

Acabamos de lançar uma segunda iteração da nossa reconstrução do tema. Enquanto a primeira atualização foi uma renovação visual construída sobre o tema anterior Meta Branded, esta versão é essencialmente um novo tema reconstruído do zero. A nova linguagem de marca já havia sido introduzida com o lançamento anterior, então não há muitas mudanças visíveis nesse aspecto. O que mudou significativamente com esta atualização é a própria implementação do tema e o que ela revela sobre o rumo que estamos tomando com a personalização do Discourse de forma mais ampla.

Vou detalhar alguns aspectos da implementação, começando pelos itens menores:

Ícones Lucide

Lucide é um conjunto de ícones modernos de traço de código aberto, e temos adotado essa biblioteca em vários de nossos projetos de personalização. Com esta iteração, também a incluímos no tema Meta Branded. Não há planos de substituir o Font Awesome no núcleo do Discourse, mas a versão gratuita do Font Awesome oferece apenas uma seleção limitada de ícones no estilo de traço, insuficiente para formar um sistema coerente de ícones de traço. O componente do tema está disponível em Discourse Lucide Icons.

Modificador de tema para restringir paletas de cores

Adicionamos um novo modificador de tema only_theme_color_schemes que restringe quais paletas de cores estão disponíveis para um determinado tema, tanto para administradores quanto para usuários em suas preferências de interface. O Meta possui várias paletas selecionáveis pelo usuário que entrariam em conflito com a identidade visual do tema Meta Branded. Com este modificador, apenas as paletas incluídas no tema são oferecidas como opções. :link: PR: FEATURE: add modifier to restrict theme color schemes

Layout de largura total

Também estamos testando alguns ajustes no componente Discourse Full-width para centralizar melhor o conteúdo principal na página. Há muitos elementos dinâmicos no cabeçalho que complicam a configuração e, até agora, isso é experimental e está disponível apenas em uma branch do componente.

Transformador de valor para controlar a visibilidade do Banner de Boas-vindas

Utilizamos um novo transformador de valor welcome-banner-display-for-route para controlar programaticamente em quais rotas o Banner de Boas-vindas central aparece. Usamos isso para garantir que o banner seja exibido apenas na página inicial personalizada padrão e não em páginas que um usuário possa ter definido como sua página de aterrissagem pessoal. :link: PR: DEV: Add welcome-banner-display-for-route value transformer

Isso nos leva às duas maiores mudanças:

Página inicial personalizada via modificador de tema

O modificador de tema custom_homepage está disponível há quase dois anos, mas esta é a primeira vez que o utilizamos para moldar a experiência da página inicial no próprio Meta. Estamos introduzindo uma página de aterrissagem personalizada preenchida com componentes em destaque. Para o lançamento inicial, isso inclui categorias em destaque e uma prévia dos tópicos de discussão mais recentes.

image
image1722×1048 143 KB

Construímos esses componentes em destaque usando nossa nova API experimental de Blocos, o que nos leva à maior mudança:

API de Blocos: Primeira utilização em produção

A API de Blocos é um novo framework para construir layouts modulares e compostos no Discourse. Ela permite que desenvolvedores de temas montem páginas a partir de componentes autocontidos e reutilizáveis que podem ser colocados em áreas de layout definidas. O tema Meta é nossa primeira implantação em produção dessa API.

O framework apresenta um rico conjunto de ferramentas para desenvolvedores: ative as ferramentas de desenvolvedor e você poderá inspecionar a estrutura de blocos de qualquer página com uma sobreposição integrada que visualiza todas as áreas de layout ativas e seus componentes.

image
image1997×1015 301 KB

Além da página inicial, também estamos usando blocos para renderizar banners personalizados de categoria que mostram as subcategorias de cada categoria:

image
image1997×510 129 KB

Esta ainda é uma prévia inicial do sistema em um contexto de produção. Planejamos publicar documentação e mais exemplos em breve. :link: PR: DEV: Add Block API for declarative, validated UI extension points

19 curtidas
5

Essa é uma boa escolha. Esse conjunto chamou minha atenção quando estava verificando quais conjuntos de ícones estavam disponíveis para o Discourse. É refinado e elegante.

A completa ausência de ícones preenchidos estava causando alguns problemas; por exemplo, o indicador de não lido era quase invisível como um círculo colorido, ou o botão de alternância entre modo escuro/claro seria difícil de renderizar corretamente sem uma parte preenchida.

Percebo que você resolveu esses problemas no tema da marca do meta. Você adicionou ícones personalizados para isso?

Aliás, o logotipo do Discourse no canto superior esquerdo não é clicável no tema da marca do meta (creio que isso ocorre há meses) :grimacing:

1 curtida
6

Não, simplesmente não mapeamos alguns ícones, como circle e square, para a versão do Lucide. Ou melhor, mapeamos apenas a versão em contorno do Fontawesome para esses ícones (far-circle, …). Pode haver outros casos em que precisaremos continuar aprimorando o mapeamento.

Por exemplo, o ícone de coração é complicado. Acredito que uma versão preenchida seria melhor quando curtido, mas até agora não tenho certeza de como fazer isso da melhor forma.

Não consigo reproduzir isso. Você tem mais detalhes?

3 curtidas
7

Tenho curiosidade: qual é a diferença que o Blocks traz e que o Plugin Outlets não oferece?

2 curtidas
8

Testado apenas no Chrome e no Edge, e ocorre apenas no desktop:

image
image463×328 26.6 KB

A div de alternância da barra lateral cobre o logotipo, tornando-o não clicável.

(e sim, o coração de curtida com contorno parece ruim :broken_heart: )

1 curtida
9

Não gosto nada do ícone atual para “respondido a”:

image
image523×343 15.1 KB

Suponho que seja temporário, já que não há uma boa equivalente do FA no Lucide?

Os ícones na lista de tópicos estão muito, muito pequenos:

image
image655×893 50.9 KB

Edição: é o mesmo em outros temas.

Screenshot_20260409_004040_Chrome
Screenshot_20260409_004040_Chrome765×256 54.3 KB

Screenshot_20260409_004232_Chrome
Screenshot_20260409_004232_Chrome749×259 54 KB

Os ícones de categoria parecem menores que os de tags, o que é estranho. Sinto que o tamanho escolhido para os ícones de categoria foi limitado pelo estilo de categoria em caixa, o que deixa menos espaço… :thinking:

3 curtidas
10

Não esperava ver algo como o Lucide adicionado a um tema oficial assim. Fica ótimo! Só gostaria que o coração estivesse preenchido. Fora esse detalhe, o tema está incrível no mobile, pelo que pude perceber.

Parece que não há padding no corpo das mensagens privadas (PMs):

IMG_2067
IMG_2067180×1075 11.2 KB

2 curtidas
11

Concordo!

E concordo com o comentário acima, o coração oco não é bom.

2 curtidas
12

Hmm… uma coisa que sinto que poderia ser alterada é o ícone do chat, de message-square-text para message-square? As linhas parecem um pouco distrativas.

1 curtida
Discourse Lucide Icons
13

Obrigado por todo o feedback sobre os ícones! Acabei de criar um tópico dedicado ao conjunto: Discourse Lucide Icons.

Idealmente, gostaríamos de coletar mais feedback lá e continuar aprimorando o conjunto conforme avançamos.

14

Concordo que os ícones são quase ilegíveis no tamanho atual de .74em. Eles precisam de cerca de 1em.

1 curtida
15

Está sendo coisa da minha cabeça ou o espaçamento vertical dentro da lista de tópicos aumentou hoje? Ou está menos denso, ou eu é que estou mais denso.

1 curtida
16

Eu também notei isso, tentei reverter manualmente (porque prefiro densidade de informação a aparência), mas não tive sorte :frowning:

17

A principal diferença, sob a ótica do design, é que um PluginOutlet é um ponto de inserção. Você injeta seu componente diretamente em um template central. Cada personalização altera, na verdade, a estrutura do aplicativo.

Já um BlockOutlet é um quadro de layout. Você registra um ou vários componentes nesse quadro. Assim, as personalizações ocorrem dentro desse quadro, e não nos templates do aplicativo. Isso nos proporciona layouts mais previsíveis e estáveis.

Outra grande diferença é que a API de Blocks pode lidar com todo o espectro de lógica de renderização condicional. Você não precisa adicionar isso ao seu componente. Um componente de bloco pode focar puramente no conteúdo e no template, e temos muito menos lógica repetida.

1 curtida
18

Se alguém quiser ter uma lista de tópicos mais compacta, isso é o que funcionou para mim:

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

image
image777×941 133 KB

19

O novo tema da marca Meta tem, na minha opinião, muito espaçamento no mobile.

  • 1º espaçamento entre a borda da tela e o container do conteúdo
  • 2º espaçamento entre o container da página e o conteúdo real

Outros temas não apresentam essa primeira lacuna entre a borda da tela e o container do conteúdo.

Isso faz com que o conteúdo fique um pouco “esmagado” horizontalmente; há muito pouco espaço. É bem visível na página “meu post”, em comparação com o Horizon:

Screenshot_20260410_014714_Chrome
Screenshot_20260410_014714_Chrome1080×2340 268 KB

Screenshot_20260410_024000_Chrome
Screenshot_20260410_024000_Chrome1080×2340 292 KB

O Horizon consegue exibir muito mais conteúdo sem perder a legibilidade.

Entendo a intenção do fundo roxo em “contorno” para que o aspecto da marca do tema seja visível em uma página de conteúdo completo, mas acho que perdemos muito espaço nessas telas estreitas.

Outras pequenas críticas:

Screenshot_20260410_133453_Chrome
Screenshot_20260410_133453_Chrome1080×2340 249 KB

O ícone no canto superior esquerdo não é perfeitamente redondo. Está levemente achatado.
image image

O pop-up de categoria/tag permite que a área de texto vaze ligeiramente (não tenho certeza se está relacionado a este tema):

image
image155×652 42.6 KB
. Seria melhor se ele a cobrisse completamente.

1 curtida