From 3bc14a493a37b9daedeefd3623b4b9a96a56f04d Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sat, 15 Jul 2023 14:13:22 +0200
Subject: [PATCH] reorganise locale list

it's more visible in the locale directory, the published column is clearer when the list contains objects

also: prepare language symbols, but without enabling them yet
---
 README.md                       |  2 +-
 assets/style.scss               |  2 +-
 components/Header.vue           |  2 +-
 components/LanguageVersions.vue |  6 ++--
 components/LocaleIcon.vue       | 49 +++++++++++++++++++++++++++++++++
 components/Roles.vue            |  4 +--
 components/VersionDropdown.vue  |  2 ++
 locale/locales.js               | 27 ++++++++++++++++++
 routes/select.vue               |  2 ++
 server/cards.js                 |  6 ++--
 server/routes/admin.js          |  8 +++---
 server/routes/profile.js        |  4 +--
 server/stats.js                 |  1 -
 src/buildLocaleList.js          |  8 +++---
 src/locales.js                  | 27 ------------------
 15 files changed, 102 insertions(+), 48 deletions(-)
 create mode 100644 components/LocaleIcon.vue
 create mode 100644 locale/locales.js
 delete mode 100644 src/locales.js

diff --git a/README.md b/README.md
index 58412183e..66dbba0f5 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ See [LICENSE](./LICENSE.md)
 
 ## Development Documentation
 Read https://en.pronouns.page/new-version
-When you add a new language, remember to modify the file ./src/locales.js to add your language. true means the translation is finished and published, so you'll probably want to go with false.\
+When you add a new language, remember to modify the file ./locale/locales.js to add your language. true means the translation is finished and published, so you'll probably want to go with false.\
 If you're having problems using Yarn, npm is probably fine, but remember to switch any `yarn [x]` commands for `npm run [x]`\
 Remember to modify the ./.env file. You don't really need to set up any external APIs, just make up a secret. In order to test the login system, you can type in an email followed by a + (example@pronouns.page+). This way, you won't need a mailer, as the code will always be 999999. This feature is exclusive to development builds.
 
