“GitHub Repos Octopress” is a plugin I made for Octopress to embed a GitHub repository, with basic information and a download button. It is based on the “GitHubReposWidget”.
The javascript file is containing the stylesheet, so there are very few files included. With a self-contained file you can also run it on your non-Octopress page. There are notes about that in the end.
I have setup the plugin to use a variable in the head of the post: githubrepos: true
. That will load the javascript below the footer, which mean I can run the plugin one or more times in the post without render it when previewing (GitHub has a limit of 60 calls/hour).
Demo
Install
Move github_repos.rb
your your plugins folder.
Move githubrepos.min.js
to source/javascripts/githubrepos.min.js
.
In _includes/custom/after_footer.html
, add:
{% if page.githubrepos == true %}
<script src="{{ root_url }}/javascripts/githubrepos.min.js" type="text/javascript"></script>
{% endif %}
Generate to pickup the plugin:
rake generate
Usage
{% githubrepo <githubuser>/<repository> %}
Example how to embed the “Spoon-Knife” repo:
{% githubrepo octocat/Spoon-Knife %}
To embed more repos, simpy add them:
{% githubrepo name/repo-name-foo %}
{% githubrepo name/repo-name-bar %}
In your post header, add:
githubrepos: true
Example:
---
layout: post
title: "Just a test"
githubrepos: true
---
That will load the javascript in the footer.
Use without Octopress
If you don’t have Octopress, you can still use it as a normal javascript plugin/widget
Example how to embed the “Spoon-Knife” repo:
<div class="github-widget" data-repo="octocat/Spoon-Knife"></div>
To embed more repos, simpy add them:
<div class="github-widget" data-repo="name/repo-name-foo"></div>
<div class="github-widget" data-repo="name/repo-name-bar"></div>
At the and of your page, add the script:
<script type="text/javascript" src="/path/to/githubrepos.min.js"></script>