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.