From 7e80189e2e07ef3b6d4f67fefe7f643d4fb1a85e Mon Sep 17 00:00:00 2001
From: Nimit Bhargava <nimitbhargava@gmail.com>
Date: Thu, 3 Dec 2020 12:01:00 +0530
Subject: [PATCH 1/4] fix: using ds-avatar instead of using user-avatar

---
 webapp/pages/profile/_id/_slug.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index c8c9e9886..c0473f1f6 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -112,7 +112,7 @@
               <template>
                 <ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
                   <a :href="link.url" target="_blank">
-                    <user-avatar :image="link.favicon" />
+                    <ds-avatar :image="link.favicon" :size="16" />
                     {{ link.username }}
                   </a>
                 </ds-space>

From 0585960313dc9535bccd34e09792f9716cae0925 Mon Sep 17 00:00:00 2001
From: Nimit Bhargava <nimitbhargava@gmail.com>
Date: Thu, 3 Dec 2020 12:41:38 +0530
Subject: [PATCH 2/4] feat: keeping same favicon implementation as in settings
 page

---
 webapp/pages/profile/_id/_slug.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index c0473f1f6..26b018cae 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -112,7 +112,7 @@
               <template>
                 <ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
                   <a :href="link.url" target="_blank">
-                    <ds-avatar :image="link.favicon" :size="16" />
+                    <img :src="link.favicon" alt="Link:" height="22" width="22" />
                     {{ link.username }}
                   </a>
                 </ds-space>

From 3be426c0d514e680e891fe710f24b7e51d52aa67 Mon Sep 17 00:00:00 2001
From: Nimit Bhargava <nimitbhargava@gmail.com>
Date: Sun, 6 Dec 2020 18:50:13 +0530
Subject: [PATCH 3/4] refactor: extracting social media to vue component

---
 webapp/components/SocialMedia/SocialMedia.vue | 42 +++++++++++++++++++
 webapp/pages/profile/_id/_slug.vue            | 31 ++------------
 2 files changed, 45 insertions(+), 28 deletions(-)
 create mode 100644 webapp/components/SocialMedia/SocialMedia.vue

diff --git a/webapp/components/SocialMedia/SocialMedia.vue b/webapp/components/SocialMedia/SocialMedia.vue
new file mode 100644
index 000000000..68e52fae1
--- /dev/null
+++ b/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>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 26b018cae..58011ea1c 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -103,23 +103,7 @@
           type="following"
           @fetchAllConnections="fetchAllConnections"
         />
-        <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>
+        <social-media :user-name="userName" :user="user" />
       </ds-flex-item>
 
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
@@ -243,6 +227,7 @@ import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
 import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
 import PostMutations from '~/graphql/PostMutations'
 import UpdateQuery from '~/components/utils/UpdateQuery'
+import SocialMedia from '~/components/SocialMedia/SocialMedia'
 
 const tabToFilterMapping = ({ tab, id }) => {
   return {
@@ -254,6 +239,7 @@ const tabToFilterMapping = ({ tab, id }) => {
 
 export default {
   components: {
+    SocialMedia,
     PostTeaser,
     HcFollowButton,
     HcCountTo,
@@ -292,17 +278,6 @@ export default {
     user() {
       return this.User ? this.User[0] : {}
     },
-    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 }
-      })
-    },
     userName() {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')

From a20a30de43e177d1ab85770859d2db792116bf08 Mon Sep 17 00:00:00 2001
From: Nimit Bhargava <nimitbhargava@gmail.com>
Date: Mon, 7 Dec 2020 16:25:46 +0530
Subject: [PATCH 4/4] refactor: moving element style to style tag

---
 webapp/components/SocialMedia/SocialMedia.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/webapp/components/SocialMedia/SocialMedia.vue b/webapp/components/SocialMedia/SocialMedia.vue
index 68e52fae1..9b494d314 100644
--- a/webapp/components/SocialMedia/SocialMedia.vue
+++ b/webapp/components/SocialMedia/SocialMedia.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
-    <base-card style="position: relative; height: auto;">
+    <base-card class="social-media-bc">
       <ds-space margin="x-small">
         <ds-text tag="h5" color="soft">
           {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
@@ -40,3 +40,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.social-media-bc {
+  position: relative;
+  height: auto;
+}
+</style>