Github Many-faced Cards - most efficient implementation

by tsucres

HTML

<script src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/master/dist/gmc.min.js"></script>
<!--
  Repo name, description, stars, forks, license + error and loading states.

  It needs the following styles: 
    - basic_github.css
    - github_full.css
    - loading.css

  And the following js:
    - languageColors.js
    - getStargazersURL.js
    - formatDate.js 
    - getRepoURL.js 
    - getSparks.js 
    - getNetworkURL.js 
    - humanReadable.js
    
-->
<div class="gh p-rel" data-gmc-repo="tsucres/GithubManyfacedCards">
  <div class="only-if-error">
    <div class="full-absolute error-view">
      <div class="p-rel">
        <svg aria-hidden="true" class="octicon" height="40" version="1.1" viewBox="0 0 14 16" width="35"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
        <h3>Couldn't fetch information for this repo.</h3>
      </div>
    </div>
  </div>
  <div class="border rounded-1 p-3">
    <span class="f4 lh-condensed text-bold text-gray-dark">
      <a target="_blank" href="https://github.com/" class="link-gray-dark text-bold wb-break-all" data-gmc-id="in__full_name, href__full_name__js" data-gmc-js="getRepoURL"></a>
    </span>
    <p data-gmc-id="in__description"></p>
    
    <p class="f6 text-gray mt-2 mb-0">
        <span class="d-inline-block text-gray mr-3">
          <span class="repo-language-color ml-0" data-gmc-id="style__language__js" data-gmc-js="getStyleForLanguage"></span>
          <span itemprop="programmingLanguage" data-gmc-id="in__language"></span>
        </span>

        <span class="d-inline-block mr-3">
            <a target="_blank" href="" class="muted-link" data-gmc-id="href__full_name__js" data-gmc-js="getStargazersURL">
              <svg aria-hidden="true" class="octicon octicon-star mr-1" height="16" version="1.1" viewBox="0 0 14 16"...

CSS

.gh {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
	line-height: 1.5;
	color: #24292e;
	background-color: #fff
}



.gh .rounded-1 { border-radius: 3px }
.gh .border { border: 1px #e1e4e8 solid }

.gh .lh-condensed { line-height: 1.25 }
.gh .text-bold { font-weight: 600 }
.gh .text-gray-dark { color: #24292e }
.gh .text-gray { color: #586069 }
.gh .link-gray-dark { color: #24292e }
.gh .link-gray-dark:hover { color: #0366d6 }

.gh .p-1 { padding: 4px }
.gh .p-2 { padding: 8px }
.gh .p-3 { padding: 16px }
.gh .pr-4 { padding: 24px }

.gh .mb-0 {	margin-bottom: 0 }
.gh .mb-1 {	margin-bottom: 4px }
.gh .mb-2 {	margin-bottom: 8px }
.gh .ml-0 { margin-left: 0 }
.gh .mr-1 {	margin-right: 4px }
.gh .mt-1 {	margin-top: 4px }
.gh .mt-2 {	margin-top: 8px }
.gh .mr-3 {	margin-right: 16px }
.gh .my-1 { 
	margin-top: 4px;
	margin-bottom: 4px }

.gh .f4 { font-size: 16px }
.gh .f6 { font-size: 12px }

.gh .wb-break-all { word-break: break-all }


.gh .d-inline-flex { 
	display: -webkit-inline-box ;
	display: inline-flex }
.gh .d-inline-block { display: inline-block }
.gh .d-inline { display: inline }
.gh .d-block { display: block }

.gh .muted-link {
	color: #586069 
}
.gh .muted-link:hover {
	color: #0366d6 ;
	text-decoration: none
}

.gh .repo-language-color {
	position: relative;
	top: 1px;
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%
}

.gh .octicon {
	vertical-align: text-bottom;
	display: inline-block;
	fill: currentColor
}
.gh a:active, a:hover {
	outline-width: 0
}
.gh a:hover {
	text-decoration: underline
}
.gh svg {
overflow: hidden;}

.gh p {
	margin-top: 0;
 	margin-bottom: 10px
}

.gh a {
	color: #0366d6;
	text-decoration: none
}
.gh h3 {
	font-size: 20px;
	font-weight: 600;
	margin-top: 0;
    margin-bottom: 0
}



@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
   ...

JavaScript

GMC.loadAllCards()