PronounsPage/app/pages/index-home.vue

<script setup lang="ts">
import buildLocaleList from '#shared/buildLocaleList.ts';
import type { LocaleDescription } from '~~/locale/locales.ts';

definePageMeta({
    translatedPaths: (config) => {
        if (config.locale !== '_') {
            return [];
        }
        return ['/'];
    },
});

const locales = buildLocaleList('_').filter((locale) => locale.code !== '_');

const filter = ref('');
const suggestedLocales = ref<LocaleDescription[]>([]);

onMounted(() => {
    const browserLocales = window.navigator.languages || [window.navigator.language || (window.navigator as any).userLanguage];

    const supportedLocaleCodes = new Set(browserLocales
        .map((code) => code.includes('-') ? code.split('-')[0] : code));
    suggestedLocales.value = [...supportedLocaleCodes]
        .map((code) => locales.find((locale) => locale.code === code))
        .filter((locale) => locale !== undefined);
});
</script>

<template>
    <Page>
        <OAuthError />
        <section v-if="suggestedLocales.length > 0">
            <p class="mb-2">
                <Icon v="lightbulb" />
                Suggested languages, based on your browser settings:
            </p>
            <LocaleList :locales="suggestedLocales" />
        </section>

        <section>
            <FilterBar v-model="filter" />
            <LocaleList :locales :filter />
        </section>

        <!--
        <template #below>
            <LanguageMap />
            <p class="small text-muted my-3">
                <Icon v="info-circle" />
                The complexity of geographical reach of each language is represented in a simplified way
                using locations as defined by the authors of
                <a href="https://wals.info/" target="_blank">The World Atlas of Language Structures</a>.
            </p>
        </template>
        -->
    </Page>
</template>

<style lang="scss" scoped>
    @import "~/assets/variables";

    .list-group-item-hoverable {
        &:hover {
            color: $primary;
            border-inline-start: 3px solid $primary;
            padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
        }
    }
</style>