Discourse Category Headers theme component

Hi, sorry, I’m a total newbie with zero coding skills :frowning:
Do you have the installation instructions for this component?
Normally there’s an “install this theme component” button, but I can’t find it… I’ve already installed many component on my site…

The image displays a blue button with the text "Install this theme component." (Captioned by AI)

Appreciate massively your time & input!

Hi @Angela_MRS,

If you follow the picture below, you can install it this way without selecting the install button.

This is if you are an administrator or owner of the forum.

1 Like

Thank you very much @Aaron_Walsh :heart_eyes:

@Angela_MRS There is also a link to the guide on how to install it.

2 Likes

Minor request, can you make the ‘Read more’ link color the same as the rest of the text?

My links are set to medium dark blue, and a lot of my banners are dark colors so the link is basically invisible.

The rest of the text seems to auto select white or black based on the background color. Can you do that for the link too?

Hi David,

You could create a custom Theme component and using inspect element in your browser(desktop) identify the element and use CSS to override the color.

1 Like

This TC is getting a couple of deprecation in the console. I suspect that the code really needs a refresh:

I think that it is a brilliant TC, and fills a gap that the official TCs are missing. It would be great to see it get some more love, but I know (or at least suspect) that @Rhidian has moved on somewhat.

5 Likes

Just updated my site and came here to say the same thing.
PLEASE PLEASE PLEASE…
Update this awesome component. I just built a new site that uses it to great effect and I would hate to have to figure out an alternative. This component does EXACTLY what I need.

1 Like

And now it bites a little deeper after a recent update:

image

3 Likes

Hope for an update.

1 Like

@nathank @tknospdr @CAX.DO I have opened a PR to fix the compatibility issues, using a gjs file now instead of the deprecated script tags.

I hope this gets approved :crossed_fingers:.

10 Likes

I’ve pinged @Rhidian via another method - hopefully he can take a look soon.

@NateDhaliwal - just out of interest, would you be open to taking over the repository and meta topic for this TC going forwards?

3 Likes

Hi Nathan, I’m looking to see if I can use RenderGlimmer in the code in a bid to modernize it even more, but since I may not be very successful with that, I’m doing that in a separate branch.

The PR is open for the modernization of removing the script tags; that one can be reviewed.

Sorry, I don’t think I feel confident enough to do that :sweat_smile:.

3 Likes

I have converted the widget system to a Glimmer component, and added the following feature:

in the setting show_parent_category_background_image.

The new PR is:

Personally, I have no idea how I added 3000 lines of code.

5 Likes

Thanks Nate. That’s fantastic work. I’ve merged your pull request. Great to see this component having a significant update to give compatibility with the new discourse features. :beating_heart:

1 Like

PS - I’d be grateful for any help with updating compatibility issues with this component as well, which some find useful. It should be a smaller job!

1 Like

No problem, I’m happy to give back!

1 Like

Hi there! I had a notification on my site to update this theme component, and when I did the whole site crashed and my main page disappeared. I was able to remove it from the site, but is that related to these updates?

Almost certainly! Glad that you could remove it.
Would you mind reinstalling it (perhaps in a separate dev Theme) and try and capture the console errors? Also, it would be helpful to know how you config’d it.

Bug with HTML tags

I’ve seen a wee bug too - HTML tags aren’t rendering nicely in the category headers:

Without the TC

With the TC

Also, the ‘normal’ Description text size doesn’t seem to match vanilla (in my example above the TC is set to larger)

1 Like

Hi @nathank thanks for your quick reply! I’ve tried creating a test theme and applied this theme component to it. I think this is the right error:

Message (4397 copies reported)

