Add usage to page

bower.json

@@ -18,7 +18,8 @@
     "modernizr": "~2.8.3",
     "html5-polyfills": "*",
     "underscore": "~1.7.0",
-    "vue": "~0.11.5"
+    "vue": "~0.11.5",
+    "fetch": "~0.7.0"
   },
   "overrides": {
     "jquery": {

src/js/init/vue.js

@@ -1,6 +1,6 @@
-define(['domReady', 'vue', 'sidebar'], function(domReady, Vue, sidebar) {
+define(['domReady', 'vue', 'sidebar', 'fetch'], function(domReady, Vue, sidebar, fetch) {
   var init = function(data) {
-    Vue.filter('defaultIcon', function(value){
+    Vue.filter('defaultIcon', function(value) {
       // Returns a default icon if no value is given
       return value || 'cube';
     });
@@ -15,7 +15,27 @@ define(['domReady', 'vue', 'sidebar'], function(domReady, Vue, sidebar) {
     });
   };
 
-  domReady(function(){
+  var initUsers = function(data) {
+    new Vue({
+      el: '#users',
+      data: {
+        title: 'Projects using APIS.is',
+        users: data.users
+      }
+    });
+  };
+
+  domReady(function() {
+    fetch('http://beta.apis.is/meta/users/')
+      .then(function(response) {
+        return response.json();
+      }).then(function(json) {
+        initUsers(json);
+      }).catch(function(err) {
+        // TODO: Error handling! ;)
+        console.error(err);
+      });
+
     var data = [];
     var request = new XMLHttpRequest();
     request.open('GET', 'http://beta.apis.is/docs.json', true);
@@ -35,4 +55,4 @@ define(['domReady', 'vue', 'sidebar'], function(domReady, Vue, sidebar) {
 
     request.send();
   });
-});
+});

src/js/main.js

@@ -1,4 +1,3 @@
-
 (function() {
   require.config({
     baseUrl: '/js',
@@ -24,6 +23,8 @@
       modernizr: 'vendor/modernizr',
       vue: 'vendor/vue',
 
+      fetch: 'vendor/fetch',
+
       sidebar: 'kolibri/koli-sidebar',
       smoothscroll: 'kolibri/koli-smoothscroll',
       cssTranslate: 'kolibri/koli-css-translate',
@@ -37,10 +38,11 @@
 
     },
     shim: {
-      jquery: { exports: '$' },
-      jqEasing: { deps: ['jquery'] },
-      underscore: { exports: '_' },
-      modernizr: { exports: 'Modernizr' },
+      jquery: {exports: '$'},
+      jqEasing: {deps: ['jquery']},
+      underscore: {exports: '_'},
+      modernizr: {exports: 'Modernizr'},
+      fetch: {exports: 'fetch'},
     }
   });