├── .gitignore ├── LICENSE ├── README.md ├── flairStyles.js ├── index.html ├── page.css ├── sample.PNG └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | test.html 2 | .idea/ 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # nyc test coverage 20 | .nyc_output 21 | 22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 23 | .grunt 24 | 25 | # node-waf configuration 26 | .lock-wscript 27 | 28 | # Compiled binary addons (http://nodejs.org/api/addons.html) 29 | build/Release 30 | 31 | # Dependency directories 32 | node_modules 33 | jspm_packages 34 | 35 | # Optional npm cache directory 36 | .npm 37 | 38 | # Optional REPL history 39 | .node_repl_history 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Marko Cen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # github-flair 2 | Generate your unique GitHub flair, inspired by [Stack Overflow Flair](http://stackoverflow.com/users/flair). 3 | 4 | ### [GENERATE NOW!](https://markocen.github.io/github-flair/) 5 | 6 | ![](https://github.com/MarkoCen/github-flair/blob/master/sample.PNG) 7 | 8 | ### Road Map 9 | - [x] Rainbow Avatar 10 | - [ ] Customized Theme 11 | - [ ] Repo Flair 12 | - [x] Organization Flair 13 | 14 | ### Contribution 15 | If you are not satisfied with themes I created, a theme PR is always welcomed. You could create new theme by add theme options in `flairStyles.js` file. 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /flairStyles.js: -------------------------------------------------------------------------------- 1 | (function (themes) { 2 | 3 | themes.default = { 4 | flair: { 5 | 'box-sizing': 'border-box', 6 | 'line-height': 'normal', 7 | display: 'flex', 8 | 'align-items': 'center', 9 | width: '290px', 10 | height: '95px', 11 | color: '#555', 12 | position: 'relative', 13 | border: '2px solid #d1d5da', 14 | 'border-radius': '3px', 15 | padding: '5px 10px', 16 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 17 | }, 18 | avatar: { 19 | 'text-align': 'center', 20 | position: 'relative', 21 | width: '75px', 22 | height: '75px', 23 | 'margin-left': '5px' 24 | }, 25 | avatarImg: { 26 | width: '100%', 27 | height: '100%', 28 | 'border-radius': '50%' 29 | }, 30 | githubCorner: { 31 | fill: '#d1d5da', 32 | color: '#fff', 33 | position: 'absolute', 34 | top: 0, 35 | right: 0, 36 | border: 0 37 | }, 38 | info: { 39 | width: '160px', 40 | 'text-align': 'right', 41 | 'font-size': '14px' 42 | }, 43 | name: { 44 | 'font-weight': 'bold', 45 | 'font-size': '16px' 46 | }, 47 | textLink: { 48 | color: '#555' 49 | }, 50 | svgIcon: { 51 | fill: '#555' 52 | } 53 | } 54 | 55 | themes.dark = { 56 | flair: { 57 | 'box-sizing': 'border-box', 58 | 'line-height': 'normal', 59 | display: 'flex', 60 | 'align-items': 'center', 61 | width: '290px', 62 | height: '95px', 63 | color: '#fff', 64 | position: 'relative', 65 | border: '2px solid #24292e', 66 | background: '#24292e', 67 | 'border-radius': '3px', 68 | padding: '5px 10px', 69 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 70 | }, 71 | avatar: { 72 | 'text-align': 'center', 73 | position: 'relative', 74 | width: '75px', 75 | height: '75px', 76 | 'margin-left': '5px' 77 | }, 78 | avatarImg: { 79 | width: '100%', 80 | height: '100%', 81 | 'border-radius': '50%' 82 | }, 83 | githubCorner: { 84 | fill: '#fff', 85 | color: '#24292e', 86 | position: 'absolute', 87 | top: 0, 88 | right: 0, 89 | border: 0 90 | }, 91 | info: { 92 | width: '160px', 93 | 'text-align': 'right', 94 | 'font-size': '14px' 95 | }, 96 | name: { 97 | 'font-weight': 'bold', 98 | 'font-size': '16px' 99 | }, 100 | textLink: { 101 | color: '#fff' 102 | }, 103 | svgIcon: { 104 | fill: '#fff' 105 | } 106 | } 107 | 108 | themes.gray = { 109 | flair: { 110 | 'box-sizing': 'border-box', 111 | 'line-height': 'normal', 112 | display: 'flex', 113 | 'align-items': 'center', 114 | width: '290px', 115 | height: '95px', 116 | color: '#727272', 117 | position: 'relative', 118 | border: '2px solid #DADADA', 119 | background: '#DADADA', 120 | 'border-radius': '3px', 121 | padding: '5px 10px', 122 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 123 | }, 124 | avatar: { 125 | 'text-align': 'center', 126 | position: 'relative', 127 | width: '75px', 128 | height: '75px', 129 | 'margin-left': '5px' 130 | }, 131 | avatarImg: { 132 | width: '100%', 133 | height: '100%', 134 | 'border-radius': '50%' 135 | }, 136 | githubCorner: { 137 | fill: '#727272', 138 | color: '#DADADA', 139 | position: 'absolute', 140 | top: 0, 141 | right: 0, 142 | border: 0 143 | }, 144 | info: { 145 | width: '160px', 146 | 'text-align': 'right', 147 | 'font-size': '14px' 148 | }, 149 | name: { 150 | 'font-weight': 'bold', 151 | 'font-size': '16px' 152 | }, 153 | textLink: { 154 | color: '#727272' 155 | }, 156 | svgIcon: { 157 | fill: '#727272' 158 | } 159 | } 160 | 161 | themes.blue = { 162 | flair: { 163 | 'box-sizing': 'border-box', 164 | 'line-height': 'normal', 165 | display: 'flex', 166 | 'align-items': 'center', 167 | width: '290px', 168 | height: '95px', 169 | color: '#fff', 170 | position: 'relative', 171 | border: '2px solid #03a9f4', 172 | background: '#03a9f4', 173 | 'border-radius': '3px', 174 | padding: '5px 10px', 175 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 176 | }, 177 | avatar: { 178 | 'text-align': 'center', 179 | position: 'relative', 180 | width: '75px', 181 | height: '75px', 182 | 'margin-left': '5px' 183 | }, 184 | avatarImg: { 185 | width: '100%', 186 | height: '100%', 187 | 'border-radius': '50%' 188 | }, 189 | githubCorner: { 190 | fill: '#fff', 191 | color: '#03a9f4', 192 | position: 'absolute', 193 | top: 0, 194 | right: 0, 195 | border: 0 196 | }, 197 | info: { 198 | width: '160px', 199 | 'text-align': 'right', 200 | 'font-size': '14px' 201 | }, 202 | name: { 203 | 'font-weight': 'bold', 204 | 'font-size': '16px' 205 | }, 206 | textLink: { 207 | color: '#fff' 208 | }, 209 | svgIcon: { 210 | fill: '#fff' 211 | } 212 | } 213 | 214 | themes.green = { 215 | flair: { 216 | 'box-sizing': 'border-box', 217 | 'line-height': 'normal', 218 | display: 'flex', 219 | 'align-items': 'center', 220 | width: '290px', 221 | height: '95px', 222 | color: '#fff', 223 | position: 'relative', 224 | border: '2px solid #4caf50', 225 | background: '#4caf50', 226 | 'border-radius': '3px', 227 | padding: '5px 10px', 228 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 229 | }, 230 | avatar: { 231 | 'text-align': 'center', 232 | position: 'relative', 233 | width: '75px', 234 | height: '75px', 235 | 'margin-left': '5px' 236 | }, 237 | avatarImg: { 238 | width: '100%', 239 | height: '100%', 240 | 'border-radius': '50%' 241 | }, 242 | githubCorner: { 243 | fill: '#fff', 244 | color: '#4caf50', 245 | position: 'absolute', 246 | top: 0, 247 | right: 0, 248 | border: 0 249 | }, 250 | info: { 251 | width: '160px', 252 | 'text-align': 'right', 253 | 'font-size': '14px' 254 | }, 255 | name: { 256 | 'font-weight': 'bold', 257 | 'font-size': '16px' 258 | }, 259 | textLink: { 260 | color: '#fff' 261 | }, 262 | svgIcon: { 263 | fill: '#fff' 264 | } 265 | } 266 | 267 | themes.red = { 268 | flair: { 269 | 'box-sizing': 'border-box', 270 | 'line-height': 'normal', 271 | display: 'flex', 272 | 'align-items': 'center', 273 | width: '290px', 274 | height: '95px', 275 | color: '#fff', 276 | position: 'relative', 277 | border: '2px solid #f44336', 278 | background: '#f44336', 279 | 'border-radius': '3px', 280 | padding: '5px 10px', 281 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 282 | }, 283 | avatar: { 284 | 'text-align': 'center', 285 | position: 'relative', 286 | width: '75px', 287 | height: '75px', 288 | 'margin-left': '5px' 289 | }, 290 | avatarImg: { 291 | width: '100%', 292 | height: '100%', 293 | 'border-radius': '50%' 294 | }, 295 | githubCorner: { 296 | fill: '#fff', 297 | color: '#f44336', 298 | position: 'absolute', 299 | top: 0, 300 | right: 0, 301 | border: 0 302 | }, 303 | info: { 304 | width: '160px', 305 | 'text-align': 'right', 306 | 'font-size': '14px' 307 | }, 308 | name: { 309 | 'font-weight': 'bold', 310 | 'font-size': '16px' 311 | }, 312 | textLink: { 313 | color: '#fff' 314 | }, 315 | svgIcon: { 316 | fill: '#fff' 317 | } 318 | } 319 | 320 | themes.yellow = { 321 | flair: { 322 | 'box-sizing': 'border-box', 323 | 'line-height': 'normal', 324 | display: 'flex', 325 | 'align-items': 'center', 326 | width: '290px', 327 | height: '95px', 328 | color: '#212121', 329 | position: 'relative', 330 | border: '2px solid #ffeb3b', 331 | background: '#ffeb3b', 332 | 'border-radius': '3px', 333 | padding: '5px 10px', 334 | 'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' 335 | }, 336 | avatar: { 337 | 'text-align': 'center', 338 | position: 'relative', 339 | width: '75px', 340 | height: '75px', 341 | 'margin-left': '5px' 342 | }, 343 | avatarImg: { 344 | width: '100%', 345 | height: '100%', 346 | 'border-radius': '50%' 347 | }, 348 | githubCorner: { 349 | fill: '#212121', 350 | color: '#ffeb3b', 351 | position: 'absolute', 352 | top: 0, 353 | right: 0, 354 | border: 0 355 | }, 356 | info: { 357 | width: '160px', 358 | 'text-align': 'right', 359 | 'font-size': '14px' 360 | }, 361 | name: { 362 | 'font-weight': 'bold', 363 | 'font-size': '16px' 364 | }, 365 | textLink: { 366 | color: '#212121' 367 | }, 368 | svgIcon: { 369 | fill: '#212121' 370 | } 371 | } 372 | 373 | })(window.flairThemes = {}); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | GitHub Flair 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

