Composant de thème de mention d'emoji

Personnalisation Composant de thème
7

Je voulais la possibilité d’utiliser également des SVG personnalisés comme icône à côté d’une mention, quelque chose que j’ai vu sur Guilded pour le personnel et que je voulais avoir là mais que je ne pouvais pas avoir — encore une autre raison pour laquelle j’aime tellement Discourse, c’est que je peux réellement bricoler quelque chose qui pourrait fonctionner au lieu d’espérer et d’attendre que les développeurs l’ajoutent.

J’ai donc bricolé la solution suivante. Elle n’est en aucun cas infaillible, elle nécessite probablement que le SVG que vous téléchargez ait une variable SCSS qui commence par svg et pourtant, elle semble fonctionner suffisamment pour moi maintenant :slight_smile:

Si quelqu’un veut prendre ce code et l’améliorer, l’incorporer pour le rendre plus sophistiqué, j’en serais reconnaissant !

Choses possibles à améliorer

  1. La faire fonctionner pour toutes les icônes SVG, c’est-à-dire toutes celles de Discourse et toutes celles qui sont téléchargées et qui ne commencent pas par svg.
  2. Nettoyer le code.
  3. Améliorer le style, car j’ai un peu bricolé le CSS pour qu’il fonctionne et il pourrait ne pas fonctionner dans toutes les situations.

Quoi qu’il en soit, voici un exemple de mention avec moi utilisant l’icône personnalisée que j’ai pour la Défense Émotionnelle en tant qu’icône de mention du personnel :

image

Voici le code que j’ai ajouté :

header.html

  // Add SVG icons as an option, as long as they're included in assets and uploaded
  // Creates an object of all the assets and iterates to find which links have the data-emoji
  // attribute equaling the asset variable name then adds the URL for it

  // convert object to key's array
  const keys = Object.keys(settings.theme_uploads);

  // print all keys
  console.log(keys);

  // iterate over object
  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;
  }
}

Cela nécessite également que vous :

  1. Créez un dossier /assets
  2. Ajoutez des fichiers svg dans le dossier /assets, comme /assets/esd-heart.svg
  3. Mettez à jour le fichier about.json pour lier ces actifs avec quelque chose comme :
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 « J'aime »