static-site[list-resources]: Enable customization of sorting by "groupName"

I'll be using this shortly to statically sort one set of resource groups
after another.

Author: tsibley

static-site/app/groups/[group]/page.tsx

@@ -123,6 +123,7 @@ export default function IndividualGroupPage({
     return [{
       groupName: group,
       groupDisplayName: group,
+      sortingGroupName: group,
       resources,
       nResources: resources.length,
       nVersions: undefined,

static-site/app/groups/available.tsx

@@ -99,6 +99,7 @@ export default function Available(): React.ReactElement {
         return {
           groupName,
           groupDisplayName: groupName,
+          sortingGroupName: groupName,
           groupUrl: `/groups/${groupName}`,
           groupUrlTooltip: `Click to view the page for ${groupName}`,
           resources: filteredResources,

static-site/components/list-resources/listResourcesApi.tsx

@@ -34,6 +34,7 @@ export async function listResourcesAPI(
     versioned,
     groupNameBuilder = (name: string) => name.split("/")[0]!, // eslint-disable-line @typescript-eslint/no-non-null-assertion
     groupDisplayNames,
+    groupSortableName,
     groupUrl,
     groupUrlTooltip
   }: {
@@ -43,6 +44,7 @@ export async function listResourcesAPI(
     versioned: boolean,
     groupNameBuilder?: (name: string) => string,
     groupDisplayNames?: Record<string, string>,
+    groupSortableName?: (group: Group) => string,
     groupUrl?: (groupName: string) => string,
     groupUrlTooltip?: (groupName: string) => string
   }
@@ -66,6 +68,9 @@ export async function listResourcesAPI(
       if (groupDisplayNames && groupName in groupDisplayNames) {
         group.groupDisplayName = groupDisplayNames[groupName];
       }
+      if (groupSortableName) {
+        group.sortingGroupName = groupSortableName(group);
+      }
       if (groupUrl) {
         group.groupUrl = groupUrl(groupName);
       }
@@ -94,6 +99,7 @@ function resourceGroup(groupName: string, resources: Resource[]): Group {
 
   const groupInfo: Group = {
     groupName,
+    sortingGroupName: groupName,
     groupImgSrc: nextstrainLogoSmall.src,
     groupImgAlt: "nextstrain logo",
     resources,

static-site/components/list-resources/types.ts

@@ -10,6 +10,7 @@ export type SortMethod = "lastUpdated" | "alphabetical";
 
 export type Group = {
   groupName: string;
+  sortingGroupName: string;
   groupImgSrc?: string;
   groupImgAlt?: string;
   nResources: number;

static-site/components/list-resources/use-sort-and-filter.ts

@@ -96,8 +96,8 @@ export default function useSortAndFilter(
       const groups = originalData;
       const _sortGroups = (groupA: Group, groupB: Group) =>
         _lexicographicSort(
-          groupA.groupName.toLowerCase(),
-          groupB.groupName.toLowerCase(),
+          groupA.sortingGroupName.toLowerCase(),
+          groupB.sortingGroupName.toLowerCase(),
         );
       const _sortResources = (a: Resource, b: Resource) =>
         _lexicographicSort(a.sortingName, b.sortingName);