Discourse Bars 🍻 🍸 (a sidebar framework)

:eyeglasses: Overview

A Theme Component that allows you to lay out Components (“widgets*”) on top and side bars

  • Specify a set of “widgets” distinctly for Route and Position.
  • Supports setups for each of: discovery[1], topic, tag[2], category[2:1], categories[2:2] or the new custom homepage![3]
  • “Bars” can be either: top, left, right OR alternative right location.
  • Each bar can be collapsed or dismissed (refresh browser to reset dismiss).
  • Handles the Official Sidebar, but if you intend you use a Bars Left Sidebar, the Dropdown mode of the official Sidebar is recommended (change setting navigation menu to “Dropdown”)
  • It comes with existing example settings that show some big letters, partly as a demo and partly so you can see example settings. Delete these and replace with your own Component names.
  • Ships with one Component: bars-custom-html (see pre-filled example settings) - but components from many existing Theme Components & Plugins are compatible.
  • Mobile support is not yet implemented.

:link: Quick Links

Enjoying this Theme Component? Please :star: it on GitHub ! :pray:

Gratuitous example:

Upon first load:

:warning: Some important things to note about this TC!

  • This Theme Component is mainly intended for developers and administrators that have some technical understanding of Theme development. If you are not sufficiently technical and need help with implementing sidebars using Bars, you can hire me or a developer in marketplace

  • This Theme Component is intended to provide a framework for supporting sidebars. It does not and is not intended to provide final visual polish which you will need to add in your Theme with additional CSS. However, it does a lot of work for you and gives you less things to think about and maybe even give you the ability to do things you didn’t have the ability to do before … :sweat_smile:

  • Consider this a little experimental at this stage! Be prepared for potential volatility in function and styling selectors

Component considerations

Why

  • With the update of Discourse core to Ember 5, the trick Pavilion’s plugin Layouts used to provide an excellent way to manipulate the Discourse layout ceased to work. There was now no easy way to show a sidebar on a Topic route via a relatively easy end-user interface.

  • In addition, Ember introduced Glimmer Components that were much nicer to work with. (Layouts used the Widgets API which is deprecated in favour of Glimmer Components).

  • Finally Discourse core team provided a new JSON editor for Theme Component settings which made deploying a more complex setting possible :+1: :rocket:

  • Rather than fix the Layouts plugin (TC’s didn’t exist back in Layouts day), it made sense to rebuild as a Theme Component, because we can achieve most things we need just in the front end.

  • Enter “Bars” :beers: :cocktail: Cheers!!

Known Issues

  • Top bar doesn’t stick (I may remove the corresponding setting if I can’t resolve).

Credits


  1. the term ‘discovery’ (route) refers to the main Topic List pages (e.g. “Latest”, “New”) that allow you to browse available Topics before clicking and diving into a specific one. ↩︎

  2. technically also a “discovery” route but we’re breaking these out to distinct names so you can treat them differently if you so choose. ↩︎ ↩︎ ↩︎

  3. currently not yet available on stable, only tests-passed. See here for more details. So that this remains optional (not all installers of Bars will want a custom homepage) Bars does not add the required modifier in about.json so you must add this in the parent Theme or another TC to activate it. ↩︎

46 Likes

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

forked!

11 Likes

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?

4 Likes

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 :+1:

5 Likes

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…

3 Likes

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)

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

It’s a double Save! :man_facepalming:

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

5 Likes

Yes, I did the double Save :slight_smile:

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

1 Like

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

3 Likes
[
	{
		"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
	}
]

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

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 - paviliondev/layouts-tag-list-widget: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - 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
	}
]

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:

image

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 :man_shrugging:

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

Or just refresh your browser?

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 ?

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.

2 Likes

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. :face_with_monocle:

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.

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

1 Like

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
	}
]

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!

4 Likes

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!

2 Likes