您好，

我下载了源码，但是不知道怎样看起，能给我一点指点吗？ 我从index.html看起， 那个widget.js和src里面的widget.js，是一回事吗？根目录下的widget.js又是minify的，不知道怎么阅读，是否在beautify之后，还需要加工？

还有site.js里面这句话看不懂：
var iframe = githubCard.render(card, 'card.html');

这个render方法是哪里来的呢？

还有theme底下的default.html和default.css在哪里用到的呢？

弱弱地，求解。

Hi lepture, I'm very new to web development and I am trying to include your style of github card on my website. I've been using a lot of the Flexible Box Model, but your card doesn't seem to be doing very well with centering vertically in my horizontal layout. Here is a screenshot:

Please let me know if you have any suggestions, I could be missing something obvious.

Here is the code I'm using.

I really like this idea! Nice job.

Hi.

I like your github-cards very much and I used it on my site to show my GitHub user profile.

I think it would be very nice to show user bio below the card header in User Card widget, and make it as an optional setting.

Here is the preview of what I want:

Thanks.

On your README you say that "This project is under the BSD License." However your LICENSE is all rights reserved. Could you change that?

With a somewhat lengthy repo name I can't get it to display quite right in 250px width. Any ideas?
http://jmonkeyengine.org/
Edit: I pushed it to 256 and at least the name displays fully now, but the "Java" tag is completely hidden behind it.

In any case, thanks for an absolutely wonderful little utility! I hope GitHub adopts this as a standard embed offering.

Haven't found any examples with just a really long name, but it seems like gh-cards consistently tries to text-wrap any text that follows the second underscore/hyphen:

why to usw ?

When apply github-cards to some repos that have no language, it will display language with null. (e.g.,: larrydarrelc/github-stars)

Maybe it's better to display an empty string instead of null?

https://cdn.jsdelivr.net/github-cards/1.0.4/

medium.html?user=wsgzao&identity=ghcard-wsgzao-3&client_id=a11a1bda412d928fb39a&client_secret=92b7cf30bc42c49d589a10372c3f9ff3bb310037:1 GET https://assets-cdn.github.com/assets/modules/aws/aws-bg-80b292690ba587b305c2c038c496ffc8ff08d3bf6be6c1ba64d48bedc09cc36f.jpg 404 (Not Found)

Please fix it if you have time

when i embed the code example somewhere i get

Couldn't find the requested file /cards/default.html in lepture/github-cards.

The protocol-relative links starting with //... only work if one is on a remote web page reached via http:// or https://. On local pages, this resolves to file://... and the iframe cannot be displayed.

For some reason it has stopped rendering in Safari browser. In all other browsers, it does show up but the background for the themed github card is black.

Hey, I'm using your widget but since some days I've this error:

The page where I'm loading your widget is:
http://davideprati.com/tools

When showing just one card there is no problem, when showing 6 I've this behaviour. This error happens randomly, it is not alway reproducible

For some reason, this won't show a card if React is in the name.

I tried a number of name changes with my React project, the only one that worked was spelling React incorrectly like "Reaact".

An input form on the site to generate the widget.

here're my code :

class Beranda extends React.Component
{
    componentWillMount() {
        const script = document.createElement("script");
        script.src = "//cdn.jsdelivr.net/github-cards/latest/widget.js";
        document.body.appendChild(script);
    }
    render()
    {
        return(
            <div>
                <Container fluid>
                        <div className="github-card" data-github="dhanyn10/minini" data-width="400" data-height="" data-theme="medium"></div>
                        <div className="github-card" data-github="dhanyn10/simple-chat-socketio" data-width="400" data-height="155" data-theme="default"></div>
                </Container>
            </div>
        );
    }
}

and result become :

Hi,

For fetching data from GitHub, you can simply make an AJAX call. Just curious why did you use JSONP instead of AJAX?

Thanks,
Pavan

生成的Card中会有这句："Available for hire." ， 这个能不能定制啊。

Embedding a single commit would be very nice, something in the lines of how GitHub does it maybe?

github avatar url has a s param which can specify the size of avatar.
e.g. https://avatars.githubusercontent.com/u/1147375?v=2&s=48

