├── .bowerrc
├── .gitignore
├── README.md
├── bower.json
├── build
    ├── repo-card.js
    └── themes
    │   └── doodle
    │       ├── index.html
    │       └── style.css
├── examples
    └── index.html
├── gulpfile.js
├── package.json
├── repo-card.js
└── repo-card.min.js


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "lib/"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | node_modules
4 | lib/
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a target="_blank" href="http://farhadg.github.io/repo-card/">Repo Card</a>
 2 | ===========================================================================
 3 | 
 4 | Give your repos some freshness with a <a target="_blank" href="http://farhadg.github.io/repo-card/">Repo Card</a>.
 5 | 
 6 | I often get lazy adding a profile to my repositories, especially when I'd like for them to get forked, starred, etc. 
 7 | If you've been there, then Repo Cards are for you.
 8 | 
 9 | ## Demo
10 | 
11 | Here's one of my own repos with one: <a target="_blank" href="http://farhadg.github.io/2048-cube/dist/">2048 Cube</a>
12 | 
13 | <a href="http://farhadg.github.io/2048-cube/dist/" target="_blank"><img src="http://i63.tinypic.com/x3tu6g.jpg" border="0" alt="2048 Cube"></a>
14 | 
15 | ## Usage
16 | 
17 | You can add a repo card in many different ways. Choose one that's easiest for you:
18 | 
19 | Reference the script file via the CDN (not fast, yet)
20 | ```javascript
21 | <script src="https://rawgit.com/FarhadG/repo-card/master/repo-card.min.js"></script>
22 | ```
23 | 
24 | Install via Bower
25 | ```bash
26 | $ bower install repo-card --save
27 | ```
28 | 
29 | Install via NPM 
30 | ```bash
31 | $ npm install repo-card --save
32 | ```
33 | 
34 | Then, you simply configure the Repo card with your info
35 | ```javascript
36 | // Once sourced from either a CDN or locally, you use the data-attributes to configure the repo card
37 | <script src="./repo-card.min.js" id="repo-card-lib"
38 |         data-repo="init"
39 |         data-username="farhadg"
40 |         data-title="Init">
41 | </script>
42 | ```
43 | 
44 | Or, you configure it within your app as seen in the `script` tag below
45 | ```javascript
46 | <script src="../lib/repo-card/repo-card.js"></script>
47 | <script>
48 |   RepoCard
49 |     .configure({
50 |       repo: 'init',
51 |       username: 'farhadg',
52 |       title: 'Init',
53 |       subtitle: '@farhadg',
54 |       info: 'A quick way to get you to the first commit of any GitHub repo (tracks branches too)',
55 |       position: {
56 |         top: 25
57 |         right: 25
58 |       }
59 |     });
60 | </script>
61 | ```
62 | 
63 | ## Options
64 | 
65 | Here are some options that you can set within the `data-attrbutes` (e.g. `data-info="some information`) or in your app.
66 | 
67 | - `repo`: The name of the repo 
68 | - `theme`: There's only one theme right now (`doodle`), however, I'd love more themes. Check out the `themes` folder or reach out if you'd like assistance in contributing
69 | - `username`: Your Github username
70 | - `title`: A title for the repo card
71 | - `subtitle`: A subtitle for the repo card
72 | - `info`: Some information you'd like to include about your project
73 | - `background`: Set the background (it accepts CSS, so HEX, RGB or even an image, `url(...)`, works
74 | - `thumb`: Set the thumbnail (it accepts CSS, so HEX, RGB or even an image, `url(...)`, works
75 | - `position`: The card is currently set to `fixed` position, so you can change its position (e.g. `position: { bottom: 15, left: 15 }`
76 | 
77 | 
78 | ## Coming
79 | 
80 | - More themes (would love your help on this)
81 | - GUI dashboard for configuring the Repo Card
82 | - Animations to have the repo card hide away with interactions (e.g. `scroll`)
83 | - NPM, Browserify, Webpack, etc. builds?
84 | 
85 | 
86 | ## Questions
87 | 
88 | Please use the issues page with any questions/concerns. If you like this idea and find it useful, please share the project as I'd love the help :) 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "repo-card",
 3 |   "description": "Give your projects a fresh look with a Repo Card",
 4 |   "version": "0.0.9",
 5 |   "main": "repo-card.min.js",
 6 |   "authors": [
 7 |     "Farhad Ghayour <me@farhadg.com>"
 8 |   ],
 9 |   "license": "MIT",
10 |   "keywords": [
11 |     "id",
12 |     "repo",
13 |     "repo card",
14 |     "profile",
15 |     "github stars",
16 |     "github followers",
17 |     "github forks",
18 |     "github buttons",
19 |     "github ribbon"
20 |   ],
21 |   "moduleType": [],
22 |   "homepage": "https://www.github.com/farhadg/repo-card",
23 |   "ignore": [
24 |     "**/.*",
25 |     "node_modules",
26 |     "bower_components",
27 |     "lib",
28 |     "test",
29 |     "tests",
30 |     "examples"
31 |   ],
32 |   "dependencies": {
33 |     "script-tag-data": "~0.0.6"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/build/repo-card.js:
--------------------------------------------------------------------------------
  1 | var ScriptTagData = require('exports?ScriptTagData!../lib/script-tag-data/script-tag-data.min.js');
  2 | 
  3 | /**
  4 |  * RepoCard constructor
  5 |  *
  6 |  * @returns {*}
  7 |  * @constructor
  8 |  */
  9 | 
 10 | function RepoCard() {
 11 |   if (!(this instanceof RepoCard)) {
 12 |     return new RepoCard();
 13 |   }
 14 |   var params = ScriptTagData.getData('repo-card-lib', true);
 15 |   if (params && Object.keys(params).length > 2) {
 16 |     this.configure(params);
 17 |   }
 18 | }
 19 | 
 20 | // various themes
 21 | 
 22 | RepoCard.themes = {
 23 |   doodle: {
 24 |     template: '@@import doodle/index.html',
 25 |     style: '@@import doodle/style.css',
 26 |     selectors: {
 27 |       background: 'repo-card__image-wrap',
 28 |       thumb: 'repo-card__thumb'
 29 |     }
 30 |   }
 31 | };
 32 | 
 33 | // Helper for setting a dom element's content
 34 | 
 35 | function _setContent(selector, data) {
 36 |   document.getElementById(selector).innerText = data;
 37 | }
 38 | 
 39 | // Helper for setting a dom element's style
 40 | 
 41 | function _setBackground(selector, value) {
 42 |   var el = document.getElementById(selector);
 43 |   el.style.background = value;
 44 | }
 45 | 
 46 | // Helper for setting the repo card's position
 47 | 
 48 | function _setPosition(values) {
 49 |   var el = document.getElementById('repo-card-container').style;
 50 |   el.position = 'fixed';
 51 |   el.top = el.right = el.bottom = el.left = 'initial';
 52 |   for (var position in values) {
 53 |     el[position] = values[position]+'px';
 54 |   }
 55 | }
 56 | 
 57 | // generates the github star button for a given user and repo
 58 | 
 59 | function _generateGithubButton(username, repo, type) {
 60 |   return [
 61 |     '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
 62 |     username, '&repo=', repo, '&type=', type, '&count=true"',
 63 |     'frameborder="0" scrolling="0" width="90px" height="20px"></iframe></li>'
 64 |   ].join('');
 65 | }
 66 | 
 67 | // generates the github follow button for a given user
 68 | 
 69 | function _generateFollowButton(username) {
 70 |   return [
 71 |     '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
 72 |     username, '&type=follow"',
 73 |     'frameborder="0" scrolling="0" width="130px" height="20px"></iframe></li>'
 74 |   ].join('');
 75 | }
 76 | 
 77 | // generates and adds the desired buttons into the dom
 78 | 
 79 | function _generateSocialButtons(params) {
 80 |   var buttons = [];
 81 |   if (params.stars !== false) {
 82 |     buttons.push(_generateGithubButton(params.username, params.repo, 'star'));
 83 |   }
 84 |   if (params.fork !== false) {
 85 |     buttons.push(_generateGithubButton(params.username, params.repo, 'fork'));
 86 |   }
 87 |   if (params.follow !== false) {
 88 |     buttons.push(_generateFollowButton(params.username));
 89 |   }
 90 |   return buttons.join('');
 91 | }
 92 | 
 93 | // generates the styling within a <style> tag
 94 | 
 95 | function _generateStylingTag(theme) {
 96 |   var tag = document.createElement('style');
 97 |   tag.innerHTML = RepoCard.themes[theme || 'doodle'].style;
 98 |   return tag;
 99 | }
100 | 
101 | // generates the template for the repo card
102 | 
103 | function _generateRepoCard(params, template) {
104 |   var result = [];
105 |   template.split('{{').forEach(function(word) {
106 |     if (/subtitle}}/.test(word)) {
107 |       result.push(params.subtitle);
108 |       result.push(word.split('subtitle}}')[1]);
109 |     }
110 |     else if (/title}}/.test(word)) {
111 |       result.push(params.title);
112 |       result.push(word.split('title}}')[1]);
113 |     }
114 |     else if (/info}}/.test(word)) {
115 |       result.push(params.info);
116 |       result.push(word.split('info}}')[1]);
117 |     }
118 |     else if (/buttons}}/.test(word)) {
119 |       result.push(_generateSocialButtons(params));
120 |       result.push(word.split('buttons}}')[1]);
121 |     }
122 |     else {
123 |       result.push(word);
124 |     }
125 |   });
126 |   return result.join('');
127 | }
128 | 
129 | /**
130 |  * Sets theme name from the given set of themes
131 |  *
132 |  * @param name
133 |  * @returns {RepoCard}
134 |  */
135 | 
136 | RepoCard.prototype.setTheme = function setTheme(name) {
137 |   var theme = RepoCard.themes[name];
138 |   if (theme) {
139 |     this.theme = theme;
140 |   }
141 |   else {
142 |     this.theme = RepoCard.themes['doodle'];
143 |     console.warn('"%s" is an invalid Repo Card theme. Reverting to default', name);
144 |   }
145 |   return this;
146 | };
147 | 
148 | /**
149 |  * Sets the styles of the repo card given the parameters.
150 |  *
151 |  * @returns {RepoCard}
152 |  */
153 | 
154 | RepoCard.prototype.setStyling = function setStyling(params) {
155 |   var params = this.params = Object.assign(this.params, params);
156 |   if (params.background) {
157 |     _setBackground(this.theme.selectors.background, params.background);
158 |   }
159 |   if (params.thumb) {
160 |     _setBackground(this.theme.selectors.thumb, params.thumb);
161 |   }
162 |   if (params.position) {
163 |     _setPosition(params.position)
164 |   }
165 |   return this;
166 | };
167 | 
168 | /**
169 |  * Configures the data based on the params provided to the lib script
170 |  *
171 |  * @param params
172 |  * @returns {RepoCard}
173 |  */
174 | 
175 | RepoCard.prototype.configure = function configure(params) {
176 |   this.params = this.params ? Object.assign(this.params, params) : params;
177 |   if (!this.theme || this.params.theme) {
178 |     this.setTheme(this.params.theme);
179 |   }
180 |   if (this.repoCardTemplateInjected) {
181 |     var repoCardContainer = document.getElementById('repo-card-container');
182 |     repoCardContainer.innerHTML = _generateRepoCard(this.params, this.theme.template);
183 |   }
184 |   else {
185 |     var el = document.createElement('div');
186 |     el.id = 'repo-card-container';
187 |     el.style.zIndex = 999999;
188 |     el.innerHTML = _generateRepoCard(this.params, this.theme.template);
189 |     document.body.appendChild(el);
190 |     document.getElementsByTagName('head')[0].appendChild(_generateStylingTag(this.params.theme));
191 |     this.repoCardTemplateInjected = true;
192 |   }
193 |   if (this.params.background || this.params.thumb || this.params.position) {
194 |     this.setStyling(this.params);
195 |   }
196 |   return this;
197 | };
198 | 
199 | /**
200 |  * Expose an instance of RepoCard
201 |  */
202 | 
203 | module.exports = new RepoCard();
204 | 