[db6814] ActionController::RoutingError (No route matches [GET] "/admin/customize/user_fields.json")
config/initializers/100-quiet_logger.rb:20:in `call'
config/initializers/100-silence_logger.rb:29:in `call'
lib/middleware/enforce_hostname.rb:24:in `call'
lib/middleware/processing_request.rb:12:in `call'
lib/middleware/request_tracker.rb:385:in `call'


Backtrace

actionpack (7.2.2.1) lib/action_dispatch/middleware/debug_exceptions.rb:35:in `call'
actionpack (7.2.2.1) lib/action_dispatch/middleware/show_exceptions.rb:32:in `call'
logster (2.20.0) lib/logster/middleware/reporter.rb:40:in `call'
railties (7.2.2.1) lib/rails/rack/logger.rb:41:in `call_app'
railties (7.2.2.1) lib/rails/rack/logger.rb:29:in `call'
config/initializers/100-quiet_logger.rb:20:in `call'
config/initializers/100-silence_logger.rb:29:in `call'
actionpack (7.2.2.1) lib/action_dispatch/middleware/request_id.rb:33:in `call'
lib/middleware/enforce_hostname.rb:24:in `call'
plugins/z-communiteq-features/plugin.rb:142:in `call'
rack (2.2.10) lib/rack/method_override.rb:24:in `call'
rack (2.2.10) lib/rack/sendfile.rb:110:in `call'
rack-mini-profiler (3.3.1) lib/mini_profiler.rb:191:in `call'
lib/middleware/processing_request.rb:12:in `call'
message_bus (4.3.8) lib/message_bus/rack/middleware.rb:60:in `call'
lib/middleware/request_tracker.rb:385:in `call'
actionpack (7.2.2.1) lib/action_dispatch/middleware/remote_ip.rb:96:in `call'
rails_multisite (6.1.0) lib/rails_multisite/middleware.rb:26:in `call'
plugins/z-communiteq-features/plugin.rb:168:in `call'
railties (7.2.2.1) lib/rails/engine.rb:535:in `call'
railties (7.2.2.1) lib/rails/railtie.rb:226:in `public_send'
railties (7.2.2.1) lib/rails/railtie.rb:226:in `method_missing'
rack (2.2.10) lib/rack/urlmap.rb:74:in `block in call'
rack (2.2.10) lib/rack/urlmap.rb:58:in `each'
rack (2.2.10) lib/rack/urlmap.rb:58:in `call'
unicorn (6.1.0) lib/unicorn/http_server.rb:634:in `process_client'
unicorn (6.1.0) lib/unicorn/http_server.rb:739:in `worker_loop'
unicorn (6.1.0) lib/unicorn/http_server.rb:547:in `spawn_missing_workers'
unicorn (6.1.0) lib/unicorn/http_server.rb:143:in `start'
unicorn (6.1.0) bin/unicorn:128:in `<top (required)>'
vendor/bundle/ruby/3.3.0/bin/unicorn:25:in `load'
vendor/bundle/ruby/3.3.0/bin/unicorn:25:in `<main>'

Env

HTTP HOSTS: community.eaie.org

There is definitely an issue between this component and another one that I use: GitHub - discourse/discourse-minimal-category-boxes because when I remove that one, then the home page displays. If I don’t remove that, I just get a blank page.

Normal view:

View with Minimal category boxes removed:

View with Minimal category boxes there:

But, I don’t think that’s the whole story, because even with the minimal category boxes removed, when I click through to a category it doesn’t work, I just see a blank page:

These are the settings I used in the theme component:

[
	{
		"setting": "show_category_name",
		"value": true
	},
	{
		"setting": "show_category_description",
		"value": true
	},
	{
		"setting": "description_text_size",
		"value": "larger"
	},
	{
		"setting": "text_align",
		"value": "left"
	},
	{
		"setting": "show_subcategory_header",
		"value": true
	},
	{
		"setting": "show_parent_category_name",
		"value": false
	},
	{
		"setting": "show_lock_icon",
		"value": true
	},
	{
		"setting": "category_lock_icon",
		"value": ""
	},
	{
		"setting": "show_category_logo",
		"value": true
	},
	{
		"setting": "show_parent_category_logo",
		"value": false
	},
	{
		"setting": "show_site_logo",
		"value": false
	},
	{
		"setting": "position_logo",
		"value": "left"
	},
	{
		"setting": "size_logo",
		"value": "standard"
	},
	{
		"setting": "header_style",
		"value": "banner"
	},
	{
		"setting": "header_background_image",
		"value": "cover"
	},
	{
		"setting": "show_parent_category_background_image",
		"value": false
	},
	{
		"setting": "show_mobile",
		"value": false
	},
	{
		"setting": "force_mobile_alignment",
		"value": false
	},
	{
		"setting": "hide_if_no_category_description",
		"value": true
	},
	{
		"setting": "hide_category_exceptions",
		"value": ""
	},
	{
		"setting": "show_read_more_link",
		"value": false
	},
	{
		"setting": "read_more_link_text",
		"value": ""
	}
]

Sorry if this was too much info! I wasn’t sure what’s relevant here. Thank you! We love this theme component, so I hope we can figure it out.

1 Like