PronounsPage/routes/design.vue

<template>
    <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 class="h5">
                <strong>Headings:</strong>
                <span class="font"></span>
            </li>
            <li>
                <strong>Text:</strong>
                <span class="font"></span>
            </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"
                :class="['text-center', 'p-2', 'flex-grow-1', 'text-white']"
                :style="`background-color: ${colour}`"
            >
                {{ colour }}
            </div>
        </div>
        <div class="d-flex border rounded mb-3">
            <div
                v-for="colour in accentColours"
                :class="['text-center', 'p-2', 'flex-grow-1']"
                :style="`background-color: ${colour.colour}; color: ${colour.darkText ? '#212529' : '#f8f9fa'}`"
            >
                <strong>{{ colour.name }}</strong>
                <br>
                <span class="colour">{{ colour.colour }}</span>
            </div>
        </div>

        <h3>Images</h3>
        <div class="row">
            <div v-for="{ label, links, warning } in images" 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 getLinks(links)"
                            :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>

<script>
import { head } from '../src/helpers.ts';

export default {
    data() {
        return {
            graphColours: ['#c71585', '#8b0f7a', '#15c79c'],
            // {'primary': null, 'secondary': null, 'success': null, 'info': null, 'warning': null, 'danger': null, 'light': 'background', 'dark': 'text'}
            accentColours: [
                {
                    name: 'primary',
                    colour: '#c71585',
                },
                {
                    name: 'secondary',
                    colour: '#6c757d',
                    // darkText: true
                },
                {
                    name: 'success',
                    colour: '#198754',
                },
                {
                    name: 'info',
                    colour: '#0dcaf0',
                    darkText: true,
                },
                {
                    name: 'warning',
                    colour: '#ffc107',
                    darkText: true,
                },
                {
                    name: 'danger',
                    colour: '#dc3545',
                    // darkText: true
                },
                {
                    name: 'dark',
                    colour: '#212529',
                },
                {
                    name: 'light',
                    colour: '#f8f9fa',
                    darkText: true,
                },
            ],
            images: [
                {
                    label: 'Project logo',
                    links: {
                        '/logo/logo-primary.svg': 'Magenta',
                        '/logo/logo.svg': 'Black',
                        '/logo/logo-light.svg': 'White',
                    },
                },
                {
                    label: 'Team logo',
                    links: {
                        '/img-local/logo/logo-full-path.svg': 'SVG',
                        '/img-local/logo/logo-full.png': 'PNG',
                    },
                    warning: 'This logo might be different in other language versions.',
                },
                {
                    label: 'Background',
                    links: '/bg.png',
                },
            ],
        };
    },
    head() {
        return head({
            title: this.$t('contact.contribute.design.header'),
        }, this.$translator);
    },
    mounted() {
        if (!process.client) {
            return;
        }
        /* this.$el.querySelectorAll('.colour').forEach(el => {
            el.innerHTML = rgbToHex(getComputedStyle(el.parentElement).getPropertyValue('background-color'));
        });*/
        this.$el.querySelectorAll('.font').forEach((el) => {
            el.innerHTML = getComputedStyle(el.parentElement).getPropertyValue('font-family')
                .split(',')[0].replaceAll('"', '');
        });
    },
    methods: {
        getLinks(rawLinks) {
            if (typeof rawLinks === 'string') {
                return Object.fromEntries([[rawLinks, this.$t('crud.download')]]);
            }
            return rawLinks;
        },
        getPrimaryUri(links) {
            links = this.getLinks(links);

            return Object.entries(links)[0][0];
        },
    },
};
</script>