--------------------------------------------------------------------------------
/build/themes/doodle/index.html:
--------------------------------------------------------------------------------
 1 | <div id="repo-card">
 2 |   <p id="repo-card-close" onclick="javascript:document.getElementById('repo-card').style.display='none'">X</p>
 3 |   <div id="repo-card__image-wrap">
 4 |     <div id="repo-card__thumb-wrap">
 5 |       <img id="repo-card__thumb" />
 6 |     </div>
 7 |     <header id="repo-card__header">
 8 |       <h1 id="repo-card__title">
 9 |         {{title}}
10 |       </h1>
11 | 
12 |       <div id="repo-card__subtitle">
13 |         {{subtitle}}
14 |       </div>
15 |     </header>
16 |   </div>
17 |   <div id="repo-card__content-wrap">
18 |     <div id="repo-card__content">
19 |       {{info}}
20 |     </div>
21 |   </div>
22 |   <ul id="repo-card__social">
23 |     {{buttons}}
24 |   </ul>
25 | </div>


--------------------------------------------------------------------------------
/build/themes/doodle/style.css:
--------------------------------------------------------------------------------
  1 | #repo-card {
  2 |   box-sizing: border-box;
  3 |   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  4 |   background-color: #FFFFFF;
  5 |   line-height: 1.5em;
  6 |   margin: 0 auto;
  7 |   padding-bottom: 60px;
  8 |   width: 350px;
  9 |   border: 1px solid #CCCCCC;
 10 |   border-radius: 5px;
 11 |   overflow: hidden;
 12 | }
 13 | 
 14 | #repo-card a {
 15 |   color: #999;
 16 | }
 17 | 
 18 | #repo-card__image-wrap {
 19 |   height: 100px;
 20 |   width: 100%;
 21 |   position: relative;
 22 |   -webkit-transition: height .3s ease-in;
 23 |   transition: height .3s ease-in;
 24 | }
 25 | 
 26 | #repo-card__image-wrap:before {
 27 |   content: '';
 28 |   width: 100%;
 29 |   height: 100%;
 30 |   position: absolute;
 31 |   top: 0;
 32 |   left: 0;
 33 |   background-color: rgba(51, 51, 51, .25);
 34 |   z-index: 1;
 35 | }
 36 | 
 37 | #repo-card__header {
 38 |   text-align: left;
 39 |   padding-left: 140px;
 40 |   position: absolute;
 41 |   bottom: -28px;
 42 |   left: 0;
 43 |   color: #FFFFFF;
 44 |   z-index: 20;
 45 |   -webkit-transition: -webkit-transform .3s ease-in;
 46 |   transition: transform .3s ease-in;
 47 | }
 48 | 
 49 | #repo-card__title {
 50 |   margin: 0;
 51 |   color: #FFFFFF;
 52 |   font-size: 1.125em;
 53 |   font-weight: 400;
 54 |   z-index: 10;
 55 |   position: relative;
 56 |   padding-bottom: 6px;
 57 | }
 58 | 
 59 | #repo-card__subtitle {
 60 |   color: #999999;
 61 |   font-size: .875em;
 62 |   padding-top: 12px;
 63 |   -webkit-transition: -webkit-transform .3s ease-in;
 64 |   transition: transform .3s ease-in;
 65 | }
 66 | 
 67 | #repo-card__thumb-wrap {
 68 |   width: 110px;
 69 |   height: 110px;
 70 |   padding: 3px;
 71 |   position: absolute;
 72 |   bottom: -55px;
 73 |   left: 15px;
 74 |   border-radius: 50%;
 75 |   z-index: 10;
 76 |   -webkit-transition: -webkit-transform .3s linear;
 77 |   transition: transform .3s linear;
 78 | }
 79 | 
 80 | #repo-card__thumb {
 81 |   width: 104px;
 82 |   height: 104px;
 83 |   display: block;
 84 |   border-radius: 50%;
 85 |   background-size: cover !important;
 86 | }
 87 | 
 88 | #repo-card__content-wrap {
 89 |   padding-bottom: 0;
 90 |   min-height: 50px;
 91 |   position: relative;
 92 | }
 93 | 
 94 | #repo-card__content-wrap::after {
 95 |   content: '';
 96 |   position: absolute;
 97 |   top: -10px;
 98 |   left: 50%;
 99 |   z-index: 20;
