update: github buttons updated

FarhadG · Nov 27, 2015 · de81c7a · de81c7a
1 parent 1594178
commit de81c7a
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
+.idea
 .DS_Store
 node_modules
-.idea
-dist
-lib/
+examples
+lib
diff --git a/bower.json b/bower.json
@@ -8,7 +8,10 @@
  ],
  "license": "MIT",
  "keywords": [
- "repo"
+ "repo",
+ "repo card",
+ "profile",
+ "id"
  ],
  "moduleType": [],
  "homepage": "https://www.github.com/farhadg/repo-card",
@@ -21,5 +24,8 @@
  "tests",
  "build",
  "dashboard"
- ]
+ ],
+ "dependencies": {
+ "script-tag-data": "~0.0.6"
+ }
 }
diff --git a/build/repo-card.js b/build/repo-card.js
@@ -56,48 +56,21 @@ var RepoCard = RepoCard || (function() {
 
  // generates the github star button for a given user and repo
 
- function _generateStarButton(username, repo) {
+ function _generateGithubButton(username, repo, type) {
  return [
- '<li id="repo-card__social-item">',
- '<a class="github-button"',
- 'href="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/' + username + '/' + repo + '"',
- 'data-icon="octicon-star"',
- 'data-count-href="/' + username + '/' + repo + '/stargazers"',
- 'data-count-api="/repos/' + username + '/' + repo + '#stargazers_count"',
- 'data-count-aria-label="# stargazers on GitHub"',
- 'aria-label="Star on GitHub">Star</a>',
- '</li>'
- ].join('');
- }
-
- // generates the github fork button for a given repo
-
- function _generateForkButton(username, repo) {
- return [
- '<li id="repo-card__social-item">',
- '<a class="github-button"',
- 'href="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/' + username + '/' + repo + '/fork"',
- 'data-icon="octicon-repo-forked"',
- 'data-count-href="/' + username + '/' + repo + '/network"',
- 'data-count-api="/repos/' + username + '/' + repo + '#forks_count"',
- 'data-count-aria-label="# forks on GitHub"',
- 'aria-label="Fork on GitHub">Fork</a>',
- '</li>'
+ '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
+ username, '&repo=', repo, '&type=', type, '&count=true"',
+ 'frameborder="0" scrolling="0" width="90px" height="20px"></iframe></li>'
  ].join('');
  }
 
  // generates the github follow button for a given user
 
  function _generateFollowButton(username) {
  return [
- '<li id="repo-card__social-item">',
- '<a class="github-button"',
- 'href="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/' + username + '"',
- 'data-count-href="/' + username + '/followers"',
- 'data-count-api="/users/' + username + '#followers"',
- 'data-count-aria-label="# followers on GitHub"',
- 'aria-label="Follow on GitHub">Follow @' + username + '</a>',
- '</li>'
+ '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
+ username, '&type=follow"',
+ 'frameborder="0" scrolling="0" width="140px" height="20px"></iframe></li>'
  ].join('');
  }
 
@@ -106,28 +79,17 @@ var RepoCard = RepoCard || (function() {
  function _generateSocialButtons(params) {
  var buttons = [];
  if (params.stars !== false) {
- buttons.push(_generateStarButton(params.username, params.repo));
+ buttons.push(_generateGithubButton(params.username, params.repo, 'star'));
  }
  if (params.fork !== false) {
- buttons.push(_generateForkButton(params.username, params.repo));
+ buttons.push(_generateGithubButton(params.username, params.repo, 'fork'));
  }
  if (params.follow !== false) {
  buttons.push(_generateFollowButton(params.username));
  }
  return buttons.join('');
  }
 
- // creates the script for the github buttons
-
- function _generateGithubButtonsScript() {
- var script = document.createElement('script');
- script.src = 'https://buttons.github.io/buttons.js';
- script.id = 'github-bjs';
- script.attributes.async = '';
- script.attributes.defer = '';
- return script;
- }
-
  // generates the styling within a <style> tag
 
  function _generateStylingTag(theme) {
@@ -225,7 +187,6 @@ var RepoCard = RepoCard || (function() {
  el.innerHTML = _generateRepoCard(this.params, this.theme.template);
  document.body.appendChild(el);
  document.getElementsByTagName('head')[0].appendChild(_generateStylingTag(this.params.theme));
- document.body.appendChild(_generateGithubButtonsScript());
  this.repoCardTemplateInjected = true;
  }
  if (this.params.background || this.params.thumb || this.params.position) {

diff --git a/build/themes/doodle/style.css b/build/themes/doodle/style.css
@@ -135,15 +135,15 @@
  width: 100%;
  display: table;
  border-top: 1px solid #CCCCCC;
- padding: 10px 0 5px;
+ padding: 10px 10px 5px 10px;
 }
 
-#repo-card__social-item {
+.repo-card__social-item {
  display: table-cell;
  text-align: center;
 }
 
-#repo-card__social-item a {
+.repo-card__social-item a {
  opacity: 0;
  font-size: 0;
  text-decoration: none;

diff --git a/build/sample.html → examples/index.html b/build/sample.html → examples/index.html
@@ -32,7 +32,7 @@
  background: 'url(http:https://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png)',
  thumb: 'url(https://avatars0.githubusercontent.com/u/1647596?v=3&s=460)',
  position: {
- top: 15,
+ bottom: 15,
  right: 15
  }
  });

diff --git a/repo-card.js b/repo-card.js
@@ -90,7 +90,7 @@ var RepoCard = RepoCard || (function() {
  RepoCard.themes = {
  doodle: {
  template: '<div id="repo-card">\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 0 5px;\n}\n\n#repo-card__social-item {\n display: table-cell;\n text-align: center;\n}\n\n#repo-card__social-item a {\n opacity: 0;\n font-size: 0;\n text-decoration: none;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n height: 150px;\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}',
+ 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 10px 5px 10px;\n}\n\n.repo-card__social-item {\n display: table-cell;\n text-align: center;\n}\n\n.repo-card__social-item a {\n opacity: 0;\n font-size: 0;\n text-decoration: none;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n height: 150px;\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'
@@ -124,48 +124,21 @@ var RepoCard = RepoCard || (function() {
 
  // generates the github star button for a given user and repo
 
- function _generateStarButton(username, repo) {
+ function _generateGithubButton(username, repo, type) {
  return [
- '<li id="repo-card__social-item">',
- '<a class="github-button"',
- 'href="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/' + username + '/' + repo + '"',
- 'data-icon="octicon-star"',
- 'data-count-href="/' + username + '/' + repo + '/stargazers"',
- 'data-count-api="/repos/' + username + '/' + repo + '#stargazers_count"',
- 'data-count-aria-label="# stargazers on GitHub"',
- 'aria-label="Star on GitHub">Star</a>',
- '</li>'
- ].join('');
- }
-
- // generates the github fork button for a given repo
-
- function _generateForkButton(username, repo) {
- return [
- '<li id="repo-card__social-item">',
- '<a class="github-button"',
- 'href="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/' + username + '/' + repo + '/fork"',
- 'data-icon="octicon-repo-forked"',
- 'data-count-href="/' + username + '/' + repo + '/network"',
- 'data-count-api="/repos/' + username + '/' + repo + '#forks_count"',
- 'data-count-aria-label="# forks on GitHub"',
- 'aria-label="Fork on GitHub">Fork</a>',
- '</li>'
+ '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
+ username, '&repo=', repo, '&type=', type, '&count=true"',
+ 'frameborder="0" scrolling="0" width="90px" height="20px"></iframe></li>'
  ].join('');
  }
 
  // generates the github follow button for a given user
 
  function _generateFollowButton(username) {
  return [
- '<li id="repo-card__social-item">',
- '<a class="github-button"',
- 'href="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/' + username + '"',
- 'data-count-href="/' + username + '/followers"',
- 'data-count-api="/users/' + username + '#followers"',
- 'data-count-aria-label="# followers on GitHub"',
- 'aria-label="Follow on GitHub">Follow @' + username + '</a>',
- '</li>'
+ '<li class="repo-card__social-item"><iframe src="https://ghbtns.com/github-btn.html?user=',
+ username, '&type=follow"',
+ 'frameborder="0" scrolling="0" width="140px" height="20px"></iframe></li>'
  ].join('');
  }
 
@@ -174,28 +147,17 @@ var RepoCard = RepoCard || (function() {
  function _generateSocialButtons(params) {
  var buttons = [];
  if (params.stars !== false) {
- buttons.push(_generateStarButton(params.username, params.repo));
+ buttons.push(_generateGithubButton(params.username, params.repo, 'star'));
  }
  if (params.fork !== false) {
- buttons.push(_generateForkButton(params.username, params.repo));
+ buttons.push(_generateGithubButton(params.username, params.repo, 'fork'));
  }
  if (params.follow !== false) {
  buttons.push(_generateFollowButton(params.username));
  }
  return buttons.join('');
  }
 
- // creates the script for the github buttons
-
- function _generateGithubButtonsScript() {
- var script = document.createElement('script');
- script.src = 'https://buttons.github.io/buttons.js';
- script.id = 'github-bjs';
- script.attributes.async = '';
- script.attributes.defer = '';
- return script;
- }
-
  // generates the styling within a <style> tag
 
  function _generateStylingTag(theme) {
@@ -293,7 +255,6 @@ var RepoCard = RepoCard || (function() {
  el.innerHTML = _generateRepoCard(this.params, this.theme.template);
  document.body.appendChild(el);
  document.getElementsByTagName('head')[0].appendChild(_generateStylingTag(this.params.theme));
- document.body.appendChild(_generateGithubButtonsScript());
  this.repoCardTemplateInjected = true;
  }
  if (this.params.background || this.params.thumb || this.params.position) {