Moetwemoji : Emojis animés légers (AVIF) - Animez votre forum

PixPin_2026-01-04_22-04-17

Salut à tous ! :waving_hand:

J’ai créé un nouveau plugin pour apporter plus d’énergie et d’expressions dynamiques aux communautés Discourse. Moetwemoji introduit un ensemble d’emojis animés qui rendent les interactions plus vivantes et amusantes.

:rocket: Fonctionnalités Clés

  • Super Léger : Tous les emojis sont encodés au format AVIF.

  • Haute Performance : La taille moyenne des fichiers n’est qu’environ 10KB, garantissant que votre forum se charge rapidement tout en étant esthétique.

  • Déploiement Flexible : Je propose deux versions différentes selon vos besoins (Remplacement ou Supplément).


:package: Choisissez Votre Version

J’ai préparé deux dépôts distincts selon la manière dont vous souhaitez intégrer ces emojis à votre forum.

Option 1 : La Version Remplacement (Remplacement Total)

Si vous souhaitez remplacer complètement l’ensemble par défaut des Twemojis statiques par ces versions animées, utilisez cette version. Elle écrase les paramètres par défaut du système, faisant de l’animation l’expérience standard.

Option 2 : La Version Pack (Supplément)

Si vous préférez conserver les emojis standards et simplement ajouter ceux-ci comme un « Pack » supplémentaire dans le sélecteur d’emojis, utilisez cette version. Elle ajoute un nouvel onglet à votre sélecteur d’emojis sans toucher aux paramètres par défaut.


16 « J'aime »

Merci pour le partage :+1:

J’ai voulu tester mais cela ne fonctionne pas malgré l’ajout du dépôt dans le fichier app.yaml

Il y a un paramètre a faire ?

Merci

OK, veuillez essayer l’installation manuelle

Guide d’installation manuelle (Version de substitution)

Ce guide explique comment installer et appliquer manuellement le plugin discourse-moetwemoji-twemoji-fakepng-override à l’intérieur d’un conteneur Discourse en cours d’exécution, et clarifie pourquoi une reconstruction complète n’est pas strictement nécessaire pour la version de substitution.


1. Entrer dans le Conteneur Discourse

Sur votre serveur, accédez au répertoire Docker de Discourse (généralement /var/discourse) et entrez dans le conteneur en cours d’exécution :

cd /var/discourse
./launcher enter app

Vous devriez maintenant être dans le shell du conteneur.


2. Cloner le Plugin de Substitution Manuellement

Accédez au répertoire des plugins et clonez le dépôt :

cd /var/www/discourse/plugins
git clone https://github.com/constansino/discourse-moetwemoji-twemoji-fakepng-override.git

Vérifiez que le répertoire existe :

ls discourse-moetwemoji-twemoji-fakepng-override


3. Appliquer la Substitution d’Emoji

Retournez au répertoire racine de Discourse :

su - discourse
cd /var/www/discourse

Vérifiez l’état actuel (facultatif mais recommandé) :

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

Appliquez la substitution :

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

Si la commande se termine sans erreur, les fichiers PNG Twemoji ont été remplacés par Moetwemoji.


4. Notes Importantes Concernant les Reconstructions (Persistance)

:red_exclamation_mark: Aucune reconstruction n’est nécessaire pour que la substitution fonctionne

Cette version de substitution fonctionne en remplaçant directement les fichiers dans le conteneur en cours d’exécution.
Par conséquent :

  • :white_check_mark: Vous n’avez PAS besoin d’exécuter ./launcher rebuild app

  • :white_check_mark: Les changements prennent effet immédiatement après l’exécution de la tâche rake

:warning: Mais le changement N’EST PAS persistant

Parce que cela est fait à l’intérieur du système de fichiers du conteneur :

  • Toute future exécution de ./launcher rebuild app

  • Ou recréation/mise à jour du conteneur

effacera les changements, et la substitution d’emoji sera perdue.

:backhand_index_pointing_right: Si vous avez besoin de persistance à travers les reconstructions, vous devez installer le plugin via les hooks app.yml et reconstruire correctement.


5. Vider le Cache CDN et le Cache du Navigateur (Très Important)

Après avoir appliqué la substitution, les emojis peuvent toujours apparaître inchangés en raison de la mise en cache.

5.1 Vider le Cache CDN (ex: Cloudflare)

