Skip to content

Commit 5c7a6dc

Browse files
mdolrmdolr
authored
Merge pull request #145 from joelazwar/add-github-profile
Add GitHub profile
2 parents c91f0eb + 595ce75 commit 5c7a6dc

File tree

4 files changed

+251
-2
lines changed

4 files changed

+251
-2
lines changed

‎css/templates/github.css

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
.survol-github-container {
2+
padding: 15px;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
4+
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
5+
width: auto;
6+
height: auto;
7+
}
8+
9+
#survol-github-avatar{
10+
display: inline-block;
11+
vertical-align: top;
12+
margin-right: 10px;
13+
border-radius : 50%;
14+
}
15+
16+
#survol-github-user-info {
17+
width: auto;
18+
max-width : 280px;
19+
text-decoration: inherit;
20+
color: inherit;
21+
}
22+
23+
.survol-github-name {
24+
font-weight: 600;
25+
font-size: 20px;
26+
}
27+
28+
.survol-github-at {
29+
display: block;
30+
font-size: 16px;
31+
color: #666;
32+
font-style: normal;
33+
font-weight: 400;
34+
margin-bottom: 5px;
35+
}
36+
37+
.dark-theme .survol-github-at {
38+
color: #aab3be;
39+
}
40+
41+
.survol-github-bio {
42+
font-size: 13px;
43+
color: #6a737d;
44+
}
45+
46+
.dark-theme .survol-github-bio {
47+
color: #aab3be;
48+
}
49+
50+
.survol-github-profile-stats {
51+
display: block;
52+
margin-top: 8px;
53+
text-align: center;
54+
min-width:330px;
55+
}
56+
57+
.survol-github-profile-stat {
58+
text-decoration: none;
59+
width: 30%;
60+
border-right: 1px solid #eaecef;
61+
color: #586069;
62+
display: inline-block;
63+
margin-top: 5px;
64+
margin-bottom: 8px;
65+
}
66+
67+
.dark-theme .survol-github-profile-stat span, .dark-theme .survol-github-profile-stat b {
68+
color: #eaecef;
69+
}
70+
71+
72+
.survol-github-profile-stat:last-of-type {
73+
border-right: none;
74+
}
75+
76+
77+
.survol-github-prof-stat-val {
78+
font-size: 19px;
79+
text-align: center;
80+
display: block;
81+
}
82+
.survol-github-prof-stat-name {
83+
font-size: 11px;
84+
text-align: center;
85+
display: block;
86+
}
87+
88+
.survol-github-links{
89+
display: inline-block;
90+
vertical-align: top;
91+
}
92+
93+
.survol-github-link{
94+
display: inline;
95+
font-size: 15;
96+
font-weight : 400;
97+
}
98+
99+
.empty{
100+
opacity : 35%;
101+
font-weight : 100;
102+
font-style : italic;
103+
}

‎js/core.js

