From 9606002fdef54323eb3ea27988bafaec1d0bce1a Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Sun, 27 Jun 2021 12:16:14 +0200
Subject: [PATCH] [ad] add link to cake

---
 components/Icon.vue         | 11 ++++-
 components/ProfileLink.vue  | 68 +++----------------------------
 locale/de/translations.suml |  3 +-
 locale/en/translations.suml |  3 +-
 locale/es/translations.suml |  3 +-
 locale/fr/translations.suml |  3 +-
 locale/nl/translations.suml |  3 +-
 locale/pl/translations.suml |  3 +-
 locale/pt/translations.suml |  3 +-
 locale/ru/translations.suml |  3 +-
 locale/yi/translations.suml |  3 +-
 locale/zh/translations.suml |  3 +-
 plugins/link.js             | 80 +++++++++++++++++++++++++++++++++++++
 routes/profileEditor.vue    | 11 +++++
 14 files changed, 127 insertions(+), 73 deletions(-)
 create mode 100644 plugins/link.js

diff --git a/components/Icon.vue b/components/Icon.vue
index 73ae6aae..a362c460 100644
--- a/components/Icon.vue
+++ b/components/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-    <img v-if="icon.endsWith('.svg')" :src="`/img/${icon}`" :style="`height: ${size}em; width: ${size}em; display: inline;`" alt="" class="icon"/>
+    <img v-if="iconSource" :src="iconSource" :style="`height: ${size}em; width: ${size}em; display: inline;`" alt="" class="icon"/>
     <span v-else :class="['fa' + iconSet, 'fa-' + icon, 'fa-fw']" :style="`font-size: ${size}em`"></span>
 </template>
 
@@ -20,6 +20,15 @@
             iconSet() {
                 return this.valueParts.length > 1 ? this.valueParts[0] : this.set;
             },
+            iconSource() {
+                if (this.v.endsWith('.svg')) {
+                    return `/img/${this.v}`;
+                }
+                if (this.v.startsWith('https://')) {
+                    return this.v;
+                }
+                return null;
+            },
         },
     }
 </script>
diff --git a/components/ProfileLink.vue b/components/ProfileLink.vue
index 49865b98..e16b5825 100644
--- a/components/ProfileLink.vue
+++ b/components/ProfileLink.vue
@@ -1,58 +1,17 @@
 <template>
     <span>
-        <img v-if="provider.icon.startsWith('https://')" :src="provider.icon" class="icon"/>
-        <Icon v-else :v="provider.icon" :set="provider.iconSet || 'l'"/>
+        <Icon :v="niceLink.icon" :set="niceLink.iconSet || 'l'"/>
         <a :href="linkTrimmed" target="_blank" rel="noopener">
-            {{provider.text}}
+            {{niceLink.text}}
         </a>
     </span>
 </template>
 
 <script>
