Emoji mention theme component

テーマコンポーネント
1

This is a simple component that will automatically add an emoji (or other text, if you’d like) to a @mention in a post

40%20AM

Github repo: https://github.com/awesomerobot/discourse-emoji-mention

How do I install a Theme or Theme Component?

How to

To configure it, add items to the list in the format of @username, emoji (You can copy and paste emoji from https://getemoji.com/ or https://emojipedia.org/)

41%20AM

There’s also an option to show the emoji after the mention, instead of before.

That’s all it does!

「いいね！」 29
2

Would be possible to use this with custom emojis?
As we provide support from our community, it would be nice to add our logo before mentioning one of the staff

「いいね！」 1
3

Not using the current structure because the setting uses unicode for emojis.

「いいね！」 1
4

Mmm, and maybe it could be changed? :sweat_smile:

5

This component is kind of a super basic template on finding content in a post and appending something to it. There’s probably a way to grab existing emojis, but I don’t know it off the top of my head.

What would work is replacing the header.html file in the component with this, which would just append an image after a mention instead (that image could be a little logo).

<script type="text/discourse-plugin" version="0.8.18">
    $.expr[":"].contains = $.expr.createPseudo(function(arg) { // make case insensitive
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    }); 
    
    let emoji = {};
    
    settings.username_emoji.split('|').forEach(pair => {
        let split = pair.split(",");
        emoji[split[0].toLowerCase()] = split[1];
    });
    
    $.each(emoji, function (key, value){
        api.decorateCooked($elem => $elem.find("a.mention:contains(" + key + ")").append("<img src='" + value + "'>").addClass("with-image"));
    });
    
</script>

Using a setting like this

20%20PM
Screen Shot 2018-07-26 at 11.06.20 PM.png1294×146 16.5 KB

「いいね！」 11
6

このコンセプトは本当に気に入りました！

現在可能かどうかはわかりませんが、思いつくことが2つあります。ぜひ実装してほしいです。

  1. グループメンションにこれを使用する機能ですか？管理者のグループで試してみましたが、うまくいかないようです。

  2. ユーザーが設定で独自のエモジを選択できるようにし、メンションされるたびにそれが表示されるようにする機能はどうでしょうか。さらに、エンゲージメントの高いユーザーに、より高い信頼レベルの特典として付与することもできるかもしれません。

編集：

グループメンションにこれを使用する機能ですか？管理者のグループで試してみましたが、うまくいかないようです。

これを実現する方法を見つけましたが、PRリクエストのやり方がわからないため、現時点ではコードを以下に投稿します。

common.scss は \u003cins\u003e.mention-group:after\u003c/ins\u003e と \u003cins\u003e.mention-group:before\u003c/ins\u003e を追加します

@if $show-after-mention == "true" {
  .mention:after,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
} @else {
  .mention:before,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
}

header.html は最後にこれを追加します。

$.each(emoji, function(key, value) {
  api.decorateCooked($elem =>
    $elem
      .find("a.mention-group:contains(" + key + ")")
      .attr("data-emoji", value)
      .addClass("with-emoji")
  );
});
「いいね！」 1
7

Mentionの横にカスタムSVGをアイコンとして使用したいと思っていました。これはGuildedでスタッフのMentionに実装されているのを見たことがあり、私も実装したかったのですが、できなかったことです。Discourseを気に入っているもう一つの理由は、開発者が追加してくれるのを待つのではなく、自分で機能させることができることです。

そこで、以下のソリューションを自分で作成しました。決して完璧ではありませんが、アップロードするSVGにはsvgで始まるSCSS変数が必要なようですが、今のところ私には十分機能しています。

もし誰かがこのコードを基にして、より洗練されたものに改良してくれるなら、感謝します！

改善の可能性

  1. すべてのSVGアイコン（Discourseのアイコンと、svgで始まらないアップロードされたアイコン）で動作するようにする。
  2. コードを整理する。
  3. スタイリングを改善する。CSSはとりあえず動作するようにハックしたもので、すべての状況で機能するとは限りません。

それでも、私がEmotional Self-Defenseのために用意したカスタムアイコンをスタッフMentionアイコンとして使用したMentionの例を以下に示します。

image

追加したコードは以下の通りです。

header.html

  // SVGアイコンをオプションとして追加する。アセットに含まれ、アップロードされている限り有効。
  // すべてのアセットのオブジェクトを作成し、どのリンクがデータ絵文字属性とアセット変数名が一致するかを検索して、そのURLを追加する。

  // オブジェクトをキーの配列に変換
  const keys = Object.keys(settings.theme_uploads);

  // すべてのキーを出力
  console.log(keys);

  // オブジェクトを反復処理
  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;
  }
}

これには以下の作業も必要です。

  1. /assetsフォルダを作成する
  2. /assetsフォルダにSVGファイルを配置する（例: /assets/esd-heart.svg）
  3. about.jsonファイルを更新して、以下のようなアセットをリンクする。
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
「いいね！」 1
8

絵文字が選択したユーザーにのみ表示されるようにする方法はありますか？ Taylor と TaylorLife という名前のユーザーがいる場合、絵文字は両方に表示されます。