After an admittedly half-hearted effort, I couldn't fine any nice GitHub repo 'cards', you know, like the Twitter profile cards? These things --

I wanted a pain free way to link to these in a blog post, or on a static site, or well, wherever I want to. Something along the lines of

<div repo="aranscope/gityll"></div>

That would be cool I said, then diving into my favourite toy-box that is Codepen. I decided on using vanilla JS, or at least ES6 (sorry old IE users).

Here's a few interesting snippets

// chuck some raw css into the body
function injectStyle(str) {
    let node = document.createElement('style');
    node.innerHTML = str;

// some fun and unpleasant hackery with ES6 template strings
card.innerHTML = `
      <img class="gh" src="${json.owner.avatar_url}">
      <div class="gh container">
        <h4 class="gh">
          <a class="gh" href="${json.html_url}">
            <i class="fa fa-fw fa-github" aria-hidden="true"></i>
        <p class="gh">${json.description}</p>
        <a class="gh" href="${json.html_url}/network">
          <i class="fa fa-fw fa-code-fork" aria-hidden="true"></i> ${json.forks_count}
        <a class="gh" href="${json.html_url}/stargazers">
          <i class="fa fa-fw fa-star" aria-hidden="true"></i> ${json.stargazers_count}

I managed to squeeze all of gh-cards just a few lines short of 100. No CSS file, just JS. Wait why did I post a link to the repo??

Now just to resolve conflicts with existing CSS :D