#50 pronouns cards - more link providers

components/ProfileLink.vue

@@ -1,9 +1,9 @@
 <template>
     <span>
-        <img v-if="icon.startsWith('https://')" :src="icon" class="icon"/>
+        <img v-if="provider.icon.startsWith('https://')" :src="provider.icon" class="icon"/>
-        <Icon v-else :v="icon" :set="iconSet"/>
+        <Icon v-else :v="provider.icon" :set="provider.iconSet || 'l'"/>
         <a :href="link" target="_blank" rel="noopener">
-            {{text}}
+            {{provider.text}}
         </a>
     </span>
 </template>
@@ -11,47 +11,59 @@
 <script>
     import {clearUrl} from "../src/helpers";
 
-    const REGEX_TWITTER = '^https://twitter.com/([^/]+)';
+    const LINK_PROVIDERS = {
-    const REGEX_CAKE = '^https://cake.avris.it/([bgoprc][A-E][0-6])$';
+        twitter: {
+            regex: '^https://twitter.com/([^/]+)',
+            icon: 'twitter',
+            iconSet: 'b',
+        },
+        email: {
+            regex: '^mailto:([^/]+)',
+            icon: 'envelope',
+        },
+        reddit: {
+            regex: '^https://reddit.com/u/([^/]+)',
+            icon: 'reddit',
+            iconSet: 'b',
+        },
+        telegram: {
+            regex: '^https://t.me/([^/]+)',
+            icon: 'telegram',
+            iconSet: 'b',
+        },
+        paypal: {
+            regex: '^https://paypal.me/([^/]+)',
+            icon: 'paypal',
+            iconSet: 'b',
+        },
+        cake: {
+            regex: '^https://cake.avris.it/([bgoprc][A-E][0-6])$',
+            icon: 'https://cake.avris.it/favicon.png',
+        },
+    };
 
     export default {
         props: {
             link: { required: true },
         },
         computed: {
-            type() {
+            provider() {
-                if (this.link.match(REGEX_TWITTER)) {
+                for (let name in LINK_PROVIDERS) {
-                    return 'twitter';
+                    if (!LINK_PROVIDERS.hasOwnProperty(name)) { continue; }
+                    const provider = LINK_PROVIDERS[name];
+                    const m = this.link.match(provider.regex);
+                    if (m) {
+                        return {
+                            ...provider,
+                            text: m[1],
+                        };
+                    }
                 }
 
-                if (this.link.match(REGEX_CAKE)) {
-                    return 'cake';
-                }
-
-                return 'other';
-            },
-            icon() {
                 return {
-                    twitter: 'twitter',
+                    icon: 'globe-europe',
-                    cake: 'https://cake.avris.it/favicon.png',
+                    text: clearUrl(this.link),
-                    other: 'globe-europe',
-                }[this.type];
-            },
-            iconSet() {
-                return {
-                    twitter: 'b',
-                }[this.type] || 'l';
-            },
-            text() {
-                if (this.type === 'twitter') {
-                    return this.link.match(REGEX_TWITTER)[1];
                 }
-
-                if (this.type === 'cake') {
-                    return this.link.match(REGEX_CAKE)[1];
-                }
-
-                return clearUrl(this.link);
             },
         }
     };

routes/profile.vue

@@ -23,18 +23,18 @@
             </div>
         </div>
 
-        <section v-if="profile.description.trim().length">
+        <section v-if="profile.age ||profile.description.trim().length">
             <p v-for="line in profile.description.split('\n')" class="mb-1">
                 {{ line }}
             </p>
+            <p v-if="profile.age">
+                <Icon v="birthday-cake"/>
+                {{ profile.age }}
+            </p>
         </section>
 
-        <section v-if="profile.age || Object.keys(profile.links).length">
+        <section v-if="Object.keys(profile.links).length">
             <ul class="list-inline">
-                <li v-if="profile.age" class="list-inline-item">
-                    <Icon v="birthday-cake"/>
-                    {{ profile.age }}
-                </li>
                 <li v-for="link in profile.links" class="list-inline-item pr-2">
                     <ProfileLink :link="link"/>
                 </li>