PronounsPage/routes/people.vue

<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>

<script lang="ts">
import Vue from 'vue';
import { people } from '../src/data.ts';
import { head } from '../src/helpers.ts';
import { SourceLibrary } from '../src/classes.ts';

export default Vue.extend({
    async asyncData({ app }) {
        return {
            sources: await app.$axios.$get('/sources'),
        };
    },
    data() {
        return {
            people,
        };
    },
    head() {
        return head({
            title: this.$t('people.headerLonger'),
            description: this.$t('people.description'),
        }, this.$translator);
    },
    computed: {
        sourceLibrary() {
            return new SourceLibrary(this.$config, this.sources);
        },
    },
});
</script>