PronounsPage/components/Authors.vue

<template>
    <ul class="list-unstyled">
        <li class="mb-2">
            <nuxt-link
                :to="`/${$config.contact.team?.route}`"
                :class="bigteam ? 'btn btn-outline-primary border m-1' : ''"
            >
                <Icon v="collective-logo.svg" :class="['invertible', bigteam ? 'hover-invertible' : '']" />
                <T>contact.team.name</T>
            </nuxt-link>
            <br>
            <small><T>contact.team.description</T></small>
        </li>
        <li v-if="authors === undefined">
            <Spinner />
        </li>
        <template v-else>
            <li v-for="author in authors" class="mb-2">
                <Icon :v="'group' in author ? 'users' : 'user'" />
                <a v-if="'link' in author" :href="author.link" target="_blank" rel="noopener">
                    <Spelling :text="convertName(author.footerName)" />
                </a>
                <span v-else>
                    <Spelling :text="convertName(author.footerName)" />
                </span>
                <nuxt-link
                    v-if="'username' in author"
                    :to="`/@${author.username}`"
                    class="badge bg-light text-dark border"
                >
                    @{{ author.username }}
                </nuxt-link>
                <br v-if="author.footerAreas">
                <small v-if="author.footerAreas">
                    <Spelling :text="author.footerAreas.replace(/,/g, ', ')" />
                </small>
            </li>
        </template>
    </ul>
</template>

<script lang="ts">
import spelling from '../plugins/spelling.ts';
import type { ContactAuthor } from '../locale/config.ts';

interface Data {
    authors: ContactAuthor[] | undefined;
}

export default spelling.extend({
    props: {
        bigteam: { type: Boolean },
    },
    data(): Data {
        return {
            authors: undefined,
        };
    },
    async mounted() {
        this.authors = await this.$axios.$get('/admin/list/footer');
    },
});
</script>