forked from wzulfikar/github-asean-top-contributors
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_app.html
159 lines (138 loc) · 7.08 KB
/
_app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Language" content="en" />
<title>Top Asean GitHub Users Based on Contributions</title>
<meta name="description" content="Top Asean GitHub Users Based on Contributions" />
<meta name="keywords" content="Github, asean, rank, ranking, top, users, area, population" />
<meta name="author" content="Jorge Moreno aka moro, www.moro.es (@alterebro)" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<!--[if IEMobile]><meta http-equiv="cleartype" content="on" /><![endif]-->
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="google" content="notranslate" />
<meta name="robots" content="index, follow" />
<meta content="https://assets-cdn.github.com/images/modules/open_graph/github-mark.png" name="twitter:image:src" />
<meta content="summary" name="twitter:card" />
<meta content="GitHub Top Asean Users" name="twitter:site" />
<meta content="GitHub Top Users Area Rank" name="twitter:title" />
<meta content="Top GitHub Users from a given geographical area population. ( Area Top GitHub Users )" name="twitter:description" />
<meta content="https://assets-cdn.github.com/images/modules/open_graph/github-mark.png" property="og:image" />
<meta content="GitHub Top Asean Users" property="og:site_name" />
<meta content="Top Asean GitHub Users Based on Contributions" property="og:title" />
<meta content="https://wzulfikar.github.io/github-asean-top-contributors" property="og:url" />
<meta content="Top GitHub Users from a given geographical area population. ( Area Top GitHub Users )" property="og:description" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-navbutton-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="https://github.com/windows-tile.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Top Asean GitHub Users Based on Contributions" />
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" />
<link rel="apple-touch-icon" href="https://github.com/apple-touch-icon.png" />
<link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#4078c0" />
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<!-- build:css frontend/app.min.css -->
<link rel="stylesheet" type="text/css" href="frontend/_src.armazon.css" />
<link rel="stylesheet" type="text/css" href="frontend/_src.app.css" />
<!-- endbuild -->
</head>
<body>
<div id="app">
<div id="particles-js"></div>
<header>
<h1><i class="fa fa-github"></i> <a href="#" v-on:click="enroute(0)"><strong>GitHub Top Contributors</strong> Area Ranking (ASEAN)</a></h1>
<select id="location-selector" v-if="data_json.items.length" v-on:change="enroute()" v-model="current_location">
<option value="">Global</option>
<!-- optgroup label="Locations" -->
<option v-for="loc in data_json.items" :value="loc.location"> – {{ loc.label }}</option>
<!-- /optgroup -->
</select>
<hr />
</header>
<main v-if="data_error_loading">
<p>
Error loading: <code>data.json</code> file.
</p>
</main>
<main v-else>
<h2 v-cloak><strong>{{ current_label }} Data</strong> :
<span v-if="data_json.folders.length > 0" >{{ data_json.folders[1] | format_date }} / </span>
<span>{{ data_json.folders[0] | format_date }}</span>
</h2>
<div v-if="has_index" class="index">
<h3>Most Used Programming Languages Globally</h3>
<ul class="langs-global">
<li v-for="lang in data_json.all_languages" :data-percent="lang.n | lang_percent data_json.all_users">
<span>{{ lang.lang }}</span>
<em style="height: {{ lang.n*1.7 | lang_percent data_json.all_users }}%; background-color: {{ lang.lang | str_to_color }}"></em>
</li>
</ul>
<h3>Most Used languages by location:</h3>
<ul class="langs-local">
<li v-for="loc in data_json.items">
<strong>{{ loc.label }}</strong>
<ul>
<li v-for="lang in loc.languages" :data-percent="lang.n | lang_percent loc.users">
<span>{{ lang.lang }}</span>
<em style="width: {{ lang.n | lang_percent loc.users }}%; background-color: {{ lang.lang | str_to_color }}"></em>
</li>
</ul>
</li>
</ul>
<h3>Top 10 Global Area Users</h3>
</div>
<ol id="user-list">
<li id="user-list-header">
<div class="user-data">
<h3 data-rank="Rank" data-contributions="Contrib.">Usuario</h3>
</div>
<figure><figcaption>Avatar</figcaption></figure>
</li>
<li v-for="(index, item) in data_items_parsed">
<div class="user-data">
<h3 :data-rank="index | rank_num" :data-contributions="item.contributions"><strong>{{ item.name | ucwords }}</strong> <a href="{{ item.url }}"> — @{{ item.login }}</a></h3>
<ul
:data-contributions-diff="(item.contributions - item.prev.contributions) != 0 ? (item.contributions - item.prev.contributions) : null"
:data-rank-diff="(item.prev.order - item.order) != 0 ? (item.prev.order - item.order) : null"
v-bind:class="{
'less-contrib' : (item.contributions - item.prev.contributions) < 0,
'more-contrib' : (item.contributions - item.prev.contributions) > 0,
'less-rank' : (item.prev.order - item.order) < 0,
'more-rank' : (item.prev.order - item.order) > 0
}">
<li class="user-languages" v-if="item.languages.length > 0">
<span v-for="lang in item.languages" class="tag" style="background-color: {{ lang | str_to_color }}"> {{ lang }} </span>
</li>
<li class="user-bio" v-if="item.has_user_bio">{{ item.bio }} <a href="{{ item.blog }}"><i class="fa fa-globe"></i> {{ item.blog | nice_url }}</a></li>
<li class="user-location"><i class="fa fa-map-marker"></i> <strong v-if="item.company">{{ item.company }}. </strong> {{ item.location }}</li>
</ul>
</div>
<figure><img :src="item.avatar + '&s=100'" :alt="item.name" /></figure>
</li>
</ol>
</main>
<footer>
<hr />
<p>
<small>
<strong>@alterebro 2016</strong> — <a href="https://github.com/alterebro/area-top-github-users">github.com/alterebro/area-top-github-users</a>
</small>
</p>
</footer>
</div>
<script src="frontend/particles.min.js"></script>
<!-- build:js frontend/app.min.js -->
<script type="text/javascript" src="frontend/_src.vue.min.js"></script>
<script type="text/javascript" src="frontend/_src.app.js"></script>
<!-- endbuild -->
</body>
</html>