Écran de démarrage Discourse avec des images SVG personnalisées

[awesomerobot (Kris)]

Cette fonctionnalité a été très demandée ici sur Meta Personal branding for the splash screen .

Nous avons maintenant ajouté la possibilité d’ajouter un SVG, statique ou animé, comme image de l’écran de démarrage pour remplacer cet indicateur de chargement par défaut par des points :

Si un SVG statique est utilisé, il apparaît au-dessus de l’animation des points de chargement :

sinon, si un SVG animé est utilisé, il remplace complètement les points :

Notez que pour des raisons de performance, les SVG animés ne devraient utiliser que les animations de transformation CSS ou d’opacité. [^1]
Vous pouvez activer cette fonctionnalité via notre système Upcoming Changes ( /admin/config/upcoming-changes ) :

Le réglage du site splash screen image est utilisé à cette fin. Vous pouvez utiliser les variables CSS var(--primary), var(--secondary) et var(--tertiary) dans votre SVG pour référencer les couleurs de votre thème et vous adapter au mode sombre.

Il est important de noter que l’activation de cette fonctionnalité peut avoir un impact sur votre score LCP , donc la meilleure façon de l’essayer est d’appliquer la modification, d’attendre un moment et de vérifier si cela a un impact sur le LCP ou l’indexation dans la Google Search Console.

[^1] : Nous avons initialement tenté d’autoriser les éléments d’animation SMIL (<animate>, <animateTransform>, etc.), mais ces animations sont mises en pause par le navigateur lorsque javascript s’exécute, provoquant des saccades. Les animations CSS de transformation et d’opacité ne sont pas bloquées par JS et évitent ce problème.

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

Comment puis-je remplacer ces points ? Pour moi, il n’apparaît que pour mettre mon logo svg

[Don]

Bonjour

@awesomerobot

Si un SVG statique est utilisé, il apparaît au-dessus de l’animation du point de chargement, sinon si un SVG animé est utilisé, il les remplace :

Donc, il sera remplacé si vous utilisez un SVG animé.

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

J’ai appliqué une animation SVG, mais elle apparaît très petite.

Y a-t-il un moyen de l’agrandir ?

[awesomerobot (Kris)]

Nous n’avons actuellement aucun moyen d’ajouter du CSS personnalisé car cet écran se charge avant une grande partie de l’application et il y a beaucoup plus de contraintes. Pouvez-vous partager l’image SVG que vous utilisez ici (ou me l’envoyer en message privé) ? Je pourrais faire quelques tests et voir si nos paramètres par défaut pourraient être plus accommodants.

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

La voici

[awesomerobot (Kris)]

Merci pour la référence !

J’ajoute un changement qui permettra des dimensions légèrement plus grandes et centrera mieux les écrans avec des logos statiques : UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

J’ai également remarqué que votre SVG présente beaucoup d’espace en haut, ce qui affecte le centrage, je ne sais pas si c’est intentionnel, mais cette version le supprime

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

Merci beaucoup !

[awesomerobot (Kris)]

Veuillez noter qu’il y a un léger changement dans ce que nous autorisons pour l’animation SVG (et j’ai mis à jour l’OP pour refléter cela). À l’origine, nous autorisions les animations SMIL dans les SVG, mais il s’avère qu’elles saccadent car le navigateur met en pause ce type d’animation pendant l’exécution de javascript.

Par conséquent, la recommandation est désormais de n’utiliser que les animations de transformation CSS et d’opacité dans vos SVG, car celles-ci ne sont pas bloquées par le JS.

Si vous regardez le SVG de @ばこん ci-dessus… il fournit un bon exemple d’animation autorisée :

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

Faites également attention à donner des noms uniques à vos animations afin qu’elles n’entrent pas en conflit avec d’autres animations dans Discourse (des noms comme “blink”, “rotate”, “fade”, etc. pourraient être trop génériques). Utiliser un préfixe comme unique- est un excellent moyen d’éviter cela.

[Falco]