GitHub Flair

16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 |
29 |
30 | Round Avatar    31 | Rainbow Avatar    32 |
33 | Display Blog/Website    34 | Display Followers    35 | Display Location    36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
    44 |
  • Enter your GitHub username or organization id to generate flairs
    • 45 |
  • GitHub corner logo inspired by GitHub Corners
    • 46 |
  • Theme PRs are welcome! Forks me here
    • 47 |
  • Due to high traffic, this website may reach GitHub unauthorized API rate limit, you could fork this repo and host it on your IP to eliminate the limitation
    • 48 |
49 |
50 |
51 |
52 |
53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /page.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 4em 0; 3 | } 4 | .logo{ 5 | width: 30%; 6 | } 7 | .flair-container{ 8 | margin-top: 20px; 9 | } 10 | .flair-container > div{ 11 | padding: 10px; 12 | height: 180px; 13 | display: flex; 14 | align-items: center; 15 | margin-bottom: 75px; 16 | } 17 | .flair-wrap > div, .text-wrap > div{ 18 | margin-left: auto; 19 | margin-right: auto; 20 | } 21 | .text-wrap > textarea{ 22 | text-align: center; 23 | width: 60%; 24 | height: 180px; 25 | } 26 | .author{ 27 | position: fixed; 28 | bottom: 10px; 29 | right: 20px; 30 | } 31 | 32 | .avatar .border{ 33 | position: absolute; 34 | top: 0; 35 | bottom: 0; 36 | left: 0; 37 | right: 0; 38 | border-width: 3px; 39 | border-top-style: dotted; 40 | border-bottom-style: dotted; 41 | border-left-style: dotted; 42 | border-right-style: dotted; 43 | border-color: hsl(265, 90%, 50%); 44 | animation: rainbow 5s infinite alternate, spin 10s linear infinite; 45 | border-radius: 50%; 46 | } 47 | @keyframes rainbow { 48 | 0% {border-color: hsl(265, 90%, 50%);} 49 | 100% {border-color: hsl(360, 90%, 50%);} 50 | } 51 | @keyframes spin { 52 | 0% { transform: rotate(0deg); } 53 | 100% { transform: rotate(360deg); } 54 | } -------------------------------------------------------------------------------- /sample.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoCen/github-flair/3acdf9b1cacb74cefa2b5e2cc61ce87a5f02b18b/sample.PNG -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | (function ($, themes) { 2 | 3 | var API_BASE_URL = "https://api.github.com/"; 4 | var LOCATION_ICON = ''; 5 | var GITHUB_CORNER = ''; 6 | var FOLLOWERS_ICON = ''; 7 | var REPO_ICON = ''; 8 | var GIST_ICON = ''; 9 | var RAINBOW_STYLE = '.github-flair-rainbow-avatar{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:-3px;border-width: 3px;border-top-style: dotted;border-bottom-style: dotted;border-left-style: dotted;border-right-style: dotted;border-color: hsl(250, 90%, 50%);animation: rainbow 5s infinite alternate, spin 10s linear infinite;border-radius: 50%;}@keyframes rainbow {0% {border-color: hsl(250, 90%, 50%);}100% {border-color: hsl(360, 90%, 50%);}}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}'; 10 | var profile = {}; 11 | 12 | $('.generate').click(start); 13 | $('.username').on('keypress', function (event) { 14 | if(event.keyCode === 13) start(); 15 | }); 16 | 17 | function start(){ 18 | var username = getInput(); 19 | profile = {}; 20 | if(!username) {} 21 | getUser(username).then(function(data){ 22 | getProfile(data); 23 | getRepos(username).then(function(data){ 24 | resetThemes(themes); 25 | getStars(data); 26 | var flairs = getFlairs(); 27 | var flairContainer = $('.flair-container'); 28 | flairContainer.empty(); 29 | flairs.forEach(function(flair){ 30 | flairContainer.append(getFlairSection(flair)); 31 | }) 32 | }); 33 | }); 34 | } 35 | 36 | function getInput(){ 37 | return $('.username').val(); 38 | } 39 | 40 | function getUser(username){ 41 | var url = API_BASE_URL + 'users/' + username; 42 | return $.get(url); 43 | } 44 | 45 | function getRepos(username){ 46 | var url = API_BASE_URL + 'users/' + username + '/repos'; 47 | return $.get(url); 48 | } 49 | 50 | function resetThemes(themes){ 51 | var isRound = isRoundAvatar(); 52 | var themeKeys = Object.keys(themes); 53 | themeKeys.forEach(function (themeKey) { 54 | themes[themeKey]['avatarImg']['border-radius'] = isRound ? '50%':'0'; 55 | }) 56 | } 57 | 58 | function getFlairSection(flairNode){ 59 | var div = document.createElement('DIV'); 60 | var divFlair = document.createElement('DIV'); 61 | var divText = document.createElement('DIV'); 62 | var textArea = document.createElement('TEXTAREA'); 63 | div.className = "col-xs-12"; 64 | divFlair.className = "col-xs-6 flair-wrap"; 65 | divFlair.appendChild(flairNode); 66 | divText.className = "col-xs-6 text-wrap"; 67 | 68 | textArea.value = $(flairNode).prop('outerHTML'); 69 | textArea.readOnly = 'readOnly'; 70 | textArea.onclick = function(){ 71 | this.focus(); 72 | this.select(); 73 | }; 74 | divText.appendChild(textArea); 75 | 76 | div.appendChild(divFlair); 77 | div.appendChild(divText); 78 | 79 | return div; 80 | } 81 | 82 | function getFlairs(){ 83 | var themeKeys = Object.keys(themes); 84 | var flairs = []; 85 | for(var i = 0; i < themeKeys.length; i++){ 86 | flairs.push(flairTemplate(themes[themeKeys[i]])); 87 | } 88 | return flairs; 89 | } 90 | 91 | function getProfile(userData){ 92 | profile.avatar = userData['avatar_url']; 93 | profile.link = userData['html_url']; 94 | profile.username = userData['login']; 95 | profile.location = userData['location']; 96 | profile.blog = userData['blog']; 97 | profile.company = userData['company']; 98 | 99 | profile.followers = truncateNum(userData['followers']); 100 | profile.followerUrl = userData['followers_url']; 101 | profile.followings = truncateNum(userData['followings']); 102 | profile.followingUrl = userData['following_url']; 103 | 104 | profile.gists = truncateNum(userData['public_gists']); 105 | profile.gistUrl = userData['gists_url']; 106 | profile.repos = truncateNum(userData['public_repos']); 107 | profile.repoUrl = userData['repos_url']; 108 | 109 | } 110 | 111 | function getStars(repoData) { 112 | var stars = 0; 113 | $.each(repoData||[], function (index, repo) { 114 | stars += parseInt(repo['stargazers_count'], 10); 115 | }); 116 | profile.stars = truncateNum(stars); 117 | } 118 | 119 | function truncateNum(number){ 120 | var num = parseInt(number, 10); 121 | if(num < 1000) return num; 122 | return (num / 1000).toFixed(1) + 'k'; 123 | } 124 | 125 | function styleString(styleObj){ 126 | var keys = Object.keys(styleObj); 127 | var str = ''; 128 | for(var i = 0; i < keys.length; i++){ 129 | str += keys[i]+':'+styleObj[keys[i]]+';'; 130 | } 131 | return str; 132 | } 133 | 134 | function flairTemplate(theme){ 135 | var div = document.createElement('DIV'); 136 | div.className = 'github-flair'; 137 | div.style = styleString(theme['flair']); 138 | 139 | var githubCornerNode = githubCornerTemplate(theme); 140 | var avatarNode = avatarTemplate(profile.avatar, profile.link, theme); 141 | var infoNode = infoTemplate(theme); 142 | 143 | div.appendChild(githubCornerNode); 144 | div.appendChild(avatarNode); 145 | div.appendChild(infoNode); 146 | 147 | if(isDisplayRainbow()){ 148 | div.appendChild(rainbowStyleTemplate()); 149 | } 150 | 151 | return div; 152 | } 153 | 154 | function githubCornerTemplate(theme){ 155 | var div = document.createElement('DIV'); 156 | div.innerHTML = GITHUB_CORNER; 157 | var svg = div.firstChild; 158 | svg.className = 'github-corner'; 159 | svg.style = styleString(theme['githubCorner']); 160 | return svg; 161 | } 162 | 163 | function avatarTemplate(imageUrl, profileUrl, theme) { 164 | var div = document.createElement('DIV'); 165 | var a = document.createElement('A'); 166 | var img = document.createElement('IMG'); 167 | a.href = profileUrl; 168 | a.target = '_blank'; 169 | img.src = imageUrl; 170 | img.alt = 'Profile Avatar'; 171 | img.style = styleString(theme['avatarImg']); 172 | a.appendChild(img); 173 | div.className = 'avatar'; 174 | div.style = styleString(theme['avatar']); 175 | 176 | if(isDisplayRainbow()){ 177 | var divBorder = document.createElement('DIV'); 178 | divBorder.className = 'github-flair-rainbow-avatar'; 179 | div.appendChild(divBorder); 180 | } 181 | div.appendChild(a); 182 | return div; 183 | } 184 | 185 | function rainbowStyleTemplate(){ 186 | var style = document.createElement('STYLE'); 187 | style.type = 'text/css'; 188 | if (style.styleSheet){ 189 | style.styleSheet.cssText = RAINBOW_STYLE; 190 | } else { 191 | style.appendChild(document.createTextNode(RAINBOW_STYLE)); 192 | } 193 | return style; 194 | } 195 | 196 | function infoTemplate(theme){ 197 | var div = document.createElement('DIV'); 198 | div.className = 'info'; 199 | div.style = styleString(theme['info']); 200 | 201 | var nameNode = nameTemplate(profile.username, profile.link, theme); 202 | var metaNode = metaTemplate(profile.followers, profile.repos, profile.gists, theme); 203 | var locNode = locationTemplate(profile.location, theme); 204 | var blogNode = blogTemplate(profile.blog, theme); 205 | 206 | div.appendChild(nameNode); 207 | div.appendChild(metaNode); 208 | if(locNode && isDisplayLocation()) div.appendChild(locNode); 209 | if(blogNode && isDisplayWebsite()) div.appendChild(blogNode); 210 | 211 | return div; 212 | } 213 | 214 | function nameTemplate(name, link, theme) { 215 | var div = document.createElement('DIV'); 216 | var a = document.createElement('A'); 217 | a.href = link; 218 | a.target = '_blank'; 219 | a.innerHTML = name; 220 | a.style = styleString(theme['textLink']); 221 | div.className = 'name'; 222 | div.style = styleString(theme['name']); 223 | div.appendChild(a); 224 | return div; 225 | } 226 | 227 | function metaTemplate(followerCount, repoCount, gistCount, theme){ 228 | var div = document.createElement('DIV'); 229 | div.className = 'meta'; 230 | var followerSpan = document.createElement('SPAN'); 231 | var repoSpan = document.createElement('SPAN'); 232 | var gistSpan = document.createElement('SPAN'); 233 | 234 | followerSpan.innerHTML = FOLLOWERS_ICON + ' ' + followerCount + '  '; 235 | repoSpan.innerHTML = REPO_ICON + ' ' + repoCount + '  '; 236 | gistSpan.innerHTML = GIST_ICON + ' ' + gistCount; 237 | 238 | followerSpan.firstChild.style = styleString(theme['svgIcon']); 239 | repoSpan.firstChild.style = styleString(theme['svgIcon']); 240 | gistSpan.firstChild.style = styleString(theme['svgIcon']); 241 | 242 | followerSpan.title = 'Followers'; 243 | repoSpan.title = 'Total Public Repositories'; 244 | gistSpan.title = 'Total Public Gists'; 245 | 246 | if(isDisplayFollowers()) div.appendChild(followerSpan); 247 | div.appendChild(repoSpan); 248 | div.appendChild(gistSpan); 249 | 250 | return div; 251 | } 252 | 253 | function blogTemplate(url, theme) { 254 | if(!url) return; 255 | var div = document.createElement('DIV'); 256 | var a = document.createElement('A'); 257 | div.className = 'blog'; 258 | a.href = /^https?:\/\//.test(url) ? url : 'http://' + url; 259 | a.target = "_blank"; 260 | a.innerHTML = 'Blog / Website'; 261 | a.style = styleString(theme['textLink']); 262 | div.appendChild(a); 263 | return div; 264 | } 265 | 266 | function locationTemplate(loc, theme){ 267 | if(!loc) return; 268 | var div = document.createElement('DIV'); 269 | var span = document.createElement('SPAN'); 270 | div.className = 'location'; 271 | div.insertAdjacentHTML('afterbegin', LOCATION_ICON); 272 | var svg = div.firstChild; 273 | svg.style = styleString(theme['svgIcon']); 274 | span.innerHTML = ' ' + loc; 275 | div.appendChild(span); 276 | return div; 277 | } 278 | 279 | function isDisplayRainbow() { 280 | return $('.display-rainbow')[0].checked; 281 | } 282 | 283 | function isDisplayWebsite() { 284 | return $('.display-website')[0].checked; 285 | } 286 | 287 | function isDisplayFollowers() { 288 | return $('.display-followers')[0].checked; 289 | } 290 | 291 | function isDisplayLocation() { 292 | return $('.display-location')[0].checked; 293 | } 294 | 295 | function isRoundAvatar(){ 296 | return $('.round-avatar')[0].checked; 297 | } 298 | 299 | })(window.jQuery, window.flairThemes); --------------------------------------------------------------------------------