Discourse Bars 🍻 🍸 (사이드바 프레임워크)

[merefield (Robert)]

개요

컴포넌트^[1]를 상단 및 사이드바 위에 레이아웃할 수 있도록 하는 테마 컴포넌트입니다.

• Route(경로)와 Position(위치)별로 “위젯” 집합을 명확히 지정합니다.
• discovery^[2], topic(토픽), tag(태그)^[3], category(카테고리)^[3:1], categories(카테고리 목록)^[3:2] 또는 tags-intersection(태그 교차)^[4] 각각에 대한 설정을 지원합니다.
• "바(Bars)"는 top(상단), left(좌측), right(우측) 또는 대체 우측 위치 중 하나를 사용할 수 있습니다.
• 각 바는 접기(collapsed) 또는 닫기(dismissed)가 가능합니다 (닫은 상태를 초기화하려면 브라우저를 새로고침해야 합니다). 기본적으로 최소화(minimised) 상태로 설정할 수 있습니다.
• 공식 사이드바를 처리하지만, Bars의 좌측 사이드바를 사용할 계획이라면 공식 사이드바의 드롭다운(Dropdown) 모드를 사용하는 것이 권장됩니다.
• 일부 큰 글씨를 표시하는 기존 예시 설정이 포함되어 있으며, 이는 데모 목적이기도 하고 예시 설정을 확인할 수 있도록 하기 위함이기도 합니다. 이 설정들을 삭제하고 자신의 컴포넌트 이름으로 교체하세요.
• 하나의 컴포넌트, bars-custom-html(예시 설정 참고)이 기본 제공되지만, 기존 테마 컴포넌트 및 플러그인의 많은 컴포넌트와 호환됩니다.
• 모바일 지원은 아직 구현되지 않았습니다.

빠른 링크

코드 가져오기	https://github.com/merefield/discourse-tc-bars
코드 보기	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars · GitHub
설치 가이드	Installing a theme or theme component

이 테마 컴포넌트를 즐기고 계신가요? GitHub에서 해주세요!

예시:

최초 로드 시:

이 TC에 대해 알아둘 몇 가지 중요한 사항!

• 이 테마 컴포넌트는 테마 개발에 대한 기술적 이해가 있는 개발자 및 관리자를 위한 것입니다. Bars를 사용하여 사이드바를 구현하는 데 도움이 필요하고 기술적 역량이 충분하지 않다면, 저나 Marketplace 채널의 개발자를 고용할 수 있습니다.

• 이 테마 컴포넌트는 사이드바를 지원하는 프레임워크를 제공하는 것이 목적입니다. 최종적인 시각적 마무리(polish)는 추가 CSS를 사용하여 테마에서 직접 추가해야 하며, 이 컴포넌트는 이를 제공하지 않습니다. 그러나 많은 작업을 대신 처리하여 고려할 사항을 줄여주고, 이전에는 불가능했던 작업을 수행할 수 있는 능력을 부여할 수도 있습니다 …

컴포넌트 고려 사항

• 컴포넌트 이름을 지정해야 합니다. 컴포넌트 이름은 실제로 테마, tc 또는 플러그인의 component 디렉터리 내 파일명에서 접미사를 제외한 것과 동일합니다.

  • 컴포넌트 이름은 테마 컴포넌트의 이름(여러 개의 Ember Glimmer 컴포넌트를 포함할 수 있음)이 아니라, 실제 Ember 컴포넌트 파일의 이름입니다 . 예를 들어:
  

  따라서 layouts-tag-list

• 기존 테마 컴포넌트나 플러그인에서 가져올 수 있습니다. 기존 컴포넌트가 작동할 수 있습니다. 예시:

  • 🏷️ Bars Tag List Component
  • Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
  • Discourse AI Topic Summary 🤖 … 그리고 어쩌면:
  • 리더보드 위젯: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (시도해 보시면 아래에 알려주세요!)

• 컴포넌트를 구축하려면 상당한 전문 지식이 필요합니다.

  • 하지만 다른 테마 컴포넌트에서 자신의 컴포넌트를 구축해 보고, 두 컴포넌트가 동일한 테마에서 모두 활성화되어 있는지 확인해 보세요.

• 컴포넌트는 자체 데이터를 소싱해야 합니다 (이러한 방식으로 레이아웃을 구성하는 데 필요한 특정 플러그인 아웃렛 때문에 플러그인 아웃렛을 통한 모델 패스쓰루를 사용할 수 없습니다).

  • 기본적으로는 Discourse 코어 또는 기존 플러그인이 제공하는 기존 JSON API 데이터만 사용할 수 있습니다. 현재 API에서 소싱할 수 없는 맞춤 데이터가 필요하면 저나 #marketplace의 누군가를 고용하여 도움을 받을 수 있습니다.

• 사이드바 및 컴포넌트 경계를 취향에 맞게 스타일링해야 할 수 있습니다. (다시 한번 말하지만, 도움이 필요하면 개발자 고용을 고려해 보세요).

  • 박스 섀도우와 테두리의 전략적인 사용은 디자인을 훨씬 멋지게 만들 수 있습니다 - 예술적으로 접근하세요!

왜 만들었는가

• Discourse 코어가 Ember 5로 업데이트되면서, Pavilion의 플러그인 Layouts가 Discourse 레이아웃을 조작하는 데 사용하던 트릭이 더 이상 작동하지 않게 되었습니다. 이제 비교적 쉬운 사용자 인터페이스를 통해 토픽 경로에서 사이드바를 표시하는 쉬운 방법이 없었습니다.

• 또한, Ember는 작업하기 훨씬 나은 Glimmer 컴포넌트를 도입했습니다. (Layouts는 Glimmer 컴포넌트를 대체하기 위해 비추천(deprecated)된 Widgets API를 사용했습니다).

• 마지막으로, Discourse 코어 팀이 테마 컴포넌트 설정을 위한 새로운 JSON 편집기를 제공하여 더 복잡한 설정 배포가 가능해졌습니다

• Layouts 플러그인을 수정하는 것(Layouts 시대에는 TC가 존재하지 않았습니다)보다는, 대부분의 필요한 작업을 프론트엔드에서만 달성할 수 있으므로 테마 컴포넌트로 재구축하는 것이 합리적였습니다.

• “Bars” 등장 Cheers!!

알려진 문제

• 상단 바가 고정되지 않습니다 (해결할 수 없으면 해당 설정을 제거할 수 있습니다).

크레딧

• 수년간 유용하게 사용되었으나 현재는 깨진 Layouts 플러그인의 정신적 후속작입니다. @angus가 제작했습니다 (Cheers!).
• Right Side Blocks의 params 시스템을 사용합니다 (감사합니다 @pmusaraj!).

---

1. ‘discovery’(경로)라는 용어는 특정 토픽에 진입하기 전에 이용 가능한 토픽을 탐색할 수 있는 주요 토픽 목록 페이지(예: “최신”, “새로움”)를 가리킵니다. ↩︎

2. 기술적으로는 “discovery” 경로이지만, 선택적으로 다르게 취급할 수 있도록 구분된 이름으로 분리했습니다. ↩︎

3. 여기에서 더 자세한 내용을 볼 수 있습니다. 모든 Bars 설치자가 사용자 정의 홈 페이지를 원하지는 않으므로(선택 사항으로 유지하기 위해), Bars는 about.json에 필요한 수정자를 추가하지 않습니다. 따라서 활성화하려면 상위 테마 또는 다른 TC에서 이 수정자를 직접 추가해야 합니다. ↩︎ ↩︎ ↩︎

4. Tags Intersection 플러그인을 참조하세요. ↩︎

[Lilly (Lillian)]

woah, this is cool! Nice work Robert. Thanks for doing this and making it available!

forked!

[thoka (Thomas Kalka)]

I’m quite at the beginning of learning how to add custom widgets, but: I would love an option to add widgets in a non-scrolling footer in the mobile view.
Would this be possible with a future version of this component?

[merefield (Robert)]

No plans to add additional “bars” at this stage but maybe once things settle down and the TC is clearly stable …

… PR or sponsorship always welcome too

[denvergeeks]

This looks awesome - Thank You! Could you please provide an example for what the settings look like for including the Tag List Widget in one of the sidebars?

For example, from the instructions it seems this should work…

But the left sidebar still only shows the big-a…

[merefield (Robert)]

Two things:

First, here are similar settings from StarZen:

The component name is in fact the same as the file name in the Component (i’ll add that to the OP)

https://starzen.space

Secondly, it’s really silly, but you have to press Save and hit the tick after hitting Save.

It’s a double Save!

That’s the nature of cores current theme setting, not bars. I might add a note about that in the OP.

[denvergeeks]

@merefield

Secondly, it’s really silly, but you have to press Save and hit the tick after hitting Save.

It’s a double Save!

Yes, I did the double Save

Still, I must be missing something because the result is the same. Is there something else I can provide to help?

[merefield (Robert)]

Share your settings json (button at bottom of TC).

[denvergeeks]

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Your component_name is still wrong, see my example and you might want to delete the rest.

[denvergeeks]

Hmm… OK I deleted all but the first one, and changed the name to match yours (even though the component name is coming from the TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. · GitHub - where would I find that the correct component name is layouts-tag-list?)

However, changing the component name in the modal doesn’t seem to change it in the settings json, or remove the rest of the items, even after double save…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Like I explained above (and have now elaborated in the OP), the component name is not the name of the Theme Component (which could hold many Ember Glimmer Components), it’s the name of the actual Ember Component:

so layouts-tag-list

This is a useful misunderstanding, I’ll clarify further in the OP, using this example.

Not sure why your setting is being sticky

Try deleting the Theme Component and re-adding and going through the same process.

Or just refresh your browser?

[ckshen]

Thanks for the work @merefield !

Functionally how does Discourse Bars differ from Right Sidebar Blocks with custom html, besides the fact that the location doesn’t have to be only on the right ?

Right Sidebar Blocks

Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-right-sidebar-blocks New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …

[merefield (Robert)]

Bars is the spiritual successor of Pavilions Layouts which came before RSB.

But compared to RSB, mutli-route and multi-position support mainly (Bar’s target is to reproduce the usefulness and flexibility of Layouts), the critical addition being Topic route support. Plus I don’t presently support params … I’ve yet to hit a use case. I also don’t bundle any components aside from the demo big letters - this is deliberate and this is meant to be more of an Admin/Developers framework (much like Layouts was).

The roadmap might be more ambitious too - if I get funding I may add the mobile functionality that Layouts had - anyone is free to contact me to sponsor that work.

[denvergeeks]

OK I deleted and re-installed both the bars TC and the layouts-tag-list TC (I tried removing and re-adding them both individually and together) but the results are all the same. And I did refresh every time as I had before as well. I also cleared my browser cache.

[merefield (Robert)]

I cannot reproduce your issue of stuck settings. I just added and removed a left sidebar.

I’d be interested in other reports of the same.

[denvergeeks]

Thanks for your time spent trying – I’ll try it on some of my other Discourse instances later today and report in again.

[denvergeeks]

I have also now also removed all plugins, and rebuilt (and have no other TCs or themes installed), and it is a fresh install from last night.

In case it’s helpful, I did discover that, with the same settings as above, while the left sidebar is not appearing anywhere else, it is showing on the /latest route (albeit only the title “Tags”, without showing any tags.)

---

---

---

---

And here is the settings json…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

You are going to have to debug that for yourself - check your console, theme CSS etc.

Works for me:

Can’t recall if Layouts Tag List requires Tag Groups … might do!

[denvergeeks]

@merefield

Can’t recall if Layouts Tag List requires Tag Groups …

Yes enabling Tag Groups in the settings (and then creating some Tag Groups) did make the tags appear.

However, setting the route for the component item to discovery still only shows the left bar on /latest, /new and /top lists.

Could you be so kind as to point me toward a list of all available “routes” that can be used here?

Thank you again!