From b32573138b7607b8d9070100fb792f0241a4ba80 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <example@example.com>
Date: Sun, 11 Feb 2018 23:12:05 +0900
Subject: [PATCH 01/10] Add who-to-follow-panel

---
 src/App.js                                    |   7 +-
 src/App.vue                                   |   1 +
 .../who_to_follow_panel.js                    | 179 ++++++++++++++++++
 .../who_to_follow_panel.vue                   |  37 ++++
 src/main.js                                   |   3 +-
 static/config.json                            |   1 +
 6 files changed, 225 insertions(+), 3 deletions(-)
 create mode 100644 src/components/who_to_follow_panel/who_to_follow_panel.js
 create mode 100644 src/components/who_to_follow_panel/who_to_follow_panel.vue

diff --git a/src/App.js b/src/App.js
index e9248967..a052e058 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
 import UserFinder from './components/user_finder/user_finder.vue'
+import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 
@@ -12,8 +13,9 @@ export default {
     NavPanel,
     Notifications,
     UserFinder,
-    ChatPanel,
-    InstanceSpecificPanel
+    WhoToFollowPanel,
+    InstanceSpecificPanel,
+    ChatPanel
   },
   data: () => ({
     mobileActivePanel: 'timeline'
@@ -27,6 +29,7 @@ export default {
     style () { return { 'background-image': `url(${this.background})` } },
     sitename () { return this.$store.state.config.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
+    showWhoToFollowPanel () { return this.$store.state.config.showWhoToFollowPanel },
     showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel }
   },
   methods: {
diff --git a/src/App.vue b/src/App.vue
index 2a910bc0..1d8dd6c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@
               <user-panel></user-panel>
               <nav-panel></nav-panel>
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
+              <who-to-follow-panel v-if="currentUser && showWhoToFollowPanel"></who-to-follow-panel>
               <chat-panel v-if="currentUser && chat"></chat-panel>
               <notifications v-if="currentUser"></notifications>
             </div>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
new file mode 100644
index 00000000..49653c81
--- /dev/null
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -0,0 +1,179 @@
+const WhoToFollowPanel = {
+  data: () => ({
+    img1: '/images/avi.png',
+    link1: null,
+    name1: '',
+    img2: '/images/avi.png',
+    link2: null,
+    name2: '',
+    img3: '/images/avi.png',
+    link3: null,
+    name3: ''
+  }),
+  computed: {
+    user: function () {
+      return this.$store.state.users.currentUser.screen_name
+    },
+    moreUrl: function () {
+      var host = window.location.hostname
+      var user = this.user
+      var url = 'https://vinayaka.distsn.org/?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+      return url
+    },
+    showWhoToFollowPanel () {
+      return this.$store.state.config.showWhoToFollowPanel
+    }
+  },
+  watch: {
+    user: function (user, oldUser) {
+      function showUsers (panel, users, aHost, aUser) {
+        var cn
+        var index = 0
+        var random = Math.floor(Math.random() * 10)
+        for (cn = random; cn < users.length; cn = cn + 10) {
+          var user
+          user = users[cn]
+          var host
+          host = user.host
+          var username
+          if (user.username) {
+            username = user.username
+          } else {
+            username = user.user
+          }
+          var img
+          if (user.avatar) {
+            img = user.avatar
+          } else {
+            img = '/images/avi.png'
+          }
+          var link = 'https://' + host + '/users/' + username
+          var name = username + '@' + host
+          if ((!user.following) &&
+            (!user.blacklisted) &&
+            (!(host === aHost && username === aUser))) {
+            if (index === 0) {
+              panel.img1 = img
+              panel.link1 = link
+              panel.name1 = name
+            } else if (index === 1) {
+              panel.img2 = img
+              panel.link2 = link
+              panel.name2 = name
+            } else if (index === 2) {
+              panel.img3 = img
+              panel.link3 = link
+              panel.name3 = name
+            }
+            index = index + 1
+            if (index > 2) {
+              break
+            }
+          }
+        }
+      }
+      function getUsers (panel) {
+        var user = panel.$store.state.users.currentUser.screen_name
+        if (user) {
+          panel.name1 = 'Loading...'
+          panel.name2 = 'Loading...'
+          panel.name3 = 'Loading...'
+          var host = window.location.hostname
+          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+          window.fetch(url, {mode: 'cors'}).then(function (response) {
+            if (response.ok) {
+              return response.json()
+            } else {
+              panel.name1 = ''
+              panel.name2 = ''
+              panel.name3 = ''
+            }
+          }).then(function (users) {
+            showUsers(panel, users, host, user)
+          })
+        }
+      }
+      if (this.showWhoToFollowPanel) {
+        getUsers(this)
+      }
+    }
+  },
+  mounted:
+    function () {
+      function showUsers (panel, users, aHost, aUser) {
+        var cn
+        var index = 0
+        var random = Math.floor(Math.random() * 10)
+        for (cn = random; cn < users.length; cn = cn + 10) {
+          var user
+          user = users[cn]
+          var host
+          host = user.host
+          var username
+          if (user.username) {
+            username = user.username
+          } else {
+            username = user.user
+          }
+          var img
+          if (user.avatar) {
+            img = user.avatar
+          } else {
+            img = '/images/avi.png'
+          }
+          var link = 'https://' + host + '/users/' + username
+          var name = username + '@' + host
+          if ((!user.following) &&
+            (!user.blacklisted) &&
+            (!(host === aHost && username === aUser))) {
+            if (index === 0) {
+              panel.img1 = img
+              panel.link1 = link
+              panel.name1 = name
+            } else if (index === 1) {
+              panel.img2 = img
+              panel.link2 = link
+              panel.name2 = name
+            } else if (index === 2) {
+              panel.img3 = img
+              panel.link3 = link
+              panel.name3 = name
+            }
+            index = index + 1
+            if (index > 2) {
+              break
+            }
+          }
+        }
+      }
+      function getUsers (panel) {
+        var user = panel.user
+        if (user) {
+          panel.name1 = 'Loading...'
+          panel.name2 = 'Loading...'
+          panel.name3 = 'Loading...'
+          var host = window.location.hostname
+          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+          window.fetch(url, {mode: 'cors'}).then(function (response) {
+            if (response.ok) {
+              return response.json()
+            } else {
+              panel.name1 = ''
+              panel.name2 = ''
+              panel.name3 = ''
+            }
+          }).then(function (users) {
+            showUsers(panel, users, host, user)
+          })
+        }
+      }
+      if (this.showWhoToFollowPanel) {
+        getUsers(this)
+      }
+    }
+}
+
+export default WhoToFollowPanel
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
new file mode 100644
index 00000000..fff966ab
--- /dev/null
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="who-to-follow-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          Who to follow
+        </div>
+      </div>
+      <div class="panel-body who-to-follow">
+        <p>
+          <img v-bind:src="img1"/> <a v-bind:href="link1" target="_blank">{{ name1 }}</a><br>
+          <img v-bind:src="img2"/> <a v-bind:href="link2" target="_blank">{{ name2 }}</a><br>
+          <img v-bind:src="img3"/> <a v-bind:href="link3" target="_blank">{{ name3 }}</a><br>
+          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./who_to_follow_panel.js" ></script>
+
+<style lang="scss">
+  .who-to-follow * {
+    vertical-align: middle;
+  }
+  .who-to-follow img {
+    width: 32px;
+    height: 32px;
+  }
+  .who-to-follow p {
+    line-height: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/src/main.js b/src/main.js
index 6f8c00f0..5c74da3a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,10 +88,11 @@ window.fetch('/api/statusnet/config.json')
 window.fetch('/static/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {theme, background, logo, showInstanceSpecificPanel} = data
+    const {theme, background, logo, showWhoToFollowPanel, showInstanceSpecificPanel} = data
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
+    store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
     store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
     if (data['chatDisabled']) {
       store.dispatch('disableChat')
diff --git a/static/config.json b/static/config.json
index 6c9c27da..23fdf8a8 100644
--- a/static/config.json
+++ b/static/config.json
@@ -4,5 +4,6 @@
   "logo": "/static/logo.png",
   "defaultPath": "/main/all",
   "chatDisabled": false,
+  "showWhoToFollowPanel": false,
   "showInstanceSpecificPanel": false
 }

From 96426425b8a20a1ff270e2b1f289528aa8e4dc8f Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 15:57:11 +0900
Subject: [PATCH 02/10] refactoring

---
 .../who_to_follow_panel.js                    | 210 ++++++------------
 1 file changed, 72 insertions(+), 138 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 49653c81..e3f06ab6 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -1,3 +1,73 @@
+function showWhoToFollow (panel, users, aHost, aUser) {
+  var cn
+  var index = 0
+  var random = Math.floor(Math.random() * 10)
+  for (cn = random; cn < users.length; cn = cn + 10) {
+    var user
+    user = users[cn]
+    var host
+    host = user.host
+    var username
+    if (user.username) {
+      username = user.username
+    } else {
+      username = user.user
+    }
+    var img
+    if (user.avatar) {
+      img = user.avatar
+    } else {
+      img = '/images/avi.png'
+    }
+    var link = 'https://' + host + '/users/' + username
+    var name = username + '@' + host
+    if ((!user.following) &&
+      (!user.blacklisted) &&
+      (!(host === aHost && username === aUser))) {
+      if (index === 0) {
+        panel.img1 = img
+        panel.link1 = link
+        panel.name1 = name
+      } else if (index === 1) {
+        panel.img2 = img
+        panel.link2 = link
+        panel.name2 = name
+      } else if (index === 2) {
+        panel.img3 = img
+        panel.link3 = link
+        panel.name3 = name
+      }
+      index = index + 1
+      if (index > 2) {
+        break
+      }
+    }
+  }
+}
+
+function getWhoToFollow (panel) {
+  var user = panel.$store.state.users.currentUser.screen_name
+  if (user) {
+    panel.name1 = 'Loading...'
+    panel.name2 = 'Loading...'
+    panel.name3 = 'Loading...'
+    var host = window.location.hostname
+    var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+      encodeURIComponent(host) + '+' + encodeURIComponent(user)
+    window.fetch(url, {mode: 'cors'}).then(function (response) {
+      if (response.ok) {
+        return response.json()
+      } else {
+        panel.name1 = ''
+        panel.name2 = ''
+        panel.name3 = ''
+      }
+    }).then(function (users) {
+      showWhoToFollow(panel, users, host, user)
+    })
+  }
+}
+
 const WhoToFollowPanel = {
   data: () => ({
     img1: '/images/avi.png',
@@ -27,151 +97,15 @@ const WhoToFollowPanel = {
   },
   watch: {
     user: function (user, oldUser) {
-      function showUsers (panel, users, aHost, aUser) {
-        var cn
-        var index = 0
-        var random = Math.floor(Math.random() * 10)
-        for (cn = random; cn < users.length; cn = cn + 10) {
-          var user
-          user = users[cn]
-          var host
-          host = user.host
-          var username
-          if (user.username) {
-            username = user.username
-          } else {
-            username = user.user
-          }
-          var img
-          if (user.avatar) {
-            img = user.avatar
-          } else {
-            img = '/images/avi.png'
-          }
-          var link = 'https://' + host + '/users/' + username
-          var name = username + '@' + host
-          if ((!user.following) &&
-            (!user.blacklisted) &&
-            (!(host === aHost && username === aUser))) {
-            if (index === 0) {
-              panel.img1 = img
-              panel.link1 = link
-              panel.name1 = name
-            } else if (index === 1) {
-              panel.img2 = img
-              panel.link2 = link
-              panel.name2 = name
-            } else if (index === 2) {
-              panel.img3 = img
-              panel.link3 = link
-              panel.name3 = name
-            }
-            index = index + 1
-            if (index > 2) {
-              break
-            }
-          }
-        }
-      }
-      function getUsers (panel) {
-        var user = panel.$store.state.users.currentUser.screen_name
-        if (user) {
-          panel.name1 = 'Loading...'
-          panel.name2 = 'Loading...'
-          panel.name3 = 'Loading...'
-          var host = window.location.hostname
-          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
-            encodeURIComponent(host) + '+' + encodeURIComponent(user)
-          window.fetch(url, {mode: 'cors'}).then(function (response) {
-            if (response.ok) {
-              return response.json()
-            } else {
-              panel.name1 = ''
-              panel.name2 = ''
-              panel.name3 = ''
-            }
-          }).then(function (users) {
-            showUsers(panel, users, host, user)
-          })
-        }
-      }
       if (this.showWhoToFollowPanel) {
-        getUsers(this)
+        getWhoToFollow(this)
       }
     }
   },
   mounted:
     function () {
-      function showUsers (panel, users, aHost, aUser) {
-        var cn
-        var index = 0
-        var random = Math.floor(Math.random() * 10)
-        for (cn = random; cn < users.length; cn = cn + 10) {
-          var user
-          user = users[cn]
-          var host
-          host = user.host
-          var username
-          if (user.username) {
-            username = user.username
-          } else {
-            username = user.user
-          }
-          var img
-          if (user.avatar) {
-            img = user.avatar
-          } else {
-            img = '/images/avi.png'
-          }
-          var link = 'https://' + host + '/users/' + username
-          var name = username + '@' + host
-          if ((!user.following) &&
-            (!user.blacklisted) &&
-            (!(host === aHost && username === aUser))) {
-            if (index === 0) {
-              panel.img1 = img
-              panel.link1 = link
-              panel.name1 = name
-            } else if (index === 1) {
-              panel.img2 = img
-              panel.link2 = link
-              panel.name2 = name
-            } else if (index === 2) {
-              panel.img3 = img
-              panel.link3 = link
-              panel.name3 = name
-            }
-            index = index + 1
-            if (index > 2) {
-              break
-            }
-          }
-        }
-      }
-      function getUsers (panel) {
-        var user = panel.user
-        if (user) {
-          panel.name1 = 'Loading...'
-          panel.name2 = 'Loading...'
-          panel.name3 = 'Loading...'
-          var host = window.location.hostname
-          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
-            encodeURIComponent(host) + '+' + encodeURIComponent(user)
-          window.fetch(url, {mode: 'cors'}).then(function (response) {
-            if (response.ok) {
-              return response.json()
-            } else {
-              panel.name1 = ''
-              panel.name2 = ''
-              panel.name3 = ''
-            }
-          }).then(function (users) {
-            showUsers(panel, users, host, user)
-          })
-        }
-      }
       if (this.showWhoToFollowPanel) {
-        getUsers(this)
+        getWhoToFollow(this)
       }
     }
 }

From caad81800963730f9d3ef1325bf5f55dd29fde9a Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 16:56:47 +0900
Subject: [PATCH 03/10] using internal link to users

---
 .../who_to_follow_panel.js                    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index e3f06ab6..2d376ef9 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -28,14 +28,35 @@ function showWhoToFollow (panel, users, aHost, aUser) {
         panel.img1 = img
         panel.link1 = link
         panel.name1 = name
+        this.$store.state.api.backendInteractor.externalProfile(name)
+          .then((externalUser) => {
+            if (!externalUser.error) {
+              this.$store.commit('addNewUsers', [externalUser])
+              panel.link1 = 'https://' + host + '/users/' + externalUser.id
+             }
+           })
       } else if (index === 1) {
         panel.img2 = img
         panel.link2 = link
         panel.name2 = name
+        this.$store.state.api.backendInteractor.externalProfile(name)
+          .then((externalUser) => {
+            if (!externalUser.error) {
+              this.$store.commit('addNewUsers', [externalUser])
+              panel.link2 = 'https://' + host + '/users/' + externalUser.id
+             }
+           })
       } else if (index === 2) {
         panel.img3 = img
         panel.link3 = link
         panel.name3 = name
+        this.$store.state.api.backendInteractor.externalProfile(name)
+          .then((externalUser) => {
+            if (!externalUser.error) {
+              this.$store.commit('addNewUsers', [externalUser])
+              panel.link3 = 'https://' + host + '/users/' + externalUser.id
+             }
+           })
       }
       index = index + 1
       if (index > 2) {

From 5a97cfb9599fb33b15f878869b940444234e3534 Mon Sep 17 00:00:00 2001
From: hakabahitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 17:45:35 +0900
Subject: [PATCH 04/10] who-to-follow-panel using internal user link

---
 .../who_to_follow_panel.js                    | 34 ++++++++-----------
 .../who_to_follow_panel.vue                   |  6 ++--
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 2d376ef9..43cd3e2d 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -19,44 +19,40 @@ function showWhoToFollow (panel, users, aHost, aUser) {
     } else {
       img = '/images/avi.png'
     }
-    var link = 'https://' + host + '/users/' + username
     var name = username + '@' + host
     if ((!user.following) &&
       (!user.blacklisted) &&
       (!(host === aHost && username === aUser))) {
       if (index === 0) {
         panel.img1 = img
-        panel.link1 = link
         panel.name1 = name
-        this.$store.state.api.backendInteractor.externalProfile(name)
+        panel.$store.state.api.backendInteractor.externalProfile(name)
           .then((externalUser) => {
             if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              panel.link1 = 'https://' + host + '/users/' + externalUser.id
-             }
-           })
+              panel.$store.commit('addNewUsers', [externalUser])
+              panel.link1 = '/users/' + externalUser.id
+            }
+          })
       } else if (index === 1) {
         panel.img2 = img
-        panel.link2 = link
         panel.name2 = name
-        this.$store.state.api.backendInteractor.externalProfile(name)
+        panel.$store.state.api.backendInteractor.externalProfile(name)
           .then((externalUser) => {
             if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              panel.link2 = 'https://' + host + '/users/' + externalUser.id
-             }
-           })
+              panel.$store.commit('addNewUsers', [externalUser])
+              panel.link2 = '/users/' + externalUser.id
+            }
+          })
       } else if (index === 2) {
         panel.img3 = img
-        panel.link3 = link
         panel.name3 = name
-        this.$store.state.api.backendInteractor.externalProfile(name)
+        panel.$store.state.api.backendInteractor.externalProfile(name)
           .then((externalUser) => {
             if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              panel.link3 = 'https://' + host + '/users/' + externalUser.id
-             }
-           })
+              panel.$store.commit('addNewUsers', [externalUser])
+              panel.link3 = '/users/' + externalUser.id
+            }
+          })
       }
       index = index + 1
       if (index > 2) {
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index fff966ab..56adbf41 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/> <a v-bind:href="link1" target="_blank">{{ name1 }}</a><br>
-          <img v-bind:src="img2"/> <a v-bind:href="link2" target="_blank">{{ name2 }}</a><br>
-          <img v-bind:src="img3"/> <a v-bind:href="link3" target="_blank">{{ name3 }}</a><br>
+          <img v-bind:src="img1"/> <a v-bind:href="link1">{{ name1 }}</a><br>
+          <img v-bind:src="img2"/> <a v-bind:href="link2">{{ name2 }}</a><br>
+          <img v-bind:src="img3"/> <a v-bind:href="link3">{{ name3 }}</a><br>
           <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
         </p>
       </div>

From ef67bd693e9ee0cb42b4ebd0b10f68e63ba04750 Mon Sep 17 00:00:00 2001
From: hakabahitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 18:18:36 +0900
Subject: [PATCH 05/10] using router-link in who-to-follow-panel

---
 .../who_to_follow_panel/who_to_follow_panel.js     | 14 +++++++-------
 .../who_to_follow_panel/who_to_follow_panel.vue    |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 43cd3e2d..47952d21 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -30,7 +30,7 @@ function showWhoToFollow (panel, users, aHost, aUser) {
           .then((externalUser) => {
             if (!externalUser.error) {
               panel.$store.commit('addNewUsers', [externalUser])
-              panel.link1 = '/users/' + externalUser.id
+              panel.id1 = externalUser.id
             }
           })
       } else if (index === 1) {
@@ -40,7 +40,7 @@ function showWhoToFollow (panel, users, aHost, aUser) {
           .then((externalUser) => {
             if (!externalUser.error) {
               panel.$store.commit('addNewUsers', [externalUser])
-              panel.link2 = '/users/' + externalUser.id
+              panel.id2 = externalUser.id
             }
           })
       } else if (index === 2) {
@@ -50,7 +50,7 @@ function showWhoToFollow (panel, users, aHost, aUser) {
           .then((externalUser) => {
             if (!externalUser.error) {
               panel.$store.commit('addNewUsers', [externalUser])
-              panel.link3 = '/users/' + externalUser.id
+              panel.id3 = externalUser.id
             }
           })
       }
@@ -88,14 +88,14 @@ function getWhoToFollow (panel) {
 const WhoToFollowPanel = {
   data: () => ({
     img1: '/images/avi.png',
-    link1: null,
     name1: '',
+    id1: 0,
     img2: '/images/avi.png',
-    link2: null,
     name2: '',
+    id2: 0,
     img3: '/images/avi.png',
-    link3: null,
-    name3: ''
+    name3: '',
+    id3: 0
   }),
   computed: {
     user: function () {
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 56adbf41..021b9557 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/> <a v-bind:href="link1">{{ name1 }}</a><br>
-          <img v-bind:src="img2"/> <a v-bind:href="link2">{{ name2 }}</a><br>
-          <img v-bind:src="img3"/> <a v-bind:href="link3">{{ name3 }}</a><br>
+          <img v-bind:src="img1"/><router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
+          <img v-bind:src="img2"/><router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
+          <img v-bind:src="img3"/><router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
           <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
         </p>
       </div>

From 2ade177d5a8f487014f8e790d2ed1c0f9e8ebb75 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <example@example.com>
Date: Sat, 5 May 2018 00:20:19 +0900
Subject: [PATCH 06/10] configurable who to follow panel

---
 .../who_to_follow_panel/who_to_follow_panel.js       | 12 ++++++++----
 src/main.js                                          |  4 +++-
 static/config.json                                   |  6 ++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 47952d21..d62a1515 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -69,8 +69,10 @@ function getWhoToFollow (panel) {
     panel.name2 = 'Loading...'
     panel.name3 = 'Loading...'
     var host = window.location.hostname
-    var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
-      encodeURIComponent(host) + '+' + encodeURIComponent(user)
+    var whoToFollowProvider = this.$store.state.config.whoToFollowProvider
+    var url
+    url = whoToFollowProvider.replace(/{{host}}/g, encodeURIComponent(host))
+    url = url.replace(/{{user}}/g, encodeURIComponent(user))
     window.fetch(url, {mode: 'cors'}).then(function (response) {
       if (response.ok) {
         return response.json()
@@ -104,8 +106,10 @@ const WhoToFollowPanel = {
     moreUrl: function () {
       var host = window.location.hostname
       var user = this.user
-      var url = 'https://vinayaka.distsn.org/?' +
-            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+      var whoToFollowLink = this.$store.state.config.whoToFollowLink
+      var url
+      url = whoToFollowLink.replace(/{{host}}/g, encodeURIComponent(host))
+      url = url.replace(/{{user}}/g, encodeURIComponent(user))
       return url
     },
     showWhoToFollowPanel () {
diff --git a/src/main.js b/src/main.js
index a40c51f2..3c4a072b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,11 +88,13 @@ window.fetch('/api/statusnet/config.json')
 window.fetch('/static/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {theme, background, logo, showWhoToFollowPanel, showInstanceSpecificPanel} = data
+    const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel} = data
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
     store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
+    store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider })
+    store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
     store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
     if (data['chatDisabled']) {
       store.dispatch('disableChat')
diff --git a/static/config.json b/static/config.json
index 2c495142..08664927 100644
--- a/static/config.json
+++ b/static/config.json
@@ -6,5 +6,11 @@
   "redirectRootLogin": "/main/friends",
   "chatDisabled": false,
   "showWhoToFollowPanel": false,
+  "whoToFollowProvider": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?{{host}}+{{user}}",
+  "whoToFollowProviderDummy1": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-osa-api.cgi?{{host}}+{{user}}",
+  "whoToFollowProviderDummy2": "https://followlink.osa-p.net/api/get_recommend.json?acct=@{{user}}@{{host}}",
+  "whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
+  "whoToFollowLinkDummy1": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
+  "whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
   "showInstanceSpecificPanel": false
 }

From 0691af136732624e9eef143af13d85785a749d90 Mon Sep 17 00:00:00 2001
From: hakabahitoyo <hakabahitoyo@example.com>
Date: Sat, 5 May 2018 00:43:18 +0900
Subject: [PATCH 07/10] debug

---
 src/components/who_to_follow_panel/who_to_follow_panel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index d62a1515..e6638fca 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -69,7 +69,7 @@ function getWhoToFollow (panel) {
     panel.name2 = 'Loading...'
     panel.name3 = 'Loading...'
     var host = window.location.hostname
-    var whoToFollowProvider = this.$store.state.config.whoToFollowProvider
+    var whoToFollowProvider = panel.$store.state.config.whoToFollowProvider
     var url
     url = whoToFollowProvider.replace(/{{host}}/g, encodeURIComponent(host))
     url = url.replace(/{{user}}/g, encodeURIComponent(user))

From 2471b71aabdafc0e680795645cb48f89636974a8 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <example@example.com>
Date: Sat, 5 May 2018 00:53:40 +0900
Subject: [PATCH 08/10] osa-compatible who to follow provider

---
 .../who_to_follow_panel.js                    | 85 ++++++++-----------
 static/config.json                            |  4 +-
 2 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index e6638fca..bbbb7f4c 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -1,59 +1,48 @@
-function showWhoToFollow (panel, users, aHost, aUser) {
+function showWhoToFollow (panel, reply, aHost, aUser) {
+  var users = reply.ids
   var cn
   var index = 0
   var random = Math.floor(Math.random() * 10)
   for (cn = random; cn < users.length; cn = cn + 10) {
     var user
     user = users[cn]
-    var host
-    host = user.host
-    var username
-    if (user.username) {
-      username = user.username
-    } else {
-      username = user.user
-    }
     var img
-    if (user.avatar) {
-      img = user.avatar
+    if (user.icon) {
+      img = user.icon
     } else {
       img = '/images/avi.png'
     }
-    var name = username + '@' + host
-    if ((!user.following) &&
-      (!user.blacklisted) &&
-      (!(host === aHost && username === aUser))) {
-      if (index === 0) {
-        panel.img1 = img
-        panel.name1 = name
-        panel.$store.state.api.backendInteractor.externalProfile(name)
-          .then((externalUser) => {
-            if (!externalUser.error) {
-              panel.$store.commit('addNewUsers', [externalUser])
-              panel.id1 = externalUser.id
-            }
-          })
-      } else if (index === 1) {
-        panel.img2 = img
-        panel.name2 = name
-        panel.$store.state.api.backendInteractor.externalProfile(name)
-          .then((externalUser) => {
-            if (!externalUser.error) {
-              panel.$store.commit('addNewUsers', [externalUser])
-              panel.id2 = externalUser.id
-            }
-          })
-      } else if (index === 2) {
-        panel.img3 = img
-        panel.name3 = name
-        panel.$store.state.api.backendInteractor.externalProfile(name)
-          .then((externalUser) => {
-            if (!externalUser.error) {
-              panel.$store.commit('addNewUsers', [externalUser])
-              panel.id3 = externalUser.id
-            }
-          })
-      }
+    var name = user.to_id
+    if (index === 0) {
+      panel.img1 = img
+      panel.name1 = name
+      panel.$store.state.api.backendInteractor.externalProfile(name)
+        .then((externalUser) => {
+          if (!externalUser.error) {
+            panel.$store.commit('addNewUsers', [externalUser])
+            panel.id1 = externalUser.id
+          }
+        })
+    } else if (index === 1) {
+      panel.img2 = img
+      panel.name2 = name
+      panel.$store.state.api.backendInteractor.externalProfile(name)
+        .then((externalUser) => {
+          if (!externalUser.error) {
+            panel.$store.commit('addNewUsers', [externalUser])
+            panel.id2 = externalUser.id
+          }
+        })
+    } else if (index === 2) {
+      panel.img3 = img
+      panel.name3 = name
+      panel.$store.state.api.backendInteractor.externalProfile(name)
+        .then((externalUser) => {
+          if (!externalUser.error) {
+            panel.$store.commit('addNewUsers', [externalUser])
+            panel.id3 = externalUser.id
+          }
+        })
       index = index + 1
       if (index > 2) {
         break
@@ -81,8 +70,8 @@ function getWhoToFollow (panel) {
         panel.name2 = ''
         panel.name3 = ''
       }
-    }).then(function (users) {
-      showWhoToFollow(panel, users, host, user)
+    }).then(function (reply) {
+      showWhoToFollow(panel, reply, host, user)
     })
   }
 }
diff --git a/static/config.json b/static/config.json
index 08664927..9cdb22d5 100644
--- a/static/config.json
+++ b/static/config.json
@@ -6,11 +6,9 @@
   "redirectRootLogin": "/main/friends",
   "chatDisabled": false,
   "showWhoToFollowPanel": false,
-  "whoToFollowProvider": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?{{host}}+{{user}}",
-  "whoToFollowProviderDummy1": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-osa-api.cgi?{{host}}+{{user}}",
+  "whoToFollowProvider": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-osa-api.cgi?{{host}}+{{user}}",
   "whoToFollowProviderDummy2": "https://followlink.osa-p.net/api/get_recommend.json?acct=@{{user}}@{{host}}",
   "whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
-  "whoToFollowLinkDummy1": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
   "whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
   "showInstanceSpecificPanel": false
 }

From d9d6a497d9b539fe25f73944fa1b12649298be78 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <example@example.com>
Date: Sat, 5 May 2018 01:02:39 +0900
Subject: [PATCH 09/10] debug

---
 src/components/who_to_follow_panel/who_to_follow_panel.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index bbbb7f4c..51b9f469 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -43,10 +43,10 @@ function showWhoToFollow (panel, reply, aHost, aUser) {
             panel.id3 = externalUser.id
           }
         })
-      index = index + 1
-      if (index > 2) {
-        break
-      }
+    }
+    index = index + 1
+    if (index > 2) {
+      break
     }
   }
 }

From 36b1c09831c809722c730a102af3d224597578be Mon Sep 17 00:00:00 2001
From: hakabahitoyo <hakabahitoyo@example.com>
Date: Sun, 6 May 2018 11:33:53 +0900
Subject: [PATCH 10/10] add space

---
 src/components/who_to_follow_panel/who_to_follow_panel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 021b9557..5af6d0d5 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/><router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
-          <img v-bind:src="img2"/><router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
-          <img v-bind:src="img3"/><router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
+          <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
+          <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
+          <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
           <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
         </p>
       </div>