Add groups to the /about page

:information_source: Summary Add more groups to your Discourse /about page
:eyeglasses: Preview Theme Creator
:hammer_and_wrench: Repository https://github.com/discourse/discourse-add-groups-to-about-component/
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This component allows you to easily add more groups to the new /about page, more details on that redesign here: New and improved About page at /about is live

The component includes the following settings:

  • about groups: Groups to show on the about page, groups with 0 members are automatically hidden.
  • show initial members: Number of members to show on initial load for each group, others will be hidden behind a “show more” button.
  • capitalize names: Capitalize the names of the groups on the about page.
  • order additional groups: Alphabetically (default), by order of creation, or by order of the about groups setting — does not impact the order of existing admin and moderator groups
  • show group description: Shows the description of the group under the group’s heading (from the group settings)
16 Likes

This is brilliant, thanks so much! :clap:

It would be possible to add a new setting to use the group full name? It would be nice to show unicode characters in it, but I don’t want to enable the unicode_usernames site setting.

4 Likes

This is great, thank you @awesomerobot :smiley:

I’d second this motion.

I have a group called group-challenges-cmt which has a Full Name of Challenges Committee but they’re displayed on the /about page as group-challenges-cmt, which doesn’t look very nice :blush:

For reference, ticking the Capitalize the names of the groups on the about page option changes it from group-challenges-cmt to Group-Challenges-Cmt - is that right? Or should that checkbox only capitalise the first letter of the group name?

Strangely though, if I add group trust_level_4 to the about page, that shows up in the front end as Trust Level 4 :thinking:

This is great though, thank you so much Kirs @awesomerobot, I can now get rid of the JS code from all those years ago :smiley:

5 Likes

Adding some visuals for reference.

Here’s how the group names look in the admin page:

And here’s how the group names look in the front end:

I don’t know how far you want to go with this theme @awesomerobot, are you taking feature requests? :smiley:

A way of ordering the groups would be great. I tried adding them in different orders in case it was database-id ordered, but it didn’t change anything so I assume it’s ordering them alphabetically.

Would it be possible to fix the alignment of the group members too?

You’ll the see the admins at the top of the page are three columns wide, yet the additional groups are all two columns wide? :thinking:

And once again:

:bowing_man:

3 Likes

This looks great! Thanks, Kris. I find it to be a really sweet way to let people discover how the site is organized. Many groups on the site groups page don’t mean much and it is a cluttered place, vs the about page which can be a more curated destination.

I do wonder if we want to move this feature to core at some point. Collecting some feedback:

Feature has limitations as a theme component:

  • config UI not in /admin/config/about but in the theme component
  • does not respect about page hidden groups to exclude groups that should not be shown on the about page (ref)
  • styling (eg number of columns) of included groups is different from admin and moderator lists and would need to be updated every time we make a change to the the about page styling

There is some feedback shared already:

  • display group name not slug
  • auto capitalization doesn’t look right in some cases
  • add ability to order groups

I also think it would be helpful to provide a snapshot of more group metadata here, perhaps hidden behind an info button next to the group name?

  • description
  • group owner
  • group permissions
  • number of members in group
  • link to group page
2 Likes

Either that, or make the group heading a clickable link to the group itself.

1 Like

Some updates!

This requested happened faster then I expected :slight_smile: but I should have known.

The reason I didn’t do it initially is because I wanted to avoid an additional request… but I guess it’s unavoidable.

The way the theme component works, is that it matches the corresponding group ID from the theme setting to the site service (this.site.groups) — this contains the ID and the name, but not the full name…

Then the name gets plugged into the /g/${name}/members endpoint… which has the group members, but also does not have the full name…

So to get the full name, I need to make another request to /g/${name}.

The checkbox enables some simple CSS, text-transform: capitalize which capitalizes the first letter of each word.

Though I completely forgot about ::first-letter which I can use instead, so I’ve switched to that… this should be more consistent with our default capitalization now.

