Right Sidebar Blocks

Discourse · June 25, 2022, 2:55am


	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
top-contributors
recent-replies
category-topics
custom-html
subcategory-list
upcoming-events-list*
minimal-gamification-leaderboard**

The user directory must be enabled for the Top Contributors list to be populated. If your list is blank, search enable user directory in your admin settings to make sure it’s enabled.

* Only available when used with the Calendar plugin.
** Only available when used with the Gamification plugin.

You can also use other Ember components as blocks, you just need to use the correct name. For example, core includes a signup-cta Ember component, and you can use it in the sidebar as is. Note that you can’t use components that expect a set of parameters, but you can build your own Ember component in a separate theme and reference it just by its name in the sidebar’s blocks setting.

You can control some features for the provided blocks via parameters.

name	description	default	value	available for
count	limits number of results	varies	number	all except custom-html
excerptLimit	limits length of each reply excerpt	150	number	recent-replies
id	category id		category id	category-topics
content	contents to display		html	custom-html
scopeToCategory	only shows in category or subcategory X		category id	popular-tags
excludedTags	list of excluded tags		tagnames	popular-tags
displayInSpecificCategories	list of categories to show the widget	all	comma-separated numbers	popular-tags
id	leaderboard id		number	minimal-gamification-leaderboard

Settings

Name	Description
blocks
show in routes	Advanced users only: limit sidebar to the selected routes. Examples: discovery.latest, discovery.unread, discovery.new, discovery.top, tag.show, “c/category-slug” (for categories), “tag/sample-tag” (for tags). When empty, the sidebar is shown on all list routes.

blocks: choose the blocks to display and adjust their ordering

show_in_routes: decide on which topic list routes to display the sidebar. By default, it will show it on all discovery routes except for /categories.

Translation	Default
top_contributors.heading	Top contributors
top_contributors.view_all	View all
popular_tags.heading	Popular tags
popular_tags.view_all	View all
recent_replies.heading	Recent replies
subcategory_list.heading	Subcategories
top_topics.heading	Top topics
category_list.heading	Categories

Screenshots

Note that the component comes with only very basic styling, the assumption is that admins using the component will add their own styling in their own theme.

Interactions

When used in conjunction with the Discourse Calendar plugin, you can add a sidebar block for your upcoming events. The block name is upcoming-events-list, and the params follow this syntax (for example, MMMM D, YYYY).

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-08-13T15:53:13Z

Check document
Perform check on document:

Alaa · July 17, 2022, 1:29am

What should I add in the “name” parameter if I use custom-html?

nathank · July 18, 2022, 5:30pm

Great to see this as an official Theme Component! It certainly opens up a new world of customisations.

I’ve got 2 questions:

In the sidebar, I want to display the /latest topic list similar to the way that category-topics displays them. Is this possible? recent-replies almost gets there (especially if the excerpt is hidden), but I really want to include topics without replies.
Is it possible to only display the sideblocks in certain categories? What I mean is that the only route displayed is the Category Topic List, and only for the categories I specify.

pmusaraj · July 19, 2022, 2:54pm

Apologies, the documentation for this is lacking (I will update it now). The name of the param for custom-html is content.

We don’t have anything ready-made for the full /latest list, but you build your own and add it to the configuration using its name. Should be very similar to the category/tag lists, just without a filter.

Currently, no, you can’t show it on specific categories only. You can however use discovery.category in the show in routes setting, that will only show the sidebar on category routes (but on all of them, not a subset).

Alaa · July 20, 2022, 6:12am

Thank you, is it possible to include the sidebar in each topic as well?

albert_vu · July 22, 2022, 9:03am

Just noted a limitation of the component, especially when it comes the category-topics & subcategory-list blocks, and that is adding multiple blocks of either of these types with different id always resulted in them surfacing topics/subcategories of the uppermost block in the launch editor (I assume).

One bug I’m having right now is after playing around with the subcategory-list block for around 10-12 times, it stop showing altogether on our staging site (see video below).

