Merge branch 'whouses'

FAQ.md

@@ -81,3 +81,26 @@ This project's name however is "BASH3 Boilerplate" as a reference to
 "[HTML5 Boilerplate](https://html5boilerplate.com/)", which was founded to serve a similar purpose, 
 only for crafting webpages. 
 Somewhat inconsistent but true to Unix ancestry, the abbreviation for our project is "b3bp".
+
+## How can I locally develop and preview the b3bp website?
+
+You should have a working Node.js >=10 and Ruby >=2 install on your workstation. Afterwards, you can run:
+
+```bash
+npm run web:preview
+```
+
+This will install and start all required services and automatically open a webbrowser that reloads as soon as you make any changes to the source.
+
+The source mainly consists of:
+
+- `./README.md` Front page
+- `./FAQ.md` FAQ page
+- `./CHANGELOG.md` Changelog page
+- `./website/_layouts/default.html` Design in which all pages are rendered
+- `./website/public/app.js` Main JS file
+- `./website/public/style.css` Main CSS file
+
+The rest is dark magic you should probably steer clear from : )
+
+Any changes should be proposed as PRs. Anything added to `master` is automatically deployed using a combination of Travis CI and GitHub Pages.

package.json

@@ -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"

website/_layouts/default.html

@@ -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 />

website/public/style.css

@@ -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;
+}