-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
117 lines (103 loc) · 3.74 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Repolist</title>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="package/assets/css/foundation.css" rel="stylesheet" />
<link href="package/assets/css/font-awesome.min.css" rel="stylesheet" />
<link href="package/assets/css/showoff.css" rel="stylesheet" />
</head>
<body>
<div class = "row">
<div class = "columns medium-10 medium-centered">
<div id = "content">
<div class="gshowoff" id="gshowoff_wrapper">
<header>
<div class = "user_bio">
<span class="avatar"></span>
<span class="name"></span>
</div>
<div class="user_links">
<ul>
<li><a target="_blank" href="https://twitter.com/username"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://instagram.com/username"><i class="fa fa-instagram"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/username/"><i class="fa fa-globe"></i></a></li>
</ul>
</div>
</header>
<ul></ul>
<footer>
<a target="_blank" href="https://github.com/dopevog" id = "profile_link" class="coffee button">
<div class="bg"></div>
<div class="content">Visit profile</div> <i class="icon fa fa-github"></i></a>
</footer>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function header(data){
var user_data= data.data
var name = user_data["name"]
var bio = user_data["bio"]
var avatar_url = user_data['avatar_url']
var html_url = user_data["html_url"]
var avatar_elem = document.querySelector('.gshowoff header .avatar')
var name_elem = document.querySelector('.gshowoff header .name')
var profile_elem = document.getElementById('profile_link')
avatar_elem.style.backgroundImage = "url('"+ avatar_url +"')"
name_elem.innerHTML = name
profile_elem.href = html_url
}
function list(data) {
var reposList = document.getElementById('gshowoff_wrapper');
var output = ""
var repos = data.data
for (var key in repos) {
var current_repo = repos[key]
var url = current_repo["html_url"]
var title = current_repo["name"]
var description = current_repo["description"]
var language = current_repo["language"]
var stars = current_repo["stargazers_count"]
var watchers = current_repo["watchers"]
var is_fork = current_repo["fork"]
var forks = current_repo["forks"]
var classes = ""
if ( stars > 15 ) {
classes += "top "
}
output += '<li class="'+ classes +'"><a target="__blank" href="'+ url +'"><div class="repo_content">'
if ( is_fork == true ) {
output += '<i class="fa fa-code-fork fork_repo"></i>'
}
output += '<h3>'+ title +'</h3>'
if ( language !== null || stars !== 0 || watchers !== 0 ) {
output += '<div class = "repos_info">'
if ( language !== null ) {
output += '<span class = "language">'+ language +'</span>'
}
if ( stars !== 0 ) {
output += '<span><i class="fa fa-star"></i>' + stars + '</span>'
}
if ( watchers !== 0 ) {
output += '<span><i class="fa fa-eye"></i>' + watchers + '</span>'
}
if ( forks !== 0 ) {
output += '<span><i class="fa fa-code-fork"></i>' + forks + '</span>'
}
output += '</div>'
}
if ( description !== null ) {
output += '<p>'+ description +'</p>'
}
output += '</div><i class="fa fa-long-arrow-right arrow"></i></a></li>'
}
document.querySelector('.gshowoff > ul').innerHTML = output
}
</script>
<script src="https://api.github.com/users/dopevog/repos?callback=list" type="text/javascript"></script>
<script src="https://api.github.com/users/dopevog?callback=header" type="text/javascript"></script>
</body>
</html>