#50 [card] pronoun cards - support cake links, ui improvements

components/ProfileLink.vue

@@ -1,6 +1,7 @@
 <template>
     <span>
-        <Icon :v="icon" :set="iconSet"/>
+        <img v-if="icon.startsWith('https://')" :src="icon" class="icon"/>
+        <Icon v-else :v="icon" :set="iconSet"/>
         <a :href="link" target="_blank" rel="noopener">
             {{text}}
         </a>
@@ -11,6 +12,7 @@
     import {clearUrl} from "../src/helpers";
 
     const REGEX_TWITTER = '^https://twitter.com/([^/]+)';
+    const REGEX_CAKE = '^https://cake.avris.it/([bgoprc][A-E][0-6])$';
 
     export default {
         props: {
@@ -22,11 +24,16 @@
                     return 'twitter';
                 }
 
+                if (this.link.match(REGEX_CAKE)) {
+                    return 'cake';
+                }
+
                 return 'other';
             },
             icon() {
                 return {
                     twitter: 'twitter',
+                    cake: 'https://cake.avris.it/favicon.png',
                     other: 'globe-europe',
                 }[this.type];
             },
@@ -40,8 +47,18 @@
                     return this.link.match(REGEX_TWITTER)[1];
                 }
 
+                if (this.type === 'cake') {
+                    return this.link.match(REGEX_CAKE)[1];
+                }
+
                 return clearUrl(this.link);
             },
         }
     };
 </script>
+
+<style lang="scss" scoped>
+    .icon {
+        height: 1em;
+    }
+</style>

components/ProfileOverview.vue

@@ -3,17 +3,20 @@
         {{ locales[locale].name }}
         <span v-if="profile">
             <LocaleLink :locale="locale" :link="`/@${profile.username}`" class="badge badge-primary">
+                <Icon v="id-card"/>
                 <T>profile.show</T>
             </LocaleLink>
             <LocaleLink :locale="locale" link="/TODO" class="badge badge-light border">
+                <Icon v="edit"/>
                 <T>profile.edit</T>
             </LocaleLink>
-            <LocaleLink :locale="locale" link="/TODOS" class="badge badge-light border border-danger">
+            <LocaleLink :locale="locale" link="/TODOS" class="badge badge-light">
-                <T>profile.delete</T>
+                <Icon v="trash-alt"/>
             </LocaleLink>
         </span>
         <span v-else>
             <LocaleLink :locale="locale" link="/TODO" class="badge badge-light border">
+                <Icon v="plus-circle"/>
                 <T>profile.init</T>
             </LocaleLink>
         </span>

routes/profile.vue

@@ -27,7 +27,7 @@
                         <Icon v="birthday-cake"/>
                         {{ profile.age }}
                     </li>
-                    <li v-for="link in profile.links" class="list-inline-item">
+                    <li v-for="link in profile.links" class="list-inline-item pr-2">
                         <ProfileLink :link="link"/>
                     </li>
                 </ul>
@@ -35,7 +35,7 @@
 
             <section v-if="Object.keys(profile.flags).length">
                 <ul class="list-inline">
-                    <li v-for="(name, flag) in profile.flags" class="list-inline-item">
+                    <li v-for="(name, flag) in profile.flags" class="list-inline-item pr-2">
                         <Flag :name="name" :src="`/flags/${flag}.png`"/>
                     </li>
                 </ul>