show more users on front page

yaph · yaph · commit 4ed5f12432d3 · 2019-05-27T01:50:37.000+02:00
diff --git a/README.md b/README.md
@@ -1,3 +1,9 @@
 # README
 
-Source files for [coderstats.net](http://coderstats.net/).
+Source files for [coderstats.net](http://coderstats.net/).
+
+# Reference
+
+* https://developer.github.com/v3/search/#search-users
+* https://jsfiddle.net/chrisvfritz/sbLgr0ad
+* https://github.com/GabrielBibiano/vue-github-profile/blob/master/GithubProfile.vue
diff --git a/src/js/events.js b/src/js/events.js
diff --git a/src/js/front.js b/src/js/front.js
@@ -0,0 +1,67 @@
+Vue.component('user-link', {
+    props: ['login', 'avatar_url'],
+    template: `
+    <div class="user">
+        <a v-bind:href="'/github#' + login">
+            <img :src="avatar_url" :alt="login">
+            <i class="fa fa-user" aria-hidden="true"></i> {{ login }}
+        </a>
+    </div>
+    `
+});
+
+
+new Vue({
+    el: '#active-users',
+    data: { events: null },
+    computed: {
+        users: function() {
+            return d3.nest()
+                .key(d => d.actor.login)
+                .entries(this.events.filter(d => d.type === 'PushEvent'))
+                .sort((a, b) => b.values.length - a.values.length);
+        }
+    },
+    created: function() {
+        // https://api.github.com/events
+        this.$http.get('/data/events.json').then(response => {
+            this.events = response.body;
+        });
+    }
+});
+
+
+new Vue({
+    el: '#followed-users',
+    data: {users: []},
+    created: function () {
+        // https://api.github.com/search/users?q=repos:%3E1&sort=followers&order=desc
+        this.$http.get('/data/users.json').then(response => {
+            this.users = response.body.items;
+        });
+    }
+});
+
+
+new Vue({
+    el: '#most-repos-users',
+    data: {users: []},
+    created: function () {
+        // https://api.github.com/search/users?q=repos:%3E1%20type:user&sort=repositories&order=desc
+        this.$http.get('/data/most-repos-users.json').then(response => {
+            this.users = response.body.items;
+        });
+    }
+});
+
+
+new Vue({
+    el: '#earliest-users',
+    data: {users: []},
+    created: function () {
+        // https://api.github.com/search/users?q=repos:%3E1%20type:user&sort=joined&order=asc
+        this.$http.get('/data/earliest-users.json').then(response => {
+            this.users = response.body.items;
+        });
+    }
+});
diff --git a/templates/front.html b/templates/front.html
@@ -13,24 +13,51 @@ <h1 class="logo">{{ title }}</h1>
             </div>
         </form>
     </div>
-    <div v-if="events" class="padv" id="events">
-        {% raw %}
+    <div v-if="events" id="active-users">
         <h2>Recently active users</h2>
         <div class="flex">
-            <div v-for="user in users.slice(0, 10)" class="user">
-                <a v-bind:href="'/github#' + user.key">
-                    <img :src="user.values[0].actor.avatar_url" :alt="user.key">
-                    <i class="fa fa-user" aria-hidden="true"></i> {{ user.key }}
-                </a>
-            </div>
+            <user-link
+                v-for="user in users.slice(0, 10)"
+                v-bind:login="user.key"
+                v-bind:avatar_url="user.values[0].actor.avatar_url"
+            ></user-link>
+        </div>
+    </div>
+    <div v-if="users" id="followed-users">
+        <h2>Most followed users</h2>
+        <div class="flex">
+            <user-link
+                v-for="user in users.slice(0, 10)"
+                v-bind:login="user.login"
+                v-bind:avatar_url="user.avatar_url"
+            ></user-link>
+        </div>
+    </div>
+    <div v-if="users" id="most-repos-users">
+        <h2>Users with most repositories</h2>
+        <div class="flex">
+            <user-link
+                v-for="user in users.slice(0, 10)"
+                v-bind:login="user.login"
+                v-bind:avatar_url="user.avatar_url"
+            ></user-link>
+        </div>
+    </div>
+    <div v-if="users" id="earliest-users">
+        <h2>Users with oldest accounts</h2>
+        <div class="flex">
+            <user-link
+                v-for="user in users.slice(0, 10)"
+                v-bind:login="user.login"
+                v-bind:avatar_url="user.avatar_url"
+            ></user-link>
         </div>
-        {% endraw %}
     </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
-<script src="/compiled/events.js"></script>
+<script src="/compiled/front.js"></script>
 <script src="/compiled/search.js"></script>
 {% endblock %}