-    import {clearUrl} from "../src/helpers";
-
-    const LINK_PROVIDERS = {
-        twitter: {
-            regex: '^https?://(?:www.)?twitter.com/([^/]+)',
-            icon: 'twitter',
-            iconSet: 'b',
-        },
-        facebook: {
-            regex: '^https?://(?:www.)?facebook.com/([^/]+)',
-            icon: 'facebook',
-            iconSet: 'b',
-        },
-        instagram: {
-            regex: '^https?://(?:www.)?instagram.com/([^/]+)',
-            icon: 'instagram',
-            iconSet: 'b',
-        },
-        email: {
-            regex: '^mailto:([^/]+)',
-            icon: 'envelope',
-        },
-        reddit: {
-            regex: '^https?://(?:www.)?reddit.com/u/([^/]+)',
-            icon: 'reddit',
-            iconSet: 'b',
-        },
-        telegram: {
-            regex: '^https?://(?:www.)?t.me/([^/]+)',
-            icon: 'telegram',
-            iconSet: 'b',
-        },
-        paypal: {
-            regex: '^https?://(?:www.)?paypal.me/([^/]+)',
-            icon: 'paypal',
-            iconSet: 'b',
-        },
-        cake: {
-            regex: '^https://cake.avris.it/([bgoprc][A-E][0-6])$',
-            icon: 'https://cake.avris.it/favicon.png',
-        },
-    };
+    import link from '../plugins/link';
 
     export default {
+        mixins: [link],
         props: {
             link: { required: true },
         },
@@ -60,23 +19,8 @@
             linkTrimmed() {
                 return this.link.trim();
             },
-            provider() {
-                for (let name in LINK_PROVIDERS) {
-                    if (!LINK_PROVIDERS.hasOwnProperty(name)) { continue; }
-                    const provider = LINK_PROVIDERS[name];
-                    const m = this.linkTrimmed.match(provider.regex);
-                    if (m) {
-                        return {
-                            ...provider,
-                            text: m[1],
-                        };
-                    }
-                }
-
-                return {
-                    icon: 'globe-europe',
-                    text: clearUrl(this.linkTrimmed),
-                }
+            niceLink() {
+                return this.beautifyLink(this.linkTrimmed);
             },
         }
     };
diff --git a/locale/de/translations.suml b/locale/de/translations.suml
index 86832905..c0be5699 100644
--- a/locale/de/translations.suml
+++ b/locale/de/translations.suml
@@ -387,6 +387,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: 'Links'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Spalte'
 
     list: 'Deine Karten'
@@ -430,7 +431,7 @@ crud:
 footer:
     # TODO source: 'Der Quellcode ist {https://gitlab.com/Avris/Zaimki=veröffentlicht} unter der {https://mit.avris.it=MIT} Lizenz.'
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Kontakt, Social Media, Support'
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index 4b6783a8..50855009 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -465,6 +465,7 @@ profile:
     flagsCustom: 'Upload custom flags'
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'
     links: 'Links'
+    linksCake: 'We recommend linking to'
     column: 'Column'
 
     header: 'Cards'
@@ -506,7 +507,7 @@ crud:
 
 footer:
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Contact, social media, support'
diff --git a/locale/es/translations.suml b/locale/es/translations.suml
index 5abc929d..b7c90476 100644
--- a/locale/es/translations.suml
+++ b/locale/es/translations.suml
@@ -396,6 +396,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: 'Enlaces'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Columna'
 
     list: 'Tus tarjetas'
@@ -439,7 +440,7 @@ crud:
 footer:
     # TODO source: 'El código fuente está {https://gitlab.com/Avris/Zaimki=publicado} bajo la licencia {https://mit.avris.it=MIT}.'
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.es=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Contacto, redes sociales, apoyo'
diff --git a/locale/fr/translations.suml b/locale/fr/translations.suml
index 7a926728..40d13409 100644
--- a/locale/fr/translations.suml
+++ b/locale/fr/translations.suml
@@ -384,6 +384,7 @@ profile:
     flags: 'Flags'
     flagsInfo: 'Drag & drop your pride flags into this frame.'
     links: 'Links'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Column'
 
     list: 'Votre carte'
@@ -420,7 +421,7 @@ footer:
     # old version 'Code source a {https://gitlab.com/Avris/Zaimki=published} sous la {https://mit.avris.it=MIT} license.'
     # TODO
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Contact, médias sociaux, soutien'
diff --git a/locale/nl/translations.suml b/locale/nl/translations.suml
index 56f9a0fa..4928bdeb 100644
--- a/locale/nl/translations.suml
+++ b/locale/nl/translations.suml
@@ -390,6 +390,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: 'Links'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Kolom'
 
     list: 'Jouw kaarten'