some user use large image for avatar, but github-cards only use 48 x 48 size. so i think this optimize can reduce majority of network throughput in some scenarios.

http://cnodejs.org/

我在社区直接引用了

<iframe src="http://lab.lepture.com/github-cards/card.html?user=USERNAME" frameborder="0" scrolling="0" width="400" height="200" allowtransparency></iframe>

这个代码来显示 github profile。

如果给你的服务器造成困扰的话，麻烦提前跟我说一声哈..我就图个省事所以直接用了 -_-。

Please see to this page.

The URL in the project is http://rjxy.hfut.edu.cn/stumgr. In the GitHub card, it becomes https://lab.lepture.com/github-cards/cards/rjxy.hfut.edu.cn/stumgr. Obviously, there's something wrong with your code.

Currently it isn't able to display 🎼 or other emojis. Would be nice if it were able to do that. (Even though this is a very trivial issue)

So, I have included the widget using

<div class="github-card" data-user="leesdolphin"></div>
<script src="http://lab.lepture.com/github-cards/widget.js"></script>

Unfortunately when I try to load in the widget(from a page running on localhost) I get the following error:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
      card.html?user=leesdolphin&identity=ghcard-leesdolphin-1:5
i 
      card.html?user=leesdolphin&identity=ghcard-leesdolphin-1:5
s
      card.html?user=leesdolphin&identity=ghcard-leesdolphin-1:5
f
      card.html?user=leesdolphin&identity=ghcard-leesdolphin-1:5
(anonymous function)
      card.html?user=leesdolphin&identity=ghcard-leesdolphin-1:5
(anonymous function)
      card.html?user=leesdolphin&identity=ghcard-leesdolphin-1:5

I think that all is needed is the store function on line 17 of src/card.js to have a try catch block around it.

While being able to use a CDN link is nice, I do want to be able to tweak a few things in the layout of my card (mainly I just want to remove the Gist column, as I don't have any and I'd like to make my card smaller). Is there a way to point widget.js at a "local" directory when retrieving theme definitions?

We can solve this problem a little by LocalStorage.

http://lab.lepture.com/github-cards/#some-some

When using my username I get the following errors:

GET https://www.google-analytics.com/analytics.js net::ERR_BLOCKED_BY_CLIENT
(anonymous) @ default.html?user=sceiler&identity=ghcard-sceiler-1:1
(anonymous) @ default.html?user=sceiler&identity=ghcard-sceiler-1:1

and this one

Uncaught TypeError: Cannot read property 'replace' of null
    at p (default.html?user=sceiler&identity=ghcard-sceiler-1:1)
    at default.html?user=sceiler&identity=ghcard-sceiler-1:1
    at XMLHttpRequest.n.onload (default.html?user=sceiler&identity=ghcard-sceiler-1:1)
p @ default.html?user=sceiler&identity=ghcard-sceiler-1:1
(anonymous) @ default.html?user=sceiler&identity=ghcard-sceiler-1:1
n.onload @ default.html?user=sceiler&identity=ghcard-sceiler-1:1

This is how I embed a github card:

<html>
  <body>
    <div class="github-card" data-github="sceiler" data-width="400" data-height="" data-theme="default"></div>
    <script src="https://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
  </body>
</html>

Doesnt look so good right?
Since yesterdy it looks like this 😃

