From 9570b6e01b87208e1fc0f3b68184d0aa06710581 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Mon, 16 Sep 2024 18:51:05 +0200
Subject: [PATCH] (design) fix mounted error due to <Page> being a fragment
 convert to composition API with TypeScript

---
 components/PropertyDisplay.vue |  19 +++
 pages/design.vue               | 241 +++++++++++++++++----------------
 2 files changed, 142 insertions(+), 118 deletions(-)
 create mode 100644 components/PropertyDisplay.vue

diff --git a/components/PropertyDisplay.vue b/components/PropertyDisplay.vue
new file mode 100644
index 000000000..0922edf46
--- /dev/null
+++ b/components/PropertyDisplay.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+    property: string;
+    format: (value: string) => string;
+}>();
+
+const text = useTemplateRef<HTMLSpanElement>('text');
+
+onMounted(() => {
+    if (!text.value) {
+        return;
+    }
+    text.value.innerHTML = props.format(getComputedStyle(text.value.parentElement!).getPropertyValue(props.property));
+});
+</script>
+
+<template>
+    <span ref="text">…</span>
+</template>
diff --git a/pages/design.vue b/pages/design.vue
index 926711ecf..ea97984c8 100644
--- a/pages/design.vue
+++ b/pages/design.vue
@@ -1,3 +1,109 @@
+<script setup lang="ts">
+import { useNuxtApp } from 'nuxt/app';
+import PropertyDisplay from '~/components/PropertyDisplay.vue';
+import useSimpleHead from '../composables/useSimpleHead.ts';
+
+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 = [
+    {
+        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,
+    },
+];
+
+interface Image {
+    label: string;
+    links: string | Record<string, string>;
+    warning?: string;
+}
+
+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-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',
+    },
+];
+
+const { $translator: translator } = useNuxtApp();
+useSimpleHead({
+    title: translator.translate('contact.contribute.design.header'),
+}, translator);
+
+const getLinks = (rawLinks: string | Record<string, string>) => {
+    if (typeof rawLinks === 'string') {
+        return Object.fromEntries([[rawLinks, translator.translate('crud.download')]]);
+    }
+    return rawLinks;
+};
+
+const getPrimaryUri = (links: string | Record<string, string>) => {
+    links = getLinks(links);
+    return Object.entries(links)[0][0];
+};
+</script>
+
 <template>
     <Page>
         <h2>
@@ -6,18 +112,15 @@
         </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:
+            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 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">
                 ⚠️
@@ -46,7 +149,8 @@
         <div class="d-flex border rounded mb-3">
             <div
                 v-for="colour in graphColours"
-                :class="['text-center', 'p-2', 'flex-grow-1', 'text-white']"
+                :key="colour"
+                class="text-center p-2 flex-grow-1 text-white"
                 :style="`background-color: ${colour}`"
             >
                 {{ colour }}
@@ -55,7 +159,8 @@
         <div class="d-flex border rounded mb-3">
             <div
                 v-for="colour in accentColours"
-                :class="['text-center', 'p-2', 'flex-grow-1']"
+                :key="colour.name"
+                class="text-center p-2 flex-grow-1"
                 :style="`background-color: ${colour.colour}; color: ${colour.darkText ? '#212529' : '#f8f9fa'}`"
             >
                 <strong>{{ colour.name }}</strong>
@@ -66,15 +171,21 @@
 
         <h3>Images</h3>
         <div class="row">
-            <div v-for="{ label, links, warning } in images" class="col-6 col-lg-4 mb-3">
+            <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">
+                    <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)"
+                            :key="linkLabel"
                             :href="uri"
                             target="_blank"
                             rel="noopener"
@@ -93,109 +204,3 @@
         </div>
     </Page>
 </template>
-
-<script>
-import { useNuxtApp } from 'nuxt/app';
-import useSimpleHead from '../composables/useSimpleHead.ts';
-
-export default {
-    setup() {
-        const { $translator: translator } = useNuxtApp();
-        useSimpleHead({
-            title: translator.translate('contact.contribute.design.header'),
-        }, translator);
-    },
-    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',
-                },
-            ],
-        };
-    },
-    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>