Componente de tema de menção de emoji

Personalização Componente de tema
7

Eu queria a capacidade de usar também SVGs personalizados como ícone ao lado de uma menção, algo que vi no Guilded para a equipe e que eu queria ter lá, mas não conseguia — mais um motivo pelo qual estou gostando tanto do Discourse é que posso realmente criar algo que funcione em vez de esperar que os desenvolvedores o adicionem.

Então, criei a seguinte solução. Não é infalível de forma alguma, provavelmente requer que o SVG que você carrega tenha uma variável SCSS que comece com svg e, ainda assim, parece funcionar o suficiente para mim agora :slight_smile:

Se alguém quiser pegar este código e desenvolvê-lo, incorporá-lo para torná-lo mais sofisticado, ficaria grato!

Possíveis melhorias

  1. Fazer com que funcione para todos os ícones SVG, ou seja, todos os do Discourse e todos os que são carregados e não começam com svg.
  2. Limpar o código.
  3. Melhorar o estilo, pois eu meio que criei o CSS para funcionar e pode não funcionar em todas as situações.

Independentemente disso, aqui está um exemplo de uma menção comigo usando o ícone personalizado que tenho para Defesa Emocional como ícone de menção da equipe:

image

Aqui está o código que adicionei:

header.html

  // Adiciona ícones SVG como uma opção, desde que estejam incluídos nos assets e carregados
  // Cria um objeto de todos os assets e itera para encontrar quais links têm o atributo data-emoji
  // igual ao nome da variável do asset e, em seguida, adiciona o URL para ele

  // converte o objeto em um array de chaves
  const keys = Object.keys(settings.theme_uploads);

  // imprime todas as chaves
  console.log(keys);

  // itera sobre o 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;
  }
}

Isso também requer que você:

  1. Crie uma pasta /assets
  2. Adicione arquivos svg na pasta /assets, como /assets/esd-heart.svg
  3. Atualize o arquivo about.json para vincular esses assets com algo como:
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 curtida