Moetwemoji: Emoji animati leggeri (AVIF) - Dai vita al tuo forum

PixPin_2026-01-04_22-04-17

Ciao a tutti! :waving_hand:

Ho creato un nuovo plugin per portare più energia ed espressioni dinamiche nelle community di Discourse. Moetwemoji introduce una serie di emoji animate che rendono le interazioni più vivaci e divertenti.

:rocket: Caratteristiche Principali

  • Super Leggero: Tutte le emoji sono codificate in formato AVIF.

  • Alte Prestazioni: La dimensione media del file è di soli circa 10KB, garantendo che il tuo forum si carichi velocemente pur avendo un bell’aspetto.

  • Implementazione Flessibile: Offro due diverse versioni a seconda delle tue esigenze (Override o Supplemento).


:package: Scegli la Tua Versione

Ho preparato due repository separati a seconda di come desideri integrare queste emoji nel tuo forum.

Opzione 1: La Versione Override (Sostituzione Totale)

Se desideri sostituire completamente il set predefinito di Twemoji statici con questi animati, usa questa versione. Sovrascrive le impostazioni predefinite del sistema, rendendo l’animazione l’esperienza standard.

Opzione 2: La Versione Pack (Supplemento)

Se preferisci mantenere le emoji standard e semplicemente aggiungerle come un “Pacchetto” extra nel selettore di emoji, usa questa versione. Aggiunge una nuova scheda al tuo selettore di emoji senza toccare le impostazioni predefinite.


16 Mi Piace

Grazie per la condivisione :+1:

Ho voluto provare ma non funziona nonostante l’aggiunta del repository nel file app.yaml

C’è un parametro da impostare?

Grazie

OK, prova l’installazione manuale

Guida all’installazione manuale (Versione di Override)

Questa guida spiega come installare e applicare manualmente il plugin discourse-moetwemoji-twemoji-fakepng-override all’interno di un container Discourse in esecuzione, e chiarisce perché una ricostruzione completa non è strettamente necessaria per la versione di override.


1. Entra nel Container di Discourse

Sul tuo server, vai alla directory Docker di Discourse (di solito /var/discourse) ed entra nel container in esecuzione:

cd /var/discourse
./launcher enter app

Ora dovresti essere all’interno della shell del container.


2. Clona il Plugin di Override Manualmente

Naviga nella directory dei plugin e clona il repository:

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

Verifica che la directory esista:

ls discourse-moetwemoji-twemoji-fakepng-override


3. Applica l’Override delle Emoji

Torna alla directory principale di Discourse:

su - discourse
cd /var/www/discourse

Controlla lo stato attuale (opzionale ma consigliato):

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

Applica l’override:

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

Se il comando termina senza errori, i file PNG di Twemoji sono stati sostituiti da Moetwemoji.


4. Note Importanti sulle Ricostruzioni (Persistenza)

:red_exclamation_mark: Nessuna ricostruzione è necessaria per far funzionare l’override

Questa versione di override funziona sostituendo direttamente i file nel container in esecuzione.
Pertanto:

  • :white_check_mark: NON è necessario eseguire ./launcher rebuild app

  • :white_check_mark: Le modifiche hanno effetto immediatamente dopo l’esecuzione del task rake

:warning: Ma la modifica NON è persistente

Poiché questo viene fatto all’interno del filesystem del container:

  • Qualsiasi futura esecuzione di ./launcher rebuild app

  • O ricreazione/aggiornamento del container

cancellerà le modifiche, e l’override delle emoji andrà perso.

:backhand_index_pointing_right: Se hai bisogno di persistenza tra le ricostruzioni, devi installare il plugin tramite gli hook di app.yml e ricostruire correttamente.


5. Svuota la Cache CDN e del Browser (Molto Importante)

Dopo aver applicato l’override, le emoji potrebbero apparire ancora invariate a causa della memorizzazione nella cache.

5.1 Svuota la Cache CDN (es. Cloudflare)