Si vous utilisez un CDN tel que Cloudflare :

  • Purgez le cache pour :

    • /images/emoji/*

    • ou effectuez une purge complète du cache si nécessaire

Sinon, les anciens fichiers PNG Twemoji pourraient toujours être servis.

5.2 Vider le Cache du Navigateur

Du côté client :

  • Actualisation forcée de la page (Ctrl + F5 / Cmd + Shift + R)

  • Ou vider le cache du navigateur

  • Ou tester dans une fenêtre de navigation privée/incognito

Tant que les caches CDN et du navigateur ne sont pas vidés, les changements d’emoji pourraient ne pas être visibles.


6. Résumé

  • Ce plugin de substitution peut être installé et appliqué sans reconstruction

  • L’installation manuelle est utile pour :

    • Les tests

    • L’utilisation temporaire

    • Le débogage

  • L’inconvénient est le manque de persistance

  • Toujours vider le cache CDN + cache du navigateur après avoir appliqué les substitutions d’emoji


Avez-vous exécuté la tâche comme décrit dans le README ?

Ce README fournit deux méthodes d’installation :

  1. La première méthode nécessite une reconstruction.
  2. La seconde méthode consiste à entrer manuellement dans le conteneur et à le télécharger depuis GitHub.

Il n’y a aucune différence entre les deux méthodes ; la première est simplement plus persistante. Si le téléchargement échoue lors de la reconstruction avec la première méthode, envisagez d’essayer la seconde méthode, qui implique une installation directe dans le conteneur. Ceci est dû au fait qu’elle télécharge et remplace essentiellement les images d’emoji existantes.

J’ai remarqué que le fichier Readme explique 2 méthodes d’installation, mais il mentionne également :

cd /var/discourse
./launcher enter app

su - discourse
cd /var/www/discourse

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status
RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

ce qui n’est pas mentionné dans le premier message ici sur Meta. Tout comme l’information sur la mise en cache. C’est pourquoi je pensais que quelqu’un pourrait manquer cela.


Au fait, les deux liens dans le premier message contiennent une recherche Google. Y a-t-il une raison pour laquelle vous n’avez pas lié directement à GitHub ?

1 « J'aime »

Pourquoi est-il appelé « moetwemoji », et le dossier d’emojis « twemoji » alors que les emojis animés sont les emojis animés officiels de Google Noto ?

Cependant, ceci est mentionné dans ce fichier, où l’attribution est incomplète. Le fichier est censé être en cours de travail, mais je m’attendrais à ce qu’une attribution soit complète avant de distribuer votre composant de thème :face_with_tongue:

4 « J'aime »

Désolé, mon message n’était peut-être pas assez complet. Je le réviserai plus tard. Merci pour votre correction.

2 « J'aime »

Merci d’avoir soulevé ce point — vous avez tout à fait raison.

La dénomination est historique et provient de la structure d’emoji par défaut de Discourse, mais les actifs animés réels proviennent de Google Noto Emoji, et non de Twemoji. Je suis d’accord que c’est déroutant et que cela doit être clarifié.

Je suis actuellement en train de :

  • Mettre à jour l’attribution pour se conformer entièrement à la licence Noto Emoji
  • Clarifier la source des actifs dans le README
  • Examiner la dénomination / la structure des dossiers pour réduire la confusion

Merci pour la révision et pour avoir remarqué cela.

2 « J'aime »

je vais attendre car malgré les manips cela ne fonctionne pas par contre mon discourse est sur un serveur autonome sur moi sur ubuntu server. Je ne sais pas si j’ai une manip à faire en plus concernant le cache ?

essayez simplement
https://"votre_domaine"/images/emoji/twemoji/hugs.png?v=15

et

https://"votre_domaine"/images/emoji/twemoji/hugs.png?v=15&cache=0

Les deux URL donnent des émojis très stables et immobiles. Donc, sur cette base, je ne vois aucune raison de l’installer. Une question de périphérique ?

Je pense que ces liens sont destinés à tester le plugin après son installation. Tant que vous n’utilisez pas le plugin, vous verrez l’emoji que le plugin remplacerait.

Je l’ai effectivement installé, et je ne vois rien. Peut-être devrais-je utiliser d’autres émojis dans les paramètres de Discourse ou autre chose, je ne sais pas [1]


  1. de plus, je pense personnellement que les éléments qui bougent sont des échos des années 90 :squinting_face_with_tongue: Je ne suis donc pas très motivé pour creuser davantage. ↩︎

Désolé, parce que vous avez dit que vous ne voyiez aucune raison de l’installer, j’ai supposé que vous ne l’aviez pas fait.

Avez-vous exécuté la tâche rake expliquée dans le fichier README du dépôt du plugin ? Je pense que c’est ce qui place l’emoji animé là où vous avez essayé d’y accéder avec les liens.

1 « J'aime »

Je suis désolé. Je suis sur mon téléphone et j’étais/j’étais paresseux pour écrire à ce moment-là.

Non, je ne l’ai pas fait.

Édit.

Je n’ai jamais lu le fichier readme, car l’OP n’offre qu’un lien (inutile) vers une recherche Google. Maintenant, j’ai fait des démarches supplémentaires vers le dépôt original pour trouver des informations qui devraient ou pourraient être dans l’OP.

1 « J'aime »

Je vois bien les emojis animés avec “https://“votre_domaine”/images/emoji/twemoji/hugs.png?v=15” mais quand je veux sélectionner un emoji dans le tchat par exemple cela ne fonctionne pas :thinking:

Pour réduire la complexité, je vous recommande de supprimer tout ce qui concerne le fait de ne pas reconstruire et d’entrer dans le conteneur pour cloner. Ceci est inutile et n’est pas la manière standard de gérer les plugins.

Presque tous les administrateurs reconstruiront périodiquement et la persistance est l’aspect le plus important, donc la méthode app.yml est la meilleure.

Vous pouvez également créer un lien vers les instructions standard et simplement détailler les étapes qui sont uniques.

2 « J'aime »