If anyone’s wondering, the reason to include this bit about capitalization is because automatic groups, like Trust Level groups, don’t have a full_name field and are always lowercase. What a tangled web we’ve weaved :sweat_smile:

I removed underscores in the component, but not dashes… this update will do both (but only for name, not full_name)

I’ve added a setting with the options:

  • alphabetical
  • order of creation
  • order of theme setting

Note this concerns the order of the additional groups, and won’t impact admins/moderators — which will always be shown first

Ah yes, there’s some CSS in Discourse that only applies to the moderator and admin groups, I’ve added a fix

Adding the description and link to group page are simple changes, I’ve added those (description disabled by default, but available in a setting).

Group owner is possible, but at the moment I reuse a core component AboutPageUsers — and that would need to be modified to be able to display the owner flair on the user avatar (which I think it probably the best place for it).

This component is growing in complexity fairly quickly, so I’m going to hold off on other requests until someone has a specific need for them.

4 Likes

Very nice! It’s impressive what all you can achieve in a theme component.

I don’t know why people would include these groups… maybe we can just ignore the capitaliation and allow them to be lower case.

I wonder if there have been requests in the past for full names for these groups - not sure why we don’t have it already.

3 Likes

This is bonkers :rofl:

How do we go from a simple question a few days ago to a full blown theme that is absolutely perfect in every way?!??

Amazing, absolutely amazing :chefs_kiss:

Thank you Kris @awesomerobot :clap:t2: :bowing_man:t2:

5 Likes

I think the most common case is showing Trust Level 4, because they gain some moderation powers

3 Likes

Sure, I can see that. Trust level names and descriptions can’t be edited, though, so I’d suggest to those people that they create another group and include tl4 folks in it, and give it a nice name, flair and description that suits the community.

I did notice something weird about trust level groups on the about page - not every time I looked at it, but the group memberships were not showing up correctly. Sometimes I as admin am in tl0 even though I am in tl2 nominally. It’s also a bit weird that I show up there at all because I am admin so trust level is irrelevant. But that’s a idiosyncracy with discourse trust levels and how they work.

3 Likes

I set up this for TL3. I’ve created a new group and with Discourse Automation I synced the Regular badge with the New TL3 group.


Yeah I noticed this too. First I hide admins with CSS but that break the layout a little bit so I removed the Regular badge instead as automation sync it for me. I am not sure if it’s will be added automatically later. Hopefully not. Yeah it automatically added again so CSS works now.


I’ve noticed also the group members order by descending in json. It would be nice to randomize it or set to by activity maybe ?order=last_posted_at or ?order=last_seen_at.

3 Likes

That’s the very reason we do it on our community :blush:

Agreed.

I put a bit of CSS in place to hide our admin team members from the Trust Level 4 members that are displayed on our /about page.

This puts the spotlight on just those TL4 members, as they are to be thanked and congratulated for their contributions to our community:

I also found that trust level 4 was being displayed as Trust level 4 when ticked in the settings.

My OCD wasn’t happy about this because all the other groups had a capital letter at the start of each word :blush: I added another line of css to change Trust level 4 to Trust Level 4.

Everything is now as perfect as perfect can be.

Thank you once again @awesomerobot - we love it :chefs_kiss:

3 Likes

Out of interest, how are all the members being ordered here?

Is it by user_id in the database?

3 Likes

good question, looks like it’s actually ordered by username in reverse alphabetical order… which doesn’t make much sense, I’m going to add a little update that switches to alphabetical (which is the same as the member listing on the full group pages)

3 Likes

I suspect re-ordering the admins is out of scope here :slight_smile:

Thanks Kris, this update seems to have re-ordered the Trust Level 4 user group but not the group below it? :thinking:

3 Likes

The original about page groups like admins and moderators are ordered by last seen at.

I suggested here.

I think it would be good to use something similar to keep the original and custom groups order consistent. :thinking:

2 Likes

They’re not consistent if they keep changing order though? :thinking: