Website (#30)

* Base on apex.run * More custom themie * Loop to write * Support inline links * Smaller header * Auto-deploys via travis * Rewording to make for a better homepage
2024-12-18 22:27:51 +00:00 · 2016-06-21 09:40:25 +02:00 · 2016-06-21 09:40:25 +02:00 · d0ece6da76
commit d0ece6da76
parent 707a14634c
20 changed files with 767 additions and 24 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,15 @@ npm-debug.log
 node_modules

 test/scenario/templater/break.cfg
+
+website/index.md
+website/_site/
+website/_vendor/
+
+website/changelog.md
+
+website/faq.md
+
+website/.jekyll-metadata
+
+env.sh
--- a/.travis.yml
+++ b/.travis.yml
@ -4,6 +4,9 @@ matrix:
    - os: linux
      sudo: false
    - os: osx
+env:
+  global:
+    - secure: "LBDI3qOC+d2kmPSS8W6L9UF7HFiu1JC4HwK4j0sjGBh+gjRMpCRxFX7p51pbHd480ItDucN/0CMKy+e0umIRR/xrZSbuQqxby68eoT1tQ5nG9gpDTTEgu1n7Z3vPl9aEitMPlP1ovqRRSViBsYU3E5DRb7Vw2lDpCOj/lqAZT0Y="
 install:
  # Install acceptance test dependencies for OSX
  - if [ "$TRAVIS_OS_NAME" = "osx" ]; then brew update; fi
@ -13,3 +16,11 @@ install:
  - bash --version
  - awk --version
 script: test/acceptance.sh
+# Travis docs: Note that pull request builds skip deployment step altogether.
+# https://docs.travis-ci.com/user/deployment/#Conditional-Releases-with-on
+deploy:
+  skip_cleanup: true
+  provider: script
+  script: website/_bin/deploy.sh
+  on:
+    branch: master
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,6 +1,6 @@
-# Changelog
+<!--more-->

-Please see the [CHANGELOG.md](./CHANGELOG.md) file.
+# Changelog

 ## master (Unreleased)

--- a/FAQ.md
+++ b/FAQ.md
@ -2,25 +2,27 @@
 [For better viewing, including hyperlinks, read it online at ]:#
 [https://github.com/kvz/bash3boilerplate/blob/master/FAQ.md  ]:#

-# Frequently Asked Questions
-
 ## Contents

 * [What is a cli](#what-is-a-cli)?
 * [How do I add a command-line flag](#how-do-i-add-a-command-line-flag)?
 * [How do I access the value of a command-line argument](#how-do-i-access-the-value-of-a-command-line-argument)?
-* [How do I incorporate bash3boilerplate into my own project](#how-do-i-incorporate-bash3boilerplate-into-my-own-project)?
+* [How do I incorporate BASH3 Boilerplate into my own project](#how-do-i-incorporate-bash3boilerplate-into-my-own-project)?
 * [What is a magic variable](#what-is-a-magic-variable)?
-* [How do I incorporate bash3boilerplate into my own project](#how-do-i-incorporate-bash3boilerplate-into-my-own-project)?
+* [How do I incorporate BASH3 Boilerplate into my own project](#how-do-i-incorporate-bash3boilerplate-into-my-own-project)?
 * [How can I contribute to this project](#how-can-i-contribute-to-this-project)?

-### What is a cli?
+<!--more-->
+
+# Frequently Asked Questions
+
+## What is a cli?

 A 'cli' is a [command-line interface](https://en.wikipedia.org/wiki/Command-line_interface).

-### How do I incorporate bash3boilerplate into my own project?
+## How do I incorporate BASH3 Boilerplate into my own project?

-You can incorporate bash3boilerplate into your project one of three ways:
+You can incorporate BASH3 Boilerplate into your project one of three ways:
 1. Copy the desired portions of [main.sh](./main.sh) into your own script.
 1. Download [main.sh](./main.sh) and start pressing the delete-key for unwanted things

@ -37,7 +39,7 @@ Once the `main.sh` has been tailor-made for your project you could either append
 . main.sh
 ```

-### How do I add a command-line flag?
+## How do I add a command-line flag?

 1. Copy the line the main.sh [read block](https://github.com/kvz/bash3boilerplate/blob/master/main.sh#L53) that most resembles the desired behavior and paste the line into the same block.
 1. Edit the single-character (e.g., -d) and, if present, the multi-character (e.g., --debug) versions of the flag in the copied line.  
@ -45,7 +47,7 @@ Once the `main.sh` has been tailor-made for your project you could either append
 1. Omit or edit the text after "Default:" to set or not set default values, respectively. 
 1. Omit the "Required." text if the flag is optional.

-### How do I access the value of a command-line argument?
+## How do I access the value of a command-line argument?

 To evaluate the value of an argument, append the corresponding single-character flag to the text `$arg_`.  For example, if the [read block]
 contains the line
@ -59,15 +61,15 @@ then you can evaluate the corresponding argument and assign it to a variable as
 temp_file_name="${arg_t}"
 ```

-### What is a magic variable?
+## What is a magic variable?

 The [magic variables](https://github.com/kvz/bash3boilerplate/blob/master/main.sh#L63) in `main.sh` are special in that they have a different value, depending on your environment. You can use `${__file}` to get a reference to your current script, `${__dir}` to get a reference to the directory it lives in. This is not to be confused with the location of the calling script that might be sourcing the `${__file}`, which is accessible via `${0}`, and the current directory of the administrator running the script, accessible via `$(pwd)`. Other magic variables are for instance `${__os}` which currently is limited to telling you wether you are on `OSX` and otherwise defaults to `Linux`.

-### How do I submit an issue report?
+## How do I submit an issue report?

 Please visit our [Issues](https://github.com/kvz/bash3boilerplate/issues) page.

-### How can I contribute to this project?
+## How can I contribute to this project?

 Please fork this repository.  Then create a branch containing your suggested changes and submit a pull request based on the master branch
-of https://github.com/kvz/bash3boilerplate/. We're a welcoming bunch, happy to accept your contributions!
+of <https://github.com/kvz/bash3boilerplate/>. We're a welcoming bunch, happy to accept your contributions!
--- a/README.md
+++ b/README.md
@ -13,22 +13,21 @@
 * [Best Practices](#best-practices)
 * [Frequently Asked Questions](#frequently-asked-questions)
 * [Authors](#authors)
-* [Sponsoring](#sponsoring)
 * [License](#license)

 ## Overview

-When hacking up Bash scripts, I often find there are some
-higher level things like logging, configuration, command-line argument
-parsing that:
+<!--more-->

- - I need every time
- - Take quite some effort to get right
+When hacking up Bash scripts, there are often higher level things like logging, 
+configuration, command-line argument parsing that:
+
+ - You need every time
+ - Come with a number of pitfalls to get right
 - Keep you from your actual work

 Here's an attempt to bundle those things in a generalized way so that
-they are reusable as-is in most of my (and hopefully your, if not ping
-me) programs.
+they are reusable as-is in most scripts.

 ## Goals

@ -40,7 +39,7 @@ with 3 for instance). If you're going to ask people to install
 Bash 4 first, you might as well pick a more advanced language as a
 dependency.

-We're automatically testing bash3boilerplate and it's proven to work on:
+We're automatically testing BASH3 Boilerplate and it's proven to work on:

 - [Linux](https://travis-ci.org/kvz/bash3boilerplate/jobs/109804166#L91) `GNU bash, version 4.2.25(1)-release (x86_64-pc-linux-gnu)`
 - [OSX](https://travis-ci.org/kvz/bash3boilerplate/jobs/109804167#L2453) `GNU bash, version 3.2.51(1)-release (x86_64-apple-darwin13)`
--- a/package.json
+++ b/package.json
@ -10,6 +10,8 @@
    "version:replace": "replace 'Version: \\d+\\.\\d+\\.\\d+' \"Version: $(npm run --silent version:current)\" main.sh src/*.sh",
    "release": "npm version ${SEMANTIC:-patch} -m \"Release %s\" && npm run version:replace && git commit main.sh src/*.sh -m 'Update version' && git push && git push --tags && npm publish",
    "save:fixtures": "cross-env SAVE_FIXTURES=true npm run test",
+    "deploy": "website/_bin/travis-deploy.sh",
+    "preview": "cd website && bundle install --path ./_vendor && bundle exec jekyll serve --watch",
    "test": "test/acceptance.sh"
  },
  "dependencies": {
--- a/website/.bundle/config
+++ b/website/.bundle/config
@ -0,0 +1,3 @@
+---
+BUNDLE_PATH: ./_vendor
+BUNDLE_DISABLE_SHARED_GEMS: '1'
--- a/website/CNAME
+++ b/website/CNAME
@ -0,0 +1 @@
+bash3boilerplate.sh
--- a/website/Gemfile
+++ b/website/Gemfile
@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins
+gem 'stringex', '2.6.0'
+gem 'jekyll-redirect-from', '0.10.0'
--- a/website/Gemfile.lock
+++ b/website/Gemfile.lock
@ -0,0 +1,131 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.6)
+      i18n (~> 0.7)
+      json (~> 1.7, >= 1.7.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.10.0)
+    colorator (0.1)
+    ethon (0.9.0)
+      ffi (>= 1.3.0)
+    execjs (2.7.0)
+    faraday (0.9.2)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.10)
+    gemoji (2.1.0)
+    github-pages (83)
+      github-pages-health-check (= 1.1.0)
+      jekyll (= 3.1.6)
+      jekyll-coffeescript (= 1.0.1)
+      jekyll-feed (= 0.5.1)
+      jekyll-gist (= 1.4.0)
+      jekyll-github-metadata (= 2.0.0)
+      jekyll-mentions (= 1.1.2)
+      jekyll-paginate (= 1.1.0)
+      jekyll-redirect-from (= 0.10.0)
+      jekyll-sass-converter (= 1.3.0)
+      jekyll-seo-tag (= 2.0.0)
+      jekyll-sitemap (= 0.10.0)
+      jemoji (= 0.6.2)
+      kramdown (= 1.11.1)
+      liquid (= 3.0.6)
+      listen (= 3.0.6)
+      mercenary (~> 0.3)
+      rouge (= 1.10.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.1.0)
+      addressable (~> 2.3)
+      net-dns (~> 0.8)
+      octokit (~> 4.0)
+      public_suffix (~> 1.4)
+      typhoeus (~> 0.7)
+    html-pipeline (2.4.1)
+      activesupport (>= 2, < 5)
+      nokogiri (>= 1.4)
+    i18n (0.7.0)
+    jekyll (3.1.6)
+      colorator (~> 0.1)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-coffeescript (1.0.1)
+      coffee-script (~> 2.2)
+    jekyll-feed (0.5.1)
+    jekyll-gist (1.4.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.0.0)
+      jekyll (~> 3.1)
+      octokit (~> 4.0)
+    jekyll-mentions (1.1.2)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-redirect-from (0.10.0)
+      jekyll (>= 2.0)
+    jekyll-sass-converter (1.3.0)
+      sass (~> 3.2)
+    jekyll-seo-tag (2.0.0)
+      jekyll (~> 3.1)
+    jekyll-sitemap (0.10.0)
+    jekyll-watch (1.4.0)
+      listen (~> 3.0, < 3.1)
+    jemoji (0.6.2)
+      gemoji (~> 2.0)
+      html-pipeline (~> 2.2)
+      jekyll (>= 3.0)
+    json (1.8.3)
+    kramdown (1.11.1)
+    liquid (3.0.6)
+    listen (3.0.6)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9.7)
+    mercenary (0.3.6)
+    mini_portile2 (2.1.0)
+    minitest (5.9.0)
+    multipart-post (2.0.0)
+    net-dns (0.8.0)
+    nokogiri (1.6.8)
+      mini_portile2 (~> 2.1.0)
+      pkg-config (~> 1.1.7)
+    octokit (4.3.0)
+      sawyer (~> 0.7.0, >= 0.5.3)
+    pkg-config (1.1.7)
+    public_suffix (1.5.3)
+    rb-fsevent (0.9.7)
+    rb-inotify (0.9.7)
+      ffi (>= 0.5.0)
+    rouge (1.10.1)
+    safe_yaml (1.0.4)
+    sass (3.4.22)
+    sawyer (0.7.0)
+      addressable (>= 2.3.5, < 2.5)
+      faraday (~> 0.8, < 0.10)
+    stringex (2.6.0)
+    terminal-table (1.6.0)
+    thread_safe (0.3.5)
+    typhoeus (0.8.0)
+      ethon (>= 0.8.0)
+    tzinfo (1.2.2)
+      thread_safe (~> 0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+  jekyll-redirect-from (= 0.10.0)
+  stringex (= 2.6.0)
+
+BUNDLED WITH
+   1.10.0
--- a/website/_bin/build.sh
+++ b/website/_bin/build.sh
@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+set -o pipefail
+set -o errexit
+set -o nounset
+# set -o xtrace
+
+# Set magic variables for current file & dir
+__dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+__file="${__dir}/$(basename "${BASH_SOURCE[0]}")"
+__base="$(basename ${__file} .sh)"
+__webroot="$(cd "$(dirname "${__dir}")" && pwd)"
+
+for doc in "README" "FAQ" "CHANGELOG"; do
+  targetName="$(echo "${doc}" | awk '{print tolower($0)}')"
+  permalink="/${targetName}/"
+  subtitle="$(tr '[:lower:]' '[:upper:]' <<< ${targetName:0:1})${targetName:1} | "
+  redirectFrom="/${doc}.md/"
+  if [ "${doc}" = "README" ]; then
+    targetName="index"
+    permalink="/"
+    subtitle=""
+    redirectFrom="nothing"
+  fi
+
+  cat <<EOF > website/${targetName}.md
+---
+layout: default
+permalink: ${permalink}
+redirect_from: ${redirectFrom}
+title: ${subtitle}BASH3 Boilerplate – the delete-key friendly template for writing better BASH scripts
+warning: This page is generated by ${__base}.sh based on ${doc}.md, please don't edit ${targetName}.md directly.
+---
+EOF
+  # http://stackoverflow.com/a/7104422/151666
+  cat ${doc}.md |sed -n -e '/<!--more-->/,$p' | tail -n +2 >> website/${targetName}.md
+
+  echo "written website/${targetName}.md"
+done
+
+if [ "${TRAVIS:-}" = "true" ]; then
+  pushd "${__webroot}"
+    bundle install --path ./_vendor || bundle update --path ./_vendor
+    bundle exec jekyll build
+  popd
+fi
--- a/website/_bin/deploy.sh
+++ b/website/_bin/deploy.sh
@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+set -o pipefail
+set -o errexit
+set -o nounset
+# set -o xtrace
+
+# Set magic variables for current file & dir
+__dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+__file="${__dir}/$(basename "${BASH_SOURCE[0]}")"
+__base="$(basename ${__file} .sh)"
+
+ghpages_repo=${GHPAGES_REPO:-"kvz/bash3boilerplate"}
+ghpages_branch=${GHPAGES_BRANCH:-"gh-pages"}
+ghpages_url=${GHPAGES_URL:-"git@github.com:${ghpages_repo}.git"}
+
+echo "--> Deploying to GitHub pages.."
+
+${__dir}/build.sh
+
+if [ "${TRAVIS:-}" = "true" ]; then
+  git config --global user.name 'lekevbot'
+  git config --global user.email 'bot@kvz.io'
+fi
+
+mkdir -p /tmp/deploy-${ghpages_repo}
+
+# Custom steps
+rsync \
+  --archive \
+  --delete \
+  --exclude=.git* \
+  --exclude=node_modules \
+  --exclude=lib \
+  --checksum \
+  --no-times \
+  --no-group \
+  --no-motd \
+  --no-owner \
+./website/ /tmp/deploy-${ghpages_repo} > /dev/null
+
+echo 'This branch is just a deploy target. Do not edit. You changes will be lost.' \
+  |tee /tmp/deploy-${ghpages_repo}/README.md
+
+(cd /tmp/deploy-${ghpages_repo} \
+  && git init && git checkout -B ${ghpages_branch} && git add --all . \
+  && git commit -nm "Update ${ghpages_repo} website by ${USER}" \
+  && (git remote add origin ${ghpages_url}|| true)  \
+  && git push origin ${ghpages_branch}:refs/heads/${ghpages_branch} --force) > /dev/null
+
+rm -rf /tmp/deploy-${ghpages_repo}
--- a/website/_config.yml
+++ b/website/_config.yml
@ -0,0 +1,2 @@
+gems:
+  - jekyll-redirect-from
--- a/website/_layouts/default.html
+++ b/website/_layouts/default.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>{{page.title}}</title>
+    <meta name="keywords" content="bash, template, scripting, command-line">
+    <meta name="description" content="BASH3 Boilerplate">
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="/public/style.css" media="screen" charset="utf-8">
+    <link rel="stylesheet" href="/public/syntax.css" media="screen" charset="utf-8">
+  </head>
+  <body>
+    <header>
+      <div id="header-overlay"></div>
+      <span id="logo"></span>
+      <div id="menu">
+        <i class="material-icons">menu</i>
+        <ul id="menu-items">
+        </ul>
+      </div>
+      <span id="more">
+        <i class="material-icons">expand_more</i>
+      </span>
+    </header>
+    <section id="content">
+      {{content}}
+
+      <p>
+        <br />
+        <small>
+          <hr />
+          Website design based on
+          the wonderful <a href="http://apex.run">apex.run</a>
+          with <a href="https://twitter.com/tjholowaychuk/status/744909762865696769">the author's consent</a>.
+        </small>
+      </p>
+    </section>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/languages/bash.min.js"></script>
+    <script src="/public/app.js"></script>
+  </body>
+</html>
--- a/website/public/app.js
+++ b/website/public/app.js
@ -0,0 +1,55 @@
+// Backgrounds.
+// var backgrounds = [1,2,3,4,5,6]
+var backgrounds = [1]
+
+// Highlighting.
+hljs.initHighlighting()
+
+// Storage.
+var store = window.sessionStorage
+
+// Background.
+var background = store.getItem('background')
+
+if (!background) {
+  var i = Math.random() * backgrounds.length | 0
+  background = backgrounds[i]
+  console.log('setting background to %s', background)
+  store.setItem('background', background)
+}
+
+// Body class for background.
+var el = document.getElementById('header-overlay')
+el.style.backgroundImage = 'url(/public/images/' + background + '.jpg)'
+
+// Attach class to #menu element depending on page offset.
+document.addEventListener('DOMContentLoaded', chooseMenuColor)
+window.onscroll = chooseMenuColor
+
+function chooseMenuColor() {
+  var menuElement = document.getElementById('menu')
+  var menuTopOffset = 45
+  Math.floor(window.innerHeight * .20) < window.pageYOffset + menuTopOffset ?
+    menuElement.classList.remove('over-header') :
+    menuElement.classList.add('over-header')
+}
+
+
+function $get(selector) { return document.querySelector(selector) }
+function $all(selector) {
+	  return Array.prototype.slice.call(document.querySelectorAll(selector))
+}
+
+var container = $get('#menu-items')
+
+if (location.pathname !== '/') {
+  var li = document.createElement('li');
+  li.innerHTML = '<a href="/">&laquo; Home</a>';
+  container.appendChild(li);
+}
+
+$all('#content h2').forEach(function(el) {
+  var li = document.createElement('li');
+  li.innerHTML = '<a href="#' + el.id + '">' + el.innerHTML + '</a>';
+  container.appendChild(li);
+})
--- a/website/public/images/1.jpg
+++ b/website/public/images/1.jpg
--- a/website/public/images/logo.png
+++ b/website/public/images/logo.png
--- a/website/public/images/logo.pxm
+++ b/website/public/images/logo.pxm
--- a/website/public/style.css
+++ b/website/public/style.css
@ -0,0 +1,279 @@
+
+body {
+  font: 16px/1.625 "Open Sans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #656a71;
+  margin: 0;
+}
+
+#header-overlay {
+  background: #131313 50% 100% no-repeat;
+  background-size: cover;
+  height: 20vh;
+  width: 100%;
+  opacity: 0;
+  -webkit-animation-name: overlay;
+          animation-name: overlay;
+  -webkit-animation-duration: 5s;
+          animation-duration: 5s;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes overlay {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: .25;
+  }
+}
+
+@keyframes overlay {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: .25;
+  }
+}
+
+body.background-1 #header-overlay {
+  background-image: url(images/1.jpg);
+}
+
+body.background-4 #header-overlay {
+  background-image: url(images/4.jpg);
+}
+
+#logo {
+  display: block;
+  background: url(images/logo.png) center;
+  background-size: contain;
+  width: 200px;
+  height: 120px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -100px;
+  margin-top: -60px;
+  -webkit-animation-name: logo;
+          animation-name: logo;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes logo {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes logo {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+#more {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  margin-left: -6px;
+  color: white;
+  opacity: 0;
+  -webkit-animation-name: move;
+          animation-name: move;
+  -webkit-animation-duration: 3s;
+          animation-duration: 3s;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+          animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+}
+
+@-webkit-keyframes move {
+  0% {
+    opacity: 0;
+    bottom: 300px;
+  }
+
+  50% {
+    opacity: 1;
+    bottom: 10px;
+  }
+
+  90% {
+    opacity: 1;
+    bottom: 10px;
+  }
+
+  100% {
+    opacity: 0;
+    bottom: -10px;
+  }
+}
+
+@keyframes move {
+  0% {
+    opacity: 0;
+    bottom: 300px;
+  }
+
+  50% {
+    opacity: 1;
+    bottom: 10px;
+  }
+
+  90% {
+    opacity: 1;
+    bottom: 10px;
+  }
+
+  100% {
+    opacity: 0;
+    bottom: -10px;
+  }
+}
+
+#content {
+  padding: 100px 0;
+  max-width: 650px;
+  margin: 0 auto;
+}
+
+#menu {
+  position: fixed;
+  top: 35px;
+  right: 35px;
+  cursor: pointer;
+  background: transparent;
+  color: black;
+  padding: 7px;
+  border-radius: 1px;
+  line-height: 0;
+}
+
+#menu.over-header {
+  color: white;
+}
+
+#menu i {
+  font-size: 19px;
+}
+
+#menu:hover #menu-items {
+  opacity: 1;
+  visibility: visible;
+}
+
+#menu-items {
+  line-height: 1.7;
+  opacity: 0;
+  position: fixed;
+  visibility: hidden;
+  margin: 0;
+  padding: 20px;
+  font-size: 12px;
+  background: white;
+  color: #121212;
+  top: 67px;
+  right: 35px;
+  border-radius: 1px;
+  text-align: right;
+}
+
+#menu-items li a:hover {
+  text-decoration: underline;
+}
+
+#menu-items li {
+  list-style: none;
+}
+
+#menu-items li a {
+  color: #4C4C4C;
+}
+
+h1, h2, h3, h4 {
+  font-weight: 600;
+  margin-bottom: 0px;
+  color: #3b444f;
+}
+
+h1      { font-size: 2em;       /* 2*16 = 32 */         }
+h2      { font-size: 1.5em;     /* 1.5*16 = 24 */       }
+h3      { font-size: 1.17em;    /* 1.17*16 = 18.72 */   }
+h4      { font-size: 1em;       /* 1*16 = 16 */         }
+h5      { font-size: 0.83em;    /* 0.83*16 = 13.28 */   }
+h6      { font-size: 0.75em;    /* 0.75*16 = 12 */      }
+
+h1 {
+  margin-top: 75px;
+}
+
+h1::before {
+  display: block;
+  content: ' ';
+  border-top: 1px dotted #eee;
+  width: 35%;
+  margin: 0 auto 75px auto;
+}
+
+h2 {
+  margin-top: 50px;
+}
+
+h3 {
+  margin-top: 30px;
+}
+
+p > code,
+li > code {
+  border: 1px solid #eee;
+  padding: 2px 10px;
+  border-radius: 3px;
+  font-size: .75rem;
+  color: #555;
+  white-space: nowrap;
+}
+
+header {
+  background: #131313;
+  position: relative;
+}
+
+a {
+  text-decoration: none;
+  color: #55A1E1;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+hr {
+  margin: 1px;
+  border: none;
+  height: 1px;
+  /* Set the hr color */
+  color: gainsboro; /* old IE */
+  background-color: gainsboro; /* Modern Browsers */
+}
--- a/website/public/syntax.css
+++ b/website/public/syntax.css
@ -0,0 +1,104 @@
+
+pre {
+  border-top-color: #ddd;
+  border-radius: 3px;
+  font-size: .75rem;
+  overflow-x: auto;
+  line-height: 1.3;
+  padding: 1.5rem;
+  background: #fff;
+  color: #333;
+  overflow-x: auto;
+  border: 1px solid #eee;
+  border-bottom-color: #ddd;
+}
+
+/*
+
+XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #006a00;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: #aa0d91;
+}
+
+.hljs-name {
+  color: #008;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #660;
+}
+
+.hljs-string {
+  color: #c41a16;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #080;
+}
+
+.hljs-title,
+.hljs-tag,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-number,
+.hljs-meta {
+  color: #1c00cf;
+}
+
+.hljs-section,
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-attr,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-params {
+  color: #5c2699;
+}
+
+.hljs-attribute,
+.hljs-subst {
+  color: #000;
+}
+
+.hljs-formula {
+  background-color: #eee;
+  font-style: italic;
+}
+
+.hljs-addition {
+  background-color: #baeeba;
+}
+
+.hljs-deletion {
+  background-color: #ffc8bd;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #9b703f;
+}
+
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}