(fix) pronoun group display for any pronouns with a group

components/PronounGroup.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import type { PronounGroup, Pronoun } from '~/src/classes.ts';
 
-defineProps<{
-    pronounGroup: { group: PronounGroup, groupPronouns: Pronoun[] };
+const props = defineProps<{
+    pronounGroup: { group: PronounGroup, groupPronouns: Record<string, Pronoun> | Pronoun[] };
 }>();
+
+const pronouns = computed(() => {
+    if (Array.isArray(props.pronounGroup.groupPronouns)) {
+        return props.pronounGroup.groupPronouns;
+    }
+    return Object.values(props.pronounGroup.groupPronouns);
+});
 </script>
 
 <template>
@@ -18,7 +25,7 @@ defineProps<{
                     <em><LinkedText :text="pronounGroup.group.description" /></em>
                 </div>
                 <ul class="list-unstyled">
-                    <SimplePronounList :pronouns="pronounGroup.groupPronouns" />
+                    <SimplePronounList :pronouns="pronouns" />
                 </ul>
             </li>
             <nuxt-link :to="{ name: 'pronouns' }" class="list-group-item list-group-item-action text-center">

pages/pronouns/any.vue

@@ -1,3 +1,80 @@
+<script setup lang="ts">
+import { ExampleCategory } from '~/src/classes.ts';
+import { examples, pronouns, pronounLibrary } from '~/src/data.ts';
+import type { Pronoun, MergedPronounGroup } from '~/src/classes.ts';
+
+
+definePageMeta({
+    translatedPaths: (config) => {
+        if (!config.pronouns.enabled || !config.pronouns.any) {
+            return [];
+        }
+        return {
+            'pronouns-any': {
+                paths: withPronounPrefixes(config, [`/${encodeURIComponent(config.pronouns.any)}`]),
+            },
+            'pronouns-any-group': {
+                paths: withPronounPrefixes(config, [`/${encodeURIComponent(config.pronouns.any)}\\::group`]),
+            },
+        };
+    },
+});
+
+const { $translator: translator } = useNuxtApp();
+const route = useRoute();
+const router = useRouter();
+const config = useConfig();
+const groupKey = route.params.group as string;
+
+let pronounGroups: MergedPronounGroup['groups'] = [];
+let short = translator.translate('pronouns.any.short');
+if (groupKey) {
+    const merged = pronounLibrary.byKey()[groupKey];
+    pronounGroups = merged.groups;
+    short = merged.short(translator);
+}
+
+const exampleCategories = computed(() => {
+    return ExampleCategory.from(examples, config);
+});
+
+useSimpleHead({
+    title: `${translator.translate('pronouns.intro')}: ${short}`.trim(),
+    banner: `api/banner${route.path.replace(/\/$/, '')}.png`,
+}, translator);
+
+
+const comprehensive = computed({
+    get() {
+        return config.pronouns.comprehensive ? Object.hasOwn(route.query, config.pronouns.comprehensive) : false;
+    },
+    set(value) {
+        if (value === comprehensive.value || !config.pronouns.comprehensive) {
+            // prevent warning that $router.replace has no effect
+            return;
+        }
+        const query = structuredClone(route.query);
+        if (value) {
+            query[config.pronouns.comprehensive] = null;
+        } else {
+            delete query[config.pronouns.comprehensive];
+        }
+        router.replace({ query });
+    },
+});
+const pronounsChoice = computed(() => {
+    if (!pronounGroups.length) {
+        return Object.values(pronouns).filter((p) => !p.hidden);
+    }
+
+    let choice: Record<string, Pronoun> = {};
+    for (const pronounGroup of pronounGroups) {
+        choice = { ...choice, ...pronounGroup.groupPronouns };
+    }
+    return Object.values(choice).filter((p) => !p.hidden);
+});
+</script>
+
 <template>
     <Page>
         <NotFound v-if="pronounGroups === undefined" />
@@ -37,7 +114,7 @@
 
                 <ul>
                     <template v-for="exampleCategory in exampleCategories">
-                        <ExampleCategory
+                        <ExampleCategoryListItem
                             v-if="!exampleCategory.comprehensive || comprehensive"
                             :example-category="exampleCategory"
                             :pronouns-choice="pronounsChoice"
@@ -47,7 +124,11 @@
                 </ul>
             </section>
 
-            <PronounGroup v-for="pronounGroup in pronounGroups" :key="pronounGroup.name" :pronoun-group="pronounGroup" />
+            <PronounGroup
+                v-for="pronounGroup in pronounGroups"
+                :key="pronounGroup.group.name"
+                :pronoun-group="pronounGroup"
+            />
 
             <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
 
@@ -69,86 +150,3 @@
         </div>
     </Page>
 </template>
-
-<script>
-import { examples, pronouns, pronounLibrary } from '~/src/data.ts';
-import { useNuxtApp } from 'nuxt/app';
-import useSimpleHead from '~/composables/useSimpleHead.ts';
-import { ExampleCategory } from '~/src/classes.ts';
-import useConfig from '~/composables/useConfig.ts';
-
-export default {
-    setup() {
-        definePageMeta({
-            translatedPaths: (config) => {
-                if (!config.pronouns.enabled || !config.pronouns.any) {
-                    return [];
-                }
-                return {
-                    'pronouns-any': {
-                        paths: withPronounPrefixes(config, [`/${encodeURIComponent(config.pronouns.any)}`]),
-                    },
-                    'pronouns-any-group': {
-                        paths: withPronounPrefixes(config, [`/${encodeURIComponent(config.pronouns.any)}\\::group`]),
-                    },
-                };
-            },
-        });
-
-        const { $translator: translator } = useNuxtApp();
-        const route = useRoute();
-        const config = useConfig();
-        const groupKey = route.params.group;
-        let pronounGroups = [];
-        let short;
-        if (groupKey) {
-            const merged = pronounLibrary.byKey()[groupKey];
-            pronounGroups = merged.groups;
-            short = merged.short(translator);
-        } else {
-            short = translator.translate('pronouns.any.short');
-        }
-        useSimpleHead({
-            title: `${translator.translate('pronouns.intro')}: ${short}`.trim(),
-            banner: `api/banner${route.path.replace(/\/$/, '')}.png`,
-        }, translator);
-        return {
-            config,
-            short,
-            pronounGroups,
-            exampleCategories: ExampleCategory.from(examples, config),
-        };
-    },
-    computed: {
-        comprehensive: {
-            get() {
-                return Object.hasOwn(this.$route.query, this.config.pronouns.comprehensive);
-            },
-            set(value) {
-                if (value === this.comprehensive) {
-                    // prevent warning that $router.replace has no effect
-                    return;
-                }
-                const query = structuredClone(this.$route.query);
-                if (value) {
-                    query[this.config.pronouns.comprehensive] = null;
-                } else {
-                    delete query[this.config.pronouns.comprehensive];
-                }
-                this.$router.replace({ query });
-            },
-        },
-        pronounsChoice() {
-            if (!this.pronounGroups.length) {
-                return Object.values(pronouns).filter((p) => !p.hidden);
-            }
-
-            let choice = {};
-            for (const pronounGroup of this.pronounGroups) {
-                choice = { ...choice, ...pronounGroup.groupPronouns };
-            }
-            return Object.values(choice).filter((p) => !p.hidden);
-        },
-    },
-};
-</script>

pages/pronouns/pronoun.vue

@@ -63,7 +63,7 @@
 
                 <ul>
                     <template v-for="exampleCategory in exampleCategories">
-                        <ExampleCategory
+                        <ExampleCategoryListItem
                             v-if="!exampleCategory.comprehensive || comprehensive"
                             :example-category="exampleCategory"
                             :pronouns-choice="[selectedPronoun]"