This is a fork of the Unofficial Github Cards project, which adds the following 1 1/2 game changers:
-
The original Unofficial Github Cards uses Google Analytics (though I myself don't know why), which some people might consider complicated.
-
The codesnippets for the cards generated by the original Unofficial Github Pages embed code from jsdelivr.net. This means that, due to cross origin policies (CORS requests), javascript embedded in your page can not access or change the github cards emedded in your page. This is a problem if you are for example embedding code from the darkreader project to give your page a darkmode, because your github cards will still be light. However, this fork uses javascript hosted on github (in this repository), which means you can fork this repository, host it with github pages somewhere on your website, and replace
https://phseiff.com/github-cardsin each cards code with the place where you host the repo on your website, and bam!, you no longer have to worry about CORS requests having to be made to access the content of the cards!
If you are into graphics and don't believe the first point, here are two screenshots:
Original github cards with Google Analytics...
...and fork without:
And here is the content of the original README - if you want to use the fork, you can find it hosted here; the links down below refer to the original Unofficial Github Cards:
Card for your GitHub profile, card for your GitHub repositories.
New theme available
The cards are hosted via GitHub Pages.
Visit card generator: http://lab.lepture.com/github-cards/
You can include the widget.js script, it will create the embed iframes
for you.
Example of user card:
<div class="github-card" data-user="lepture"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>Example of repo card:
<div class="github-card" data-user="lepture" data-repo="github-cards"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>Data parameters:
- user: GitHub username
- repo: GitHub repository name
- width: Embed width you want, default is 400
- height: Embed height you want, default is 200
- theme: GitHub card theme, default is
default - target: If you want to open links in new tab, set it to
blank - client_id: Your app client_id, optional
- client_secret: Your app client_secret, optional
You can also define in meta tags:
<meta name="gc:base" content="http://lab.lepture.com/github-cards/">
<meta name="gc:theme" content="medium">
<meta name="gc:client-id" content="client id string">
<meta name="gc:client-secret" content="client secret string">There are some limitations for github cards.
- GitHub API rate limitation
- No interaction. You can't actually follow someone
GitHub Cards is available on jsdelivr now. Use widget hosted on jsdelivr:
<div class="github-card" data-user="lepture" data-repo="github-cards"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>This project is under the BSD License.