Se stai utilizzando un CDN come Cloudflare:

  • Svuota la cache per:

    • /images/emoji/*

    • o esegui una cancellazione completa della cache se necessario

Altrimenti, i vecchi file PNG di Twemoji potrebbero essere ancora serviti.

5.2 Svuota la Cache del Browser

Sul lato client:

  • Aggiornamento forzato della pagina (Ctrl + F5 / Cmd + Shift + R)

  • O svuota la cache del browser

  • O prova in una finestra in incognito/privata

Finché la cache CDN e quella del browser non saranno state svuotate, le modifiche alle emoji potrebbero non essere visibili.


6. Riepilogo

  • Questo plugin di override può essere installato e applicato senza ricostruire

  • L’installazione manuale è utile per:

    • Test

    • Uso temporaneo

    • Debug

  • Lo svantaggio è la mancanza di persistenza

  • Svuota sempre la cache CDN + cache del browser dopo aver applicato gli override delle emoji


Hai eseguito l’attività come descritto nel README?

Questo README fornisce due metodi di installazione:

  1. Il primo metodo richiede una ricompilazione.
  2. Il secondo metodo consiste nell’entrare manualmente nel container e scaricarlo da GitHub.

Non c’è differenza tra i due metodi; il primo è semplicemente più persistente. Se il download fallisce durante la ricompilazione utilizzando il primo metodo, considera di provare il secondo metodo, che comporta l’installazione diretta all’interno del container. Questo perché essenzialmente scarica e sostituisce le immagini emoji esistenti.

Ho notato che il Readme spiega 2 metodi di installazione, ma menziona anche:

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

che non è menzionato nel primo post qui su Meta. Così come le informazioni sulla cache. Ecco perché ho pensato che qualcuno potesse non notarlo.


A proposito, entrambi i tuoi link nel primo post contengono una ricerca su Google. C’è un motivo per cui non hai collegato direttamente a GitHub?

1 Mi Piace

Perché si chiama “moetwemoji” e la cartella delle emoji si chiama “twemoji” quando le emoji animate sono emoji animate ufficiali di Google Noto?

Tuttavia, questo è menzionato in questo file, dove l’attribuzione è incompleta. Si dice che il file sia in fase di lavorazione, ma mi aspetterei che un’attribuzione sia completa prima di distribuire il tuo componente tema :face_with_tongue:

4 Mi Piace

Mi scuso, il mio post potrebbe non essere stato abbastanza completo. Lo rivedrò più tardi. Grazie per la tua correzione.

2 Mi Piace

Grazie per averlo fatto notare, hai assolutamente ragione.

La denominazione è storica e deriva dalla struttura predefinita delle emoji di Discourse, ma gli asset animati effettivi provengono da Google Noto Emoji, non da Twemoji. Concordo sul fatto che questo sia confuso e debba essere chiarito.

Attualmente sto:

  • Aggiornando l’attribuzione per conformarmi pienamente alla licenza Noto Emoji
  • Chiarificando la fonte degli asset nel README
  • Rivedendo la denominazione / la struttura delle cartelle per ridurre la confusione

Grazie per la revisione e per averlo notato.

2 Mi Piace

Aspetterò perché nonostante le manipolazioni non funziona, d’altra parte il mio Discourse è su un server autonomo su di me su Ubuntu Server. Non so se devo fare qualche manipolazione in più riguardo alla cache?

prova solo
https://"iltuosito"/images/emoji/twemoji/hugs.png?v=15

e

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

Entrambi gli URL forniscono emoji molto stabili e immobili. Quindi, basandomi su questo, non vedo alcun motivo per installare questo. Una domanda sul dispositivo?

Penso che quei link servano per testare il plugin dopo averlo installato. Finché non utilizzi il plugin, vedrai l’emoji che il plugin sostituirebbe.

L’ho effettivamente installato e non vedo nulla. Forse dovrei usare altre emoji nelle impostazioni di Discourse o qualcos’altro, non lo so [1]


  1. in più, personalmente penso che gli elementi in movimento siano echi degli anni '90 :squinting_face_with_tongue: Quindi non sono molto motivato ad approfondire. ↩︎

Scusa, dato che hai detto di non vedere un motivo per installarlo, ho dato per scontato che non l’avessi fatto.

Hai eseguito l’attività rake spiegata nel readme del repository del plugin? Penso che sia quello che inserisce le emoji animate dove hai provato ad accedervi con i link

1 Mi Piace

Colpa mia. Sono al telefono ed ero/sono pigro per scrivere allora.

No, non l’ho fatto.

Modifica.

Non ho mai letto il readme, perché l’OP offre solo un link (inutile) alla ricerca su Google. Ora ho fatto passi extra al repository originale per trovare informazioni che dovrebbero o potrebbero essere nell’OP.

1 Mi Piace

Vedo bene le emoji animate con “https://“il_tuo_dominio”/images/emoji/twemoji/hugs.png?v=15” ma quando voglio selezionare un’emoji nella chat, ad esempio, non funziona :thinking:

Per ridurre la complessità, ti consiglio di rimuovere tutto ciò che riguarda il non ricostruire ed entrare nel container per clonare. Questo è superfluo e non è il modo standard per gestire i plugin.

Quasi tutti gli amministratori ricostruiranno periodicamente e la persistenza è l’aspetto più importante, quindi il metodo app.yml è il migliore.

Puoi anche collegarti alle istruzioni standard e dettagliare solo i passaggi che sono unici.

3 Mi Piace