100 |   width: 0;
101 |   height: 0;
102 |   border-style: solid;
103 |   border-width: 0 10px 10px;
104 |   border-color: transparent transparent #FFFFFF;
105 |   -webkit-transform: translateY(10px);
106 |   -ms-transform: translateY(10px);
107 |   transform: translateY(10px);
108 |   -webkit-transition: -webkit-transform .3s ease-in;
109 |   transition: transform .3s ease-in;
110 |   margin-left: -10px;
111 | }
112 | 
113 | #repo-card__content {
114 |   padding: 25px 20px 5px 20px;
115 |   text-align: left;
116 |   font-size: .875em;
117 |   color: #666666;
118 |   max-height: 0;
119 |   overflow: hidden;
120 |   -webkit-transform: translateY(-10%);
121 |   -ms-transform: translateY(-10%);
122 |   transform: translateY(-10%);
123 |   -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;
124 |   transition: max-height .3s ease-in, opacity .3s ease-in;
125 |   opacity: 0;
126 |   visibility: hidden;
127 | }
128 | 
129 | #repo-card__social {
130 |   position: absolute;
131 |   bottom: 0;
132 |   left: 0;
133 |   list-style: none;
134 |   margin: 0;
135 |   width: 100%;
136 |   display: table;
137 |   border-top: 1px solid #CCCCCC;
138 |   padding: 10px 0px 5px 0px;
139 | }
140 | 
141 | .repo-card__social-item {
142 |   display: table-cell;
143 |   text-align: center;
144 |   position: relative;
145 |   left: 5px;
146 | }
147 | 
148 | #repo-card:hover #repo-card__image-wrap {
149 |   height: 150px;
150 | }
151 | 
152 | #repo-card-close {
153 |   position: absolute;
154 |   top: -7px;
155 |   right: 8px;
156 |   color: white;
157 |   background: rgba(0, 0, 0, 0.5);
158 |   padding: 0 6px;
159 |   border-radius: 5px;
160 |   cursor: pointer;
161 |   z-index: 9999;
162 | }
163 | 
164 | #repo-card:hover #repo-card__content-wrap:after {
165 |   -webkit-transform: translateY(0);
166 |   -ms-transform: translateY(0);
167 |   transform: translateY(0);
168 | }
169 | 
170 | #repo-card:hover #repo-card__content {
171 |   max-height: 200px;
172 |   opacity: 1;
173 |   visibility: visible;
174 |   -webkit-transform: translateY(0);
175 |   -ms-transform: translateY(0);
176 |   transform: translateY(0);
177 |   -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;
178 |   transition: max-height .3s ease-in, opacity .3s ease-in;
179 | }
180 | 
181 | #repo-card:hover #repo-card__thumb-wrap {
182 |   -webkit-transform: translateY(-70%);
183 |   -ms-transform: translateY(-70%);
184 |   transform: translateY(-70%);
185 | }
186 | 
187 | #repo-card:hover #repo-card__header {
188 |   -webkit-transform: translateY(-110%);
189 |   -ms-transform: translateY(-110%);
190 |   transform: translateY(-110%);
191 | }
192 | 
193 | #repo-card:hover #repo-card__subtitle {
194 |   color: #FFFFFF;
195 |   -webkit-transform: translateY(-10px);
196 |   -ms-transform: translateY(-10px);
197 |   transform: translateY(-10px);
198 | }


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>GitHub Repo Card</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <!--one way of adding repo cards which needs the ID and the data points
10 | <script src="./repo-card.min.js"
11 |         id="repo-card-lib"
12 |         data-repo="init"
13 |         data-username="farhadg"
14 |         data-title="Init">
15 | </script>
16 | -->
17 | 
18 | <!-- another way of adding repo cards: a script tag with another configuring the options -->
19 | <!--CDN-->
20 | <!--<script src="https://cdn.rawgit.com/FarhadG/repo-card/master/repo-card.min.js"></script>-->
21 | <!--LOCALLY-->
22 | <script src="../repo-card.js"></script>
23 | <script>
24 |   RepoCard
25 |     .configure({
26 |       theme: 'doodle',
27 |       repo: 'init',
28 |       username: 'farhadg',
29 |       title: 'Init',
30 |       subtitle: '<a href="http://www.github.com/farhadg" target="_blank">@farhadg</a>',
31 |       info: 'A quick way to get you to the first commit of any GitHub repo (tracks branches too)',
32 |       background: 'url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png)',
33 |       thumb: 'url(https://avatars0.githubusercontent.com/u/1647596?v=3&s=460)',
34 |       position: {
35 |         bottom: 15,
36 |         right: 15
37 |       }
38 |     });
39 | </script>
40 | 
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | // module dependencies
 2 | 
 3 | var webpackStream = require('webpack-stream');
 4 | var inject = require('gulp-js-text-inject');
 5 | var rename = require('gulp-rename');
 6 | var concat = require('gulp-concat');
 7 | var uglify = require('gulp-uglify');
 8 | var gulp = require('gulp');
 9 | 
10 | // config
11 | 
12 | var config = {
13 |   watch: './build/**/*',
14 |   themes: './build/themes/',
15 |   lib: {
16 |     src: [
17 |       './lib/script-tag-data/script-tag-data.js',
18 |       './build/repo-card.js'
19 |     ],
20 |     rename: 'repo-card.js',
21 |     minify: 'repo-card.min.js',
22 |     dest: './'
23 |   },
24 |   webpack: {
25 |     output: {
26 |       libraryTarget: 'umd',
27 |       library: 'RepoCard'
28 |     }
29 |   }
30 | };
31 | 
32 | // minify and write contents
33 | 
34 | gulp.task('scripts', function() {
35 |   gulp.src(config.lib.src)
36 |     .pipe(webpackStream(config.webpack))
37 |     .pipe(inject({
38 |       basepath: config.themes
39 |     }))
40 |     .pipe(concat(config.lib.rename))
41 |     .pipe(gulp.dest(config.lib.dest))
42 |     .pipe(uglify())
43 |     .pipe(rename(config.lib.minify))
44 |     .pipe(gulp.dest(config.lib.dest));
45 | });
46 | 
47 | // watch the js file for changes
48 | 
49 | gulp.task('watch', function() {
50 |   gulp.watch(config.watch, ['build']);
51 | });
52 | 
53 | // command line task commands
54 | 
55 | gulp.task('build', ['scripts']);
56 | gulp.task('default', ['build', 'watch']);
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "repo-card",
 3 |   "version": "0.0.9",
 4 |   "description": "Give your repos some freshness with a Repo Card",
 5 |   "main": "repo-card.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://www.github.com/farhadg/repo-card.git"
12 |   },
13 |   "keywords": [
14 |     "repo",
15 |     "card",
16 |     "repo card",
17 |     "github profile",
18 |     "repo profile",
19 |     "github stars",
20 |     "github follow",
21 |     "github fork"
22 |   ],
23 |   "author": "",
24 |   "license": "MIT",
25 |   "homepage": "https://www.github.com/farhadg/repo-card",
26 |   "devDependencies": {
27 |     "exports-loader": "^0.6.2",
28 |     "gulp": "^3.9.0",
29 |     "gulp-concat": "^2.6.0",
30 |     "gulp-js-text-inject": "^1.0.0",
31 |     "gulp-rename": "^1.2.2",
32 |     "gulp-uglify": "^1.5.1",
33 |     "webpack": "^1.12.9",
34 |     "webpack-stream": "^2.2.0"
35 |   },
36 |   "dependencies": {}
37 | }
38 | 


