PronounsPage/pages/profile/card-[username].vue

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

import useConfig from '~/composables/useConfig.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';

definePageMeta({
    translatedPaths: (config) => {
        if (!config.profile.enabled) {
            return [];
        }
        return ['/card/@:username'];
    },
    layout: 'basic',
});
const { $translator: translator } = useNuxtApp();
const route = useRoute();
const config = useConfig();
const username = route.params.username as string;
useSimpleHead({
    title: `@${username}`,
    banner: `api/banner/@${username}.png`,
}, translator);

const { data: user } = await useFetch<any>(`/api/profile/get/${encodeURIComponent(username)}?version=2&lprops[${config.locale}]=all`, {
    headers: {
        authorization: `Bearer ${route.query.token}`,
    },
});

const profile = computed(() => {
    for (const locale in user.value.profiles) {
        if (locale === config.locale) {
            return user.value.profiles[locale];
        }
    }

    return null;
});
</script>

<template>
    <Profile v-if="profile" :user="user" :profile="profile" is-static>
        <nuxt-link to="/">
            <h1 class="text-nowrap h5">
                <Logo style="font-size: 1.3em;" />
                <T>domain</T><span v-if="profile">/@{{ user.username }}</span>
            </h1>
        </nuxt-link>
        <QrCode :url="`https://${$t('domain')}/@${user.username}`" style="display: inline-block; width: 80px; height: 80px; margin-inline-start: 1rem;" />
    </Profile>
    <NotFound v-else />
</template>