UX: use group full name, add settings for description & ordering

common/common.scss

@@ -1,9 +1,29 @@
 .about__main-content {
   .--custom-group {
+    max-width: unset !important; // ovverides ridiculously specific core style
     margin-top: 3em;
-    @if $capitalize-names == "true" {
+    h3 {
+      a {
+        color: var(--primary);
+        &:hover {
+          color: var(--tertiary);
+        }
+      }
+      @if $capitalize-names == "true" {
+        &::first-letter {
+          text-transform: capitalize;
+        }
+      }
+    }
+
+    p {
+      margin-top: 0;
+      color: var(--primary-high);
+    }
+
+    &.--has-description {
       h3 {
-        text-transform: capitalize;
+        margin-bottom: 0;
       }
     }
   }

javascripts/discourse/components/additional-about-groups.gjs

@@ -2,12 +2,14 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
 import AboutPageUsers from "discourse/components/about-page-users";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 
 export default class AdditionalAboutGroups extends Component {
   @service store;
   @service site;
+
   @tracked groups = [];
   @tracked loading = false;
 
@@ -17,7 +19,7 @@ export default class AdditionalAboutGroups extends Component {
   }
 
   groupName(group) {
-    return group.name.replace(/_/g, " ");
+    return group.full_name || group.name.replace(/[_-]/g, " ");
   }
 
   @action
@@ -26,13 +28,26 @@ export default class AdditionalAboutGroups extends Component {
     try {
       const groupsSetting = settings.about_groups?.split("|").map(Number) || [];
 
-      const groupsToFetch = this.site.groups.filter((group) =>
+      let groupsToFetch = this.site.groups.filter((group) =>
         groupsSetting.includes(group.id)
       );
 
+      // ordered alphabetically by default
+      if (settings.order_additional_groups === "order of creation") {
+        groupsToFetch.sort((a, b) => a.id - b.id);
+      } else if (
+        settings.order_additional_groups === "order of theme setting"
+      ) {
+        groupsToFetch.sort(
+          (a, b) => groupsSetting.indexOf(a.id) - groupsSetting.indexOf(b.id)
+        );
+      }
+
       const groupPromises = groupsToFetch.map(async (group) => {
         try {
+          const groupDetails = await this.loadGroupDetails(group.name);
           group.members = await this.loadGroupMembers(group.name);
+          Object.assign(group, groupDetails);
           return group;
         } catch (error) {
           // eslint-disable-next-line no-console
@@ -58,11 +73,21 @@ export default class AdditionalAboutGroups extends Component {
     }
   }
 
+  async loadGroupDetails(groupName) {
+    try {
+      const response = await fetch(`/g/${groupName}.json`);
+      const data = await response.json();
+      return data.group;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(`Error loading details for group ${groupName}:`, error);
+      return "";
+    }
+  }
+
   async loadGroupMembers(groupName) {
     try {
-      const response = await fetch(
-        `/groups/${groupName}/members.json?offset=0&order=&asc=true`
-      );
+      const response = await fetch(`/g/${groupName}/members.json`);
       const data = await response.json();
       return data.members || [];
     } catch (error) {
@@ -76,8 +101,17 @@ export default class AdditionalAboutGroups extends Component {
     <ConditionalLoadingSpinner @condition={{this.loading}}>
       {{#if this.groups}}
         {{#each this.groups as |group|}}
-          <section class="about__{{group.name}} --custom-group">
-            <h3>{{this.groupName group}}</h3>
+          <section
+            class="about__{{group.name}}
+              --custom-group
+              {{if settings.show_group_description '--has-description'}}"
+          >
+            <h3>
+              <a href="/g/{{group.name}}">{{this.groupName group}}</a>
+            </h3>
+            {{#if settings.show_group_description}}
+              <p>{{htmlSafe group.bio_cooked}}</p>
+            {{/if}}
             <AboutPageUsers
               @users={{group.members}}
               @truncateAt={{settings.show_initial_members}}

locales/en.yml

@@ -5,3 +5,5 @@ en:
       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 behing a 'show more' button."
       capitalize_names: "Capitalize the names of the groups on the about page."
+      order_additional_groups: "Reorder the groups added by this theme component. Note: won't change the order of default admin and moderator groups."
+      show_group_description: "Show the group description on the about page."

settings.yml

@@ -10,3 +10,15 @@ show_initial_members:
 capitalize_names:
   default: true
   type: bool
+
+order_additional_groups:
+  default: "alphabetically"
+  type: enum
+  choices:
+    - "alphabetically"
+    - "order of creation"
+    - "order of theme setting"
+
+show_group_description:
+  default: false
+  type: bool

spec/system/add_groups_to_about_spec.rb

@@ -18,8 +18,8 @@
   it "renders the groups specified in the about_groups theme setting" do
     visit "/about"
 
-    expect(about_groups_component).to have_group_with_name("Group1")
-    expect(about_groups_component).to have_group_with_name("Group2")
+    expect(about_groups_component).to have_group_with_name("group1")
+    expect(about_groups_component).to have_group_with_name("group2")
     expect(about_groups_component).to have_group_with_member("user1")
     expect(about_groups_component).to have_group_with_member("user2")
   end
@@ -30,8 +30,8 @@
 
     visit "/about"
 
-    expect(about_groups_component).to have_group_with_name("Group1")
-    expect(about_groups_component).to have_no_group_with_name("Group2")
+    expect(about_groups_component).to have_group_with_name("group1")
+    expect(about_groups_component).to have_no_group_with_name("group2")
     expect(about_groups_component).to have_group_with_member("user1")
     expect(about_groups_component).to have_no_group_with_member("user2")
   end