pmusaraj · July 25, 2022, 2:09pm

The subcategory-list block does not take a parameter at all. When used, it will show the subcategories of the current category based on which current category you have navigated to… so it doesn’t make sense to use that block more than once.

That is also why the subcategory-list isn’t showing in your video. If you’re on a non-category route, that block does not show.

For category-topics, in your video I see the same ID used twice: 7. I did a local test and with different IDs I get different topics displayed (i.e. I can’t reproduce the reported bug).

Helga_Razinkova · July 26, 2022, 9:10am

Hi, a huge thank you for this awesome plugin!

I’ve got a question about the subcategory-list sidebar: is there an option to display it only for a particular category?

Our developers have had a look, and it seems there is no parameter id support for subcategory-list, is this something you could add, please?

Helga_Razinkova · July 26, 2022, 9:55am

And regarding the top-contributors block: is there a way to fetch the results for a period of a week?

pmusaraj · July 26, 2022, 2:28pm

Currently, no, this option does not exist. It makes sense to add it, although, I would imagine that it should support multiple IDs so you can show the block for a list of categories (A, B and C, for example). I am happy to review PRs on the repo, if your developers think they can add this, that would be great. (Otherwise, I can add it to a list of nice-to-haves in the theme component.)

Do you mean a) to fetch the results and cache them for a week or b) to fetch the top contributors for the last week on every load? The latter should be easy to add, caching is a little trickier.

miss · July 27, 2022, 3:31am

@pmusaraj can you add

padding: 3px 4px 3px 4px

for the popular-tags ?

Thanks.

Helga_Razinkova · July 27, 2022, 6:22am

Hi @pmusaraj, thanks a lot for your reply!

Our developer has shared the PRs here, please have a look: Implement the `displayInCategories` parameter which allows to specify a list of categories where the `subcategories-list` block is displayed by d521bb85 · Pull Request #10 · discourse/discourse-right-sidebar-blocks · GitHub

The second variant would be perfect! We need to display the list of top contributors for the last week indeed. Thank you so much!

pmusaraj · July 27, 2022, 5:32pm

The component intentionally has very little styling so that consumers can add their own styles in their own themes/theme components.

Thanks, that PR is great and it’s now merged!

I will also shortly work on adding configurability to the top contributors block (or if someone else is faster, happy to review a PR).

nathank · July 28, 2022, 4:18am

I’m not sure where to find the code for that - would you mind directing me? I’d like to look at modifying the category-topics so that having no ID gives you all categories (and thus effectively the /latest list)

It would be great to have that in all the blocks!

Helga_Razinkova · July 28, 2022, 6:35am

@pmusaraj Awesome! Thank you so much for your help, looking forward to using the top contributors block

Kuro22 · August 14, 2022, 5:29am

Hi! I’m not sure if this component is causing errors. But once disabled, there are no more errors seen. Could someone take a look at this to help me figure out the issue? Would appreciate it a lot.

With it enabled, visiting a certain topic on desktop, clicking the site logo in the top bar in the attempt to return to the homepage would bring me to a never-disappearing loading screen and throw errors in the browser console (as below). No related error logs seen in the mysite/logs path.

d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'findFiltered')
    at new CategoryTopics (d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98:18)
    at h.createComponent (base-component-manager.js:37:1)
    at h.createComponent (ember-component-manager.js:54:1)
    at C.create (manager.js:558:1)
    at Object.evaluate (runtime.js:3301:1)
    at Object.evaluate (runtime.js:1312:1)
    at Dt.evaluateSyscall (runtime.js:5232:1)
    at Dt.evaluateInner (runtime.js:5188:1)
    at Dt.evaluateOuter (runtime.js:5180:1)
    at Wt.next (runtime.js:6191:1)
    at Wt._execute (runtime.js:6175:1)
    at Wt.execute (runtime.js:6166:1)
    at qt.handleException (runtime.js:5369:1)
    at Kt.handleException (runtime.js:5605:1)
    at Lt.throw (runtime.js:5302:1)
    at Be.evaluate (runtime.js:2580:1)
    at Lt._execute (runtime.js:5285:1)
    at Lt.execute (runtime.js:5266:1)
    at Ht.rerender (runtime.js:5634:1)
    at Er.render (index.js:7578:1)
    at index.js:7896:1
    at It (runtime.js:5074:1)
    at Rr._renderRoots (index.js:7876:1)
    at Rr._renderRootsTransaction (index.js:7928:1)
    at Rr._revalidate (index.js:7970:1)
    at invoke (backburner.js:351:1)
    at p.flush (backburner.js:241:1)
    at h.flush (backburner.js:447:1)
    at q._end (backburner.js:999:1)
    at _boundAutorunEnd (backburner.js:648:1)