@@ -433,7 +434,7 @@ crud:
 footer:
     # TODO source: 'De broncode wordt {https://gitlab.com/Avris/Zaimki=gepubliceerd} onder de {https://mit.avris.it=MIT}-licentie.'
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.nl=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Contact, sociale media, support'
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index bc3a71d1..fe5c5b30 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -949,6 +949,7 @@ profile:
     flagsCustom: 'Dodaj inne flagi'
     flagsCustomWarning: 'Ta flaga została wgrana przez osobę użytkującą. Ekipa zaimki.pl nie jest za nią odpowiedzialna.'
     links: 'Linki'
+    linksCake: 'Polecamy dodać link do'
     column: 'Kolumna'
 
     header: 'Wizytówki'
@@ -1038,7 +1039,7 @@ crud:
 footer:
     source: 'Kod jest {https://gitlab.com/Avris/Zaimki=udostępniony} na licencji {https://mit.avris.it=MIT}.'
     license: >
-        {https://gitlab.com/Avris/Zaimki=Kod źródłowy} jest udostępniony na licencji {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Kod źródłowy} jest udostępniony na licencji {https://mit.avris.it=MIT} [mit.svg].<br/>
         Treści są udostępnione na licencji {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pl=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Kontakt, social media, wsparcie'
diff --git a/locale/pt/translations.suml b/locale/pt/translations.suml
index 869e3797..499f6d73 100644
--- a/locale/pt/translations.suml
+++ b/locale/pt/translations.suml
@@ -394,6 +394,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: 'Enlaces'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Coluna'
 
     list: 'Os cartões'
@@ -437,7 +438,7 @@ crud:
 footer:
     # TODO source: 'O código fonte está {https://gitlab.com/Avris/Zaimki=publicado} baixo da licença {https://mit.avris.it=MIT}.'
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pt=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Contato, redes sociais, apoio'
diff --git a/locale/ru/translations.suml b/locale/ru/translations.suml
index 3fa20bc7..badd5933 100644
--- a/locale/ru/translations.suml
+++ b/locale/ru/translations.suml
@@ -929,6 +929,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: 'Linki'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Kolumna'
 
     list: 'Twoje wizytówki'
@@ -1009,7 +1010,7 @@ crud:
 
 footer:
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.ru=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Kontakt, social media, wsparcie'
diff --git a/locale/yi/translations.suml b/locale/yi/translations.suml
index 1d92a808..dca14cb6 100644
--- a/locale/yi/translations.suml
+++ b/locale/yi/translations.suml
@@ -408,6 +408,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: 'פֿאַרבינדונגען'
+    linksCake: 'We recommend linking to'  # TODO
     column: 'Column'
 
     list: 'דײַנע‎ װיזיט־⁠קאַרטלעך'
@@ -450,7 +451,7 @@ crud:
 
 footer:
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.yi=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: 'Contact, social media, support'
diff --git a/locale/zh/translations.suml b/locale/zh/translations.suml
index 305b190b..c0cbf85c 100644
--- a/locale/zh/translations.suml
+++ b/locale/zh/translations.suml
@@ -375,6 +375,7 @@ profile:
     flagsCustom: 'Upload custom flags'  # TODO
     flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'  # TODO
     links: '鏈接'
+    linksCake: 'We recommend linking to'  # TODO
     column: '列'
 
     list: '你的卡'
@@ -418,7 +419,7 @@ crud:
 footer:
     # TODO source: '源代碼{https://gitlab.com/Avris/Zaimki=以}{https://mit.avris.it=MIT}許可發布。'
     license: >
-        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [b:mit.svg].<br/>
+        {https://gitlab.com/Avris/Zaimki=Source code} is licensed under {https://mit.avris.it=MIT} [mit.svg].<br/>
         Content is licensed under {https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh=CC BY-NC-SA 4.0}
         [b:creative-commons][b:creative-commons-by][b:creative-commons-nc-eu][b:creative-commons-sa].
     links: '通訊錄, 社交媒體, 支持'
diff --git a/plugins/link.js b/plugins/link.js
new file mode 100644
index 00000000..1e1d2808
--- /dev/null
+++ b/plugins/link.js
@@ -0,0 +1,80 @@
+import {clearUrl} from "../src/helpers";
+
+const LINK_PROVIDERS = {
+    twitter: {
+        regex: '^https?://(?:www.)?twitter.com/([^/]+)',
+        icon: 'twitter',
+        iconSet: 'b',
+    },
+    facebook: {
+        regex: '^https?://(?:www.)?facebook.com/([^/]+)',
+        icon: 'facebook',
+        iconSet: 'b',
+    },
+    instagram: {
+        regex: '^https?://(?:www.)?instagram.com/([^/]+)',
+        icon: 'instagram',
+        iconSet: 'b',
+    },
+    email: {
+        regex: '^mailto:([^/]+)',
+        icon: 'envelope',
+    },
+    reddit: {
+        regex: '^https?://(?:www.)?reddit.com/u/([^/]+)',
+        icon: 'reddit',
+        iconSet: 'b',
+    },
+    telegram: {
+        regex: '^https?://(?:www.)?t.me/([^/]+)',
+        icon: 'telegram',
+        iconSet: 'b',
+    },
+    paypal: {
+        regex: '^https?://(?:www.)?paypal.me/([^/]+)',
+        icon: 'paypal',
+        iconSet: 'b',
+    },
+    discord: {
+        regex: '^https?://(?:www.)?discord.gg/([^/]+)',
+        icon: 'discord',
+        iconSet: 'b',
+    },
+    cake: {
+        regex: '^https://cake.avris.it/([bgoprc][A-E][0-6])$',
+        icon: 'https://cake.avris.it/favicon.png',
+        homepage: 'https://cake.avris.it',
+        name: 'Attraction Layer Cake',
+    },
+};
+
+export default {
+    methods: {
+        linkProviders() {
+            return LINK_PROVIDERS;
+        },
+        recommendedLinkProviders() {
+            return {
+                cake: LINK_PROVIDERS.cake,
+            };
+        },
+        beautifyLink(link) {
+            for (let name in LINK_PROVIDERS) {
+                if (!LINK_PROVIDERS.hasOwnProperty(name)) { continue; }
+                const provider = LINK_PROVIDERS[name];
+                const m = link.match(provider.regex);
+                if (m) {
+                    return {
+                        ...provider,
+                        text: m[1],
+                    };
+                }
+            }
+
+            return {
+                icon: 'globe-europe',
+                text: clearUrl(link),
+            }
+        }
+    },
+}
diff --git a/routes/profileEditor.vue b/routes/profileEditor.vue
index 0c7597ad..675a8ab6 100644
--- a/routes/profileEditor.vue
+++ b/routes/profileEditor.vue
@@ -115,6 +115,15 @@
                 <ListInput v-model="links" v-slot="s">
                     <input v-model="s.val" type="url" class="form-control" @keyup="s.update(s.val)" required/>
                 </ListInput>
+                <p class="small text-muted mb-0">
+                    <Icon v="ad"/>
+                    <T>profile.linksCake</T>
+                    <a v-for="provider in recommendedLinkProviders()" :href="provider.homepage" target="_blank" rel="noopener">
+                        <Icon :v="provider.icon" :set="provider.iconSet || 'l'"/>
+                        {{ provider.name }}
+                    </a>
+                    😉
+                </p>
             </div>
 
             <div class="form-group">
@@ -159,6 +168,7 @@
     import { pronouns } from "~/src/data";
     import { buildPronoun } from "../src/buildPronoun";
     import config from '../data/config.suml';
+    import link from '../plugins/link';
 
     const defaultWords = config.profile.defaultWords.map(c => buildList(function* () {
         for (let word of c) {
@@ -167,6 +177,7 @@
     }))
 
     export default {
+        mixins: [link],
         data() {
             return {
                 saving: false,