Moetwemoji: Emojis animados ligeros (AVIF) - Dale vida a tu foro

PixPin_2026-01-04_22-04-17

¡Hola a todos! :waving_hand:

He creado un nuevo plugin para aportar más energía y expresiones dinámicas a las comunidades de Discourse. Moetwemoji introduce un conjunto de emojis animados que hacen que las interacciones sean más animadas y divertidas.

:rocket: Características Principales

  • Súper Ligero: Todos los emojis están codificados en formato AVIF.

  • Alto Rendimiento: El tamaño promedio del archivo es de solo alrededor de 10KB, lo que garantiza que su foro cargue rápido mientras luce genial.

  • Implementación Flexible: Ofrezco dos versiones diferentes dependiendo de sus necesidades (Sobrescritura o Suplemento).


:package: Elija su Versión

He preparado dos repositorios separados dependiendo de cómo desee integrar estos emojis en su foro.

Opción 1: La Versión de Sobrescritura (Reemplazo Total)

Si desea reemplazar completamente el conjunto predeterminado de Twemoji estáticos con estos animados, use esta versión. Sobrescribe los valores predeterminados del sistema, haciendo de la animación la experiencia estándar.

Opción 2: La Versión de Paquete (Suplemento)

Si prefiere mantener los emojis estándar y simplemente agregar estos como un “Paquete” adicional en el selector de emojis, use esta versión. Agrega una nueva pestaña a su selector de emojis sin modificar los predeterminados.


17 Me gusta

Gracias por compartir :+1:

Quise probar pero no funciona a pesar de añadir el repositorio en el archivo app.yaml

¿Hay algún parámetro que deba configurar?

Gracias

OK, por favor, intente la Instalación Manual

Guía de Instalación Manual (Versión de Anulación/Override)

Esta guía explica cómo instalar y aplicar manualmente el plugin discourse-moetwemoji-twemoji-fakepng-override dentro de un contenedor de Discourse en ejecución, y aclara por qué una reconstrucción completa no es estrictamente necesaria para la versión de anulación.


1. Entrar al Contenedor de Discourse

En su servidor, vaya al directorio de Docker de Discourse (generalmente /var/discourse) y entre al contenedor en ejecución:

cd /var/discourse
./launcher enter app

Ahora debería estar dentro del shell del contenedor.


2. Clonar el Plugin de Anulación Manualmente

Navegue al directorio de plugins y clone el repositorio:

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

Verifique que el directorio exista:

ls discourse-moetwemoji-twemoji-fakepng-override


3. Aplicar la Anulación de Emoji

Vuelva al directorio raíz de Discourse:

su - discourse
cd /var/www/discourse

Verifique el estado actual (opcional pero recomendado):

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

Aplique la anulación:

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

Si el comando finaliza sin errores, los archivos PNG de Twemoji han sido reemplazados por Moetwemoji.


4. Notas Importantes Sobre Reconstrucciones (Persistencia)

:red_exclamation_mark: No se requiere reconstrucción para que funcione la anulación

Esta versión de anulación funciona reemplazando directamente los archivos en el contenedor en ejecución.
Por lo tanto:

  • :white_check_mark: NO necesita ejecutar ./launcher rebuild app

  • :white_check_mark: Los cambios surten efecto inmediatamente después de ejecutar la tarea rake

:warning: Pero el cambio NO es persistente

Debido a que esto se realiza dentro del sistema de archivos del contenedor:

  • Cualquier ./launcher rebuild app futuro

  • O recreación/actualización del contenedor

borrará los cambios, y la anulación de emoji se perderá.

:backhand_index_pointing_right: Si necesita persistencia a través de reconstrucciones, debe instalar el plugin a través de los hooks de app.yml y reconstruir correctamente.


5. Borrar la Caché de CDN y del Navegador (Muy Importante)

Después de aplicar la anulación, los emojis pueden seguir apareciendo sin cambios debido al almacenamiento en caché.

5.1 Borrar la Caché de CDN (ej. Cloudflare)

