(nouns) display noun convention group on details page

components/nouns/NounsConventionPage.vue

@@ -6,7 +6,7 @@ import { MorphemeValues } from '~/src/language/morphemes.ts';
 import type { NounConvention } from '~/src/nouns.ts';
 
 const props = defineProps<{
-    nounConvention: NounConvention;
+    nounConvention: WithKey<NounConvention>;
 }>();
 
 const { $translator: translator } = useNuxtApp();
@@ -39,6 +39,12 @@ const examples = computed(() => {
     return nounConventions?.examples.map((example) => Example.parse(example))
         .filter((example) => example.areRequiredExampleValuesPresent(exampleValues.value!));
 });
+
+const nounConventionGroup = computed(() => {
+    return Object.values(nounConventions.groups).find((nounConventionGroup) => {
+        return nounConventionGroup.conventions.includes(props.nounConvention.key);
+    });
+});
 </script>
 
 <template>
@@ -107,4 +113,15 @@ const examples = computed(() => {
             />
         </div>
     </section>
+
+    <section v-if="nounConventionGroup">
+        <ul class="list-group mt-4">
+            <li class="list-group-item">
+                <NounsConventionsIndexGroup :noun-convention-group />
+            </li>
+            <nuxt-link :to="{ name: 'nouns' }" class="list-group-item list-group-item-action text-center">
+                <Icon v="ellipsis-h-alt" />
+            </nuxt-link>
+        </ul>
+    </section>
 </template>

middleware/languageItemFromPath.ts

@@ -25,11 +25,8 @@ const findNounConvention = async (path: string, config: Config) => {
 
     const nounConventions = await loadNounConventions();
 
-    for (const [key, nounConvention] of Object.entries(nounConventions?.conventions ?? {})) {
+    return withKey(nounConventions?.conventions ?? {})
-        if (key === path) {
+        .find((nounConvention) => nounConvention.key === path);
-            return nounConvention;
-        }
-    }
 };
 
 export default defineNuxtRouteMiddleware(async (to) => {

nuxt.config.ts

@@ -37,7 +37,7 @@ declare module 'vue-router' {
     interface RouteMeta {
         headerCategory?: string;
         pronoun?: Pronoun;
-        nounConvention?: NounConvention;
+        nounConvention?: WithKey<NounConvention>;
     }
 }