Discourse Category Headers theme component

Theme component
126

@NateDhaliwal ok, thank you for looking into it! Quite bummed because we really loved this TC but if it’s not possible to fix and have it on our site, I’ll just leave it off for now and look into other ways to make the category headers look nice.

128

@jackierenee I have taken the liberty to step in and have a look at your site.
It seems you had only removed the theme component from the parent theme, updated it and added it back.

The problem is that Discourse does not recover when a theme component is updated beyond compatibility and after that a pin is added.

The correct way to recover from such a situation is:

  • go to the theme component
  • scroll all the way down
  • copy the settings from “settings editor”
  • store them in a text editor
  • completely remove ( :wastebasket: delete) the theme component
  • add it back from the Github repository
  • copy the settings from the text editor and paste them in “Settings editor”
  • make corrections if you have to (sometimes settings are added in the new version so you have to remove them again, the editor will tell you what to do when you try to save them)
  • add the theme component to the parent theme.

I have done this on your site and the banners are now showing again.

For theme component authors: it helps a lot if you utilize the version field in about.json so it is actually visible to the administrator on what version a theme component is. Unfortunately Discourse does not show commit versions for theme components as it does with plugins.

8 Likes
129

That seems polite. I’ll endeavor to add a github action that will automatically update a version at each new commit to main.

4 Likes
130

You should be able to easily achieve that by using the Show category name setting of this Theme Component - it is designed specifically for your use case.

Sounds like a very good idea! Please document how to do this, and add to the Developing Theme Components for Dummies guide (if there is one).

I’ve tried it - all of my concerns have been resolved, and it looks great. Nice work!!!

Hey, how hard would it be to add the ability to specify how many paragraphs of the About topic to utilise for the description? Personally, I find the single paragraph quite restrictive and would love to be able to specify (perhaps per category) how many paragraphs to utilise.

Lastly (while still focused on this TC), do you think it would be good to more the “Read more…” to the end of the last paragraph? That would certainly save a lot of wasted space in my instance. But then again, if we could use multiple paragraphs it might clash somewhat with the second paragraph if it was links and the like. :thinking:.

132

Hmm… the way the code accesses the category description is using this.args.category.description. IIRC it already comes as 1 paragraph. I’ll take a look into it. Perhaps I could do a fetch() or ajax, but that may be alower.

Maybe a setting to select if it’s inline or not? Let me take a look.

1 Like
133

Hi, I noticed the category text font size, when set to “smaller” is not taken into account, it’s always big (happened one or two days ago I think).

134

We did change it, so that the category description was either smaller or larger than the default in core (which seems to have increased recently).

I’ll go and double check that there isn’t some theme conflict which was a red herring here.

1 Like
135

Hi @RGJ thank you so so much for this! I had no idea that theme components worked this way. I will definitely keep this in mind if we run into this situation again. Really appreciate your help! :folded_hands:

2 Likes
136

This is a very rare and specific situation, with odd behavior, and hopefully we’ll not encounter this for a while!

3 Likes
137

Hi, I solved the problem with that CSS:

.category-title-description .cooked {
  font-size: small;
}
138

I’m also getting blank category pages on desktop and mobile browsers (Discourse version 3.5.0.beta8-dev) when this component has the following setting:

  "setting": "show_mobile",
  "value": false

When I reset it to default (true) the pages show correctly.

Console shows the following error…

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘this.site.mobileView’)

…which relates to…

/discourse/theme-javascripts/theme-3/discourse/components/category-header.gjs)

…and the offending line is line 3 (const hideMobile) below:

    get showHeader() {
      const isException = this.args.category && settings.hide_category_exceptions.split("|").includes(String(this.args.category.id));
      const hideMobile = !settings.show_mobile && this.site.mobileView;
      const subCat = !settings.show_subcategory_header && this.args.category.parentCategory;
      const noDesc = !settings.hide_if_no_category_description && !this.args.category.description_text;
      const path = window.location.pathname;
      return /^\/c\//.test(path) && !isException && !noDesc && !subCat && !hideMobile;
    }

Any clue as to why this is happening?

1 Like
139

That should technically work… that line was there even before the update. I’ll have a look.

140

@HTW I’ve pushed a fix. Let me know if it works now!

1 Like
141

Fixed. Many thanks.