PronounsPage/app.vue

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

import { useHead, useSeoMeta } from '#imports';
import useConfig from '~/composables/useConfig.ts';
import { getDefaultSeo } from '~/composables/useSimpleHead.ts';
import { getUrlForLocale } from '~/src/domain.ts';
import { formatFonts } from '~/src/fonts.ts';

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

const defaultSeo = getDefaultSeo(config, translator);
const colour = '#C71585';

useHead({
    htmlAttrs: {
        dir: config.style.dir || 'ltr',
        lang: config.locale,
    },
    style: [{
        innerHTML:
            `:root {
              --font-headings: ${formatFonts(config.style.fontHeadings)};
              --font-text: ${formatFonts(config.style.fontText)};
            }`,
    }],
    link: [
        { rel: 'icon', sizes: '48x48', href: '/favicon.ico' },
        { rel: 'icon', sizes: 'any', type: 'image/svg', href: '/logo/logo-primary.svg' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon-180x180.png' },
    ],
});

useSeoMeta({
    title: defaultSeo.title,
    charset: 'utf-8',
    description: defaultSeo.description,
    keywords: defaultSeo.keywords,
    viewport: 'width=device-width, initial-scale=1',
    appleMobileWebAppTitle: defaultSeo.title,
    themeColor: colour,

    ogType: 'article',
    ogTitle: defaultSeo.title,
    ogDescription: defaultSeo.description,
    ogSiteName: defaultSeo.title,
    ogImage: defaultSeo.banner,

    twitterCard: 'summary_large_image',
    twitterTitle: defaultSeo.title,
    twitterDescription: defaultSeo.description,
    twitterSite: getUrlForLocale(config.locale),
    twitterImage: defaultSeo.banner,
});
</script>

<template>
    <NuxtRouteAnnouncer />
    <NuxtPwaManifest />
    <NuxtLoadingIndicator color="#C71585" error-color="#dc3545" />
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>