PronounsPage/pages/design.vue

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

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

import { colours } from '@/src/styling.ts';
import PropertyDisplay from '~/components/PropertyDisplay.vue';

const fonts = [
    {
        label: 'Headings',
        class: 'h5',
    },
    {
        label: 'Text',
        class: '',
    },
];

const formatFont = (value: string): string => value.split(',')[0].replaceAll('"', '');

const graphColours = ['#c71585', '#8b0f7a', '#15c79c'];
const accentColours = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'];

const formatHex = (value: string): string => {
    return parseInt(value.trim()).toString(16)
        .padStart(2, '0');
};

const rgbToHex = (rgb: string): string => {
    if (!rgb.startsWith('rgb(')) {
        return rgb;
    }
    const [r, g, b] = rgb.replace(/^rgb\(/, '').replace(/\)$/, '')
        .split(',');
    return `#${formatHex(r)}${formatHex(g)}${formatHex(b)}`;
};

interface Image {
    label: string;
    links: Record<string, string>;
    warning?: string;
}

const config = useConfig();
const images: Image[] = [
    {
        label: 'Project logo',
        links: {
            '/logo/logo-primary.svg': 'Magenta',
            '/logo/logo.svg': 'Black',
            '/logo/logo-light.svg': 'White',
        },
    },
    {
        label: 'Team logo',
        links: {
            [`/img/${config.locale}/logo/logo-full-path.svg`]: 'SVG',
            [`/img/${config.locale}/logo/logo-full.png`]: 'PNG',
        },
        warning: 'This logo might be different in other language versions.',
    },
    {
        label: 'Background',
        links: {
            '/bg.png': 'Light',
            '/bg-dark.png': 'Dark',
        },
    },
];

const { $translator: translator } = useNuxtApp();
useSimpleHead({
    title: translator.translate('contact.contribute.design.header'),
}, translator);

const getPrimaryUri = (links: Record<string, string>) => {
    return Object.entries(links)[0][0];
};
</script>

<template>
    <Page ref="page">
        <h2>
            <Icon v="palette" />
            <T>contact.contribute.design.header</T>
        </h2>

        <p>
            If you're a contributor creating some kind of visual content for the project,
            here's a bunch of information and assets that you might find useful:
        </p>

        <h3>Fonts</h3>
        <ul>
            <li v-for="font in fonts" :key="font.label" :class="font.class">
                <strong>{{ font.label }}:</strong>
                <PropertyDisplay property="font-family" :format="formatFont" />
            </li>
            <li class="small">
                ⚠️
                We might be using different fonts for non-Latin scripts.
                Please check this page in the relevant language version.
            </li>
        </ul>

        <h3>Symbols</h3>
        <ul>
            <li>
                <strong>Icons:</strong>
                <a href="https://fontawesome.com/v5/search?o=r&s=light&f=classic" target="_blank" rel="noopener">
                    FontAwesome v5
                </a>
            </li>
            <li>
                <strong>Emoji:</strong>
                <a href="https://fonts.google.com/noto/specimen/Noto+Color+Emoji" target="_blank" rel="noopener">
                    Noto Color Emoji
                </a>
            </li>
        </ul>

        <h3>Colours</h3>
        <div class="d-flex border rounded mb-3">
            <div
                v-for="colour in graphColours"
                :key="colour"
                class="text-center p-2 flex-grow-1 text-white"
                :style="`background-color: ${colour}`"
            >
                {{ colour }}
            </div>
        </div>
        <div ref="accentColoursElement" class="d-flex border rounded mb-3">
            <div
                v-for="name in accentColours"
                :key="name"
                :class="['text-center', 'p-2', 'flex-grow-1', `text-bg-${name}`]"
            >
                <strong>{{ name }}</strong>
                <br>
                <PropertyDisplay property="background-color" :format="rgbToHex" />
            </div>
        </div>
        <div class="d-flex border rounded mb-3">
            <div
                v-for="name in colours"
                :key="name"
                :class="['text-center', 'p-2', 'flex-grow-1', `colour-${name}`]"
            >
                <strong>{{ name || 'default' }}</strong>
                <br>
                <PropertyDisplay property="color" :format="rgbToHex" />
            </div>
        </div>

        Colours might differ between light and dark mode to ensure appropriate contrast.
        <div class="text-center">
            <ModeSwitch />
        </div>

        <h3>Images</h3>
        <div class="row">
            <div v-for="{ label, links, warning } in images" :key="label" class="col-6 col-lg-4 mb-3">
                <div class="card">
                    <img
                        :src="getPrimaryUri(links)"
                        class="w-100 card-img-top"
                        style="background-color: #f8f9fa;"
                        :alt="label"
                    >
                    <div class="card-body">
                        <p class="h5">
                            {{ label }}
                        </p>
                        <a
                            v-for="(linkLabel, uri) in links"
                            :key="linkLabel"
                            :href="uri"
                            target="_blank"
                            rel="noopener"
                            download
                            class="btn btn-sm btn-outline-primary m-1"
                        >
                            <Icon v="cloud-download" />
                            {{ linkLabel }}
                        </a>
                    </div>
                    <div v-if="warning" class="card-footer small">
                        ⚠️ {{ warning }}
                    </div>
                </div>
            </div>
        </div>
    </Page>
</template>