refactor: extracting social media to vue component

webapp/components/SocialMedia/SocialMedia.vue

@@ -0,0 +1,42 @@
+<template>
+  <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
+    <base-card style="position: relative; height: auto;">
+      <ds-space margin="x-small">
+        <ds-text tag="h5" color="soft">
+          {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
+        </ds-text>
+        <template>
+          <ds-space v-for="link in socialMediaLinks()" :key="link.username" margin="x-small">
+            <a :href="link.url" target="_blank">
+              <img :src="link.favicon" alt="Link:" height="22" width="22" />
+              {{ link.username }}
+            </a>
+          </ds-space>
+        </template>
+      </ds-space>
+    </base-card>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  name: 'social-media',
+  props: {
+    userName: {},
+    user: {},
+  },
+  methods: {
+    socialMediaLinks() {
+      const { socialMedia = [] } = this.user
+      return socialMedia.map((socialMedia) => {
+        const { url } = socialMedia
+        const matches = url.match(/^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g)
+        const [domain] = matches || []
+        const favicon = domain ? `${domain}/favicon.ico` : null
+        const username = url.split('/').pop()
+        return { url, username, favicon }
+      })
+    },
+  },
+}
+</script>

webapp/pages/profile/_id/_slug.vue

@@ -87,7 +87,7 @@
           </template>
         </base-card>
         <ds-space />
-        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
+        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">
           {{ $t('profile.network.title') }}
         </ds-heading>
         <follow-list
@@ -104,7 +104,7 @@
           @fetchAllConnections="fetchAllConnections"
         />
         <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
-          <base-card style="position: relative; height: auto">
+          <base-card style="position: relative; height: auto;">
             <ds-space margin="x-small">
               <ds-text tag="h5" color="soft">
                 {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?