+2
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@ document.addEventListener('DOMContentLoaded', () => {
161161
return new StackExchangeHover(node, getDomain(CURRENT_TAB));
162162
case 'soundcloud.com':
163163
return new SoundCloudHover(node, getDomain(CURRENT_TAB));
164+
case 'github.com':
165+
return new GitHubHover(node, getDomain(CURRENT_TAB));
164166

165167
// If the site has no custom template, it should be previewed using meta-data parsing
166168
default:

‎js/templates/github.js

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* Hover classes bound themselves to a node
2+
*/
3+
class GitHubHover {
4+
constructor(node, CURRENT_TAB) {
5+
this.boundNode = node;
6+
this.redirectLink = node.href;
7+
this.CURRENT_TAB = CURRENT_TAB;
8+
this.linkType = this.checkLinkType();
9+
this.parser = new DOMParser();
10+
}
11+
12+
checkLinkType() {
13+
if (this.CURRENT_TAB == 'github.com' || this.redirectLink.match(/(github.com)\/[\w]{1,256}\/[\w]{1,256}\/[\w]/g)) return 'unknown';
14+
else if (this.redirectLink.match(/(github.com)\/[\w]{1,256}\/[\w]{1,256}/g)) return 'repo';
15+
else return 'profile';
16+
}
17+
18+
/* bindToContainer
19+
* Parameters :
20+
* node - {HTMLNodeElement} - An anchor link element
21+
* domain - {String} - The domain of the current webpage
22+
* container - {HTMLNodeElement} - The survol container
23+
*
24+
* This function is called to get the data from the link we
25+
* want to preview and then attach it to the container
26+
* Note: data is always inserted into textNodes to avoid
27+
* malicious script injections.
28+
*/
29+
bindToContainer(node, domain, container) {
30+
if (this.linkType == 'profile') {
31+
32+
const username = this.redirectLink.split('github.com/')[1];
33+
34+
window
35+
.survolBackgroundRequest(`https://api.github.com/users/${username}`)
36+
.then(({ data }) => {
37+
38+
let githubContainer = document.createElement('div');
39+
githubContainer.className = 'survol-github-container';
40+
41+
let githubProfileContainer = document.createElement('div');
42+
githubProfileContainer.id = 'survol-github-profile';
43+
44+
let profilePic = document.createElement('img');
45+
profilePic.id = 'survol-github-avatar';
46+
profilePic.src = data.avatar_url;
47+
profilePic.style.width = '80px';
48+
githubProfileContainer.appendChild(profilePic);
49+
50+
let profInfo = document.createElement('div');
51+
profInfo.id = 'survol-github-user-info';
52+
53+
profInfo.style = 'display: inline-block';
54+
55+
let name = document.createElement('span');
56+
name.className = 'survol-github-name';
57+
name.appendChild(document.createTextNode(data.name || data.login));
58+
59+
let githubAt = document.createElement('span');
60+
githubAt.className = 'survol-github-at';
61+
githubAt.appendChild(document.createTextNode(` @${data.login}`));
62+
63+
let bio = document.createElement('span');
64+
bio.className = 'survol-github-bio';
65+
bio.appendChild(document.createTextNode(data.bio ? data.bio : ''));
66+
67+
profInfo.appendChild(name);
68+
profInfo.appendChild(githubAt);
69+
profInfo.appendChild(bio);
70+
71+
githubProfileContainer.appendChild(profInfo);
72+
73+
let profStats = document.createElement('div');
74+
profStats.className = 'survol-github-profile-stats';
75+
76+
let statdata = [{ 'name': 'Repos', 'stat': data.public_repos },
77+
{ 'name': 'Followers', 'stat': data.followers },
78+
{ 'name': 'Following', 'stat': data.following }];
79+
80+
statdata.forEach((x) => {
81+
let stat = document.createElement('a');
82+
stat.className = 'survol-github-profile-stat';
83+
84+
let statNumber = document.createElement('b');
85+
statNumber.className = 'survol-github-prof-stat-val';
86+
statNumber.appendChild(document.createTextNode(x.stat));
87+
let statName = document.createElement('span');
88+
statName.className = 'survol-github-prof-stat-name';
89+
statName.appendChild(document.createTextNode(x.name));
90+
91+
stat.appendChild(statNumber);
92+
stat.appendChild(statName);
93+
94+
profStats.appendChild(stat);
95+
});
96+
97+
98+
githubProfileContainer.appendChild(profStats);
99+
100+
let githubLinksContainer = document.createElement('div');
101+
githubLinksContainer.className = 'survol-github-links';
102+
103+
let links = [{ 'name': 'Workplace: ', 'link': data.company ? data.company : 'not available' },
104+
{ 'name': 'Twitter: ', 'link': data.twitter_username ? '@' + data.twitter_username : 'not available' },
105+
{ 'name': 'Website: ', 'link': data.blog ? data.blog : 'not available' }];
106+
107+
links.forEach((link) => {
108+
let linkContainer = document.createElement('div');
109+
110+
let linkName = document.createElement('span');
111+
linkName.appendChild(document.createTextNode(link.name));
112+
linkName.className = 'survol-github-link';
113+
114+
linkContainer.appendChild(linkName);
115+
116+
let linkText = document.createElement('span');
117+
linkText.appendChild(document.createTextNode(link.link));
118+
119+
if (link.link.includes('not available')) {
120+
linkText.className = 'survol-github-link empty';
121+
} else {
122+
linkText.className = 'survol-github-link';
123+
}
124+
125+
linkContainer.appendChild(linkText);
126+
127+
githubLinksContainer.appendChild(linkContainer);
128+
})
129+
130+
githubProfileContainer.appendChild(githubLinksContainer);
131+
132+
githubContainer.appendChild(githubProfileContainer);
133+
134+
if (window.lastHovered == node && container.innerHTML == '') {
135+
container.appendChild(githubContainer);
136+
}
137+
})
138+
.catch(console.error);
139+
140+
}
141+
}
142+
}

‎manifest.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"manifest_version": 2,
3-
"version": "0.6.0",
3+
"version": "0.6.2",
44
"name": "__MSG_extensionName__",
55
"short_name": "__MSG_extensionShortName__",
66
"description": "__MSG_extensionDescription__",
@@ -33,6 +33,7 @@
3333
"js/templates/youtube.js",
3434
"js/templates/stackexchange.js",
3535
"js/templates/soundcloud.js",
36+
"js/templates/github.js",
3637

3738
"js/core.js"
3839
],
@@ -43,7 +44,8 @@
4344
"css/templates/twitter.css",
4445
"css/templates/youtube.css",
4546
"css/templates/stackexchange.css",
46-
"css/templates/soundcloud.css"
47+
"css/templates/soundcloud.css",
48+
"css/templates/github.css"
4749

4850
],
4951
"run_at": "document_start"

0 commit comments

Comments
 (0)