Si está utilizando una CDN como Cloudflare:

  • Purgar la caché para:

    • /images/emoji/*

    • o realizar una purga completa de la caché si es necesario

De lo contrario, los archivos PNG antiguos de Twemoji aún podrían servirse.

5.2 Borrar la Caché del Navegador

En el lado del cliente:

  • Actualización forzada de la página (Ctrl + F5 / Cmd + Shift + R)

  • O borrar la caché del navegador

  • O probar en una ventana de incógnito/privada

Hasta que se borren tanto la caché de CDN como la del navegador, es posible que los cambios de emoji no sean visibles.


6. Resumen

  • Este plugin de anulación se puede instalar y aplicar sin reconstruir

  • La instalación manual es útil para:

    • Pruebas

    • Uso temporal

    • Depuración

  • La desventaja es la falta de persistencia

  • Siempre borre la caché de CDN + caché del navegador después de aplicar las anulaciones de emoji


¿Ejecutaste la tarea como se describe en el README?

Este README proporciona dos métodos de instalación:

  1. El primer método requiere una reconstrucción.
  2. El segundo método es ingresar manualmente al contenedor y descargarlo desde GitHub.

No hay diferencia entre los dos métodos; el primero es simplemente más persistente. Si la descarga falla al reconstruir usando el primer método, considere intentar el segundo método, que implica instalar directamente dentro del contenedor. Esto se debe a que esencialmente descarga y reemplaza las imágenes de emoji existentes.

Noté que el Readme explica 2 métodos de instalación, pero también menciona:

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

lo cual no se menciona en la primera publicación aquí en Meta. Al igual que la información sobre el caching (almacenamiento en caché). Por eso pensé que alguien podría pasarlo por alto.


Por cierto, ambos de tus enlaces en la primera publicación contienen una búsqueda de Google. ¿Hay alguna razón por la que no enlazaste directamente a GitHub?

1 me gusta

¿Por qué se llama “moetwemoji” y la carpeta de emojis se llama “twemoji” cuando los emojis animados son emojis animados oficiales de Google Noto?

Sin embargo, esto se menciona en este archivo, donde la atribución está incompleta. Se dice que el archivo está en proceso de elaboración, pero esperaría que una atribución estuviera completa antes de distribuir su componente de tema :face_with_tongue:

5 Me gusta

Lo siento, mi publicación puede no haber sido lo suficientemente completa. La revisaré más tarde. Gracias por tu corrección.

2 Me gusta

Gracias por señalarlo, tienes toda la razón.

La nomenclatura es histórica y proviene de la estructura de emoji predeterminada de Discourse, pero los activos animados reales son de Google Noto Emoji, no de Twemoji. Estoy de acuerdo en que esto es confuso y necesita ser aclarado.

Actualmente estoy:

  • Actualizando la atribución para cumplir plenamente con la licencia de Noto Emoji
  • Aclarando la fuente de los activos en el README
  • Revisando la nomenclatura / estructura de carpetas para reducir la confusión

Gracias por la revisión y por detectar esto.

2 Me gusta

Esperaré porque a pesar de las manipulaciones no funciona, por otro lado, mi Discourse está en un servidor autónomo en mi servidor Ubuntu. ¿No sé si tengo que hacer alguna manipulación adicional con respecto a la caché?

solo intenta
https://"yourdomain"/images/emoji/twemoji/hugs.png?v=15

y

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

Ambas las URL proporcionan emojis muy estables e inmóviles. Por lo tanto, basándome en eso, no veo ninguna razón para instalar esto. ¿Una pregunta sobre el dispositivo?

Creo que esos enlaces son para probar el complemento después de instalarlo. Mientras no uses el complemento, verás el emoji que el complemento reemplazaría.

De hecho, lo instalé y no veo nada. Quizás debería usar otros emojis en la configuración de Discourse o algo más, no lo sé [1]


  1. además, personalmente creo que los elementos en movimiento son ecos de los 90 :squinting_face_with_tongue: así que no estoy muy motivado para empezar a investigar más a fondo. ↩︎

Lo siento, como dijiste que no veías una razón para instalarlo, asumí que no lo habías hecho.

¿Ejecutaste la tarea rake que se explica en el readme del repositorio del complemento? Creo que eso es lo que coloca el emoji animado donde intentaste acceder a ellos con los enlaces.

1 me gusta

Mis disculpas. Estoy en el teléfono y fui/soy perezoso para escribir entonces.

No, no lo hice.

Edición.

Nunca leí el readme, porque el OP solo ofrece un enlace (inútil) a la búsqueda de Google. Ahora di pasos adicionales al repositorio original para encontrar información que debería o podría estar en el OP.

1 me gusta

Veo bien los emojis animados, pero cuando quiero seleccionar un emoji en el chat, por ejemplo, no funciona :thinking:

Para reducir la complejidad, recomiendo eliminar todo lo relacionado con no reconstruir y entrar al contenedor para clonar. Esto es innecesario y no es la forma estándar de administrar complementos.

Casi todos los administradores reconstruirán periódicamente y la persistencia es el aspecto más importante, por lo que el método app.yml es el mejor.

También puedes enlazar a las instrucciones estándar y solo detallar los pasos que son únicos.

3 Me gusta