Google vient de lancer Gemini Pro 3.1, et leur premier point fort du modèle était les SVG animés. Naturellement, j’ai essayé de créer un chargeur pour https://discourse-on-a-pi5.falco.dev/ et j’ai obtenu ceci après seulement 2 invites

S’associe vraiment bien avec cette nouvelle fonctionnalité !

[Bas (Bas van Leeuwen)]

C’est incroyable Falco

J’ai besoin de voir ce que Gemini peut faire avec le logo Discourse

[Falco]

Oui, j’étais plutôt content du résultat ! J’essayais cela depuis longtemps avec des modèles, c’est le premier modèle qui gère bien cela.

Voici l’invite

Générer un SVG animé qui sera utilisé comme animation de chargement sur un forum concernant le mini-ordinateur Raspberry Pi. L’animation doit être réalisée en utilisant du CSS en ligne SVG.

qui a produit

puis j’ai enchaîné avec

C’est super ! Pouvez-vous changer le Raspberry lui-même, les hexagones rouges, l’animation ? Ils se déplacent en diagonale du coin supérieur gauche au coin inférieur droit, mais ils sont décentrés et cela semble étrange. Peut-être pouvons-nous les garder statiques et centralisés avec une animation plus subtile ?

ce qui a ensuite produit la version que j’ai partagée

Le seul point de discorde est que le code SVG contient de nombreux commentaires CSS comme

/* Base Animation & Board Styles */

qui sont invalides lorsque vous l’enregistrez en tant que fichier SVG, j’ai donc supprimé manuellement les 7 lignes contenant ces commentaires.

[Bas (Bas van Leeuwen)]

Vous obtenez de bien meilleurs résultats que moi.

Après avoir abandonné après une poignée d’itérations, voici le meilleur que j’ai obtenu

[Modifier], laissez-moi ajouter deux états intermédiaires supplémentaires :
Celui-ci était plutôt bon… sauf que le logo était cassé :

Je pensais que c’était le plus intéressant, mais il n’a vraiment pas fonctionné comme animation de logo (et pour aucune raison apparente, il a été rendu comme une vidéo avec du son au lieu d’un SVG) :

---

Désolé à tous de faire dévier le sujet Revenons à admirer le travail de Falco et à discuter de l’écran de démarrage !

[Falco]

@Bas

Vous obtenez de bien meilleurs résultats que moi.

Abandonner après une poignée d’itérations

Je crains que la contrainte du logo Discourse ne soit trop sévère pour lui.

J’ai essayé

Générer un SVG animé qui sera utilisé comme animation de chargement sur un forum de discussion. Le forum fonctionne sur Discourse, il pourrait donc utiliser certains de ses motifs sur le svg, comme des bulles de discussion de couleur arc-en-ciel peut-être ? L’animation doit être réalisée à l’aide de CSS en ligne SVG.

Et j’ai obtenu

[Falco]

Nous devrions organiser un concours de splash animé pour Discourse !

[Canapin (Coin-coin le Canapin)]

@Bas

Vos résultats s’améliorent bien plus que les miens.

Avez-vous pensé à régler Gemini en mode « pro » ? Ce n’est peut-être pas le cas par défaut.

[keegan (Keegan George)]

@Falco

Nous devrions organiser un concours de splash animé pour Discourse !

J’ai fait une tentative pour en faire un en accord avec le nouveau style de marque

[noahl (Noah Lovell)]

@Falco

Nous devrions organiser un concours de splash animé pour Discourse !

Eh bien… je suppose que je rejoins cette tendance maintenant

Invite

Convertissez ceci en un SVG animé.

Règles :

• Ce doit être un SVG animé
• Il servira d’icône de chargement entre les pages, il doit donc être subtil et minimal.

Idée :

• Je veux conserver la forme générale sans distorsion
• Je pense que nous pouvons faire quelque chose avec les 3 formes intérieures - une sorte de rotation, similaire à ce que vous obtiendriez si vous faisiez tourner une raquette de tennis de table entre vos mains par son manche.

VOUS DEVEZ préserver l’identité de la marque et ne pas rompre sa conception globale - c’est impératif pour la marque.

Sortie (Après 3 révisions) :