Full iFrame content:
<html><head></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;style type="text/css"&gt;body{padding:0;margin:0;font-size:14px;font-family:"Helvetica Nenu",Hevetica,Arial,sans-serif;overflow:hidden}body.ready{border:1px solid #eee;border-radius:5px;border-color:#eee #ddd #bbb;box-shadow:rgba(0,0,0,.14) 0 1px 3px}.github-card{border-radius:5px;padding:8px 8px 0;background:#fff;color:#555;position:relative}.github-card a{text-decoration:none;color:#4183c4;outline:0}.github-card a:hover{text-decoration:underline}.github-card .header{position:relative}.github-card .button{position:absolute;top:0;right:0;padding:4px 8px 4px 7px;color:#555;text-shadow:0 1px 0 #fff;border:1px solid #d4d4d4;border-radius:3px;font-size:13px;font-weight:700;line-height:14px;background-color:#e6e6e6;background-image:-webkit-linear-gradient(#fafafa,#eaeaea);background-image:-moz-linear-gradient(#fafafa,#eaeaea);background-image:-ms-linear-gradient(#fafafa,#eaeaea);background-image:linear-gradient(#fafafa,#eaeaea)}.github-card .button:hover{color:#fff;text-decoration:none;background-color:#3072b3;background-image:-webkit-linear-gradient(#599bdc,#3072b3);background-image:-moz-linear-gradient(#599bdc,#3072b3);background-image:-ms-linear-gradient(#599bdc,#3072b3);background-image:linear-gradient(#599bdc,#3072b3);border-color:#518cc6 #518cc6 #2a65a0;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.user-card .header{padding:3px 0 4px 57px;min-height:48px}.user-card .header a{color:#707070;text-decoration:none}.user-card .header a:hover strong{text-decoration:underline}.user-card img{position:absolute;top:0;left:0;width:48px;height:48px;background:#fff;border-radius:4px}.user-card strong{display:block;color:#292f33;font-size:16px;line-height:1.6}.user-card ul{text-transform:uppercase;font-size:12px;color:#707070;list-style-type:none;margin:0;padding:0;border-top:1px solid #eee;border-bottom:1px solid #eee;zoom:1}.user-card ul:after{display:block;content:'';clear:both}.user-card .status a{color:#707070;text-decoration:none}.user-card .status a:hover{color:#4183c4}.user-card .status li{float:left;padding:4px 18px;border-left:1px solid #eee}.user-card .status li:first-child{border-left:0;padding-left:0}.user-card .footer{font-size:12px;font-weight:700;padding:11px 0 10px;color:#646464}.user-card .footer a{color:#646464}.repo-card .header{padding:3px 0 4px 57px}.repo-card .avatar,.repo-card .avatar img{position:absolute;top:0;left:0;width:48px;height:48px;background:#fff;border-radius:4px}.repo-card .header a{color:#707070}.repo-card .header strong{display:block;font-size:18px;line-height:1.4}.repo-card .header strong a{color:#292f33}.repo-card .header sup{font-size:10px;margin-left:3px;color:#797979}.repo-card .content{padding:6px 0 10px}.repo-card .content p{margin:0 5px 0 0;font:18px/24px Georgia,"Times New Roman",Palatino,serif;overflow:hidden;clear:both;word-wrap:break-word}.repo-card .footer{border-top:1px solid #eee;padding:8px 0 6px}.repo-card .status{font-size:10px;padding-right:10px;text-transform:uppercase}.repo-card .status strong{font-size:12px;padding-right:5px}&lt;/style&gt;&lt;script id="user-card" type="text/template"&gt;&lt;div class="header"&gt;&lt;a class="avatar" href="https://github.com/{login}"&gt;&lt;img src="{avatar_url}&amp;s=48"&gt;&lt;strong&gt;{name}&lt;/strong&gt;&lt;span&gt;@{login}&lt;/span&gt;&lt;/a&gt;&lt;a class="button" href="https://github.com/{login}"&gt;Follow&lt;/a&gt;&lt;/div&gt;&lt;ul class="status"&gt;&lt;li&gt;&lt;a href="https://github.com/{login}?tab=repositories"&gt;&lt;strong&gt;{public_repos}&lt;/strong&gt;Repos&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="https://gist.github.com/{login}"&gt;&lt;strong&gt;{public_gists}&lt;/strong&gt;Gists&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="https://github.com/{login}/followers"&gt;&lt;strong&gt;{followers}&lt;/strong&gt;Followers&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div class="footer"&gt;{job}&lt;/div&gt;&lt;/script&gt;&lt;script id="repo-card" type="text/template"&gt;&lt;div class="header"&gt;&lt;a class="avatar" href="https://github.com/{login}"&gt;&lt;img src="{avatar_url}&amp;s=48"&gt;&lt;/a&gt;&lt;strong class="name"&gt;&lt;a href="https://github.com/{full_name}"&gt;{name}&lt;/a&gt;&lt;sup class="language"&gt;{language}&lt;/sup&gt;&lt;/strong&gt;&lt;span&gt;{action}&lt;a href="https://github.com/{login}"&gt;{login}&lt;/a&gt;&lt;/span&gt;&lt;a class="button" href="https://github.com/{full_name}"&gt;Star&lt;/a&gt;&lt;/div&gt;&lt;div class="content"&gt;&lt;p&gt;{description}{homepage}&lt;/p&gt;&lt;/div&gt;&lt;div class="footer"&gt;&lt;span class="status"&gt;&lt;strong&gt;{forks_count}&lt;/strong&gt;Forks&lt;/span&gt;&lt;span class="status"&gt;&lt;strong&gt;{watchers_count}&lt;/strong&gt;Stars&lt;/span&gt;&lt;/div&gt;&lt;/script&gt;&lt;script&gt;function querystring(){var e=window.location.href,r;var t=e.slice(e.indexOf("?")+1).split("&amp;");var a=[];for(i=0;i&lt;t.length;i++){r=t[i].split("=");a.push(r[0]);a[r[0]]=r[1]}return a}var qs=querystring();(function(e){var r="https://api.github.com/",t;function a(e,r){try{if(window.localStorage){if(r){r._timestamp=(new Date).valueOf();localStorage[e]=JSON.stringify(r)}else{var t=localStorage[e];if(t){return JSON.parse(t)}return null}}}catch(a){}}function n(e,r){var t=e;var a=r.split(".");for(var n=0;n&lt;a.length;n++){if(t){t=t[a[n]]}else{break}}if(t===undefined||t===null){return""}return t}function i(r,a){var i=e.getElementById(r+"-card");var s=/{([^}]+)}/g;var o=i.innerHTML;var l=o.match(s);for(t=0;t&lt;l.length;t++){o=o.replace(l[t],n(a,l[t].slice(1,-1)))}return o}function s(e,r){var t=a(e);if(t&amp;&amp;t._timestamp){if((new Date).valueOf()-t._timestamp&lt;1e4){return r(t)}}if(qs.client_id&amp;&amp;qs.client_secret){e+="?client_id="+qs.client_id+"&amp;client_secret="+qs.client_secret}var n=new XMLHttpRequest;n.open("GET",e,true);n.onload=function(){r(JSON.parse(n.response))};n.send()}function o(r,a){var n=r.getElementsByTagName("a");for(t=0;t&lt;n.length;t++){(function(e){e.target="_"+(qs.target||"top")})(n[t])}e.body.appendChild(r);e.body.className="ready";if(parent!==self&amp;&amp;parent.postMessage){var i=Math.max(e.body.scrollHeight,e.documentElement.scrollHeight,e.body.offsetHeight,e.documentElement.offsetHeight,e.body.clientHeight,e.documentElement.clientHeight);parent.postMessage({height:i,sender:qs.identity||"*"},"*")}}function l(t){var n=r+"users/"+t;s(n,function(r){r=r||{};var s=r.message;var l="0";if(s){r=a(n)||r;l="?"}else{a(n,r)}r.login=t;r.name=p(r.name);r.public_repos=f(r.public_repos)||l;r.public_gists=f(r.public_gists)||l;r.followers=f(r.followers)||l;var c="Not available for hire.";if(r.hireable){var u="";if(r.email){u="mailto:"+r.email}else if(r.blog){u=r.blog}else{u=r.html_url}c='&lt;a href="'+u+'"&gt;Available for hire.&lt;/a&gt;'}if(s){c=s}r.job=c;var g=e.createElement("div");g.className="github-card user-card";g.innerHTML=i("user",r);o(g)})}function c(t,n){var l=r+"repos/"+t+"/"+n;s(l,function(r){r=r||{};var n=r.message;var s="0";if(n){r=a(l)||r;s="?"}else{a(l,r)}r.login=t;r.avatar_url="";if(r.owner&amp;&amp;r.owner.avatar_url){r.avatar_url=r.owner.avatar_url}r.forks_count=f(r.forks_count)||s;r.watchers_count=f(r.watchers_count)||s;if(r.fork){r.action="Forked by "}else{r.action="Created by "}var c=r.description;if(!c&amp;&amp;r.source){c=r.source.description}if(!c&amp;&amp;n){c=n}r.description=p(c)||"No description";var u=r.homepage;if(!u&amp;&amp;r.source){u=r.source.homepage}if(u){r.homepage=' &lt;a href="'+u+'"&gt;'+u.replace(/https?:\/\//,"").replace(/\/$/,"")+"&lt;/a&gt;"}else{r.homepage=""}var g=e.createElement("div");g.className="github-card repo-card";g.innerHTML=i("repo",r);o(g)})}function u(){}function f(e){if(!e)return null;if(e===1e3)return 1;if(e&lt;1e3)return e;e=e/1e3;if(e&gt;10)return parseInt(e,10)+"k";return e.toFixed(1)+"k"}if(!qs.user){u()}else if(qs.repo){c(qs.user,qs.repo)}else{l(qs.user)}function p(e){return e.replace(/&lt;/g,"&amp;lt;").replace(/&gt;/g,"&amp;gt;")}})(document);(function(e,r,t,a,n,i,s){e["GoogleAnalyticsObject"]=n;e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date;i=r.createElement(t),s=r.getElementsByTagName(t)[0];i.async=1;i.src=a;s.parentNode.insertBefore(i,s)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create","UA-21475122-2","auto");var t=qs.user;if(qs.repo)t+="/"+qs.repo;ga("send","pageview",{title:t});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre></body></html>

Just noticed I cannot use your service since http://lab.lepture.com/ doesn't run on SSL... any chance you can enable SSL at some point in time? 😄

It would be nice if this message was optional to be displayed.

I found some people hesitate to fork this project because there is no LICENCE.

Add widget.js to render card:

User card:

<div class="github-card" data-user="lepture"></div>

Repo card:

<div class="github-card" data-user="lepture" data-repo="github-cards"></div>

In this case, widget.js can adjust the height of the iframe dynamically.

I would love to see this feature. Do you have plan for this?

http://cdn.jsdelivr.net/github-cards/1.0.3/cards/default.html?user=lepture&identity=ghcard-lepture-1

Would you consider adding an organization count to the cards? Or some other indicator of orgs?

Very nitpicky, but padding, border-radii, and line-height ratios can definitely be improved upon from a design standpoint. These should also vary by card-size.

Will give designs due diligence and upload screenshots.

其实已经star了，但是widget里面还是未star状态

Hey I've got this error

API rate limit exceeded for IP 1xx.x.1x7.x5. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

How to solve this?

Hi !
I'm looking forward to contribute to this project, but I'm having trouble building it in the first place.
The generate.py script raises several errors when executed with python3.7 :

• related to software I miss (mainly npm stuff) that I think should be listed in the README
• problems in the python script itself (mainly problems of string != binary string)

I'll be trying to correct that in my next PR.

This is the only viable github card repo on Github and I am having a major issue getting the embedded card to appear.

The embedded card instead shows as a grey puzzle-peace for no clear reason. The console also shows no errors.

<div class="github-card" data-github="dawsonbotsford" data-width="400" data-height="150" data-theme="default"></div>
<script src="https://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>

github-follow

Use this implementation for a dynamic follow button.

I am unable to get a card to render for GitHub user https://github.com/GwhsRobotics3

The preview tool at http://lab.lepture.com/github-cards/#GwhsRobotics3|default shows a blank space instead of a card. Problem persists in both Chrome and Firefox on my Mac.

However, the tool works for my own username:

I am unable to display a github card for @GwhsRobotics3

I don't quite understand what's happening, but the cards are not visible on the actual website. This is the card code

<div class="github-card" id="120403299" data-github="jsdev17/reservations" data-width="400" data-height="" data-theme="default"></div>

And this is the script tag, which I've included in the head of my index.html file; placing it at the bottom of the body doesn't work either

<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>

This is how I'm rendering the code:

renderRepoCard(repo) {
        return (
          <div className="github-card"
              id={repo.id}
              data-github={repo.full_name}
              data-width="400" data-height=""
              data-theme="default">
          </div>
        );
      }

renderRepoCard is called several times within a .map() method, which is applied to an array of repos held in the component's state.

The code for the cards is getting rendered but I can't see them on the screen. Anyone else having this issue? Where is the script tag supposed to go? If I have more than one card, do I need more than one script tag?

Is there any way to add this to an Angular project? (Given that you can't use <script> tags)