Einbetten des Github-Beitragsdiagramms in die Website

Gibt es eine Möglichkeit, das Github-Beitragsdiagramm in HTML5 einzubetten?

Dazu habe ich eine JavaScript-Bibliothek geschrieben: github-kalender.

Hier ist ein Beispiel, wie man es benutzt:

<!-- Prepare a container for your calendar. -->
<script
  src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"
>
</script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
  rel="stylesheet"
  href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    new GitHubCalendar(".calendar", "your-username");
</script>

Hier Sie können es in Aktion sehen:

Da wir domänenübergreifende Anfragen benötigen, benötigen wir grundsätzlich einen Proxy. Es stellt eine Anfrage an die GitHub-Profilseite (github.com/<user>) und bringt dann die benötigten Sachen von dort zurück.

Weitere Informationen finden Sie unter Dokumentation auf GitHub.

Dieser Typ: http://www.rshah.org/ schrieb eine Github-Diagramm-API. Das könnte auf jeden Fall helfen: http://ghchart.rshah.org/ . Außerdem ist es nur HTML, also könnte es nicht sauberer werden. Ändern Sie einfach den Benutzernamen und das Alt-Tag zu Ihrem.

Sie können den HTML-Code unter dieser URL schaben: https://github.com/users/<username>/contributions und stell es auf deine Seite.

AKTUALISIEREN: Die API, auf die sich diese Antwort bezieht, ist nicht mehr verfügbar.

Grasdiagramm ist, was ich als die beste Option gefunden habe, um das zu tun, wonach Sie suchen.

Sie können das Diagramm als einfaches Bild generieren lassen, indem Sie es einfach so formulieren:

<img src="https://grass-graph.moshimo.works/images/mkartak.png">

Ich konnte dies mit Angular 4 erreichen, indem ich Folgendes tat:

1. Stellen Sie eine HTTP-GET-Anforderung an die von @jianweichuah erwähnte URL https://github.com/users/<username>/contributions.

2. Sie benötigen einen Proxy, um das CORS-Problem zu umgehen, genau wie die github-calendar-Bibliothek. proxy-url/https://github.com/users/<username>/contributions

3. Präsentieren Sie es dann wieder in der Vorlage.

Leider bekommt man nicht alle Informationen so einfach, aber sie stehen in den SVG-Details.

Ich habe hier eine Beschreibung meiner genauen Schritte: https://www.chiangs.ninja/blog/
Und ein Beispiel davon auf der Hauptseite unter der Registerkarte GitHub. Ich habe auch meine Benutzerinformationen aus der GitHub-API geholt und sie um das Diagramm herum ausgefüllt.

Ab Dezember 2021:

<img src="https://ghchart.rshah.org/username" alt="2016rshah's Github chart" />