Discourse 아이콘

:discourse2: 요약 Discourse Icon을 사용하면 게시물에서 SVG 아이콘 하위 집합의 아이콘을 사용할 수 있습니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 리포지토리 링크 https://github.com/discourse/discourse-icon
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

기능

사용법:

[wrap=icon id=square][/wrap]

예시:
이것은 아이콘이고 이것은 아이콘입니다.

이것은 [wrap=icon id=far-square][/wrap] 아이콘이고 이것은 [wrap=icon id=pencil][/wrap] 아이콘입니다.

참고: 아이콘이 표시되지 않는다면 하위 집합에 해당 아이콘이 없는 것입니다. 관리자라면 사이트 설정의 svg icon subset에서 추가할 수 있습니다.


:discourse2: 우리가 호스팅을 하고 계신가요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

31개의 좋아요

Awesome! This is iconic!

(meta has many many themes, but luckily thanks to @kris.kotlarek we have an add to all themes button… got to sort out progress there, cause it takes a while to do its magic)

13개의 좋아요

Yes didnt want to add to all for now, as I just finished coding it :grin: but will do now

Edit: oh already done

10개의 좋아요

Thanks, that’s super fun! :sunglasses:

I never got into BB script tags, nor have I hand-coded FontAwesome, so the practice of using an empty tag pair has always seemed strange to me. Is that by popular convention, or is there a webcraft reason for using tag pairs? Also, can they have stuff between them, does that affect the text?

3개의 좋아요

There are multiple causes here.

First when I wrote the wrap BBCode feature, @sam explicitly asked to me support 3 formats:

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap] 

This is done to be consistent with our existing BBCode usage in Discourse.

I could have a better syntax as: [icon=times] but then it would have to be a plugin and not a theme component.

As an experimentation, I think it’s fine as it is today, and if people were to use it a lot, we could think of having a plugin do this with a more concise syntax.

Another idea I have had is to add an API to add autocompletes symbol in the composer just like we have fore users/categories/emojis… But I’m afraid this would be a nightmare with multiple components choosing their own symbol…

5개의 좋아요

Oh! I need to add support for another bbcode and those) thought that I’d use this as a starting point, but you’re saying that the wrap stuff is handled in core, which explains why I can’t find how it’s handled by your theme component.

My current solution is to use the linked words component and an ugly regex, but I’m still struggling to add the necessary classes to the links.

3개의 좋아요

Yes read this topic to know more:

4개의 좋아요

Right I’ve looked at it a dozen times. And printed out the code for your component and stared at it for hours, trying to understand if the degree to which it’s javascript or ember that I don’t understand. I can’t add a [foo] tag without a plugin? Or can I some how replace wrap in your code with foo to cover my new bbcode?

1개의 좋아요

No you can’t. Because part of it is server side. If you want your own custom BBCode you will have to write a plugin and look at how wrap is implemented for example:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

5개의 좋아요

Thanks! It’s starting to make sense. I’ve not had this much trouble learning a new language since C++ and objective Pascal in 1990.

My current regex hack almost works. I’ll need to decide whether to go the plugin route or stick with my hack (and figure out how to add the classes).

At least now I understand why I can’t find that wrap in the theme component!

3개의 좋아요

I can think of a few possible syntax layouts to add to the wrap plugin for this:

[wrap=foo /]
[wrap/=foo]

(mimicing XML’s self-closing tags) but those are both fairly ugly :confused:

Anyone got amazing ideas for something that looks okay?

3개의 좋아요

yeh not a big fan of these :confused:

6개의 좋아요

I’ve found a big bug…

If you use an icon wrap and then highlight quote it the resulting image is wildly embiggened:

  • Use an icon wrap in a sentence in a post. eg This is an icon [wrap=icon id=far-check-square][/wrap]
  • Highlight the relevant text and ‘Quote’
  • Icon goes super big in quoted excerpt

This is what the syntax looks like when highlight quoted:

[quote="JammyDodger, post:1, topic:294, full:true"]
This is an icon ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

This is a reply where it gets massive

Though quoting it using the speech bubble in the format bar works fine.

4개의 좋아요

How are you able to highlight quote the icon? On my test site, the icon is skipped.

I am not sure? I just use the mouse.

What browser are you using?

Using the mouse, I tested with Chrome and Firefox, and I could not select the icon. :thinking:


EDIT:

If you wrap an icon unavailable in the current subset, it will create an SVG image instead.
Then, you can quote it.

2개의 좋아요

Can you provide an example? Your screenshot shows a ticked checkbox and I have no issue selecting it on my test instance (as well as other icons probably not used by Discourse like x-ray.

2개의 좋아요

I see the issue. The component searches by looking at whether there is a wrapper with d-wrap class; but there is no wrapper if the provided icon is not from the subset. It creates an image as SVG instead.

For example:

SVG, icon within the subset

Image as SVG, icon not within the subset

If you quote the images, the component does nothing, as there is no wrapper (and the image is converted to markdown resulting in an image without any class)

1개의 좋아요

Does this mean I need to have an svg_icons field in settings.yml available in my theme? Or could I use any svg_icons field available from any enabled theme-components too? And if that is the case would adding this field to this theme-component make sense?

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

Because in my experience, the SVG icons are transformed to <img /> tags, and they do not inherit the currentColor when the color scheme is changed:

Please compare the Example paragraph:

2개의 좋아요

Could the rendering in dark mode be enhanced?

Would love to have the same colors as in the interface:

3개의 좋아요