CategoryTopics @ d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98
createComponent @ base-component-manager.js:37
createComponent @ ember-component-manager.js:54
create @ manager.js:558
（匿名） @ runtime.js:3301
evaluate @ runtime.js:1312
evaluateSyscall @ runtime.js:5232
evaluateInner @ runtime.js:5188
evaluateOuter @ runtime.js:5180
next @ runtime.js:6191
_execute @ runtime.js:6175
execute @ runtime.js:6166
handleException @ runtime.js:5369
handleException @ runtime.js:5605
throw @ runtime.js:5302
evaluate @ runtime.js:2580
_execute @ runtime.js:5285
execute @ runtime.js:5266
rerender @ runtime.js:5634
render @ index.js:7578
（匿名） @ index.js:7896
It @ runtime.js:5074
_renderRoots @ index.js:7876
_renderRootsTransaction @ index.js:7928
_revalidate @ index.js:7970
invoke @ backburner.js:351
flush @ backburner.js:241
flush @ backburner.js:447
_end @ backburner.js:999
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_ensureInstance @ backburner.js:1206
scheduleOnce @ backburner.js:845
k @ index.js:522
queueRerender @ mount-widget.js:124
scheduleRerender @ widget.js:319
rerenderResult @ widget.js:365
F @ hooks.js:207
（匿名） @ hooks.js:247
dispatch @ jquery.js:5430
_.handle @ jquery.js:5234
frame:251 You dismissed the flag, but third party cookies are disabled on your browser so the flag will come back the next time you visit the page.

I see info about this component in the js file mentioned in the first line of the error log above.

// line 96-103 of d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe
      const filter = "c/" + categoryId;
      this.category = _category.default.findById(categoryId);
      this.store.findFiltered("topicList", {
        filter
      }).then(result => {
        const results = result.topic_list.topics;
        results.forEach(topic => {
          topic.url = "".concat((0, _getUrl.default)("/t/")).concat(topic.slug, "/").concat(topic.id);

pmusaraj · August 15, 2022, 6:23pm

Ah, yes, sorry about that. It should be fixed now, you just need to pull the latest update of the theme component.

Kuro22 · August 16, 2022, 5:49am

Thanks! Works great now.

Helga_Razinkova · August 22, 2022, 6:55am

Hi @pmusaraj, sorry if I’m coming over as pushy - just wanted to know if there’s any ETA regarding this implementation.

It would be an awesome addition

Thank you so much!

carson · October 19, 2022, 4:09pm

Thank you for this awesome component!

I noticed that my entire header and footer disappears globally when I have this enabled (everything in my header.html and footer.html). Was this intentional? But to work around this I have to use the PluginAPI to manually add a header/footer.

Topic		Replies	Views
Discourse Bars :beers: :cocktail: (a sidebar framework) Theme component	52	3119	October 8, 2024
Header Submenus Theme component official , header-submenus	84	35897	October 22, 2024
Discourse Tab Bar for Mobile Theme component	68	20545	October 23, 2024
Custom sidebar sections being tested on meta Announcements sidebar	152	10307	October 21, 2023
Discourse Central Theme — Meta Pre-Release Out Now! Theme feedback , experimental	131	14985	November 3, 2024

Right Sidebar Blocks

Features

Settings

Screenshots

Interactions

Related Topics