Personalizando a tela de abertura do Discourse com imagens SVG personalizadas

[awesomerobot (Kris)]

Este recurso foi muito solicitado aqui no Meta Personal branding for the splash screen .

Adicionamos agora a opção de adicionar um SVG, estático ou animado, como imagem da tela de carregamento (splash screen) para substituir este indicador de ponto de carregamento padrão:

Se um SVG estático for usado, ele aparece acima da animação do ponto de carregamento:

caso contrário, se um SVG animado for usado, ele substitui os pontos completamente:

Note que, por razões de desempenho, SVGs animados devem usar apenas animações de transformação CSS ou opacidade. ^[1]
Você pode habilitar esta funcionalidade através do nosso sistema de Próximas Mudanças ( /admin/config/upcoming-changes):

A configuração do site splash screen image é usada para isso. Você pode usar as variáveis CSS var(--primary), var(--secondary) e var(--tertiary) dentro do seu SVG para referenciar as cores do seu tema e se adaptar ao modo escuro.

É importante notar que habilitar esta funcionalidade pode ter impactos na sua pontuação LCP , então fazer a alteração, esperar um pouco e verificar se há algum impacto no LCP ou na indexação no Google Search console é a melhor forma de testar isso.

---

1. Originalmente tentamos permitir elementos de animação SMIL (<animate>, <animateTransform>, etc), mas essas animações serão pausadas pelo navegador quando o javascript estiver sendo executado, causando travamentos. Animações CSS de transformação e opacidade não são bloqueadas por JS e evitam esse problema. ↩︎

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

Como eu substituo esses pontos? Para mim, só aparece a opção de colocar meu logotipo SVG

[Don]

Olá

@awesomerobot

Se um SVG estático for usado, ele aparece acima da animação do ponto de carregamento, caso contrário, se um animado for usado, ele os substitui:

Portanto, ele será substituído se você usar um SVG animado.

[ばこん (べーこん(bac0n))]

Apliquei uma animação SVG, mas ela aparece muito pequena.

Existe uma maneira de aumentá-la?

[awesomerobot (Kris)]

Atualmente, não temos uma maneira de adicionar CSS personalizado porque esta tela carrega antes de grande parte do aplicativo e há muito mais restrições. Você pode compartilhar a imagem SVG que está usando aqui (ou me enviar por mensagem privada)? Eu poderia fazer alguns testes e ver se nossas configurações padrão poderiam ser mais adequadas.

[ばこん (べーこん(bac0n))]

Aqui está

[awesomerobot (Kris)]

Obrigado pela referência!

Estou adicionando uma alteração que permitirá dimensões ligeiramente maiores e centralizará melhor as telas com logotipos estáticos: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

Também notei que seu SVG tem muito espaço na parte superior, o que está afetando a centralização, não sei se isso é intencional, mas esta versão o remove

[ばこん (べーこん(bac0n))]

Muito obrigado!

[awesomerobot (Kris)]

Note que há uma pequena alteração no que estamos permitindo para animação SVG (e atualizei o OP para refletir isso). Originalmente, estávamos permitindo animações SMIL em SVGs, mas descobrimos que elas engasgam porque o navegador pausa esse tipo de animação enquanto o javascript é executado.

Portanto, a recomendação é usar apenas animações de transformação CSS e opacidade em seus SVGs, pois estas não são bloqueadas por JS.

Se você olhar o SVG do @ばこん acima… ele fornece um bom exemplo de uma animação permitida:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Tenha também o cuidado de dar nomes exclusivos às suas animações para que não entrem em conflito com outras animações no Discourse (nomes como “blink”, “rotate”, “fade”, etc. podem ser muito genéricos). Usar um prefixo como unique- é uma ótima maneira de evitar isso.

[Falco]

O Google acabou de lançar o Gemini Pro 3.1, e o primeiro destaque do modelo foi o SVGs animados. Naturalmente, tentei criar um loader para https://discourse-on-a-pi5.falco.dev/ e obtive isto após apenas 2 prompts

Combina muito bem com este novo recurso!

[Bas (Bas van Leeuwen)]

Isso é incrível, Falco

Preciso ver o que o Gemini pode fazer com o logo do Discourse

[Falco]

Sim, fiquei bem satisfeito com o resultado! Eu estava tentando isso há muito tempo com modelos, este é o primeiro modelo que consegue lidar bem com isso.

Aqui está o prompt

Gere um SVG animado que será usado como animação de carregamento em um fórum sobre o mini computador de placa raspberry pi. A animação deve ser feita usando CSS inline no SVG.

que produziu

então eu continuei com

Isso é ótimo! Você pode mudar a própria raspberry, os hexágonos vermelhos, a animação? Eles estão se movendo diagonalmente do canto superior esquerdo para o canto inferior direito, mas estão fora do centro e parece estranho. Talvez possamos mantê-los estáticos e centralizados e com uma animação mais sutil?

o que então produziu a versão que compartilhei

O único ponto de discórdia é que o código SVG tem muitos comentários CSS como

/* Base Animation & Board Styles */

que são inválidos quando você o salva como um arquivo SVG, então eu removi as 7 linhas com eles manualmente.

[Bas (Bas van Leeuwen)]

Você está obtendo resultados muito melhores do que eu.

Desistindo após algumas iterações, este foi o melhor que consegui

[Editar], deixe-me adicionar mais dois estados intermediários:
Este foi muito bom… exceto que o logotipo estava quebrado:

Eu pensei que este era o mais interessante, mas realmente não funcionou como uma animação de logotipo (e sem motivo aparente foi renderizado como um vídeo com som em vez de um SVG):

---

Desculpem todos por tirar o assunto do tópico Vamos voltar a admirar o trabalho do Falco e discutir a tela de abertura!

[Falco]

@Bas

Você está obtendo resultados muito melhores do que eu.

Desistindo após um punhado de iterações

O limite do logotipo do Discourse pode ser muito rigoroso para ele, receio.

Eu tentei

Gere um SVG animado que será usado como animação de carregamento em um fórum de discussão. O fórum roda no Discourse, então poderia usar alguns dos motivos dele no svg, como balões de fala coloridos em arco-íris, talvez? A animação deve ser feita usando CSS embutido no SVG.

E obtive

[Falco]

Devemos fazer um concurso de splash animado do Discourse!

[Canapin (Coin-coin le Canapin)]

@Bas

Você está obtendo resultados muito melhores do que eu.

Você pensou em configurar o Gemini no modo “pro”? Pode não ser o padrão.

[keegan (Keegan George)]

@Falco

Devemos fazer um concurso de splash animado do Discourse!

Fiz uma tentativa de fazer um de acordo com o novo estilo de marca

[noahl (Noah Lovell)]

@Falco

Nós deveríamos fazer um concurso de splash animado do Discourse!

Bemmm - acho que agora estou entrando nessa tendência

Instrução

Converta isto em um SVG animado.

Regras:

• Deve ser um SVG animado
• Servirá como um ícone de carregamento entre as páginas, então precisa ser sutil e minimalista.

Ideia:

• Quero manter a forma geral sem distorção
• Acho que podemos fazer algo com as 3 formas internas - algum tipo de rotação, semelhante ao que você obteria se girasse uma raquete de tênis de mesa em suas mãos pela alça.

VOCÊ DEVE preservar a identidade da marca e não quebrar seu design geral - isso é imperativo para a marca.

Saída (Após 3 revisões):