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 a8d17fa7..923d411b 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>
<notifications v-if="currentUser"></notifications>
</div>
</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..51b9f469
--- /dev/null
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -0,0 +1,123 @@
+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 img
+ if (user.icon) {
+ img = user.icon
+ } else {
+ img = '/images/avi.png'
+ }
+ 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
+ }
+ }
+}
+
+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 whoToFollowProvider = panel.$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()
+ } else {
+ panel.name1 = ''
+ panel.name2 = ''
+ panel.name3 = ''
+ }
+ }).then(function (reply) {
+ showWhoToFollow(panel, reply, host, user)
+ })
+ }
+}
+
+const WhoToFollowPanel = {
+ data: () => ({
+ img1: '/images/avi.png',
+ name1: '',
+ id1: 0,
+ img2: '/images/avi.png',
+ name2: '',
+ id2: 0,
+ img3: '/images/avi.png',
+ name3: '',
+ id3: 0
+ }),
+ computed: {
+ user: function () {
+ return this.$store.state.users.currentUser.screen_name
+ },
+ moreUrl: function () {
+ var host = window.location.hostname
+ var user = this.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 () {
+ return this.$store.state.config.showWhoToFollowPanel
+ }
+ },
+ watch: {
+ user: function (user, oldUser) {
+ if (this.showWhoToFollowPanel) {
+ getWhoToFollow(this)
+ }
+ }
+ },
+ mounted:
+ function () {
+ if (this.showWhoToFollowPanel) {
+ getWhoToFollow(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..5af6d0d5
--- /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"/> <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>
+ </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 7ca34adf..3c4a072b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,10 +88,13 @@ 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, 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 5cf4cdec..9cdb22d5 100644
--- a/static/config.json
+++ b/static/config.json
@@ -5,5 +5,10 @@
"redirectRootNoLogin": "/main/all",
"redirectRootLogin": "/main/friends",
"chatDisabled": false,
+ "showWhoToFollowPanel": false,
+ "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}}",
+ "whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
"showInstanceSpecificPanel": false
}