--------------------------------------------------------------------------------
/repo-card.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["RepoCard"] = factory();
  8 | 	else
  9 | 		root["RepoCard"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | 
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | 
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | 
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | 
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | 
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | 
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | 
 39 | 
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | 
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | 
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | 
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ function(module, exports, __webpack_require__) {
 56 | 
 57 | 	__webpack_require__(1);
 58 | 	module.exports = __webpack_require__(2);
 59 | 
 60 | 
 61 | /***/ },
 62 | /* 1 */
 63 | /***/ function(module, exports) {
 64 | 
 65 | 	'use strict';
 66 | 
 67 | 	var ScriptTagData = ScriptTagData || (function() {
 68 | 
 69 | 	    /**
 70 | 	     * Private helper function to warn the user if the script wasn't found
 71 | 	     *
 72 | 	     * @param scriptId
 73 | 	     * @private
 74 | 	     */
 75 | 
 76 | 	    function _warnMessage(scriptId) {
 77 | 	      console.warn('script tag with id [%s] could not be found', scriptId);
 78 | 	      return null;
 79 | 	    }
 80 | 
 81 | 	    /**
 82 | 	     * Returns all of the data attributes from a given script ID
 83 | 	     *
 84 | 	     * @param scriptId
 85 | 	     * @param silent
 86 | 	     * @returns {*}
 87 | 	     */
 88 | 
 89 | 	    function getScript(scriptId, silent) {
 90 | 	      var scripts = document.getElementsByTagName('script');
 91 | 	      for (var i = 0, len = scripts.length; i < len; i++) {
 92 | 	        var script = scripts[i];
 93 | 	        var id = script.getAttribute('id');
 94 | 	        if (id === scriptId) return scripts[i];
 95 | 	      }
 96 | 	      return silent ? null : _warnMessage(scriptId);
 97 | 	    }
 98 | 
 99 | 	    /**
100 | 	     * Returns the script tag based on the given script ID
101 | 	     *
102 | 	     * @param scriptId
103 | 	     * @param silent
104 | 	     * @returns {*}
105 | 	     */
106 | 
107 | 	    function getData(scriptId, silent) {
108 | 	      var script = getScript(scriptId, silent);
109 | 	      if (!script) {
110 | 	        return null;
111 | 	      }
112 | 	      var data = {};
113 | 	      var attributes = script.attributes;
114 | 	      for (var label in attributes) {
115 | 	        if (attributes.hasOwnProperty(label)) {
116 | 	          var node = attributes[label];
117 | 	          data[node.name.replace(/data-/g, '')] = node.value;
118 | 	        }
119 | 	      }
120 | 	      return data;
121 | 	    }
122 | 
123 | 	    /**
124 | 	     * Returns functions 'getScript' and 'getData'
125 | 	     */
126 | 
127 | 	    return {
128 | 	      getScript: getScript,
129 | 	      getData: getData
130 | 	    };
131 | 
132 | 	  }());
133 | 
134 | /***/ },
135 | /* 2 */
136 | /***/ function(module, exports, __webpack_require__) {
137 | 
138 | 	var ScriptTagData = __webpack_require__(3);
139 | 
140 | 	/**
141 | 	 * RepoCard constructor
142 | 	 *
143 | 	 * @returns {*}
144 | 	 * @constructor
145 | 	 */
146 | 
147 | 	function RepoCard() {
148 | 	  if (!(this instanceof RepoCard)) {
149 | 	    return new RepoCard();
150 | 	  }
151 | 	  var params = ScriptTagData.getData('repo-card-lib', true);
152 | 	  if (params && Object.keys(params).length > 2) {
153 | 	    this.configure(params);
154 | 	  }
155 | 	}
156 | 
157 | 	// various themes
158 | 
159 | 	RepoCard.themes = {
160 | 	  doodle: {
161 | 	    template: '<div id="repo-card">\n  <p id="repo-card-close" onclick="javascript:document.getElementById(\'repo-card\').style.display=\'none\'">X</p>\n  <div id="repo-card__image-wrap">\n    <div id="repo-card__thumb-wrap">\n      <img id="repo-card__thumb" />\n    </div>\n    <header id="repo-card__header">\n      <h1 id="repo-card__title">\n        {{title}}\n      </h1>\n\n      <div id="repo-card__subtitle">\n        {{subtitle}}\n      </div>\n    </header>\n  </div>\n  <div id="repo-card__content-wrap">\n    <div id="repo-card__content">\n      {{info}}\n    </div>\n  </div>\n  <ul id="repo-card__social">\n    {{buttons}}\n  </ul>\n</div>',
162 | 	    style: '#repo-card {\n  box-sizing: border-box;\n  font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n  background-color: #FFFFFF;\n  line-height: 1.5em;\n  margin: 0 auto;\n  padding-bottom: 60px;\n  width: 350px;\n  border: 1px solid #CCCCCC;\n  border-radius: 5px;\n  overflow: hidden;\n}\n\n#repo-card a {\n  color: #999;\n}\n\n#repo-card__image-wrap {\n  height: 100px;\n  width: 100%;\n  position: relative;\n  -webkit-transition: height .3s ease-in;\n  transition: height .3s ease-in;\n}\n\n#repo-card__image-wrap:before {\n  content: \'\';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(51, 51, 51, .25);\n  z-index: 1;\n}\n\n#repo-card__header {\n  text-align: left;\n  padding-left: 140px;\n  position: absolute;\n  bottom: -28px;\n  left: 0;\n  color: #FFFFFF;\n  z-index: 20;\n  -webkit-transition: -webkit-transform .3s ease-in;\n  transition: transform .3s ease-in;\n}\n\n#repo-card__title {\n  margin: 0;\n  color: #FFFFFF;\n  font-size: 1.125em;\n  font-weight: 400;\n  z-index: 10;\n  position: relative;\n  padding-bottom: 6px;\n}\n\n#repo-card__subtitle {\n  color: #999999;\n  font-size: .875em;\n  padding-top: 12px;\n  -webkit-transition: -webkit-transform .3s ease-in;\n  transition: transform .3s ease-in;\n}\n\n#repo-card__thumb-wrap {\n  width: 110px;\n  height: 110px;\n  padding: 3px;\n  position: absolute;\n  bottom: -55px;\n  left: 15px;\n  border-radius: 50%;\n  z-index: 10;\n  -webkit-transition: -webkit-transform .3s linear;\n  transition: transform .3s linear;\n}\n\n#repo-card__thumb {\n  width: 104px;\n  height: 104px;\n  display: block;\n  border-radius: 50%;\n  background-size: cover !important;\n}\n\n#repo-card__content-wrap {\n  padding-bottom: 0;\n  min-height: 50px;\n  position: relative;\n}\n\n#repo-card__content-wrap::after {\n  content: \'\';\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  z-index: 20;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 10px 10px;\n  border-color: transparent transparent #FFFFFF;\n  -webkit-transform: translateY(10px);\n  -ms-transform: translateY(10px);\n  transform: translateY(10px);\n  -webkit-transition: -webkit-transform .3s ease-in;\n  transition: transform .3s ease-in;\n  margin-left: -10px;\n}\n\n#repo-card__content {\n  padding: 25px 20px 5px 20px;\n  text-align: left;\n  font-size: .875em;\n  color: #666666;\n  max-height: 0;\n  overflow: hidden;\n  -webkit-transform: translateY(-10%);\n  -ms-transform: translateY(-10%);\n  transform: translateY(-10%);\n  -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n  transition: max-height .3s ease-in, opacity .3s ease-in;\n  opacity: 0;\n  visibility: hidden;\n}\n\n#repo-card__social {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  list-style: none;\n  margin: 0;\n  width: 100%;\n  display: table;\n  border-top: 1px solid #CCCCCC;\n  padding: 10px 0px 5px 0px;\n}\n\n.repo-card__social-item {\n  display: table-cell;\n  text-align: center;\n  position: relative;\n  left: 5px;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n  height: 150px;\n}\n\n#repo-card-close {\n  position: absolute;\n  top: -7px;\n  right: 8px;\n  color: white;\n  background: rgba(0, 0, 0, 0.5);\n  padding: 0 6px;\n  border-radius: 5px;\n  cursor: pointer;\n  z-index: 9999;\n}\n\n#repo-card:hover #repo-card__content-wrap:after {\n  -webkit-transform: translateY(0);\n  -ms-transform: translateY(0);\n  transform: translateY(0);\n}\n\n#repo-card:hover #repo-card__content {\n  max-height: 200px;\n  opacity: 1;\n  visibility: visible;\n  -webkit-transform: translateY(0);\n  -ms-transform: translateY(0);\n  transform: translateY(0);\n  -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n  transition: max-height .3s ease-in, opacity .3s ease-in;\n}\n\n#repo-card:hover #repo-card__thumb-wrap {\n  -webkit-transform: translateY(-70%);\n  -ms-transform: translateY(-70%);\n  transform: translateY(-70%);\n}\n\n#repo-card:hover #repo-card__header {\n  -webkit-transform: translateY(-110%);\n  -ms-transform: translateY(-110%);\n  transform: translateY(-110%);\n}\n\n#repo-card:hover #repo-card__subtitle {\n  color: #FFFFFF;\n  -webkit-transform: translateY(-10px);\n  -ms-transform: translateY(-10px);\n  transform: translateY(-10px);\n}',
163 | 	    selectors: {
164 | 	      background: 'repo-card__image-wrap',
165 | 	      thumb: 'repo-card__thumb'
166 | 	    }
167 | 	  }
168 | 	};
169 | 
170 | 	// Helper for setting a dom element's content
171 | 
172 | 	function _setContent(selector, data) {
173 | 	  document.getElementById(selector).innerText = data;
174 | 	}
175 | 
176 | 	// Helper for setting a dom element's style
177 | 
178 | 	function _setBackground(selector, value) {
179 | 	  var el = document.getElementById(selector);
180 | 	  el.style.background = value;
181 | 	}
182 | 
183 | 	// Helper for setting the repo card's position
184 | 
185 | 	function _setPosition(values) {
186 | 	  var el = document.getElementById('repo-card-container').style;
187 | 	  el.position = 'fixed';
188 | 	  el.top = el.right = el.bottom = el.left = 'initial';
189 | 	  for (var position in values) {
190 | 	    el[position] = values[position]+'px';
191 | 	  }
192 | 	}
193 | 
194 | 	// generates the github star button for a given user and repo
195 | 
196 | 	function _generateGithubButton(username, repo, type) {
197 | 	  return [
198 | 	    '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
199 | 	    username, '&repo=', repo, '&type=', type, '&count=true"',
200 | 	    'frameborder="0" scrolling="0" width="90px" height="20px"></iframe></li>'
201 | 	  ].join('');
202 | 	}
203 | 
204 | 	// generates the github follow button for a given user
205 | 
206 | 	function _generateFollowButton(username) {
207 | 	  return [
208 | 	    '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
209 | 	    username, '&type=follow"',
210 | 	    'frameborder="0" scrolling="0" width="130px" height="20px"></iframe></li>'
211 | 	  ].join('');
212 | 	}
213 | 
214 | 	// generates and adds the desired buttons into the dom
215 | 
216 | 	function _generateSocialButtons(params) {
217 | 	  var buttons = [];
218 | 	  if (params.stars !== false) {
219 | 	    buttons.push(_generateGithubButton(params.username, params.repo, 'star'));
220 | 	  }
221 | 	  if (params.fork !== false) {
222 | 	    buttons.push(_generateGithubButton(params.username, params.repo, 'fork'));
223 | 	  }
224 | 	  if (params.follow !== false) {
225 | 	    buttons.push(_generateFollowButton(params.username));
226 | 	  }
227 | 	  return buttons.join('');
228 | 	}
229 | 
230 | 	// generates the styling within a <style> tag
231 | 
232 | 	function _generateStylingTag(theme) {
233 | 	  var tag = document.createElement('style');
234 | 	  tag.innerHTML = RepoCard.themes[theme || 'doodle'].style;
235 | 	  return tag;
236 | 	}
237 | 
238 | 	// generates the template for the repo card
239 | 
240 | 	function _generateRepoCard(params, template) {
241 | 	  var result = [];
242 | 	  template.split('{{').forEach(function(word) {
243 | 	    if (/subtitle}}/.test(word)) {
244 | 	      result.push(params.subtitle);
245 | 	      result.push(word.split('subtitle}}')[1]);
246 | 	    }
247 | 	    else if (/title}}/.test(word)) {
248 | 	      result.push(params.title);
249 | 	      result.push(word.split('title}}')[1]);
250 | 	    }
251 | 	    else if (/info}}/.test(word)) {
252 | 	      result.push(params.info);
253 | 	      result.push(word.split('info}}')[1]);
254 | 	    }
255 | 	    else if (/buttons}}/.test(word)) {
256 | 	      result.push(_generateSocialButtons(params));
257 | 	      result.push(word.split('buttons}}')[1]);
258 | 	    }
259 | 	    else {
260 | 	      result.push(word);
261 | 	    }
262 | 	  });
263 | 	  return result.join('');
264 | 	}
265 | 
266 | 	/**
267 | 	 * Sets theme name from the given set of themes
268 | 	 *
269 | 	 * @param name
270 | 	 * @returns {RepoCard}
271 | 	 */
272 | 
273 | 	RepoCard.prototype.setTheme = function setTheme(name) {
274 | 	  var theme = RepoCard.themes[name];
275 | 	  if (theme) {
276 | 	    this.theme = theme;
277 | 	  }
278 | 	  else {
279 | 	    this.theme = RepoCard.themes['doodle'];
280 | 	    console.warn('"%s" is an invalid Repo Card theme. Reverting to default', name);
281 | 	  }
282 | 	  return this;
283 | 	};
284 | 
285 | 	/**
286 | 	 * Sets the styles of the repo card given the parameters.
287 | 	 *
288 | 	 * @returns {RepoCard}
289 | 	 */
290 | 
291 | 	RepoCard.prototype.setStyling = function setStyling(params) {
292 | 	  var params = this.params = Object.assign(this.params, params);
293 | 	  if (params.background) {
294 | 	    _setBackground(this.theme.selectors.background, params.background);
295 | 	  }
296 | 	  if (params.thumb) {
297 | 	    _setBackground(this.theme.selectors.thumb, params.thumb);
298 | 	  }
299 | 	  if (params.position) {
300 | 	    _setPosition(params.position)
301 | 	  }
302 | 	  return this;
303 | 	};
304 | 
305 | 	/**
306 | 	 * Configures the data based on the params provided to the lib script
307 | 	 *
308 | 	 * @param params
309 | 	 * @returns {RepoCard}
310 | 	 */
311 | 
312 | 	RepoCard.prototype.configure = function configure(params) {
313 | 	  this.params = this.params ? Object.assign(this.params, params) : params;
314 | 	  if (!this.theme || this.params.theme) {
315 | 	    this.setTheme(this.params.theme);
316 | 	  }
317 | 	  if (this.repoCardTemplateInjected) {
318 | 	    var repoCardContainer = document.getElementById('repo-card-container');
319 | 	    repoCardContainer.innerHTML = _generateRepoCard(this.params, this.theme.template);
320 | 	  }
321 | 	  else {
322 | 	    var el = document.createElement('div');
323 | 	    el.id = 'repo-card-container';
324 | 	    el.style.zIndex = 999999;
325 | 	    el.innerHTML = _generateRepoCard(this.params, this.theme.template);
326 | 	    document.body.appendChild(el);
327 | 	    document.getElementsByTagName('head')[0].appendChild(_generateStylingTag(this.params.theme));
328 | 	    this.repoCardTemplateInjected = true;
329 | 	  }
330 | 	  if (this.params.background || this.params.thumb || this.params.position) {
331 | 	    this.setStyling(this.params);
332 | 	  }
333 | 	  return this;
334 | 	};
335 | 
336 | 	/**
337 | 	 * Expose an instance of RepoCard
338 | 	 */
339 | 
340 | 	module.exports = new RepoCard();
341 | 
342 | 
343 | /***/ },
344 | /* 3 */
345 | /***/ function(module, exports) {
346 | 
347 | 	"use strict";var ScriptTagData=ScriptTagData||function(){function t(t){return console.warn("script tag with id [%s] could not be found",t),null}function r(r,n){for(var a=document.getElementsByTagName("script"),e=0,u=a.length;u>e;e++){var i=a[e],c=i.getAttribute("id");if(c===r)return a[e]}return n?t(r):null}function n(n,a){var e=r(n);if(!e)return a&&t(n),null;var u={},i=e.attributes;for(var c in i)if(i.hasOwnProperty(c)){var o=i[c];u[o.name.replace(/data-/g,"")]=o.value}return u}return{getScript:r,getData:n}}();
348 | 
349 | 	/*** EXPORTS FROM exports-loader ***/
350 | 	module.exports = ScriptTagData
351 | 
352 | /***/ }
353 | /******/ ])
354 | });
355 | ;


