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

Installing 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
41%20AM690×107 15.3 KB

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

That’s all it does!

30개의 좋아요
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.

2개의 좋아요
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
20%20PM1294×146 16.5 KB

11개의 좋아요
6

정말 이 개념이 마음에 듭니다!

두 가지가 떠오르는데, 현재 가능한지 확실하지 않지만 있으면 좋겠습니다:

  1. 그룹 멘션에도 사용할 수 있는 기능? 관리자 그룹에서 시도해 봤는데 작동하지 않는 것 같습니다.

  2. 사용자가 설정에서 원하는 이모지를 직접 선택할 수 있도록 해서, 멘션될 때마다 해당 이모지가 표시되게 하는 기능. 아마 신뢰도가 높은 더 적극적인 사용자에게 제공할 수 있는 혜택으로 만들 수도 있을 것 같습니다.

수정:

  1. 그룹 멘션에도 사용할 수 있는 기능? 관리자 그룹에서 시도해 봤는데 작동하지 않는 것 같습니다.

방법을 알아냈지만 PR 요청을 하는 법을 모르기 때문에, 당분간 아래에 코드를 올립니다:

common.scss 에 .mention-group:after와 .mention-group:before를 추가합니다.

@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

멘션 옆 아이콘으로 사용자 정의 SVG도 사용할 수 있는 기능을 원했습니다. 길디드(Guilded)에서 스태프에게 적용되는 것을 본 적이 있는데, 제가 원했지만 아직 사용할 수 없었던 기능이었죠. 디스코urses를 좋아하게 된 또 다른 이유는, 개발자가 추가하기를 바라면서 기다리는 대신, 실제로 작동할 수 있는 것을 직접 조립해 볼 수 있다는 점입니다.

그래서 다음과 같은 해결책을 직접 만들어 보았습니다. 이 방식은 완벽하지 않으며, 업로드하는 SVG에 svg로 시작하는 SCSS 변수가 필요할 가능성이 높지만, 지금은 저에게 충분히 잘 작동하는 것 같습니다 :slight_smile:

누군가 이 코드를 가져가서 더 발전시키거나, 더 화려하게 개선한다면 감사하겠습니다!

개선할 수 있는 부분

  1. 모든 SVG 아이콘에서 작동하도록 만들기: 즉, svg로 시작하지 않는 디스코urses의 모든 아이콘과 업로드된 아이콘 모두에서 작동하도록 하는 것.
  2. 코드 정리.
  3. 스타일링 개선: CSS를 작동하도록 직접 조립한 것이므로 모든 상황에서 작동하지 않을 수 있습니다.

어쨌든, 감정적 자기방어(Emotional Self-Defense)를 위한 사용자 정의 아이콘을 스태프 멘션 아이콘으로 사용한 멘션의 예시는 다음과 같습니다:

image

제가 추가한 코드는 다음과 같습니다:

header.html

  // SVG 아이콘을 옵션으로 추가 (assets에 포함되어 있고 업로드된 경우에만)
  // 모든 assets의 객체를 생성하고, data-emoji 속성이 asset 변수 이름과 일치하는 링크를 찾아 해당 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 파일을 업데이트하여 해당 asset에 연결 (예시):
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1개의 좋아요
8

이모지가 선택된 사용자에게만 표시되도록 하는 방법이 있을까요? 사용자가 Taylor와 TaylorLife로 각각 존재하는 경우, 이모지가 두 사람 모두에게 표시됩니다.

9

이것은 공식 테마 컴포넌트인 것 같습니다 :tada:

Github 링크는 Discourse 저장소로 리디렉션되며, all-the-themes 저장소의 official.txt 파일에 목록에 포함되어 있습니다. OP(원문)의 링크를 업데이트할 수 있을까요? 그렇게 하면 해당 저장소의 update_from_meta 스크립트가 이 컴포넌트를 공식 컴포넌트라고 인식할 수 있고, third-party 파일에 추가하려는 시도를 하지 않을 것입니다. 이 컴포넌트는 이전 업데이트에서 실수로 추가된 후 12월에 third-party.txt에서 제거되었습니다. 저장소 URL을 변경하면 이러한 문제가 다시 발생하는 것을 방지할 수 있을 것입니다.

추가로, official 태그와 공식 컴포넌트의 일반적인 요소를 갖춘 첫 번째 게시물이 있으면 좋겠습니다.

1개의 좋아요