Componente de tema de mención de emojis

Personalización Componente temático
7

Quería la capacidad de usar también SVG personalizados como icono junto a una mención, algo que he visto en Guilded para el personal y que quería tener allí pero no podía tener; otra razón por la que me gusta tanto Discourse es que realmente puedo hackear algo que funcione en lugar de esperar a que los desarrolladores lo añadan.

Así que hackeé la siguiente solución. No es infalible, probablemente requiere que el SVG que subas tenga una variable SCSS que comience con svg y, sin embargo, parece funcionar lo suficiente para mí ahora :slight_smile:

Si alguien quiere tomar este código y desarrollarlo, incorporarlo para hacerlo más elegante, ¡estaré agradecido!

Posibles mejoras

  1. Hacer que funcione para todos los iconos SVG, es decir, todos los de Discourse y todos los que se suben y no empiezan con svg.
  2. Limpiar el código.
  3. Mejorar el estilo, ya que he hackeado un poco el CSS para que funcione y puede que no funcione en todas las situaciones.

Sin embargo, aquí tienes un ejemplo de una mención conmigo usando el icono personalizado que tengo para Defensa Emocional Personal como icono de mención del personal:

image

Aquí está el código que añadí:

header.html

  // Añade iconos SVG como opción, siempre que estén incluidos en los assets y subidos
  // Crea un objeto de todos los assets e itera para encontrar qué enlaces tienen el atributo data-emoji
  // igual al nombre de la variable del asset y luego añade la URL correspondiente

  // convierte el objeto en un array de claves
  const keys = Object.keys(settings.theme_uploads);

  // imprime todas las claves
  console.log(keys);

  // itera sobre el objeto
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

common.scss

@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

Esto también requiere que:

  1. Creas una carpeta /assets
  2. Añadas archivos svg en la carpeta /assets, como /assets/esd-heart.svg
  3. Actualices el archivo about.json para enlazar a esos assets con algo como:
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 me gusta