diff --git a/assets/style.scss b/assets/style.scss
index c340c786e..a00de472d 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -277,7 +277,7 @@ body:not(.reduced-colours) {
 .locale-dropdown.show {
     display: flex;
     flex-wrap: wrap;
-    width: 320px;
+    width: 360px;
     .dropdown-divider {
         width: 100%;
     }
diff --git a/components/Header.vue b/components/Header.vue
index 066cf0b6c..eabe889a6 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -17,7 +17,7 @@
                         <span class="text-nowrap"><Spelling :text="link.text"/></span>
                     </template>
                 </nuxt-link>
-                <div class="nav-item flex-grow-0">
+                <div class="nav-item flex-grow-0" @mouseenter="hoverItem = null">
                     <VersionDropdown end/>
                 </div>
             </div>
diff --git a/components/LanguageVersions.vue b/components/LanguageVersions.vue
index fa296bd80..7f480ff19 100644
--- a/components/LanguageVersions.vue
+++ b/components/LanguageVersions.vue
@@ -4,11 +4,13 @@
             <Icon v="language"/>
             <T>links.languageVersions</T>
         </h2>
-        <ul class="list-unstyled">
-            <li v-for="(options, locale) in locales" :key="locale" v-if="locale !== config.locale">
+        <ul class="list-unstyled" style="column-count: 2;">
+            <li v-for="(options, locale) in locales" :key="locale" v-if="locale !== config.locale" class="mb-1">
                 <a :href="options.url">
                     <Icon v="long-arrow-right"/>
+                    <!--<LocaleIcon :locale="options" class="me-1"/>-->
                     {{options.name}}
+                    <small v-if="options.extra" class="text-muted">({{options.extra}})</small>
                 </a>
             </li>
             <li>
diff --git a/components/LocaleIcon.vue b/components/LocaleIcon.vue
new file mode 100644
index 000000000..0d08ece97
--- /dev/null
+++ b/components/LocaleIcon.vue
@@ -0,0 +1,49 @@
+<template>
+    <div v-if="false" class="badge border bg-light text-primary locale-icon"
+         :style="`background-color: oklch(95% 0.15 ${GROUPS_COLOUR_CODE[locale.family]}) !important`"
+    >
+        {{ locale.symbol || '&nbsp;' }}
+    </div>
+</template>
+
+<script>
+const GROUPS_COLOUR_CODE = {
+    // indo-european
+    germanic: 0,
+    romance: 300,
+    slavic: 280,
+    // uralic
+    finnish: 240,
+    // turkic
+    turkic: 200,
+    // austroasiatic
+    vietic: 160,
+    // afro-asiatic
+    semitic: 40,
+    // japonic
+    japonic: 80,
+    // koreanic
+    koreanic: 120,
+    // sino-tibetan
+    sinitic: 140,
+    // constructed
+    constructed: 160,
+}
+
+export default {
+    props: {
+        locale: {},
+    },
+    data() {
+        return {
+            GROUPS_COLOUR_CODE,
+        }
+    },
+}
+</script>
+
+<style scoped>
+.locale-icon {
+    width: 2.5em;
+}
+</style>
diff --git a/components/Roles.vue b/components/Roles.vue
index 8ae346600..aaf5e0eaa 100644
--- a/components/Roles.vue
+++ b/components/Roles.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script>
-    import locales from '../src/locales';
+    import allLocalesRaw from '../locale/locales';
     const allLocales = ['*'];
-    for (let [code,] of locales) {
+    for (let {code} of allLocalesRaw) {
         allLocales.push(code);
     }
 
diff --git a/components/VersionDropdown.vue b/components/VersionDropdown.vue
index c62b5a648..13c79cbcc 100644
--- a/components/VersionDropdown.vue
+++ b/components/VersionDropdown.vue
@@ -18,7 +18,9 @@
             <template v-slot:menu>
                 <li v-for="(options, locale) in locales" :key="locale" v-if="locale !== config.locale" class="w-50">
                     <a :href="options.url" class="dropdown-item">
+                        <LocaleIcon :locale="options"/>
                         {{options.name}}
+                        <small v-if="options.extra" class="text-muted">({{options.extra}})</small>
                     </a>
                 </li>
                 <li class="dropdown-divider"></li>
diff --git a/locale/locales.js b/locale/locales.js
new file mode 100644
index 000000000..af6e87bd7
--- /dev/null
+++ b/locale/locales.js
@@ -0,0 +1,27 @@
+module.exports = [
+    {code: 'de',  name: 'Deutsch',                     url: 'https://de.pronouns.page',    published: true,       symbol: 'ß',       family: 'germanic'},
+    {code: 'es',  name: 'Español',                     url: 'https://pronombr.es',         published: true,       symbol: 'ñ',       family: 'romance'},
+    {code: 'eo',  name: 'Esperanto',                   url: 'https://eo.pronouns.page',    published: false,      symbol: 'ĥ',       family: 'constructed'},
+    {code: 'en',  name: 'English',                     url: 'https://en.pronouns.page',    published: true,       symbol: 'þ',       family: 'germanic'},
+    {code: 'et',  name: 'Eesti keel',                  url: 'https://et.pronouns.page',    published: true,       symbol: 'õ',       family: 'finnish'},
+    {code: 'fr',  name: 'Français',                    url: 'https://pronoms.fr',          published: true,       symbol: 'ç',       family: 'romance'},
+    {code: 'gl',  name: 'Galego',                      url: 'https://gl.pronouns.page',    published: false,      symbol: 'ñ',       family: 'romance'}, // symbol duplicate with spanish
+    {code: 'it',  name: 'Italiano',                    url: 'https://it.pronouns.page',    published: false,      symbol: 'à',       family: 'romance'},
+    {code: 'lad', name: 'Ladino', extra: 'Djudezmo',   url: 'https://lad.pronouns.page',   published:  true,      symbol: 'ny',      family: 'romance'},
+    {code: 'nl',  name: 'Nederlands',                  url: 'https://nl.pronouns.page',    published: true,       symbol: 'ij',       family: 'germanic'},
+    {code: 'no',  name: 'Norsk', extra: 'Bokmål',      url: 'https://no.pronouns.page',    published: true,       symbol: 'æ',       family: 'germanic'}, // å might be better, but it's used for swedish
+    {code: 'pl',  name: 'Polski',                      url: 'https://zaimki.pl',           published: true,       symbol: 'ą',       family: 'slavic'},
+    {code: 'pt',  name: 'Português',                   url: 'https://pt.pronouns.page',    published: true,       symbol: 'ã',       family: 'romance'},
+    {code: 'ro',  name: 'Română',                      url: 'https://ro.pronouns.page',    published: true,       symbol: 'ă',       family: 'romance'},
+    {code: 'sv',  name: 'Svenska',                     url: 'https://sv.pronouns.page',    published: true,       symbol: 'å',       family: 'germanic'},
+    {code: 'tr',  name: 'Türkçe',                      url: 'https://tr.pronouns.page',    published: false,      symbol: 'ş',       family: 'turkic'},
+    {code: 'vi',  name: 'Tiếng Việt',                  url: 'https://vi.pronouns.page',    published: true,       symbol: 'ớ',       family: 'vietic'},
+    {code: 'ar',  name: 'اَلْعَرَبِيَّةُ',                     url: 'https://ar.pronouns.page',    published: false,      symbol: 'ش',       family: 'semitic'},
+    {code: 'ru',  name: 'Русский',                     url: 'https://ru.pronouns.page',    published: true,       symbol: 'й',       family: 'slavic'},
+    {code: 'ua',  name: 'Українська',                  url: 'https://ua.pronouns.page',    published: true,       symbol: 'ї',       family: 'slavic'},
+    {code: 'ja',  name: '日本語',                       url: 'https://ja.pronouns.page',    published: true,       symbol: 'の',      family: 'japonic'},
+    {code: 'ko',  name: '한국어',                        url: 'https://ko.pronouns.page',    published: false,      symbol: '인',      family: 'koreanic'},
+    {code: 'yi',  name: 'ייִדיש',                       url: 'https://yi.pronouns.page',    published: false,      symbol: 'ש',       family: 'germanic'},
+    {code: 'zh',  name: '中文',                         url: 'https://zh.pronouns.page',    published: true,       symbol: '人',      family: ''},
+    {code: 'tok', name: 'toki pona',                   url: 'https://tok.pronouns.page',   published: false,      symbol: '⊡',       family: 'constructed'},
+];
diff --git a/routes/select.vue b/routes/select.vue
index 3b0b907da..f1e8c5f26 100644
--- a/routes/select.vue
+++ b/routes/select.vue
@@ -3,7 +3,9 @@
         <div class="list-group mt-md-5 py-md-5">
             <a v-for="(options, locale) in locales" :key="locale" :href="options.url" class="list-group-item list-group-item-action list-group-item-hoverable">
                 <div class="h3">
+                    <LocaleIcon :locale="options" class="mx-2"/>
                     {{ options.name }}
+                    <small v-if="options.extra" class="text-muted">({{options.extra}})</small>
                 </div>
             </a>
         </div>
diff --git a/server/cards.js b/server/cards.js
index 7af8cb145..bbd7b8325 100644
--- a/server/cards.js
+++ b/server/cards.js
@@ -3,7 +3,7 @@ require('../src/dotenv')();
 const Pageres = require('pageres');
 const isHighLoadTime = require('./overload');
 const dbConnection = require('./db');
-const locales = require('../src/locales');
+const allLocales = require('../locale/locales');
 const { ulid } = require('ulid');
 
 const awsConfig = require('./aws');
@@ -11,11 +11,11 @@ const S3 = require('aws-sdk/clients/s3');
 const s3 = new S3(awsConfig);
 
 const urlBases = {}
-for (let [code, , url, ] of locales) {
+for (let {code, url} of allLocales) {
     urlBases[code] = url + '/card/@'; // 'http://localhost:3000/card/@'
 }
 const domainLocaleMap = {};
-for (let [code, , url, ] of locales) {
+for (let {code, url} of allLocales) {
     domainLocaleMap[url.replace(/^https?:\/\//, '')] = code;
 }
 
diff --git a/server/routes/admin.js b/server/routes/admin.js
index bcf5c7540..d4bdc7743 100644
--- a/server/routes/admin.js
+++ b/server/routes/admin.js
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import SQL from 'sql-template-strings';
 import avatar from '../avatar';
 import {buildDict, now, shuffle, handleErrorAsync} from "../../src/helpers";
-import locales from '../../src/locales';
+import allLocales from '../../locale/locales';
 import fs from 'fs';
 import { caches }  from "../../src/cache";
 import mailer from "../../src/mailer";
@@ -32,9 +32,9 @@ router.get('/admin/list', handleErrorAsync(async (req, res) => {
 
         const adminsGroupped = buildDict(function* () {
             yield [global.config.locale, []];
-            for (let [locale, , , published] of locales) {
-                if (locale !== global.config.locale && published) {
-                    yield [locale, []];
+            for (let {code, published} of allLocales) {
+                if (code !== global.config.locale && published) {
+                    yield [code, []];
                 }
             }
             yield ['', []];
diff --git a/server/routes/profile.js b/server/routes/profile.js
index 19e8f36d0..5c6221104 100644
--- a/server/routes/profile.js
+++ b/server/routes/profile.js
@@ -11,7 +11,7 @@ import {socialProviders} from "../../src/socialProviders";
 import {downgradeToV1, upgradeToV2} from "../profileV2";
 import { colours, styles } from '../../src/styling';
 import {normaliseUrl} from "../../src/links";
-import locales from '../../src/locales';
+import allLocales from '../../locale/locales';
 
 const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // https://stackoverflow.com/a/6969486/3297012
 const normalise = s => decodeURIComponent(s.trim().toLowerCase());
@@ -33,7 +33,7 @@ const calcAge = birthday => {
 const providersWithLinks = Object.keys(socialProviders)
     .filter(p => socialProviders[p].linkRegex !== undefined);
 
-const domains = ['https://pronouns.page', ...locales.map(l => l[2])];
+const domains = ['https://pronouns.page', ...allLocales.map(l => l.url)];
 
 const verifyLinks = (links, authenticators, username, linksMetadata) => {
     const verifiedLinks = {};
diff --git a/server/stats.js b/server/stats.js
index b1e84d0c4..e1553e9f2 100644
--- a/server/stats.js
+++ b/server/stats.js
@@ -2,7 +2,6 @@ require('../src/dotenv')();
 
 const dbConnection = require('./db');
 const {calculateStats} = require('../src/stats');
-const locales = require('../src/locales');
 const fs = require('fs');
 const buildLocaleList = require('../src/buildLocaleList');
 const util = require('util');
diff --git a/src/buildLocaleList.js b/src/buildLocaleList.js
index 626fc84b5..e9b582fad 100644
--- a/src/buildLocaleList.js
+++ b/src/buildLocaleList.js
@@ -1,10 +1,10 @@
-const locales = require('./locales')
+const allLocales = require('../locale/locales')
 
 module.exports = (current, includeUnpublished = false) => {
     const d = {};
-    for (let [code, name, url, published] of locales) {
-        if (published || current === code || includeUnpublished) {
-            d[code] = {name, url, published, code};
+    for (let locale of allLocales) {
+        if (locale.published || current === locale.code || includeUnpublished) {
+            d[locale.code] = locale;
         }
     }
 
diff --git a/src/locales.js b/src/locales.js
deleted file mode 100644
index 200c83cbe..000000000
--- a/src/locales.js
+++ /dev/null
@@ -1,27 +0,0 @@
-module.exports = [
-    ['de', 'Deutsch',             'https://de.pronouns.page', true],
-    ['es', 'Español',             'https://pronombr.es',      true],
-    ['eo', 'Esperanto',           'https://eo.pronouns.page', false],
-    ['en', 'English',             'https://en.pronouns.page', true],
-    ['et', 'Eesti keel',          'https://et.pronouns.page', true],
-    ['fr', 'Français',            'https://pronoms.fr',       true],
-    ['gl', 'Galego',              'https://gl.pronouns.page', false],
-    ['it', 'Italiano',            'https://it.pronouns.page', false],
-    ['lad', 'Ladino (Djudezmo)',  'https://lad.pronouns.page', true],
-    ['nl', 'Nederlands',          'https://nl.pronouns.page', true],
-    ['no', 'Norsk (Bokmål)',      'https://no.pronouns.page', true],
-    ['pl', 'Polski',              'https://zaimki.pl',        true],
-    ['pt', 'Português',           'https://pt.pronouns.page', true],
-    ['ro', 'Română',              'https://ro.pronouns.page', true],
-    ['sv', 'Svenska',             'https://sv.pronouns.page', true],
-    ['tr', 'Türkçe',              'https://tr.pronouns.page', false],
-    ['vi', 'Tiếng Việt',          'https://vi.pronouns.page', true],
-    ['ar', 'اَلْعَرَبِيَّةُ',             'https://ar.pronouns.page', false],
-    ['ru', 'Русский',             'https://ru.pronouns.page', true],
-    ['ua', 'Українська',          'https://ua.pronouns.page', true],
-    ['ja', '日本語',               'https://ja.pronouns.page', true],
-    ['ko', '한국어',                'https://ko.pronouns.page', false],
-    ['yi', 'ייִדיש',               'https://yi.pronouns.page', false],
-    ['zh', '中文',                'https://zh.pronouns.page', true],
-    ['tok', 'toki pona',          'https://tok.pronouns.page', false],
-];