Kategorien
JavaScript & jQuery Programmierung

Repo.js: GitHub-Projekte auf der Website einbinden

Frontend-Developer und jQuery Teammitglied Darcy Clarke hatte am 26. Juni Geburtstag. Und weil er so ein lieber Kerl ist, suchte er nicht nach möglichst vielen Geschenken für sich selber, sondern beschenkte die Netzgemeinde mit einem kleinen, aber feinen jQuery-Plugin namens Repo.js. Repo.js erlaubt es, GitHub-Repositories in Websites einzubinden. Das klingt unspektakulär, ist aber tatsächlich höchst nützlich für Webworker, die entweder selbst mit GitHub arbeiten oder aber regelmäßig über GitHub-Projekte schreiben. An der Stelle käme ich ins Spiel ;-)

Bildquelle: GitHub

Repo.js bindet die Dateistrukturen der Projekte ein

Clarkes Plugin bindet die Repositories, also die Dateiablagen der Projekte ein. Dazu verwendet es die beiden komplementären Scripte Vangogh und highlight.js, die sich im Wesentlichen um die Optik der Darstellung kümmern. Ein mit Repo.js eingebundenes Repository lässt sich bis auf die Dateiebene anzeigen. Das Öffnen der einzelnen Dateien ist ebenfalls möglich, allerdings ohne weitere Formatunterstützung. So werden vorhandene Grafiken nicht als solche angezeigt. Sämtliche Dateien werden als Quelltext geöffnet, eine Umsetzung etwa von Markdown findet ebenfalls nicht statt.

Der Aufruf ist simpel. Nachdem jQuery und Repo.js eingebunden sind, reicht folgender Codeschnipsel an der Stelle der Website, die das Repository anzeigen soll:

$('body').repo({ user: 'darcyclarke', name: 'Repo.js' });


Screenshot: So sähe das mit dem darüber stehenden Code eingebundene Repository dann aus

Zusätzlich könnte man über den Parameter branch noch angeben, dass nur ein bestimmter Zweig des Repository angezeigt werden soll. Da es keinerlei Einschränkungen hinsichtlich der Wahlmöglichkeiten gibt, ist jeder auf GitHub aktive Nutzer mit jedem auf GitHub vorhandenen Repository ansprechbar. Wollte man die großartige HTML5 Boilerplate einbinden, so schriebe man:

$('#repo2').repo({ user: 'h5bp', name: 'html5-boilerplate' });

Aktuell scheinen noch kleinere Bugs vorhanden zu sein. Ich bemerkte gelegentlich den Effekt, dass der Rücksprung aus einem Unterordner in den übergeordneten Ordner nicht zuverlässig funktionierte. Ebenso blieb die Ansicht ab und an leer, obschon im Originalrepository Inhalte vorhanden waren. Diese Problemchen wird Clarke sicherlich in den nächsten Tagen beheben.

Repo.js steht zur kostenfreien Nutzung auf GitHub zum Download bereit. Der Copyright-Vermerk Clarkes darf bei Verwendung und/oder Weitergabe des Scriptes nicht entfernt werden. Weitere lizenzrechtliche Einschränkungen bestehen nicht.

Links zum Beitrag:

  • Embeddable Github repos with Repo.js – Darcy Clarke Blog
  • Kurzanleitung zu Repo.js – darcyclarke.me
  • Das GitHub-Repository zu Repo.js – github/darcyclarke/repo.js

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.