--------------------------------------------------------------------------------
/repo-card.min.js:
--------------------------------------------------------------------------------
1 | !function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.RepoCard=t():n.RepoCard=t()}(this,function(){return function(n){function t(r){if(e[r])return e[r].exports;var i=e[r]={exports:{},id:r,loaded:!1};return n[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var e={};return t.m=n,t.c=e,t.p="",t(0)}([function(n,t,e){e(1),n.exports=e(2)},function(n,t){"use strict";var e=e||function(){function n(n){return console.warn("script tag with id [%s] could not be found",n),null}function t(t,e){for(var r=document.getElementsByTagName("script"),i=0,a=r.length;a>i;i++){var o=r[i],s=o.getAttribute("id");if(s===t)return r[i]}return e?null:n(t)}function e(n,e){var r=t(n,e);if(!r)return null;var i={},a=r.attributes;for(var o in a)if(a.hasOwnProperty(o)){var s=a[o];i[s.name.replace(/data-/g,"")]=s.value}return i}return{getScript:t,getData:e}}()},function(n,t,e){function r(){if(!(this instanceof r))return new r;var n=c.getData("repo-card-lib",!0);n&&Object.keys(n).length>2&&this.configure(n)}function i(n,t){var e=document.getElementById(n);e.style.background=t}function a(n){var t=document.getElementById("repo-card-container").style;t.position="fixed",t.top=t.right=t.bottom=t.left="initial";for(var e in n)t[e]=n[e]+"px"}function o(n,t,e){return['<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',n,"&repo=",t,"&type=",e,'&count=true"','frameborder="0" scrolling="0" width="90px" height="20px"></iframe></li>'].join("")}function s(n){return['<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',n,'&type=follow"','frameborder="0" scrolling="0" width="130px" height="20px"></iframe></li>'].join("")}function p(n){var t=[];return n.stars!==!1&&t.push(o(n.username,n.repo,"star")),n.fork!==!1&&t.push(o(n.username,n.repo,"fork")),n.follow!==!1&&t.push(s(n.username)),t.join("")}function d(n){var t=document.createElement("style");return t.innerHTML=r.themes[n||"doodle"].style,t}function l(n,t){var e=[];return t.split("{{").forEach(function(t){/subtitle}}/.test(t)?(e.push(n.subtitle),e.push(t.split("subtitle}}")[1])):/title}}/.test(t)?(e.push(n.title),e.push(t.split("title}}")[1])):/info}}/.test(t)?(e.push(n.info),e.push(t.split("info}}")[1])):/buttons}}/.test(t)?(e.push(p(n)),e.push(t.split("buttons}}")[1])):e.push(t)}),e.join("")}var c=e(3);r.themes={doodle:{template:'<div id="repo-card">\n  <p id="repo-card-close" onclick="javascript:document.getElementById(\'repo-card\').style.display=\'none\'">X</p>\n  <div id="repo-card__image-wrap">\n    <div id="repo-card__thumb-wrap">\n      <img id="repo-card__thumb" />\n    </div>\n    <header id="repo-card__header">\n      <h1 id="repo-card__title">\n        {{title}}\n      </h1>\n\n      <div id="repo-card__subtitle">\n        {{subtitle}}\n      </div>\n    </header>\n  </div>\n  <div id="repo-card__content-wrap">\n    <div id="repo-card__content">\n      {{info}}\n    </div>\n  </div>\n  <ul id="repo-card__social">\n    {{buttons}}\n  </ul>\n</div>',style:"#repo-card {\n  box-sizing: border-box;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  background-color: #FFFFFF;\n  line-height: 1.5em;\n  margin: 0 auto;\n  padding-bottom: 60px;\n  width: 350px;\n  border: 1px solid #CCCCCC;\n  border-radius: 5px;\n  overflow: hidden;\n}\n\n#repo-card a {\n  color: #999;\n}\n\n#repo-card__image-wrap {\n  height: 100px;\n  width: 100%;\n  position: relative;\n  -webkit-transition: height .3s ease-in;\n  transition: height .3s ease-in;\n}\n\n#repo-card__image-wrap:before {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(51, 51, 51, .25);\n  z-index: 1;\n}\n\n#repo-card__header {\n  text-align: left;\n  padding-left: 140px;\n  position: absolute;\n  bottom: -28px;\n  left: 0;\n  color: #FFFFFF;\n  z-index: 20;\n  -webkit-transition: -webkit-transform .3s ease-in;\n  transition: transform .3s ease-in;\n}\n\n#repo-card__title {\n  margin: 0;\n  color: #FFFFFF;\n  font-size: 1.125em;\n  font-weight: 400;\n  z-index: 10;\n  position: relative;\n  padding-bottom: 6px;\n}\n\n#repo-card__subtitle {\n  color: #999999;\n  font-size: .875em;\n  padding-top: 12px;\n  -webkit-transition: -webkit-transform .3s ease-in;\n  transition: transform .3s ease-in;\n}\n\n#repo-card__thumb-wrap {\n  width: 110px;\n  height: 110px;\n  padding: 3px;\n  position: absolute;\n  bottom: -55px;\n  left: 15px;\n  border-radius: 50%;\n  z-index: 10;\n  -webkit-transition: -webkit-transform .3s linear;\n  transition: transform .3s linear;\n}\n\n#repo-card__thumb {\n  width: 104px;\n  height: 104px;\n  display: block;\n  border-radius: 50%;\n  background-size: cover !important;\n}\n\n#repo-card__content-wrap {\n  padding-bottom: 0;\n  min-height: 50px;\n  position: relative;\n}\n\n#repo-card__content-wrap::after {\n  content: '';\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  z-index: 20;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 10px 10px;\n  border-color: transparent transparent #FFFFFF;\n  -webkit-transform: translateY(10px);\n  -ms-transform: translateY(10px);\n  transform: translateY(10px);\n  -webkit-transition: -webkit-transform .3s ease-in;\n  transition: transform .3s ease-in;\n  margin-left: -10px;\n}\n\n#repo-card__content {\n  padding: 25px 20px 5px 20px;\n  text-align: left;\n  font-size: .875em;\n  color: #666666;\n  max-height: 0;\n  overflow: hidden;\n  -webkit-transform: translateY(-10%);\n  -ms-transform: translateY(-10%);\n  transform: translateY(-10%);\n  -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n  transition: max-height .3s ease-in, opacity .3s ease-in;\n  opacity: 0;\n  visibility: hidden;\n}\n\n#repo-card__social {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  list-style: none;\n  margin: 0;\n  width: 100%;\n  display: table;\n  border-top: 1px solid #CCCCCC;\n  padding: 10px 0px 5px 0px;\n}\n\n.repo-card__social-item {\n  display: table-cell;\n  text-align: center;\n  position: relative;\n  left: 5px;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n  height: 150px;\n}\n\n#repo-card-close {\n  position: absolute;\n  top: -7px;\n  right: 8px;\n  color: white;\n  background: rgba(0, 0, 0, 0.5);\n  padding: 0 6px;\n  border-radius: 5px;\n  cursor: pointer;\n  z-index: 9999;\n}\n\n#repo-card:hover #repo-card__content-wrap:after {\n  -webkit-transform: translateY(0);\n  -ms-transform: translateY(0);\n  transform: translateY(0);\n}\n\n#repo-card:hover #repo-card__content {\n  max-height: 200px;\n  opacity: 1;\n  visibility: visible;\n  -webkit-transform: translateY(0);\n  -ms-transform: translateY(0);\n  transform: translateY(0);\n  -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n  transition: max-height .3s ease-in, opacity .3s ease-in;\n}\n\n#repo-card:hover #repo-card__thumb-wrap {\n  -webkit-transform: translateY(-70%);\n  -ms-transform: translateY(-70%);\n  transform: translateY(-70%);\n}\n\n#repo-card:hover #repo-card__header {\n  -webkit-transform: translateY(-110%);\n  -ms-transform: translateY(-110%);\n  transform: translateY(-110%);\n}\n\n#repo-card:hover #repo-card__subtitle {\n  color: #FFFFFF;\n  -webkit-transform: translateY(-10px);\n  -ms-transform: translateY(-10px);\n  transform: translateY(-10px);\n}",selectors:{background:"repo-card__image-wrap",thumb:"repo-card__thumb"}}},r.prototype.setTheme=function(n){var t=r.themes[n];return t?this.theme=t:(this.theme=r.themes.doodle,console.warn('"%s" is an invalid Repo Card theme. Reverting to default',n)),this},r.prototype.setStyling=function(n){var n=this.params=Object.assign(this.params,n);return n.background&&i(this.theme.selectors.background,n.background),n.thumb&&i(this.theme.selectors.thumb,n.thumb),n.position&&a(n.position),this},r.prototype.configure=function(n){if(this.params=this.params?Object.assign(this.params,n):n,(!this.theme||this.params.theme)&&this.setTheme(this.params.theme),this.repoCardTemplateInjected){var t=document.getElementById("repo-card-container");t.innerHTML=l(this.params,this.theme.template)}else{var e=document.createElement("div");e.id="repo-card-container",e.style.zIndex=999999,e.innerHTML=l(this.params,this.theme.template),document.body.appendChild(e),document.getElementsByTagName("head")[0].appendChild(d(this.params.theme)),this.repoCardTemplateInjected=!0}return(this.params.background||this.params.thumb||this.params.position)&&this.setStyling(this.params),this},n.exports=new r},function(n,t){"use strict";var e=e||function(){function n(n){return console.warn("script tag with id [%s] could not be found",n),null}function t(t,e){for(var r=document.getElementsByTagName("script"),i=0,a=r.length;a>i;i++){var o=r[i],s=o.getAttribute("id");if(s===t)return r[i]}return e?n(t):null}function e(e,r){var i=t(e);if(!i)return r&&n(e),null;var a={},o=i.attributes;for(var s in o)if(o.hasOwnProperty(s)){var p=o[s];a[p.name.replace(/data-/g,"")]=p.value}return a}return{getScript:t,getData:e}}();n.exports=e}])});


--------------------------------------------------------------------------------