Add a GitHub activity feed to the website

This commit is contained in:
Kevin van Zonneveld 2016-06-21 12:18:50 +02:00
parent 16401017e0
commit 4c45be4269
3 changed files with 61 additions and 2 deletions

View File

@ -15,10 +15,10 @@
"version:replace": "replace 'Version: \\d+\\.\\d+\\.\\d+' \"Version: $(npm run --silent version:current)\" main.sh src/*.sh",
"web:build": "cd website && bundle exec jekyll build --incremental",
"web:inject": "./website/_bin/inject.sh",
"web:install": "cd website && bundle install --path ./_vendor",
"web:install": "npm install && cd website && bundle install --path ./_vendor",
"web:preview": "npm-run-all web:install --parallel web:watch web:serve",
"web:serve": "cd website/_site && browser-sync start --server --files .",
"web:watch": "nodemon --verbose --watch ./ --ignore 'website/*.md' --ignore 'website/_site/*' --ext json,md,js,css,png,jpg --exec 'npm-run-all web:inject web:build'"
"web:watch": "nodemon --verbose --watch ./ --ignore 'website/*.md' --ignore 'website/_site/*' --ext html,json,md,js,css,png,jpg --exec 'npm-run-all web:inject web:build'"
},
"dependencies": {
"fakefile": "0.0.6"

View File

@ -27,6 +27,15 @@
</header>
<section id="content">
{{content}}
<h2 id="activity-feed">Activity Feed</h2>
<div class="on-the-githubs" data-event-source="repos/kvz/bash3boilerplate">Loading...</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//kvz.github.io/on-the-githubs/js/jquery.on-the-githubs.min.js"></script>
<script type="text/javascript">
$('.on-the-githubs').onthegithubs();
</script>
<p>
<small>
<hr />

View File

@ -277,3 +277,53 @@ hr {
color: gainsboro; /* old IE */
background-color: gainsboro; /* Modern Browsers */
}
.on-the-githubs {
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}
.on-the-githubs:after {
content: '';
display: table;
clear: both;
}
.on-the-githubs > li {
list-style-type: none;
margin: 0;
padding: 5px 0;
position: relative;
border-bottom: 1px solid rgba(gainsboro, 0.3);
margin-bottom: 10px;
}
.on-the-githubs > li:after {
content: '';
display: table;
clear: both;
}
.on-the-githubs > li p {
font-size: 15px;
margin: 0;
padding: 0;
display: inline-block;
float: left;
max-width: 550px;
}
.on-the-githubs > li abbr {
position: absolute;
right: 0;
float: left;
text-align: right;
}
.on-the-githubs > li a {
font-weight: normal;
text-decoration: underline;
}
.on-the-githubs > li img {
float: left;
margin: 0 5px 0 0;
border-radius: 10px;
width: 20px;
height: 20px;
}