PronounsPage/app/pages/people.vue

<script setup lang="ts">
import { useNuxtApp } from 'nuxt/app';

import useSimpleHead from '~/composables/useSimpleHead.ts';
import { loadPeople } from '~/src/data.ts';

definePageMeta({
    translatedPaths: (config) => translatedPathByConfigModule(config.people),
});

const { $translator: translator } = useNuxtApp();

const people = await loadPeople();

useSimpleHead({
    title: translator.translate('people.headerLonger'),
    description: translator.translate('people.description'),
}, translator);
</script>

<template>
    <Page>
        <LinksNav />

        <h2>
            <Icon v="user-friends" />
            <T>people.headerLonger</T>
        </h2>

        <section>
            <T>people.intro</T>
        </section>

        <ul class="list-group">
            <li v-for="person in people" class="list-group-item">
                <h3 class="h4">
                    <strong>
                        {{ person.name }}
                    </strong>
                </h3>
                <p>
                    {{ person.description }}
                </p>
                <ul class="mb-2">
                    <li v-for="(pronouns, locale) in person.pronouns">
                        <T>people.languages.{{ locale }}</T><T>quotation.colon</T>
                        <ul class="list-inline d-inline">
                            <li v-for="pronoun in pronouns" class="list-inline-item">
                                <LocaleLink :link="`/${pronoun.link}`" :locale="locale">
                                    <strong>{{ pronoun.display }}</strong>
                                </LocaleLink>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- TODO <SourceList v-if="person.sources.length" :names="person.sources"/> -->
            </li>
        </ul>
    </Page>
</template>