Add initial GitHub pages infra for RocksDB documentation move and update. (#1294)

This is the initial commit with the templates necessary to have our RocksDB user documentation hosted on GitHub pages. Ensure you meet requirements here: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#requirements Then you can run this right now by doing the following: ``` % bundle install % bundle exec jekyll serve --config=_config.yml,_config_local_dev.yml ``` Then go to: http://127.0.0.1:4000/ Obviously, this is just the skeleton. Moving forward we will do these things in separate pull requests: - Replace logos with RocksDB logos - Update the color schemes - Add current information on rocksdb.org to markdown in this infra - Migrate current Wodpress blog to Jekyll and Disqus comments - Etc.

Add initial GitHub pages infra for RocksDB documentation move and update. (#1294)
This is the initial commit with the templates necessary to have our RocksDB user documentation hosted on GitHub pages. Ensure you meet requirements here: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#requirements Then you can run this right now by doing the following: ``` % bundle install % bundle exec jekyll serve --config=_config.yml,_config_local_dev.yml ``` Then go to: http://127.0.0.1:4000/ Obviously, this is just the skeleton. Moving forward we will do these things in separate pull requests: - Replace logos with RocksDB logos - Update the color schemes - Add current information on rocksdb.org to markdown in this infra - Migrate current Wodpress blog to Jekyll and Disqus comments - Etc.
ea9e0757 · Joel Marcey · Islam AbdelRahman · 2a9c9710 · ea9e0757 · ea9e0757
105 changed file
--- a/docs/.gitignore
+++ b/docs/.gitignore
+.DS_STORE
+_site/
+*.swo
+*.swp
+_site
+.sass-cache
+*.psd
+*~
+
--- a/docs/Gemfile
+++ b/docs/Gemfile
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.7)
+      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 (1.1.0)
+    ethon (0.9.0)
+      ffi (>= 1.3.0)
+    execjs (2.7.0)
+    faraday (0.9.2)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.14)
+    forwardable-extended (2.6.0)
+    gemoji (2.1.0)
+    github-pages (93)
+      activesupport (= 4.2.7)
+      github-pages-health-check (= 1.2.0)
+      jekyll (= 3.2.1)
+      jekyll-coffeescript (= 1.0.1)
+      jekyll-feed (= 0.5.1)
+      jekyll-gist (= 1.4.0)
+      jekyll-github-metadata (= 2.0.2)
+      jekyll-mentions (= 1.1.3)
+      jekyll-paginate (= 1.1.0)
+      jekyll-redirect-from (= 0.11.0)
+      jekyll-sass-converter (= 1.3.0)
+      jekyll-seo-tag (= 2.0.0)
+      jekyll-sitemap (= 0.10.0)
+      jemoji (= 0.7.0)
+      kramdown (= 1.11.1)
+      liquid (= 3.0.6)
+      listen (= 3.0.6)
+      mercenary (~> 0.3)
+      minima (= 1.0.1)
+      rouge (= 1.11.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.2.0)
+      addressable (~> 2.3)
+      net-dns (~> 0.8)
+      octokit (~> 4.0)
+      public_suffix (~> 1.4)
+      typhoeus (~> 0.7)
+    html-pipeline (2.4.2)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    i18n (0.7.0)
+    jekyll (3.2.1)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      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.2)
+      jekyll (~> 3.1)
+      octokit (~> 4.0)
+    jekyll-mentions (1.1.3)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-redirect-from (0.11.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.5.0)
+      listen (~> 3.0, < 3.1)
+    jemoji (0.7.0)
+      activesupport (~> 4.0)
+      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)
+    minima (1.0.1)
+    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)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
+    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.11.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)
+    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
+
+BUNDLED WITH
+   1.12.5
--- a/docs/README.md
+++ b/docs/README.md
+# Facebook Open Source Project Site Template: Jekyll Edition
+
+This is a template for use with Jekyll. You can use it directly on a `gh-pages` branch where it will automatically serve up the content, or you can put it in your `master` branch using a script to copy the static generated markup (from the `_site` folder) into the gh-pages branch.
+
+## Getting Started
+
+Clone the contents of this folder, install Jekyll (currently targeting version 3.0), and then run:
+
+```
+jekyll serve --config=_config.yml,_config_local_dev.yml
+```
+
+This will serve up the site on your local device at http://127.0.0.1:4000/ - the `_config_local_dev` file over-rides some URL settings that you might be using in production to allow you to test locally without pesky relative URLs.
+
+## Setting it Up
+
+First, go through `_config.yml` and adjust the available settings to your project's standard. When you make changes here, you'll have to kill the `jekyll serve` instance and restart it to see those changes, but that's only the case with the config file.
+
+Next, update some image assets - you'll want to update `favicon.png`, `logo.svg`, and `og_image.png` (used for Like button stories and Shares on Facbeook) in the `static` folder with your own logos.
+
+Next, if you're going to have docs on your site, keep the `_docs` and `docs` folders, if not, you can safely remove them (or you can safely leave them and not include them in your navigation - Jekyll renders all of this before a client views the site anyway, so there's no performance hit from just leaving it there for a future expansion).
+
+Same thing with a blog section, either keep or delete the `_posts` and `blog` folders. 
+
+You can customise your homepage in three parts - the first in the homepage header, which is mostly automatically derived from the elements you insert into your config file. However, you can also specify a series of 'promotional' elements in `_data/promo.yml`. You can read that file for more information.
+
+The second place for your homepage is in `index.md` which contains the bulk of the main content below the header. This is all markdown if you want, but you can use HTML and Jekyll's template tags (called Liquid) in there too. Checkout this folder's index.md for an example of one common template tag that we use on our sites called gridblocks.
+
+The third and last place is in the `_data/powered_by.yml` and `_data/powered_by_highlight.yml` files. Both these files combine to create a section on the homepage that is intended to show a list of companies or apps that are using your project. The `powered_by_highlight` file is a list of curated companies/apps that you want to show as a highlight at the top of this section, including their logos in whatever format you want. The `powered_by` file is a more open list that is just text links to the companies/apps and can be updated via Pull Request by the community. If you don't want these sections on your homepage, just empty out both files and leave them blank.
+
+The last thing you'll want to do is setup your top level navigation bar. You can do this by editing `nav.yml` and keeping the existing title/href/category structure used there. Although the nav is responsive and fairly flexible design-wise, no more than 5 or 6 nav items is recommended. 
+
+## Docs
+
+Editing docs is easy, you can just use lots of markdown. All you need to do is add a new `docname.md` file into the `_docs` folder with the following at the very top of the file (called the Front Matter):
+
+```
+---
+docid: getting-started
+title: Getting started with ProjectName
+layout: docs
+permalink: /docs/getting-started.html
+---
+```
+
+Customise these values for each doc (note that the filename of the .md file doesn't actually matter, what is important is the `docid` being unique and the `permalink` correct and unique too).
+
+Then you'll want to add your new doc to the Docs navigation. Just open `_data/nav_docs.yml` and add the `docid` of the doc you just created into the structure in the location that you want it to appear in the nav. Docs can be grouped in the navigation, checkout the skeleton `nav_docs` file that we've provided to see how you can do that. 
--- a/docs/_config.yml
+++ b/docs/_config.yml
+# Site settings
+permalink: /blog/:year/:month/:day/:title.html
+title: RocksDB
+tagline: A persistent key-value store for fast storage environments
+description: >
+  RocksDB is an embeddable persistent key-value store for fast storage. RocksDB can also be the foundation for a client-server database but our current focus is on embedded workloads.
+fbappid: "1615782811974223"
+gacode: "UA-12345-6"
+# baseurl determines the subpath of your site. For example if you're using an
+# organisation.github.io/reponame/ basic site URL, then baseurl would be set
+# as "/reponame/" but leave blank if you have a top-level domain URL
+baseurl: ""
+url: "http://rocksdb.org" # the base hostname & protocol for your site
+ghrepo: "facebook/rocksdb"
+
+# Use these color settings to determine your colour scheme for the site.
+color:
+  # primary should be a vivid color that reflects the project's brand
+  primary: "#3b5998"
+  # secondary should be a subtle light or dark color used on page backgrounds
+  secondary: "#f9f9f9"
+  # Use the following to specify whether the previous two colours are 'light'
+  # or 'dark' and therefore what colors can be overlaid on them
+  primary-overlay: "dark"
+  secondary-overlay: "light"
+
+#Uncomment this if you want to enable Algolia doc search with your own values
+#searchconfig:
+#  apikey: ""
+#  indexname: ""
+
+collections:
+  docs:
+    output: true
+    permalink: /docs/:name/
+  support:
+    output: true
+    permalink: /support.html
+
+# DO NOT ADJUST BELOW THIS LINE UNLESS YOU KNOW WHAT YOU ARE CHANGING
+
+markdown: kramdown
+kramdown:
+  input: GFM
+  syntax_highlighter: rouge
+
+  syntax_highlighter_opts:
+    css_class: 'rougeHighlight'
+    span:
+      line_numbers: false
+    block:
+      line_numbers: true
+      start_line: 1
+
+sass:
+  style: :compressed
+
+redcarpet:
+  extensions: [with_toc_data]
--- a/docs/_config_local_dev.yml
+++ b/docs/_config_local_dev.yml
+# Local development config settings to over-ride base.
+# `jekyll serve` will by default generate a webserver at localhost:4000, so
+# only change `url` if you're using a non-default location. 
+
+baseurl: ""
+url: "http://127.0.0.1:4000"
\ No newline at end of file
--- a/docs/_data/authors.yml
+++ b/docs/_data/authors.yml
+
+exampleauthor:
+  full_name: Example Author
+  fbid: 1234
\ No newline at end of file
--- a/docs/_data/features.yml
+++ b/docs/_data/features.yml
+- title: Feature 1
+  text: |
+        This is a description of the feature which **can** use [markdown](#).
+  image: images/android.svg
+
+- title: Feature 2
+  text: |
+        This is another description of a feature.
+  image: images/apple.svg
+  
+- title: Feature 3
+  text: |
+        This is another description of a feature.
+  image: images/facebook.png
+
+- title: Feature 4
+  text: |
+        This is another description of a feature.
+  image: images/instagram.png
\ No newline at end of file
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
+- title: Docs
+  href: /docs/
+  category: docs
+
+- title: Support
+  href: /support.html
+  category: support
+
+- title: Blog
+  href: /blog/
+  category: blog
+
+- title: Facebook
+  href: http://www.facebook.com/
+  category: facebook
\ No newline at end of file
--- a/docs/_data/nav_docs.yml
+++ b/docs/_data/nav_docs.yml
+- title: Quick Start
+  items:
+  - id: getting-started
+  - id: hello-world
+- title: Another Doc Group
+  items:
+  - id: making-changes
--- a/docs/_data/powered_by.yml
+++ b/docs/_data/powered_by.yml
+- title: Who Uses This Project?
+  items:
+  - name: Example Company
+    url: https://www.example.com/
+  - name: Another Example
+    url: https://www.example.com
--- a/docs/_data/powered_by_highlight.yml
+++ b/docs/_data/powered_by_highlight.yml
+- title: Who Uses This Project?
+  items:
+  - name: Facebook
+    url: https://facebook.com
+    img: static/images/facebook.png
+  - name: Instagram
+    url: https://www.instagram.com
+    img: static/images/instagram.png
+  - name: Facebook
+    url: https://facebook.com
+    img: static/images/facebook.png
+  - name: Instagram
+    url: https://www.instagram.com
+    img: static/images/instagram.png
--- a/docs/_data/promo.yml
+++ b/docs/_data/promo.yml
+# This file determines the list of promotional elements added to the header of \
+# your site's homepage. Full list of plugins are shown
+
+- type: button
+  href: docs/getting-started.html
+  text: Example Button
+
+- type: github_star
+
+- type: github_watch
+
+- type: like_button
+
+- type: google_share
+
+- type: twitter_follow
+  href: FbOpenSource
+
+- type: twitter_share
+
+- type: plugin_row
+  children:
+  - type: button
+    href: docs/getting-started.html
+    text: Get Started
+  - type: button
+    href: https://example.com
+    text: Another Button
\ No newline at end of file
--- a/docs/_docs/getting-started.md
+++ b/docs/_docs/getting-started.md
+---
+docid: getting-started
+title: Getting started with ProjectName
+layout: docs
+permalink: /docs/getting-started.html
+---
+
+This is some placeholder text, but you can use any kind of Markdown syntax here.
\ No newline at end of file
--- a/docs/_docs/hello-world.md
+++ b/docs/_docs/hello-world.md
+---
+docid: hello-world
+title: Hello, World!
+layout: docs
+permalink: /docs/hello-world.html
+---
+
+This is some placeholder text, but you can use any kind of Markdown syntax here.
\ No newline at end of file
--- a/docs/_docs/making-changes.md
+++ b/docs/_docs/making-changes.md
+---
+docid: making-changes
+title: Making Changes
+layout: docs
+permalink: /docs/making-changes.html
+---
+
+This is some placeholder text, but you can use any kind of Markdown syntax here.
\ No newline at end of file
--- a/docs/_includes/blog_pagination.html
+++ b/docs/_includes/blog_pagination.html
+<!-- Pagination links - copied from http://jekyllrb.com/docs/pagination/ -->
+{% if paginator.total_pages > 1 %}
+<br />
+<div class="pagination">
+  {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
+  {% else %}
+    <span>&laquo; Prev</span>
+  {% endif %}
+
+  {% for page in (1..paginator.total_pages) %}
+    {% if page == paginator.page %}
+      <em>{{ page }}</em>
+    {% elsif page == 1 %}
+      <a href="{{ '/blog' | prepend: site.baseurl }}">{{ page }}</a>
+    {% else %}
+      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
+    {% endif %}
+  {% endfor %}
+
+  {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
+  {% else %}
+    <span>Next &raquo;</span>
+  {% endif %}
+</div>
+<br />
+{% endif %}
+
--- a/docs/_includes/content/gridblocks.html
+++ b/docs/_includes/content/gridblocks.html
+<div class="gridBlock">
+{% for item in {{include.data_source}} %}
+  {% include content/items/gridblock.html item=item layout=include.layout imagealign=include.imagealign align=include.align %}
+{% endfor %}
+</div>
\ No newline at end of file
--- a/docs/_includes/content/items/gridblock.html
+++ b/docs/_includes/content/items/gridblock.html
+{% if include.layout == "fourColumn" %}
+  {% assign layout = "fourByGridBlock" %}
+{% else %}
+  {% assign layout = "twoByGridBlock" %}
+{% endif %}
+
+{% if include.imagealign == "side" %}
+  {% assign imagealign = "imageAlignSide" %}
+{% else %}
+  {% if item.image %}
+    {% assign imagealign = "imageAlignTop" %}
+  {% else %}
+    {% assign imagealign = "" %}
+  {% endif %}
+{% endif %}
+
+{% if include.align == "right" %}
+  {% assign align = "alignRight" %}
+{% elsif include.align == "center" %}
+  {% assign align = "alignCenter" %}
+{% else %}
+  {% assign align = "alignLeft" %}
+{% endif %}
+
+<div class="blockElement {{ layout }} {{ imagealign }} {{ align }}">
+  {% if item.image %}
+  <div class="blockImage">
+    <img src="/static/{{ item.image }}" alt="{{ item.title }}" title="{{ item.title }}" />
+  </div>
+  {% endif %}
+  <div class="blockContent">
+    <h3>{{ item.title }}</h3>
+    {% if item.text %}
+    {{ item.text | markdownify }}
+    {% endif %}
+  </div>
+</div>
--- a/docs/_includes/doc.html
+++ b/docs/_includes/doc.html
+<div class="post">
+  <header class="post-header">
+    <h1 class="post-title">{% if include.truncate %}<a href="{{ site.url }}{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a>{% else %}{{ page.title }}{% endif %}</h1>
+  </header>
+
+  <article class="post-content">
+   {% if include.truncate %}
+      {% if page.content contains '<!--truncate-->' %}
+        {{ page.content | split:'<!--truncate-->' | first }}
+        <div class="read-more">
+          <a href="{{ site.url }}{{ site.baseurl }}{{ page.url }}" >
+            ...Read More
+          </a>
+        </div>
+      {% else %}
+        {{ page.content }}
+      {% endif %}
+    {% else %}
+      {{ content }}
+
+      <p><a class="edit-page-link" href="https://github.com/{{ site.ghrepo }}/tree/gh-pages/{{ page.path }}" target="_blank">Edit on GitHub</a></p>
+    {% endif %}
+  </article>
+  {% include doc_paging.html %}
+</div>
--- a/docs/_includes/doc_paging.html
+++ b/docs/_includes/doc_paging.html
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
+<div class="footerContainer">
+  <div id="footer_wrap" class="wrapper footerWrapper">
+    <div class="footerBlocks">
+      <div id="fb_oss" class="footerSection fbOpenSourceFooter">
+          <svg class="facebookOSSLogoSvg" viewBox="0 0 1133.9 1133.9" x="0px" y="0px">
+            <g>
+              <path class="logoRing outerRing" d="M 498.3 3.7 c 153.6 88.9 307.3 177.7 461.1 266.2 c 7.6 4.4 10.3 9.1 10.3 17.8 c -0.3 179.1 -0.2 358.3 0 537.4 c 0 8.1 -2.4 12.8 -9.7 17.1 c -154.5 88.9 -308.8 178.1 -462.9 267.5 c -9 5.2 -15.5 5.3 -24.6 0.1 c -153.9 -89.2 -307.9 -178 -462.1 -266.8 C 3 838.8 0 833.9 0 825.1 c 0.3 -179.1 0.2 -358.3 0 -537.4 c 0 -8.6 2.6 -13.6 10.2 -18 C 164.4 180.9 318.4 92 472.4 3 C 477 -1.5 494.3 -0.7 498.3 3.7 Z M 48.8 555.3 c 0 79.9 0.2 159.9 -0.2 239.8 c -0.1 10 3 15.6 11.7 20.6 c 137.2 78.8 274.2 157.8 411 237.3 c 9.9 5.7 17 5.7 26.8 0.1 c 137.5 -79.8 275.2 -159.2 412.9 -238.5 c 7.4 -4.3 10.5 -8.9 10.5 -17.8 c -0.3 -160.2 -0.3 -320.5 0 -480.7 c 0 -8.8 -2.8 -13.6 -10.3 -18 C 772.1 218 633.1 137.8 494.2 57.4 c -6.5 -3.8 -11.5 -4.5 -18.5 -0.5 C 336.8 137.4 197.9 217.7 58.8 297.7 c -7.7 4.4 -10.2 9.2 -10.2 17.9 C 48.9 395.5 48.8 475.4 48.8 555.3 Z" />
+              <path class="logoRing middleRing" d="M 184.4 555.9 c 0 -33.3 -1 -66.7 0.3 -100 c 1.9 -48 24.1 -86 64.7 -110.9 c 54.8 -33.6 110.7 -65.5 167 -96.6 c 45.7 -25.2 92.9 -24.7 138.6 1 c 54.4 30.6 108.7 61.5 162.2 93.7 c 44 26.5 67.3 66.8 68 118.4 c 0.9 63.2 0.9 126.5 0 189.7 c -0.7 50.6 -23.4 90.7 -66.6 116.9 c -55 33.4 -110.8 65.4 -167.1 96.5 c -43.4 24 -89 24.2 -132.3 0.5 c -57.5 -31.3 -114.2 -64 -170 -98.3 c -41 -25.1 -62.9 -63.7 -64.5 -112.2 C 183.5 621.9 184.3 588.9 184.4 555.9 Z M 232.9 556.3 c 0 29.5 0.5 59.1 -0.1 88.6 c -0.8 39.2 16.9 67.1 50.2 86.2 c 51.2 29.4 102.2 59.2 153.4 88.4 c 31.4 17.9 63.6 18.3 95 0.6 c 53.7 -30.3 107.1 -61.2 160.3 -92.5 c 29.7 -17.5 45 -44.5 45.3 -78.8 c 0.6 -61.7 0.5 -123.5 0 -185.2 c -0.3 -34.4 -15.3 -61.5 -44.9 -79 C 637.7 352.6 583 320.8 527.9 290 c -27.5 -15.4 -57.2 -16.1 -84.7 -0.7 c -56.9 31.6 -113.4 64 -169.1 97.6 c -26.4 15.9 -40.7 41.3 -41.1 72.9 C 232.6 491.9 232.9 524.1 232.9 556.3 Z" />
+              <path class="logoRing innerRing" d="M 484.9 424.4 c 69.8 -2.8 133.2 57.8 132.6 132 C 617 630 558.5 688.7 484.9 689.1 c -75.1 0.4 -132.6 -63.6 -132.7 -132.7 C 352.1 485 413.4 421.5 484.9 424.4 Z M 401.3 556.7 c -3.4 37.2 30.5 83.6 83 84.1 c 46.6 0.4 84.8 -37.6 84.9 -84 c 0.1 -46.6 -37.2 -84.4 -84.2 -84.6 C 432.2 472.1 397.9 518.3 401.3 556.7 Z" />
+            </g>
+          </svg>
+        <h2>Facebook Open Source</h2>
+      </div>
+      <div class="footerSection">
+        <a class="footerLink" href="https://code.facebook.com/projects/" target="_blank">Open Source Projects</a>
+        <a class="footerLink" href="https://github.com/facebook/" target="_blank">GitHub</a>
+        <a class="footerLink" href="https://twitter.com/fbOpenSource" target="_blank">Twitter</a>
+      </div>
+      <div class="footerSection rightAlign">
+        <a class="footerLink" href="https://github.com/{{ site.ghrepo }}" target="_blank">Contribute to this project on GitHub</a>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', '{{ site.gacode }}', 'auto');
+  ga('send', 'pageview');
+</script>
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
+  <meta property="og:site_name" content="{{ site.title }}"/>
+  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
+  <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}/static/og_image.png" />
+  <meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
+
+  <link rel="stylesheet" href="{{ site.url }}{{ site.baseurl }}/css/main.css" media="screen">
+  <link rel="icon" href="{{ site.url }}{{ site.baseurl }}/static/favicon.png" type="image/x-icon">
+  {% if site.searchconfig %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
+  {% endif %}
+
+  <title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+
+  <base href="{{ site.url }}{{ site.baseurl }}/" />
+
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+</head>
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
+<div class="headerContainer">
+  <div id="header_wrap" class="wrapper headerWrapper">
+    <div class="inner">
+      <img class="projectLogo" height="200px" src="{{ site.baseurl }}/static/logo.svg" alt="{{ site.title }}" title="{{ site.title }}" />
+      <h1 id="project_title">{{ site.title }}</h1>
+      <h2 id="project_tagline" class="fbossFontLight">{{ site.tagline }}</h2>
+
+      <section id="intro">
+        <p>{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description }}{% endif %}</p>
+      </section>
+      <div id="promo" class="section promoSection">
+        {% for promo in site.data.promo %}
+          {% include plugins/{{promo.type}}.html button_href=promo.href button_text=promo.text %}
+          <div class="gridClear"></div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
--- a/docs/_includes/hero.html
+++ b/docs/_includes/hero.html
--- a/docs/_includes/home_header.html
+++ b/docs/_includes/home_header.html
+<div class="homeContainer">
+  <div class="homeSplashFade">
+    <div id="home_wrap" class="wrapper homeWrapper">
+      <div id="inner">
+        <h2 id="project_tagline">{{ site.tagline }}</h2>
+        <section id="intro">
+          <p>{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description }}{% endif %}</p>
+        </section>
+        <div id="promo" class="section promoSection">
+          {% for promo in site.data.promo %}
+            <div class="promoRow">
+            {% include plugins/{{promo.type}}.html href=promo.href text=promo.text children=promo.children %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+      <div class="projectLogo">
+        <img src="{{ site.baseurl }}/static/logo.svg" alt="{{ site.title }}">
+      </div>
+    </div>
+  </div>
+</div>
--- a/docs/_includes/katex_import.html
+++ b/docs/_includes/katex_import.html
+<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.js"></script>
--- a/docs/_includes/katex_render.html
+++ b/docs/_includes/katex_render.html
+<script type="text/javascript">
+/* global katex */
+
+var findEndOfMath = function(delimiter, text, startIndex) {
+    // Adapted from
+    // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
+    var index = startIndex;
+    var braceLevel = 0;
+
+    var delimLength = delimiter.length;
+
+    while (index < text.length) {
+        var character = text[index];
+
+        if (braceLevel <= 0 &&
+            text.slice(index, index + delimLength) === delimiter) {
+            return index;
+        } else if (character === "\\") {
+            index++;
+        } else if (character === "{") {
+            braceLevel++;
+        } else if (character === "}") {
+            braceLevel--;
+        }
+
+        index++;
+    }
+
+    return -1;
+};
+
+var splitAtDelimiters = function(startData, leftDelim, rightDelim, display) {
+    var finalData = [];
+
+    for (var i = 0; i < startData.length; i++) {
+        if (startData[i].type === "text") {
+            var text = startData[i].data;
+
+            var lookingForLeft = true;
+            var currIndex = 0;
+            var nextIndex;
+
+            nextIndex = text.indexOf(leftDelim);
+            if (nextIndex !== -1) {
+                currIndex = nextIndex;
+                finalData.push({
+                    type: "text",
+                    data: text.slice(0, currIndex)
+                });
+                lookingForLeft = false;
+            }
+
+            while (true) {
+                if (lookingForLeft) {
+                    nextIndex = text.indexOf(leftDelim, currIndex);
+                    if (nextIndex === -1) {
+                        break;
+                    }
+
+                    finalData.push({
+                        type: "text",
+                        data: text.slice(currIndex, nextIndex)
+                    });
+
+                    currIndex = nextIndex;
+                } else {
+                    nextIndex = findEndOfMath(
+                        rightDelim,
+                        text,
+                        currIndex + leftDelim.length);
+                    if (nextIndex === -1) {
+                        break;
+                    }
+
+                    finalData.push({
+                        type: "math",
+                        data: text.slice(
+                            currIndex + leftDelim.length,
+                            nextIndex),
+                        rawData: text.slice(
+                            currIndex,
+                            nextIndex + rightDelim.length),
+                        display: display
+                    });
+
+                    currIndex = nextIndex + rightDelim.length;
+                }
+
+                lookingForLeft = !lookingForLeft;
+            }
+
+            finalData.push({
+                type: "text",
+                data: text.slice(currIndex)
+            });
+        } else {
+            finalData.push(startData[i]);
+        }
+    }
+
+    return finalData;
+};
+
+var splitWithDelimiters = function(text, delimiters) {
+    var data = [{type: "text", data: text}];
+    for (var i = 0; i < delimiters.length; i++) {
+        var delimiter = delimiters[i];
+        data = splitAtDelimiters(
+            data, delimiter.left, delimiter.right,
+            delimiter.display || false);
+    }
+    return data;
+};
+
+var renderMathInText = function(text, delimiters) {
+    var data = splitWithDelimiters(text, delimiters);
+
+    var fragment = document.createDocumentFragment();
+
+    for (var i = 0; i < data.length; i++) {
+        if (data[i].type === "text") {
+            fragment.appendChild(document.createTextNode(data[i].data));
+        } else {
+            var span = document.createElement("span");
+            var math = data[i].data;
+            try {
+                katex.render(math, span, {
+                    displayMode: data[i].display
+                });
+            } catch (e) {
+                if (!(e instanceof katex.ParseError)) {
+                    throw e;
+                }
+                console.error(
+                    "KaTeX auto-render: Failed to parse `" + data[i].data +
+                    "` with ",
+                    e
+                );
+                fragment.appendChild(document.createTextNode(data[i].rawData));
+                continue;
+            }
+            fragment.appendChild(span);
+        }
+    }
+
+    return fragment;
+};
+
+var renderElem = function(elem, delimiters, ignoredTags) {
+    for (var i = 0; i < elem.childNodes.length; i++) {
+        var childNode = elem.childNodes[i];
+        if (childNode.nodeType === 3) {
+            // Text node
+            var frag = renderMathInText(childNode.textContent, delimiters);
+            i += frag.childNodes.length - 1;
+            elem.replaceChild(frag, childNode);
+        } else if (childNode.nodeType === 1) {
+            // Element node
+            var shouldRender = ignoredTags.indexOf(
+                childNode.nodeName.toLowerCase()) === -1;
+
+            if (shouldRender) {
+                renderElem(childNode, delimiters, ignoredTags);
+            }
+        }
+        // Otherwise, it's something else, and ignore it.
+    }
+};
+
+var defaultOptions = {
+    delimiters: [
+        {left: "$$", right: "$$", display: true},
+        {left: "\\[", right: "\\]", display: true},
+        {left: "\\(", right: "\\)", display: false}
+        // LaTeX uses this, but it ruins the display of normal `$` in text:
+        // {left: "$", right: "$", display: false}
+    ],
+
+    ignoredTags: [
+        "script", "noscript", "style", "textarea", "pre", "code"
+    ]
+};
+
+var extend = function(obj) {
+    // Adapted from underscore.js' `_.extend`. See LICENSE.txt for license.
+    var source, prop;
+    for (var i = 1, length = arguments.length; i < length; i++) {
+        source = arguments[i];
+        for (prop in source) {
+            if (Object.prototype.hasOwnProperty.call(source, prop)) {
+                obj[prop] = source[prop];
+            }
+        }
+    }
+    return obj;
+};
+
+var renderMathInElement = function(elem, options) {
+    if (!elem) {
+        throw new Error("No element provided to render");
+    }
+
+    options = extend({}, defaultOptions, options);
+
+    renderElem(elem, options.delimiters, options.ignoredTags);
+};
+
+renderMathInElement(document.body);
+
+</script>
--- a/docs/_includes/nav.html
+++ b/docs/_includes/nav.html
+<div id="fixed_header" class="fixedHeaderContainer{% if include.alwayson %} visible{% endif %}">
+  <div class="headerWrapper wrapper">
+    <header>
+      <a href="{{ site.url }}{{ site.baseurl }}/">
+        <img src="{{ site.baseurl }}/static/logo.svg">
+        <h2>{{ site.title }}</h2>
+      </a>
+
+      <div class="navigationWrapper navigationFull" id="flat_nav">
+        <nav class="navigation">
+          <ul>
+            {% for item in site.data.nav %}
+            <li class="navItem{% if page.collection == item.category or page.category == item.category %} navItemActive{% endif %}">
+              <a href="{{ item.href }}">{{ item.title }}</a>
+            </li>
+            {% endfor %}
+            {% if site.searchconfig %}
+            {% include nav_search.html inputselector="search_input" %}
+            {% endif %}
+          </ul>
+        </nav>
+      </div>
+      <div class="navigationWrapper navigationSlider" id="navigation_wrap">
+        {% include nav/header_nav.html %}
+      </div>
+    </header>
+  </div>
+</div>
--- a/docs/_includes/nav/collection_nav.html
+++ b/docs/_includes/nav/collection_nav.html
+<div class="docsNavContainer">
+  <nav class="toc" id="doc_nav">
+    <div class="toggleNav" id="collection_nav">
+      <section class="navWrapper wrapper">
+        <div class="navBreadcrumb wrapper">
+          <div class="navToggle" id="collection_nav_toggler">
+            <i></i>
+          </div>
+          <h2>
+            <a href="{{ include.sectionpath }}">{{ include.sectiontitle }}</a>
+            {% if include.currentgroup %}
+            <i>›</i>
+            <span>{{ include.currentgroup }}</span>
+            {% endif %}
+          </h2>
+        </div>
+        <div class="navGroups">
+          {% if include.type == "blog" %}
+            {% assign grouptitle = "Recent Posts" %}
+            {% assign groupitems = include.navdata %}
+            {% include nav/collection_nav_group.html %}
+          {% else %}
+          {% for group in include.navdata %}
+            {% assign grouptitle = group.title %}
+            {% for item in group.items %}
+              {% if item.id == page.docid %}
+              {% assign currentgroup = group %}
+              {% endif %}
+            {% endfor %}
+            {% include nav/collection_nav_group.html %}
+          {% endfor %}
+          {% endif %}
+        </div>
+      </section>
+    </div>
+  </nav>
+</div>
+<script>
+  var docsevent = document.createEvent('Event');
+  docsevent.initEvent('docs_slide', true, true);
+  document.addEventListener('docs_slide', function (e) {
+    document.body.classList.toggle('docsSliderActive');
+  }, false);
+
+  var collectionNav = document.getElementById('collection_nav');
+  var collectionNavToggler = 
+    document.getElementById('collection_nav_toggler');
+  collectionNavToggler.addEventListener('click', function(e) {
+    collectionNav.classList.toggle('toggleNavActive');
+    document.dispatchEvent(docsevent);
+  });
+
+  var groups = document.getElementsByClassName('navGroup');
+  for(var i = 0; i < groups.length; i++) {
+    var thisGroup = groups[i];
+    thisGroup.onclick = function() {
+      for(var j = 0; j < groups.length; j++) {
+        var group = groups[j];
+        group.classList.remove('navGroupActive');
+      }
+      this.classList.add('navGroupActive');
+    }
+  }
+</script>
+
--- a/docs/_includes/nav/collection_nav_group.html
+++ b/docs/_includes/nav/collection_nav_group.html
+<div class="navGroup{% if currentgroup == group %} navGroupActive navGroupCurrent{% endif %}">
+  <h3><i>+</i><span>{{ grouptitle }}</span></h3>
+  <ul>
+    {% if include.data_collection %}
+      {% for item in group.items %}
+        {% for collectionitem in include.data_collection %}
+        {% if collectionitem.docid == item.id %}
+          {% assign groupitem = collectionitem %}
+          {% include nav/collection_nav_group_item.html %}
+        {% endif %}
+        {% endfor %}
+      {% endfor %}
+    {% else %}
+      {% for groupitem in groupitems %}
+      {% include nav/collection_nav_group_item.html %}
+      {% endfor %}
+    {% endif %}
+  </ul>
+</div>
\ No newline at end of file
--- a/docs/_includes/nav/collection_nav_group_item.html
+++ b/docs/_includes/nav/collection_nav_group_item.html
+<li class="navListItem"><a class="navItem" href="{{ groupitem.url }}">{{ groupitem.title }}</a></li>
\ No newline at end of file
--- a/docs/_includes/nav/header_nav.html
+++ b/docs/_includes/nav/header_nav.html
+<div id="header_nav">
+  <div class="navSlideout">
+    <i class="menuExpand" id="header_nav_expander"><span></span><span></span><span></span></i>
+  </div>
+  <nav class="slidingNav">
+    <ul>
+      {% for item in site.data.nav %}
+      <li class="navItem">
+        <a href="{{ item.href }}"{% if item.category == "external" %} target="_blank"{% endif %}>{{ item.title }}</a>
+      </li>
+      {% endfor %}
+      {% if site.searchconfig %}
+      {% include nav_search.html inputselector="search_input_react" %}
+      {% endif %}
+    </ul>
+  </nav>
+</div>
+<script>
+  var event = document.createEvent('Event');
+  event.initEvent('slide', true, true);
+  document.addEventListener('slide', function (e) {
+    document.body.classList.toggle('sliderActive');
+  }, false);
+  var headerNav = document.getElementById('header_nav');
+  var headerNavExpander = document.getElementById('header_nav_expander');
+  headerNavExpander.addEventListener('click', function(e) {
+    headerNav.classList.toggle('navSlideoutActive');
+    document.dispatchEvent(event);
+  }, false);
+</script>
\ No newline at end of file
--- a/docs/_includes/nav_search.html
+++ b/docs/_includes/nav_search.html
+<li class="navSearchWrapper">
+  <input id="{{ include.inputselector }}" type="search" />
+</li>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+<script>
+// For Algolia search
+(function() {
+  // Algolia
+  docsearch({
+    apiKey: '{{ site.searchconfig.apikey }}',
+    indexName: '{{ site.searchconfig.indexname }}',
+    inputSelector: '#{{ include.inputselector }}',
+  });
+}());
+</script>
\ No newline at end of file
--- a/docs/_includes/plugins/all_share.html
+++ b/docs/_includes/plugins/all_share.html
+<div class="pluginBlock allShareBlock">
+  {% include plugins/like_button.html %}{% include plugins/twitter_share.html %}{% include plugins/google_share.html %}
+</div>
\ No newline at end of file
--- a/docs/_includes/plugins/ascii_cinema.html
+++ b/docs/_includes/plugins/ascii_cinema.html
+<div class="ascii-cinema pluginBlock"></div>
+<script type="text/javascript" src="https://asciinema.org/a/{{ include.href }}.js" id="asciicast-{{ include.href }}" async data-autoplay="true" data-loop="true" data-speed="2" data-t="23"></script>
\ No newline at end of file
--- a/docs/_includes/plugins/button.html
+++ b/docs/_includes/plugins/button.html
+<div class="pluginWrapper buttonWrapper">
+  <a
+    class="button"
+    href="{{ include.href }}"
+  >{{ include.text }}</a>
+</div>
\ No newline at end of file
--- a/docs/_includes/plugins/github_star.html
+++ b/docs/_includes/plugins/github_star.html
+<div class="pluginWrapper ghStarWrapper">
+  <a aria-label="Star {{ site.ghrepo }} on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/{{ site.ghrepo }}#stargazers_count" data-count-href="/{{ site.ghrepo }}/stargazers" data-style="mega" data-icon="octicon-star" href="https://github.com/{{ site.ghrepo }}" class="github-button">Star</a>
+</div>
+<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
\ No newline at end of file
--- a/docs/_includes/plugins/github_watch.html
+++ b/docs/_includes/plugins/github_watch.html
+<div class="pluginWrapper ghWatchWrapper">
+  <a aria-label="Watch {{ site.ghrepo }} on GitHub" data-count-aria-label="# watchers on GitHub" data-count-api="/repos/{{ site.ghrepo }}#subscribers_count" data-count-href="/{{ site.ghrepo }}/watchers" data-style="mega" data-icon="octicon-eye" href="https://github.com/{{ site.ghrepo }}" class="github-button">Watch</a>
+</div>
+<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
\ No newline at end of file
--- a/docs/_includes/plugins/google_share.html
+++ b/docs/_includes/plugins/google_share.html
+<div class="pluginBlock">
+  <div class="g-plusone" data-size="medium"></div>
+</div>
+
+<script src="https://apis.google.com/js/platform.js" async defer></script>
--- a/docs/_includes/plugins/iframe.html
+++ b/docs/_includes/plugins/iframe.html
+<div class="iframeContent">
+  <iframe class="pluginIframe" src="{{ include.href }}" seamless></iframe>
+</div>
+<div class="iframePreview">
+  {% include plugins/button.html href=include.href text=include.text %}
+</div>
\ No newline at end of file
--- a/docs/_includes/plugins/like_button.html
+++ b/docs/_includes/plugins/like_button.html
+<div class="fb-like pluginWrapper likeButtonWrapper" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
+<script>
+  window.fbAsyncInit = function() {
+  FB.init({
+    appId      : '{{ site.fbappid }}',
+    xfbml      : true,
+    version    : 'v2.3'
+  });
+  };
+
+  (function(d, s, id){
+   var js, fjs = d.getElementsByTagName(s)[0];
+   if (d.getElementById(id)) {return;}
+   js = d.createElement(s); js.id = id;
+   js.src = "//connect.facebook.net/en_US/sdk.js";
+   fjs.parentNode.insertBefore(js, fjs);
+   }(document, 'script', 'facebook-jssdk'));
+</script>
\ No newline at end of file
--- a/docs/_includes/plugins/plugin_row.html
+++ b/docs/_includes/plugins/plugin_row.html
+<div class="pluginRowBlock">
+{% for child in include.children %}
+  {% include plugins/{{child.type}}.html href=child.href text=child.text %}
+{% endfor %}
+</div>
\ No newline at end of file
--- a/docs/_includes/plugins/post_social_plugins.html
+++ b/docs/_includes/plugins/post_social_plugins.html
+<div class="postSocialPlugins">
+  <a 
+    href="https://twitter.com/share" 
+    class="twitter-share-button" 
+    data-url="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" 
+    data-text="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" 
+    data-hashtags="flowtype">Tweet</a>
+  <div 
+    class="fb-like" 
+    data-href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" 
+    data-layout="button_count" 
+    data-action="like"
+    data-show-faces="false"
+    data-share="true"></div>
+</div>
+<script>
+  window.fbAsyncInit = function() {
+  FB.init({
+    appId      : '{{ site.fbappid }}',
+    xfbml      : true,
+    version    : 'v2.2'
+  });
+  };
+
+  (function(d, s, id){
+   var js, fjs = d.getElementsByTagName(s)[0];
+   if (d.getElementById(id)) {return;}
+   js = d.createElement(s); js.id = id;
+   js.src = "//connect.facebook.net/en_US/sdk.js";
+   fjs.parentNode.insertBefore(js, fjs);
+   }(document, 'script', 'facebook-jssdk'));
+</script>
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
--- a/docs/_includes/plugins/slideshow.html
+++ b/docs/_includes/plugins/slideshow.html
+<div class="slideshowBlock pluginWrapper" id="slideshow"></div>
+<script>
+  var slideshowData = [
+    {% for image in site.data.slideshow %}
+    {
+      id         : "{{ image.id }}",
+      imagesrc   : "{{ image.src }}",
+      tooltip    : "{{ image.tooltip }}",
+      href       : "{{ image.link }}",
+    },
+    {% endfor %}
+  ];
+</script>
+<script src="http://fb.me/react-with-addons-0.13.1.min.js"></script>
+<script type="text/javascript">
+  var Slideshow = React.createClass({displayName: "Slideshow",
+    getInitialState: function() {
+      return {
+        currentSlide: 0,
+      };
+    },
+    getDefaultProps: function() {
+      return {
+        data: slideshowData,
+      };
+    },
+    handleSelect: function(id) {
+      var index = this.props.data.map(function (el, elIndex) {
+        return (
+          elIndex
+        );
+      });
+      var currentIndex = index.indexOf(id);
+      this.setState({
+        currentSlide: currentIndex,
+      });
+    },
+    render: function() {
+      return (
+        React.createElement("div", {className: "slideshow"},
+          React.createElement("div", {className: "slides"},
+            this.props.data.map(this.renderSlide)
+          ),
+          React.createElement("div", {className: "pagination"},
+            this.props.data.map(this.renderPager)
+          )
+        )
+      );
+    },
+    renderSlide: function(child, index) {
+      var classes = React.addons.classSet({
+        'slide': true,
+        'slideActive': this.state.currentSlide === index,
+      });
+      if (child.href) {
+        return (
+          React.createElement("div", {key: index, className: classes},
+            React.createElement("a", {href: child.href, alt: child.tooltip, title: child.tooltip},
+              React.createElement("img", {src: child.imagesrc, alt: child.tooltip, title: child.tooltip})
+            )
+          )
+        );
+      }
+      return (
+        React.createElement("div", {key: index, className: classes},
+          React.createElement("img", {src: child.imagesrc, alt: child.tooltip})
+        )
+      );
+    },
+    renderPager: function(child, index) {
+      var classes = React.addons.classSet({
+        'pager': true,
+        'pagerActive': this.state.currentSlide === index,
+      });
+      return (
+        React.createElement("span", {key: index, className: classes, onClick: this.handleSelect.bind(this, index)})
+      );
+    },
+  });
+
+  function render(slideshowData) {
+    React.render(
+      React.createElement(Slideshow, {data: slideshowData}),
+      document.getElementById('slideshow')
+    );
+  }
+  render(slideshowData);
+</script>
\ No newline at end of file
--- a/docs/_includes/plugins/twitter_follow.html
+++ b/docs/_includes/plugins/twitter_follow.html
+<div class="pluginBlock">
+  <a href="https://twitter.com/{{ include.href }}" class="twitter-follow-button pluginBlock" data-show-count="false">Follow @{{ include.href }}</a>
+</div>
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
\ No newline at end of file
--- a/docs/_includes/plugins/twitter_share.html
+++ b/docs/_includes/plugins/twitter_share.html
+<div class="pluginWrapper twitterSharePlugin">
+  <a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="{{ site.title| replace: ' ', '' }}">Tweet</a>
+</div>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
\ No newline at end of file
--- a/docs/_includes/post.html
+++ b/docs/_includes/post.html
+<div class="post">
+  {% assign author = site.data.authors[page.author] %}
+  <header class="post-header">
+    {% if author.fbid %}
+    <div class="authorPhoto">
+      <img src="http://graph.facebook.com/{{ author.fbid }}/picture/" alt="{{ author.fullname }}" title="{{ author.fullname }}" />
+    </div>
+    {% endif %}
+    {% if author.full_name %}
+    <p class="post-authorName">{{ author.full_name }}</p>
+    {% endif %}
+    <h1 class="post-title">{% if include.truncate %}<a href="{{ site.url }}{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a>{% else %}{{ page.title }}{% endif %}</h1>
+    <p class="post-meta">Posted {{ page.date | date: '%B %d, %Y' }}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
+  </header>
+
+  <article class="post-content">
+  {% if include.truncate %}
+    {% if page.content contains '<!--truncate-->' %}
+      {{ page.content | split:'<!--truncate-->' | first | markdownify }}
+      <div class="read-more">
+        <a href="{{ site.url }}{{ site.baseurl }}{{ page.url }}" >
+          Read More
+        </a>
+      </div>
+    {% else %}
+      {{ page.content | markdownify }}
+    {% endif %}
+  {% else %}
+    {{ content }}
+  {% endif %}
+  {% unless include.truncate %}
+    {% include plugins/all_share.html %}
+  {% endunless %}
+  </article>
+</div>
--- a/docs/_includes/powered_by.html
+++ b/docs/_includes/powered_by.html
+{% if site.data.powered_by.first.items or site.data.powered_by_highlight.first.items %}
+<div class="poweredByContainer">
+  <div class="wrapper mainWrapper poweredByWrapper">
+    {% if site.data.powered_by_highlight.first.title %}
+    <h2>{{ site.data.powered_by_highlight.first.title }}</h2>
+    {% else %}
+    <h2>{{ site.data.powered_by.first.title }}</h2>
+    {% endif %}
+    {% if site.data.powered_by_highlight.first.items %}
+    <div class="poweredByItems">
+      {% for item in site.data.powered_by_highlight.first.items %}
+      <div class="poweredByItem itemLarge">
+        <a href="{{ item.url }}" target="_blank"><img src="{{ item.img }}" alt="{{ item.name }}" /></a>
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+    <div class="poweredByItems">
+      {% for item in site.data.powered_by.first.items %}
+      <div class="poweredByItem itemSmall">
+        <a href="{{ item.url }}" target="_blank">{{ item.name }}</a>
+      </div>
+      {% endfor %}
+    </div>
+    <div class="poweredByMessage">Does your app use {{ site.title }}? Add it to this list with <a href="https://github.com/{{ site.ghrepo }}/edit/gh-pages/_data/powered_by.yml" target="_blank">a pull request!</a></div>
+  </div>
+</div>
+{% endif %}
--- a/docs/_includes/social_plugins.html
+++ b/docs/_includes/social_plugins.html
+<a 
+  href="https://twitter.com/share" 
+  class="twitter-share-button" 
+  data-url="http://facebook.github.io/fresco{{ page.url }}" 
+  data-text="Fresco | {{ page.title }}" 
+  data-hashtags="fresco">Tweet</a>
+<div 
+  class="fb-like" 
+  data-href="http://facebook.github.io/fresco{{ page.url }}" 
+  data-layout="standard" 
+  data-action="like"
+  data-show-faces="true"
+  data-share="true"></div>
+
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
--- a/docs/_includes/ui/button.html
+++ b/docs/_includes/ui/button.html
+<span class="buttonWrap {{ include.align }}"><a class="button blockButton fbossFontLight pluginBlock margin{{ include.margin }}" target="{{ include.button_target }}" href="{{ include.button_href }}">{{ include.button_text }}</a></span>
\ No newline at end of file
--- a/docs/_layouts/basic.html
+++ b/docs/_layouts/basic.html
+---
+layout: doc_default
+---
+
+<div class="mainContainer blogContainer postContainer">
+  <div id="main_wrap" class="wrapper mainWrapper">
+    <div class="post basicPost">
+      {{ content }}
+    </div>
+  </div>
+</div>
+
--- a/docs/_layouts/blog.html
+++ b/docs/_layouts/blog.html
+---
+category: blog
+layout: blog_default
+---
+
+<div class="mainContainer blogContainer postContainer">
+  <div id="main_wrap" class="wrapper mainWrapper">
+    {{ content }}
+  </div>
+</div>
+
--- a/docs/_layouts/blog_default.html
+++ b/docs/_layouts/blog_default.html
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body class="docsNavVisible">
+    {% include nav.html alwayson=true %}
+    <div class="navPusher">
+      <div class="docMainWrapper wrapper">
+      {% include nav/collection_nav.html navdata=site.posts type="blog" sectionpath="/blog/" sectiontitle="Blog" %}
+      {{ content }}
+      </div>
+      {% include footer.html %}
+    </div>
+  </body>
+</html>
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body>
+    {% include nav.html alwayson=true %}
+    <div class="navPusher">
+      {{ content }}
+      {% include footer.html %}
+    </div>
+  </body>
+
+</html>
--- a/docs/_layouts/doc_default.html
+++ b/docs/_layouts/doc_default.html
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body class="docsNavVisible">
+    {% include nav.html alwayson=true %}
+    <div class="navPusher">
+      <div class="docMainWrapper wrapper">
+      {% include nav/collection_nav.html navdata=site.data.nav_docs type="docs" sectionpath="/docs/" sectiontitle="Docs" data_collection=site.docs %}
+      {{ content }}
+      </div>
+      {% include footer.html %}
+    </div>
+  </body>
+</html>
--- a/docs/_layouts/doc_page.html
+++ b/docs/_layouts/doc_page.html
+---
+layout: doc_default
+---
+
+<div class="mainContainer documentContainer postContainer">
+  <div id="main_wrap" class="wrapper mainWrapper">
+    {{ content }}
+  </div>
+</div>
+
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
+---
+layout: doc_page
+---
+
+{% include doc.html %}
\ No newline at end of file
--- a/docs/_layouts/home.html
+++ b/docs/_layouts/home.html
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body>
+    {% include nav.html alwayson=true %}
+    <div class="navPusher">
+      {% include home_header.html %}
+      <div class="mainContainer">
+        <div id="main_wrap" class="wrapper mainWrapper">
+          {{ content }}
+        </div>
+        {% include powered_by.html %}
+      </div>
+      {% include footer.html %}
+    </div>
+  </body>
+</html>
--- a/docs/_layouts/page.html
+++ b/docs/_layouts/page.html
+---
+layout: blog
+---
--- a/docs/_layouts/plain.html
+++ b/docs/_layouts/plain.html
+---
+layout: default
+---
+
+<div class="mainContainer blogContainer postContainer">
+  <div id="main_wrap" class="wrapper mainWrapper">
+    {{ content }}
+  </div>
+</div>
+
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
+---
+collection: blog
+layout: blog
+---
+
+<div class="lonePost">
+{% include post.html %}
+</div>
\ No newline at end of file
--- a/docs/_layouts/redirect.html
+++ b/docs/_layouts/redirect.html
+<html>
+<head>
+  <meta http-equiv="refresh" content="0; {{ page.destination }}">
+</head>
+<body></body>
+</html>
--- a/docs/_layouts/support.html
+++ b/docs/_layouts/support.html
+---
+layout: default
+---
+
+<div class="mainContainer blogContainer postContainer">
+  <div id="main_wrap" class="wrapper mainWrapper">
+    {{ content }}
+  </div>
+</div>
+
--- a/docs/_posts/2016-04-07-blog-post-example.md
+++ b/docs/_posts/2016-04-07-blog-post-example.md
+---
+title: Blog Post Example
+layout: post
+author: exampleauthor
+category: blog
+---
+
+This is an example blog post introduction, try to keep it short and about a paragraph long, to encourage people to click through to read the entire post. 
+
+<!--truncate-->
+
+Everything below the `<!--truncate-->` tag will only show on the actual blog post page, not on the /blog/ index.
--- a/docs/_sass/_base.scss
+++ b/docs/_sass/_base.scss
+body {
+  background: $secondary-bg;
+  color: $text;
+	font: normal #{$base-font-size}/#{$base-line-height} $base-font-family;
+  height: 100vh;
+	text-align: left;
+	text-rendering: optimizeLegibility;
+}
+
+img {
+  max-width: 100%;
+}
+
+article {
+  p {
+    img {
+      max-width: 100%;
+      display:block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
+a {
+  border-bottom: 1px dotted $primary-bg;
+  color: $text;
+  text-decoration: none;
+  -webkit-transition: background 0.3s, color 0.3s;
+  transition: background 0.3s, color 0.3s;
+}
+
+blockquote {
+  padding: 15px 30px 15px 15px;
+  margin: 20px 0 0 10px;
+  background-color: rgba(204, 122, 111, 0.1);
+  border-left: 10px solid rgba(191, 87, 73, 0.2);
+}
+
+#fb_oss a {
+  border: 0;
+}
+
+h1, h2, h3, h4 {
+  font-family: $header-font-family;
+  font-weight: 900;
+}
+
+.navPusher {
+  border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg;
+	height: 100%;
+	left: 0;
+	position: relative;
+	z-index: 99;
+}
+
+.homeContainer {
+  background: $primary-bg;
+  color: $primary-overlay;
+
+  a {
+    color: $primary-overlay;
+  }
+
+  .homeSplashFade {
+    color: white;
+  }
+
+  .homeWrapper {
+    padding: 2em 10px;
+    text-align: left;
+
+      .wrapper {
+        margin: 0px auto;
+        max-width: $content-width;
+        padding: 0 20px;
+      }
+
+      .projectLogo {
+        img {
+          height: 100px;
+          margin-bottom: 0px;
+        }
+      }
+
+      h1#project_title {
+        font-family: $header-font-family;
+        font-size: 300%;
+        letter-spacing: -0.08em;
+        line-height: 1em;
+        margin-bottom: 80px;
+      }
+
+      h2#project_tagline {
+        font-family: $header-font-family;
+        font-size: 200%;
+        letter-spacing: -0.04em;
+        line-height: 1em;
+      }
+  }
+}
+
+.wrapper {
+	margin: 0px auto;
+	max-width: $content-width;
+	padding: 0 10px;
+}
+
+.projectLogo {
+  display: none;
+
+  img {
+    height: 100px;
+    margin-bottom: 0px;
+  }
+}
+
+section#intro {
+  margin: 40px 0;
+}
+
+.fbossFontLight {
+  font-family: $base-font-family;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.fb-like {
+  display: block;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.center {
+  display: block;
+  text-align: center;
+}
+
+.mainContainer {
+  background: $secondary-bg;
+  overflow: auto;
+
+  .mainWrapper {
+    padding: 4vh 10px;
+    text-align: left;
+
+    .allShareBlock {
+      padding: 10px 0;
+
+      .pluginBlock {
+        margin: 12px 0;
+        padding: 0;
+      }
+    }
+
+    a {
+      &:hover,
+      &:focus {
+        background: $primary-bg;
+        color: $primary-overlay;
+      }
+    }
+
+    em, i {
+      font-style: italic;
+    }
+
+    strong, b {
+      font-weight: bold;
+    }
+
+    h1 {
+      font-size: 300%;
+      line-height: 1em;
+      padding: 1.4em 0 1em;
+      text-align: left;
+    }
+
+    h2 {
+      font-size: 250%;
+      line-height: 1em;
+      margin-bottom: 20px;
+      padding: 1.4em 0 20px;
+      text-align: left;
+
+      & {
+        border-bottom: 1px solid darken($primary-bg, 10%);
+        color: darken($primary-bg, 10%);
+        font-size: 22px;
+        padding: 10px 0;
+      }
+
+      &.blockHeader {
+        border-bottom: 1px solid white;
+        color: white;
+        font-size: 22px;
+        margin-bottom: 20px;
+        padding: 10px 0;
+      }
+    }
+
+    h3 {
+      font-size: 150%;
+      line-height: 1.2em;
+      padding: 1em 0 0.8em;
+    }
+
+    h4 {
+      font-size: 130%;
+      line-height: 1.2em;
+      padding: 1em 0 0.8em;
+    }
+
+    p {
+      padding: 0.8em 0;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    ol, ul {
+      padding-left: 24px;
+      li {
+        padding-bottom: 4px;
+        padding-left: 6px;
+      }
+    }
+
+    strong {
+      font-weight: bold;
+    }
+
+    .post {
+      position: relative;
+
+      .katex {
+        font-weight: 700;
+      }
+
+      &.basicPost {
+        margin-top: 30px;
+      }
+
+      a {
+        color: $primary-bg;
+
+        &:hover,
+        &:focus {
+          color: #fff;
+        }
+      }
+
+      h2 {
+        border-bottom: 4px solid $primary-bg;
+        font-size: 130%;
+      }
+
+      h3 {
+        border-bottom: 1px solid $primary-bg;
+        font-size: 110%;
+      }
+
+      ol {
+        list-style: decimal outside none;
+      }
+
+      .post-header {
+        padding: 1em 0;
+
+        h1 {
+          font-size: 150%;
+          line-height: 1em;
+          padding: 0.4em 0 0;
+
+          a {
+            border: none;
+          }
+        }
+
+        .post-meta {
+          color: $primary-bg;
+          font-family: $header-font-family;
+          text-align: center;
+        }
+      }
+
+      .postSocialPlugins {
+        padding-top: 1em;
+      }
+
+      .docPagination {
+        background: $primary-bg;
+        bottom: 0px;
+        left: 0px;
+        position: absolute;
+        right: 0px;
+
+        .pager {
+          display: inline-block;
+          width: 50%;
+        }
+
+        .pagingNext {
+          float: right;
+          text-align: right;
+        }
+
+        a {
+          border: none;
+          color: $primary-overlay;
+          display: block;
+          padding: 4px 12px;
+
+          &:hover {
+            background-color: $secondary-bg;
+            color: $text;
+          }
+
+          .pagerLabel {
+            display: inline;
+          }
+
+          .pagerTitle {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .posts {
+      .post {
+        margin-bottom: 6vh;
+      }
+    }
+  }
+}
+
+#integrations_title  {
+  font-size: 250%;
+  margin: 80px 0;
+}
+
+.ytVideo {
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 53.4%; /* 16:9 */
+  padding-top: 25px;
+  position: relative;
+}
+
+.ytVideo iframe,
+.ytVideo object,
+.ytVideo embed {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+@media only screen and (min-width: 480px) {
+  h1#project_title {
+    font-size: 500%;
+  }
+
+  h2#project_tagline {
+    font-size: 250%;
+  }
+
+  .projectLogo {
+    img {
+      margin-bottom: 10px;
+      height: 200px;
+    }
+  }
+
+  .homeContainer .homeWrapper {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .mainContainer {
+    .mainWrapper {
+      .post {
+        h2 {
+          font-size: 180%;
+        }
+
+        h3 {
+          font-size: 120%;
+        }
+
+        .docPagination {
+          a {
+            .pagerLabel {
+              display: none;
+            }
+            .pagerTitle {
+              display: inline;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  .homeContainer {
+    .homeWrapper {
+      position: relative;
+
+      #inner {
+        box-sizing: border-box;
+        max-width: 600px;
+        padding-right: 40px;
+      }
+
+      .projectLogo {
+        align-items: center;
+        bottom: 0;
+        display: flex;
+        justify-content: flex-end;
+        left: 0;
+        padding: 2em 20px 4em;
+        position: absolute;
+        right: 20px;
+        top: 0;
+
+        img {
+          height: 100%;
+          max-height: 250px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .mainContainer {
+    .mainWrapper {
+      .post {
+        box-sizing: border-box;
+        display: block;
+
+        .post-header {
+          h1 {
+            font-size: 250%;
+          }
+        }
+      }
+
+      .posts {
+        .post {
+          margin-bottom: 4vh;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .homeContainer {
+    .homeWrapper {
+      #inner {
+        max-width: 750px;
+      }
+    }
+  }
+
+  .wrapper {
+    max-width: 1100px;
+  }
+}
+
+@media only screen and (min-width: 1500px) {
+  .homeContainer {
+    .homeWrapper {
+      #inner {
+        max-width: 1100px;
+        padding-bottom: 40px;
+        padding-top: 40px;
+      }
+    }
+  }
+
+  .wrapper {
+    max-width: 1400px;
+  }
+}
--- a/docs/_sass/_blog.scss
+++ b/docs/_sass/_blog.scss
+.blogContainer {
+  .posts {
+    margin-top: 60px;
+
+    .post {
+      border: 1px solid $primary-bg;
+      border-radius: 3px;
+      padding: 10px 20px 20px;
+    }
+  }
+
+  .lonePost {
+    margin-top: 60px;
+
+    .post {
+      padding: 10px 0px 0px;
+    }
+  }
+
+  .post-header {
+    h1 {
+      text-align: center;
+    }
+
+    .post-authorName {
+      color: rgba($text, 0.7);
+      font-size: 14px;
+      font-weight: 900;
+      margin-top: 0;
+      padding: 0;
+      text-align: center;
+    }
+
+    .authorPhoto {
+      border-radius: 50%;
+      height: 50px;
+      left: 50%;
+      margin-left: -25px;
+      overflow: hidden;
+      position: absolute;
+      top: -25px;
+      width: 50px;
+    }
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_buttons.scss
+++ b/docs/_sass/_buttons.scss
+.button {
+  border: 1px solid $primary-bg;
+  border-radius: 3px;
+  color: $primary-bg;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 1.2em;
+  padding: 10px;
+  text-transform: uppercase;
+  transition: background 0.3s, color 0.3s;
+
+  &:hover {
+    background: $primary-bg;
+    color: $primary-overlay;
+  }
+}
+
+.homeContainer {
+  .button {
+    border-color: $primary-overlay;
+    border-width: 1px;
+    color: $primary-overlay;
+
+    &:hover {
+      background: $primary-overlay;
+      color: $primary-bg;
+    }
+  }
+}
+
+.blockButton {
+  display: block;
+}
+
+.edit-page-link {
+    float: right;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 20px;
+    opacity: 0.6;
+    transition: opacity 0.5s;
+}
+
+.edit-page-link:hover {
+  opacity: 1;
+}
--- a/docs/_sass/_footer.scss
+++ b/docs/_sass/_footer.scss
+.footerContainer {
+  background: $secondary-bg;
+  color: $primary-bg;
+  overflow: hidden;
+  padding: 0 10px;
+  text-align: left;
+
+  .footerWrapper {
+    border-top: 1px solid $primary-bg;
+    padding: 0;
+
+    .footerBlocks {
+      align-items: center;
+      align-content: center;
+      display: flex;
+      flex-flow: row wrap;
+      margin: 0 -20px;
+      padding: 10px 0;
+    }
+
+    .footerSection {
+      box-sizing: border-box;
+      flex: 1 1 25%;
+      font-size: 14px;
+      min-width: 275px;
+      padding: 0px 20px;
+
+      a {
+        border: 0;
+        color: inherit;
+        display: inline-block;
+        line-height: 1.2em;
+      }
+
+      .footerLink {
+        padding-right: 20px;
+      }
+    }
+
+    .fbOpenSourceFooter {
+      align-items: center;
+      display: flex;
+      flex-flow: row nowrap;
+      max-width: 25%;
+
+      .facebookOSSLogoSvg {
+        flex: 0 0 31px;
+        height: 30px;
+        margin-right: 10px;
+        width: 31px;
+
+        path {
+          fill: $primary-bg;
+        }
+
+        .middleRing {
+          opacity: 0.7;
+        }
+
+        .innerRing {
+          opacity: 0.45;
+        }
+      }
+
+      h2 {
+        display: block;
+        font-weight: 900;
+        line-height: 1em;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  .footerSection {
+    &.rightAlign {
+      margin-left: auto;
+      max-width: 25%;
+      text-align: right;
+    }
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_gridBlock.scss
+++ b/docs/_sass/_gridBlock.scss
+.gridBlock {
+  margin: -5px 0;
+  padding: 0;
+  padding-bottom: 20px;
+
+  .blockElement {
+    padding: 5px 0;
+
+    img {
+      max-width: 100%;
+    }
+
+    h3 {
+      border-bottom: 1px solid rgba($primary-bg, 0.5);
+      color: $primary-bg;
+      font-size: 18px;
+      margin: 0;
+      padding: 10px 0;
+    }
+  }
+
+  .gridClear {
+    clear: both;
+  }
+
+}
+
+.gridBlock .alignCenter {
+	text-align: center;
+}
+.gridBlock .alignRight {
+	text-align: right;
+}
+.gridBlock .imageAlignSide {
+	align-items: center;
+	display: flex;
+	flex-flow: row wrap;
+}
+.blockImage {
+	max-width: 150px;
+	width: 50%;
+}
+.imageAlignTop .blockImage {
+	margin-bottom: 20px;
+}
+.imageAlignTop.alignCenter .blockImage {
+	margin-left: auto;
+	margin-right: auto;
+}
+.imageAlignSide .blockImage {
+	flex: 0 1 100px;
+	margin-right: 20px;
+}
+.imageAlignSide .blockContent {
+	flex: 1 1;
+}
+
+@media only screen and (max-width: 1023px) {
+	.responsiveList .blockContent {
+		position: relative;
+	}
+	.responsiveList .blockContent > div {
+		padding-left: 20px;
+	}
+	.responsiveList .blockContent::before {
+		content: "\2022";
+		position: absolute;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+  .gridBlock {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: -10px -10px 10px -10px;
+
+    .twoByGridBlock {
+      box-sizing: border-box;
+      flex: 1 0 50%;
+      padding: 10px;
+    }
+
+    .fourByGridBlock {
+      box-sizing: border-box;
+      flex: 1 0 25%;
+      padding: 10px;
+    }
+  }
+
+  h2 + .gridBlock {
+    padding-top: 20px;
+  }
+}
+
+@media only screen and (min-width: 1400px) {
+  .gridBlock {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: -10px -20px 10px -20px;
+
+    .twoByGridBlock {
+      box-sizing: border-box;
+      flex: 1 0 50%;
+      padding: 10px 20px;
+    }
+
+    .fourByGridBlock {
+      box-sizing: border-box;
+      flex: 1 0 25%;
+      padding: 10px 20px;
+    }
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_header.scss
+++ b/docs/_sass/_header.scss
+.fixedHeaderContainer {
+  background: $primary-bg;
+  color: $primary-overlay;
+  height: $header-height;
+  padding: $header-ptop 0 $header-pbot;
+  position: fixed;
+  width: 100%;
+  z-index: 9999;
+
+  a {
+    align-items: center;
+    border: 0;
+    color: $primary-overlay;
+    display: flex;
+    flex-flow: row nowrap;
+    height: $header-height;
+  }
+
+  header {
+    display: flex;
+    flex-flow: row nowrap;
+    position: relative;
+    text-align: left;
+
+    img {
+      height: 24px;
+      margin-right: 10px;
+    }
+
+    h2 {
+      display: block;
+      font-family: $header-font-family;
+      font-weight: 900;
+      line-height: 18px;
+      position: relative;
+    }
+  }
+}
+
+.navigationFull {
+  height: 34px;
+  margin-left: auto;
+
+  nav {
+    position: relative;
+
+    ul {
+      display: flex;
+      flex-flow: row nowrap;
+      margin: 0 -10px;
+
+      li {
+        padding: 0 10px;
+        display: block;
+
+        a {
+          border: 0;
+          color: $primary-overlay-special;
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 1.2em;
+
+          &:hover {
+            border-bottom: 2px solid $primary-overlay;
+            color: $primary-overlay;
+          }
+        }
+
+        &.navItemActive {
+          a {
+            color: $primary-overlay;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 900px
+
+
+  .fixedHeaderContainer {
+    .navigationWrapper {
+      nav {
+        padding: 0 1em;
+        position: relative;
+        top: -9px;
+
+        ul {
+          margin: 0 -0.4em;
+          li {
+            display: inline-block;
+
+            a {
+              padding: 14px 0.4em;
+              border: 0;
+              color: $primary-overlay-special;
+              display: inline-block;
+
+              &:hover {
+                color: $primary-overlay;
+              }
+            }
+
+            &.navItemActive {
+              a {
+                color: $primary-overlay;
+              }
+            }
+          }
+        }
+      }
+
+      &.navigationFull {
+        display: inline-block;
+      }
+
+      &.navigationSlider {
+        display: none;
+      }
+    }
+  }
+
+  1200px
+
+  .fixedHeaderContainer {
+    header {
+      max-width: 1100px;
+    }
+  }
+
+  1500px
+  .fixedHeaderContainer {
+    header {
+      max-width: 1400px;
+    }
+  }
+ */
\ No newline at end of file
--- a/docs/_sass/_poweredby.scss
+++ b/docs/_sass/_poweredby.scss
+.poweredByContainer {
+  background: $primary-bg;
+  color: $primary-overlay;
+  margin-bottom: 20px;
+
+  a {
+    color: $primary-overlay;
+  }
+
+  .poweredByWrapper {
+    h2 {
+      border-color: $primary-overlay-special;
+      color: $primary-overlay-special;
+    }
+  }
+
+  .poweredByMessage {
+    color: $primary-overlay-special;
+    font-size: 14px;
+    padding-top: 20px;
+  }
+}
+
+.poweredByItems {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 -10px;
+}
+
+.poweredByItem {
+  box-sizing: border-box;
+  flex: 1 0 50%;
+  line-height: 1.1em;
+  padding: 5px 10px;
+
+  &.itemLarge {
+    flex-basis: 100%;
+    padding: 10px;
+    text-align: center;
+
+    &:nth-child(4) {
+      padding-bottom: 20px;
+    }
+
+    img {
+      max-height: 30px;
+    }
+  }
+}
+
+@media only screen and (min-width: 480px) {
+  .itemLarge {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .poweredByItem {
+    flex-basis: 25%;
+    max-width: 25%;
+
+    &.itemLarge {
+      padding-bottom: 20px;
+      text-align: left;
+    }
+  }
+}
+
--- a/docs/_sass/_promo.scss
+++ b/docs/_sass/_promo.scss
+.promoSection {
+  display: flex;
+  flex-flow: column wrap;
+  font-size: 125%;
+  line-height: 1.6em;
+  margin: -10px 0;
+  position: relative;
+  z-index: 99;
+
+  .promoRow {
+    padding: 10px 0;
+
+    .pluginWrapper {
+      display: block;
+
+      &.ghWatchWrapper, &.ghStarWrapper {
+        height: 28px;
+      }
+    }
+
+    .pluginRowBlock {
+      display: flex;
+      flex-flow: row wrap;
+      margin: 0 -2px;
+
+      .pluginWrapper {
+        padding: 0 2px;
+      }
+    }
+  }
+}
+
+iframe.pluginIframe {
+  height: 500px;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.iframeContent {
+  display: none;
+}
+
+.iframePreview {
+  display: inline-block;
+  margin-top: 20px;
+}
+
+@media only screen and (min-width: 1024px) {
+  .iframeContent {
+    display: block;
+  }
+  .iframePreview {
+    display: none;
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_react_docs_nav.scss
+++ b/docs/_sass/_react_docs_nav.scss
+.docsNavContainer {
+  background: $sidenav;
+  height: 35px;
+  left: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+}
+
+.docMainWrapper {
+  .wrapper {
+    &.mainWrapper {
+      padding-left: 0;
+      padding-right: 0;
+      padding-top: 10px;
+    }
+  }
+}
+
+.docsSliderActive {
+  .docsNavContainer {
+    box-sizing: border-box;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 50px;
+  }
+
+  .mainContainer {
+    display: none;
+  }
+}
+
+.navBreadcrumb {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  font-size: 12px;
+  height: 35px;
+  overflow: hidden;
+  padding: 5px 10px;
+
+  a, span {
+    border: 0;
+    color: $sidenav-text;
+  }
+
+  i {
+    padding: 0 3px;
+  }
+}
+
+nav.toc {
+  position: relative;
+
+  section {
+    padding: 0px;
+    position: relative;
+
+    .navGroups {
+      display: none;
+      padding: 40px 10px 10px;
+    }
+  }
+
+  .toggleNav {
+    background: $sidenav;
+    color: $sidenav-text;
+    position: relative;
+    transition: background-color 0.3s, color 0.3s;
+
+    .navToggle {
+      cursor: pointer;
+      height: 24px;
+      margin-right: 10px;
+      position: relative;
+      text-align: left;
+      width: 18px;
+
+      &::before, &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        left: 8px;
+        width: 3px;
+        height: 6px;
+        border: 5px solid $sidenav-text;
+        border-width: 5px 0;
+        margin-top: -8px;
+        transform: rotate(45deg);
+        z-index: 1;
+      }
+
+      &::after {
+        transform: rotate(-45deg);
+      }
+
+      i {
+        &::before, &::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 2px;
+          background: transparent;
+          border-width: 0 5px 5px;
+          border-style: solid;
+          border-color: transparent $sidenav-text;
+          height: 0;
+          margin-top: -7px;
+          opacity: 1;
+          width: 5px;
+          z-index: 10;
+        }
+
+        &::after {
+          border-width: 5px 5px 0;
+          margin-top: 2px;
+        }
+      }
+    }
+
+    .navGroup {
+      background: $sidenav-overlay;
+      margin: 1px 0;
+
+      ul {
+        display: none;
+      }
+
+      h3 {
+        background: $sidenav-overlay;
+        color: $sidenav-text;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1.2em;
+        padding: 10px;
+        transition: color 0.2s;
+
+        i:not(:empty) {
+          width: 16px;
+          height: 16px;
+          display: inline-block;
+          box-sizing: border-box;
+          text-align: center;
+          color: rgba($sidenav-text, 0.5);
+          margin-right: 10px;
+          transition: color 0.2s;
+        }
+
+        &:hover {
+          color: $primary-bg;
+
+          i:not(:empty) {
+            color: $primary-bg;
+          }
+        }
+      }
+
+      &.navGroupActive {
+        background: $sidenav-active;
+        color: $sidenav-text;
+
+        ul {
+          display: block;
+          padding-bottom: 10px;
+          padding-top: 10px;
+        }
+
+        h3 {
+          background: $primary-bg;
+          color: $primary-overlay;
+
+          i {
+            display: none;
+          }
+        }
+      }
+    }
+
+    ul {
+      padding-left: 0;
+      padding-right: 24px;
+
+      li {
+        list-style-type: none;
+        padding-bottom: 0;
+        padding-left: 0;
+
+        a {
+          border: none;
+          color: $sidenav-text;
+          display: inline-block;
+          font-size: 14px;
+          line-height: 1.1em;
+          margin: 2px 10px 5px;
+          padding: 5px 0 2px;
+          transition: color 0.3s;
+
+          &:hover,
+          &:focus {
+            color: $primary-bg;
+          }
+
+          &.navItemActive {
+            color: $primary-bg;
+            font-weight: 900;
+          }
+        }
+      }
+    }
+  }
+
+  .toggleNavActive {
+    .navBreadcrumb {
+      background: $sidenav;
+      margin-bottom: 20px;
+      position: fixed;
+      width: 100%;
+    }
+
+    section {
+      .navGroups {
+        display: block;
+      }
+    }
+
+
+    .navToggle {
+      &::before, &::after {
+        border-width: 6px 0;
+        height: 0px;
+        margin-top: -6px;
+      }
+
+      i {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.docsNavVisible {
+  .navPusher {
+    .mainContainer {
+      padding-top: 35px;
+    }
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  .navBreadcrumb {
+    padding: 5px 0;
+  }
+
+  nav.toc {
+    section {
+      .navGroups {
+        padding: 40px 0 0;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .navToggle {
+    display: none;
+  }
+
+  .docsSliderActive {
+    .mainContainer {
+      display: block;
+    }
+  }
+
+  .docsNavVisible {
+    .navPusher {
+      .mainContainer {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .docsNavContainer {
+    background: none;
+    box-sizing: border-box;
+    height: auto;
+    margin: 40px 40px 0 0;
+    overflow-y: auto;
+    position: relative;
+    width: 300px;
+  }
+
+  nav.toc {
+    section {
+      .navGroups {
+        display: block;
+        padding-top: 0px;
+      }
+    }
+
+    .toggleNavActive {
+      .navBreadcrumb {
+        margin-bottom: 0;
+        position: relative;
+      }
+    }
+  }
+
+  .docMainWrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    margin-bottom: 40px;
+
+    .wrapper {
+      padding-left: 0;
+      padding-right: 0;
+
+      &.mainWrapper {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .navBreadcrumb {
+    display: none;
+    h2 {
+      padding: 0 10px;
+    }
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_react_header_nav.scss
+++ b/docs/_sass/_react_header_nav.scss
+.navigationFull {
+  display: none;
+}
+
+.navigationSlider {
+  position: absolute;
+  right: 0px;
+
+  .navSlideout {
+    cursor: pointer;
+    padding-top: 4px;
+    position: absolute;
+    right: 10px;
+    top: 0;
+    transition: top 0.3s;
+    z-index: 101;
+  }
+
+  .slidingNav {
+    background: $secondary-bg;
+    box-sizing: border-box;
+    height: 0px;
+    overflow-x: hidden;
+    padding: 0;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    transition: height 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    width: 0;
+
+    ul {
+      flex-flow: column nowrap;
+      list-style: none;
+      padding: 10px;
+
+      li {
+        margin: 0;
+        padding: 2px 0;
+
+        a {
+          color: $primary-bg;
+          display: inline;
+          margin: 3px 5px;
+          padding: 2px 0px;
+          transition: background-color 0.3s;
+
+          &:focus,
+          &:hover {
+            border-bottom: 2px solid $primary-bg;
+          }
+        }
+      }
+    }
+  }
+
+  .navSlideoutActive {
+    .slidingNav {
+      height: auto;
+      padding-top: $header-height + $header-pbot;
+      width: 300px;
+    }
+
+    .navSlideout {
+      top: -2px;
+      .menuExpand {
+        span:nth-child(1) {
+          background-color: $text;
+          top: 16px;
+          transform: rotate(45deg);
+        }
+        span:nth-child(2) {
+          opacity: 0;
+        }
+        span:nth-child(3) {
+          background-color: $text;
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+}
+
+.menuExpand {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 20px;
+  justify-content: space-between;
+
+  span {
+    background: $primary-overlay;
+    border-radius: 3px;
+    display: block;
+    flex: 0 0 4px;
+    height: 4px;
+    position: relative;
+    top: 0;
+    transition: background-color 0.3s, top 0.3s, opacity 0.3s, transform 0.3s;
+    width: 20px;
+  }
+}
+
+.navPusher {
+  border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg;
+	position: relative;
+	left: 0;
+	z-index: 99;
+	height: 100%;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    background: rgba(0,0,0,0.4);
+    content: '';
+    opacity: 0;
+    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  }
+
+  .sliderActive &::after {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    -webkit-transition: opacity 0.5s;
+    transition: opacity 0.5s;
+    z-index: 100;
+  }
+}
+
+
+@media only screen and (min-width: 1024px) {
+  .navigationFull {
+    display: block;
+  }
+
+  .navigationSlider {
+    display: none;
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_reset.scss
+++ b/docs/_sass/_reset.scss
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
--- a/docs/_sass/_search.scss
+++ b/docs/_sass/_search.scss
+input[type="search"] {
+    -moz-appearance:    none;
+    -webkit-appearance: none;
+}
+
+.navSearchWrapper {
+  align-self: center;
+  position: relative;
+
+  &::before {
+    border: 3px solid $primary-overlay-special;
+    border-radius: 50%;
+    content: " ";
+    display: block;
+    height: 6px;
+    left: 15px;
+    width: 6px;
+    position: absolute;
+    top: 4px;
+    z-index: 1;
+  }
+
+  &::after {
+    background: $primary-overlay-special;
+    content: " ";
+    height: 7px;
+    left: 24px;
+    position: absolute;
+    transform: rotate(-45deg);
+    top: 12px;
+    width: 3px;
+    z-index: 1;
+  }
+
+  .aa-dropdown-menu {
+    background: $secondary-bg;
+    border: 3px solid rgba($text, 0.25);
+    color: $text;
+    font-size: 14px;
+    left: auto !important;
+    line-height: 1.2em;
+    right: 0 !important;
+
+    .algolia-docsearch-suggestion--category-header {
+      background: $primary-overlay-special;
+      color: $primary-bg;
+
+      .algolia-docsearch-suggestion--highlight {
+        background-color: $primary-bg;
+        color: $primary-overlay;
+      }
+    }
+
+    .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight,
+    .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
+        color: $primary-bg;
+    }
+
+    .algolia-docsearch-suggestion__secondary,
+    .algolia-docsearch-suggestion--subcategory-column {
+      border-color: rgba($text, 0.3);
+    }
+  }
+}
+
+input#search_input {
+  padding-left: 25px;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 20px;
+  background-color: rgba($primary-overlay-special, 0.25);
+  border: none;
+  color: rgba($primary-overlay-special, 0);
+  outline: none;
+  position: relative;
+  transition: background-color .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), width .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color .2s ease;
+  width: 60px;
+
+  &:focus, &:active {
+    background-color: $secondary-bg;
+    color: $text;
+    width: 240px;
+  }
+}
+
+.navigationSlider {
+  .navSearchWrapper {
+    &::before {
+      left: 6px;
+      top: 6px;
+    }
+
+    &::after {
+      left: 15px;
+      top: 14px;
+    }
+  }
+
+  input#search_input_react {
+    box-sizing: border-box;
+    padding-left: 25px;
+    font-size: 14px;
+    line-height: 20px;
+    border-radius: 20px;
+    background-color: rgba($primary-overlay-special, 0.25);
+    border: none;
+    color: $text;
+    outline: none;
+    position: relative;
+    transition: background-color .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), width .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color .2s ease;
+    width: 100%;
+
+    &:focus, &:active {
+      background-color: $primary-bg;
+      color: $primary-overlay;
+    }
+  }
+
+  .algolia-docsearch-suggestion--subcategory-inline {
+    display: none;
+  }
+
+  & > span {
+    width: 100%;
+  }
+
+  .aa-dropdown-menu {
+    background: $secondary-bg;
+    border: 0px solid $secondary-bg;
+    color: $text;
+    font-size: 12px;
+    line-height: 2em;
+    max-height: 140px;
+    min-width: auto;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    padding: 0;
+    border-radius: 0;
+    position: relative !important;
+    width: 100%;
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_slideshow.scss
+++ b/docs/_sass/_slideshow.scss
+.slideshow {
+  position: relative;
+  
+  .slide {
+    display: none;
+    
+    img {
+      display: block;
+      margin: 0 auto;
+    }
+    
+    &.slideActive {
+      display: block;
+    }
+    
+    a {
+      border: none;
+      display: block;
+    }
+  }
+
+  .pagination {
+    display: block;
+    margin: -10px;
+    padding: 1em 0;
+    text-align: center;
+    width: 100%;
+    
+    .pager {
+      background: transparent;
+      border: 2px solid rgba(255, 255, 255, 0.5);
+      border-radius: 50%;
+      cursor: pointer;
+      display: inline-block;
+      height: 12px;
+      margin: 10px;
+      transition: background-color 0.3s, border-color 0.3s;
+      width: 12px;
+      
+      &.pagerActive {
+        background: rgba(255, 255, 255, 0.5);
+        border-width: 4px;
+        height: 8px;
+        width: 8px;
+      }
+    }
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_syntax-highlighting.scss
+++ b/docs/_sass/_syntax-highlighting.scss
+
+
+.rougeHighlight { background-color: $code-bg; color: #93a1a1 }
+.rougeHighlight .c { color: #586e75 } /* Comment */
+.rougeHighlight .err { color: #93a1a1 } /* Error */
+.rougeHighlight .g { color: #93a1a1 } /* Generic */
+.rougeHighlight .k { color: #859900 } /* Keyword */
+.rougeHighlight .l { color: #93a1a1 } /* Literal */
+.rougeHighlight .n { color: #93a1a1 } /* Name */
+.rougeHighlight .o { color: #859900 } /* Operator */
+.rougeHighlight .x { color: #cb4b16 } /* Other */
+.rougeHighlight .p { color: #93a1a1 } /* Punctuation */
+.rougeHighlight .cm { color: #586e75 } /* Comment.Multiline */
+.rougeHighlight .cp { color: #859900 } /* Comment.Preproc */
+.rougeHighlight .c1 { color: #72c02c; } /* Comment.Single */
+.rougeHighlight .cs { color: #859900 } /* Comment.Special */
+.rougeHighlight .gd { color: #2aa198 } /* Generic.Deleted */
+.rougeHighlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
+.rougeHighlight .gr { color: #dc322f } /* Generic.Error */
+.rougeHighlight .gh { color: #cb4b16 } /* Generic.Heading */
+.rougeHighlight .gi { color: #859900 } /* Generic.Inserted */
+.rougeHighlight .go { color: #93a1a1 } /* Generic.Output */
+.rougeHighlight .gp { color: #93a1a1 } /* Generic.Prompt */
+.rougeHighlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
+.rougeHighlight .gu { color: #cb4b16 } /* Generic.Subheading */
+.rougeHighlight .gt { color: #93a1a1 } /* Generic.Traceback */
+.rougeHighlight .kc { color: #cb4b16 } /* Keyword.Constant */
+.rougeHighlight .kd { color: #268bd2 } /* Keyword.Declaration */
+.rougeHighlight .kn { color: #859900 } /* Keyword.Namespace */
+.rougeHighlight .kp { color: #859900 } /* Keyword.Pseudo */
+.rougeHighlight .kr { color: #268bd2 } /* Keyword.Reserved */
+.rougeHighlight .kt { color: #dc322f } /* Keyword.Type */
+.rougeHighlight .ld { color: #93a1a1 } /* Literal.Date */
+.rougeHighlight .m { color: #2aa198 } /* Literal.Number */
+.rougeHighlight .s { color: #2aa198 } /* Literal.String */
+.rougeHighlight .na { color: #93a1a1 } /* Name.Attribute */
+.rougeHighlight .nb { color: #B58900 } /* Name.Builtin */
+.rougeHighlight .nc { color: #268bd2 } /* Name.Class */
+.rougeHighlight .no { color: #cb4b16 } /* Name.Constant */
+.rougeHighlight .nd { color: #268bd2 } /* Name.Decorator */
+.rougeHighlight .ni { color: #cb4b16 } /* Name.Entity */
+.rougeHighlight .ne { color: #cb4b16 } /* Name.Exception */
+.rougeHighlight .nf { color: #268bd2 } /* Name.Function */
+.rougeHighlight .nl { color: #93a1a1 } /* Name.Label */
+.rougeHighlight .nn { color: #93a1a1 } /* Name.Namespace */
+.rougeHighlight .nx { color: #93a1a1 } /* Name.Other */
+.rougeHighlight .py { color: #93a1a1 } /* Name.Property */
+.rougeHighlight .nt { color: #268bd2 } /* Name.Tag */
+.rougeHighlight .nv { color: #268bd2 } /* Name.Variable */
+.rougeHighlight .ow { color: #859900 } /* Operator.Word */
+.rougeHighlight .w { color: #93a1a1 } /* Text.Whitespace */
+.rougeHighlight .mf { color: #2aa198 } /* Literal.Number.Float */
+.rougeHighlight .mh { color: #2aa198 } /* Literal.Number.Hex */
+.rougeHighlight .mi { color: #2aa198 } /* Literal.Number.Integer */
+.rougeHighlight .mo { color: #2aa198 } /* Literal.Number.Oct */
+.rougeHighlight .sb { color: #586e75 } /* Literal.String.Backtick */
+.rougeHighlight .sc { color: #2aa198 } /* Literal.String.Char */
+.rougeHighlight .sd { color: #93a1a1 } /* Literal.String.Doc */
+.rougeHighlight .s2 { color: #2aa198 } /* Literal.String.Double */
+.rougeHighlight .se { color: #cb4b16 } /* Literal.String.Escape */
+.rougeHighlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */
+.rougeHighlight .si { color: #2aa198 } /* Literal.String.Interpol */
+.rougeHighlight .sx { color: #2aa198 } /* Literal.String.Other */
+.rougeHighlight .sr { color: #dc322f } /* Literal.String.Regex */
+.rougeHighlight .s1 { color: #2aa198 } /* Literal.String.Single */
+.rougeHighlight .ss { color: #2aa198 } /* Literal.String.Symbol */
+.rougeHighlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
+.rougeHighlight .vc { color: #268bd2 } /* Name.Variable.Class */
+.rougeHighlight .vg { color: #268bd2 } /* Name.Variable.Global */
+.rougeHighlight .vi { color: #268bd2 } /* Name.Variable.Instance */
+.rougeHighlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+
+.highlighter-rouge {
+  color: darken(#72c02c, 8%);
+  font: 800 12px/1.5em Hack, monospace;
+  max-width: 100%;
+
+  .rougeHighlight {
+    border-radius: 3px;
+    margin: 20px 0;
+    padding: 0px;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    table {
+      background: none;
+      border: none;
+
+      tbody {
+        tr {
+          background: none;
+          display: flex;
+          flex-flow: row nowrap;
+
+          td {
+            display: block;
+            flex: 1 1;
+
+            &.gutter {
+              border-right: 1px solid lighten($code-bg, 10%);
+              color: lighten($code-bg, 15%);
+              margin-right: 10px;
+              max-width: 40px;
+              padding-right: 10px;
+
+              pre {
+                max-width: 20px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+p > .highlighter-rouge,
+li > .highlighter-rouge,
+a > .highlighter-rouge {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: inherit;
+}
+
+a:hover {
+  .highlighter-rouge {
+    color: white;
+  }
+}
\ No newline at end of file
--- a/docs/_sass/_tables.scss
+++ b/docs/_sass/_tables.scss
+table {
+  background: $lightergrey;
+  border: 1px solid $lightgrey;
+  border-collapse: collapse;
+  display:table;
+  margin: 20px 0;
+
+  thead {
+    border-bottom: 1px solid $lightgrey;
+    display: table-header-group;
+  }
+  tbody {
+    display: table-row-group;
+  }
+  tr {
+    display: table-row;
+    &:nth-of-type(odd) {
+      background: $greyish;
+    }
+
+    th, td {
+      border-right: 1px dotted $lightgrey;
+      display: table-cell;
+      font-size: 14px;
+      line-height: 1.3em;
+      padding: 10px;
+      text-align: left;
+
+      &:last-of-type {
+        border-right: 0;
+      }
+
+      code {
+        color: $green;
+        display: inline-block;
+        font-size: 12px;
+      }
+    }
+
+    th {
+      color: #000000;
+      font-weight: bold;
+      font-family: $header-font-family;
+      text-transform: uppercase;
+    }
+  }
+}
\ No newline at end of file
--- a/docs/blog/all.html
+++ b/docs/blog/all.html
+---
+id: all
+layout: blog
+category: blog
+---
+
+<div class="posts">
+  <div class="post">
+    <h1>All Posts</h1>
+    {% for post in site.posts %}
+      {% assign author = site.data.authors[post.author] %}
+      <p>
+        <strong>
+          <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+        </strong>
+          on {{ post.date | date: "%B %e, %Y" }} by {{ author.display_name }}
+      </p>
+    {% endfor %}
+  </div>
+</div>
--- a/docs/blog/index.html
+++ b/docs/blog/index.html
+---
+id: blog 
+title: Blog
+layout: blog 
+category: blog
+---
+
+<div class="posts">
+  {% for page in site.posts %}
+    {% include post.html truncate=true %}
+  {% endfor %}
+</div>
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+@font-face {
+	font-family: 'Lato';
+	src: url('{{ site.baseurl }}/static/fonts/LatoLatin-Italic.woff2') format('woff2'),
+		url('{{ site.baseurl }}/static/fonts/LatoLatin-Italic.woff') format('woff');
+	font-weight: normal;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src: url('{{ site.baseurl }}/static/fonts/LatoLatin-Black.woff2') format('woff2'),
+		url('{{ site.baseurl }}/static/fonts/LatoLatin-Black.woff') format('woff');
+	font-weight: 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src: url('{{ site.baseurl }}/static/fonts/LatoLatin-BlackItalic.woff2') format('woff2'),
+		url('{{ site.baseurl }}/static/fonts/LatoLatin-BlackItalic.woff') format('woff');
+	font-weight: 900;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src: url('{{ site.baseurl }}/static/fonts/LatoLatin-Light.woff2') format('woff2'),
+		url('{{ site.baseurl }}/static/fonts/LatoLatin-Light.woff') format('woff');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src: url('{{ site.baseurl }}/static/fonts/LatoLatin-Regular.woff2') format('woff2'),
+		url('{{ site.baseurl }}/static/fonts/LatoLatin-Regular.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+// Our variables
+$base-font-family:  'Lato', Calibri, Arial, sans-serif;
+$header-font-family:  'Lato', 'Helvetica Neue', Arial, sans-serif;
+$base-font-size:    18px;
+$small-font-size:   $base-font-size * 0.875;
+$base-line-height:  1.4em;
+
+$spacing-unit:      12px;
+
+// Two configured colors (see _config.yml)
+$primary-bg:        				{{ site.color.primary }};
+$secondary-bg:      				{{ site.color.secondary }};
+
+// $primary-bg overlays
+{% if site.color.primary-overlay == 'light' %}
+$primary-overlay:       		darken($primary-bg, 70%);
+$primary-overlay-special:		darken($primary-bg, 40%);
+{% else %}
+$primary-overlay:      		 	#fff;
+$primary-overlay-special:		lighten($primary-bg, 30%);
+{% endif %}
+
+// $secondary-bg overlays
+{% if site.color.secondary-overlay == 'light' %}
+$text:              #393939;
+$sidenav: 				  darken($secondary-bg, 20%);
+$sidenav-text: 			$text;
+$sidenav-overlay: 	darken($sidenav, 10%);
+$sidenav-active: 		lighten($sidenav, 10%);
+{% else %}
+$text:              #fff;
+$sidenav: 				  lighten($secondary-bg, 20%);
+$sidenav-text: 			$text;
+$sidenav-overlay: 	lighten($sidenav, 10%);
+$sidenav-active: 		darken($sidenav, 10%);
+{% endif %}
+
+$code-bg: 					#002b36;
+
+$header-height: 34px;
+$header-ptop: 10px;
+$header-pbot: 8px;
+
+// Width of the content area
+$content-width:     900px;
+
+// Table setting variables
+$lightergrey: #F8F8F8;
+$greyish: #E8E8E8;
+$lightgrey: #B0B0B0;
+$green: #2db04b;
+
+// Using media queries with like this:
+// @include media-query($on-palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
+
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+@import
+        "reset",
+        "base",
+				"header",
+        "search",
+        "syntax-highlighting",
+				"promo",
+				"buttons",
+				"gridBlock",
+				"poweredby",
+				"footer",
+				"react_header_nav",
+				"react_docs_nav",
+				"tables",
+				"blog"
+;
+
+// Anchor links
+// http://ben.balter.com/2014/03/13/pages-anchor-links/
+.header-link {
+  position: absolute;
+  margin-left: 0.2em;
+  opacity: 0;
+
+  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+  -moz-transition: opacity 0.2s ease-in-out 0.1s;
+  -ms-transition: opacity 0.2s ease-in-out 0.1s;
+}
+
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+  opacity: 1;
+}
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
+---
+id: docs
+title: Docs
+layout: redirect
+destination: getting-started.html
+---
--- a/docs/feed.xml
+++ b/docs/feed.xml
+---
+layout: null
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.title | xml_escape }}</title>
+    <description>{{ site.description | xml_escape }}</description>
+    <link>{{ site.url }}{{ site.baseurl }}/</link>
+    <atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
+    <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+    <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
+    <generator>Jekyll v{{ jekyll.version }}</generator>
+    {% for post in site.posts limit:10 %}
+      <item>
+        <title>{{ post.title | xml_escape }}</title>
+        <description>{{ post.content | xml_escape }}</description>
+        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
+        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
+        {% for tag in post.tags %}
+        <category>{{ tag | xml_escape }}</category>
+        {% endfor %}
+        {% for cat in post.categories %}
+        <category>{{ cat | xml_escape }}</category>
+        {% endfor %}
+      </item>
+    {% endfor %}
+  </channel>
+</rss>
--- a/docs/index.md
+++ b/docs/index.md
+---
+layout: home
+title: Example - You can over-ride the default title here
+id: home
+---
+
+## Gridblocks 
+
+You can use the gridblocks sub-template to arrange information into nice responsive grids. There are two ways to add a grid block, the first is by adding a yml file to the `_data` folder and then using it as a data source:
+
+{% include content/gridblocks.html data_source=site.data.features align="center" %}
+
+The second is simply to use the raw HTML of the grid blocks:
+
+<div class="gridBlock">
+  <div class="blockElement twoByGridBlock alignCenter">
+    <div class="blockContent">
+    <h3>Feature 1</h3>
+    <p>This is a description of the feature.</p>
+    </div>
+  </div>
+
+  <div class="blockElement twoByGridBlock alignCenter">
+    <div class="blockContent">
+    <h3>Feature 2</h3>
+    <p>This is another description of a feature.</p>
+    </div>
+  </div>
+</div>
+
+Use the first option as a preference, because it will make your site easier for non-technical folks to edit and update.
+
+Gridblocks have additional options for layout compared to the above:
+
+Left aligned:
+
+{% include content/gridblocks.html data_source=site.data.features align="left" %}
+
+Right aligned: 
+
+{% include content/gridblocks.html data_source=site.data.features align="right" %}
+
+Images on the side: 
+
+{% include content/gridblocks.html data_source=site.data.features imagealign="side" %}
+
+Four column layout:
+
+{% include content/gridblocks.html data_source=site.data.features layout="fourColumn" align="center" %}
\ No newline at end of file
--- a/docs/static/favicon.png
+++ b/docs/static/favicon.png
--- a/docs/static/fonts/LatoLatin-Black.woff
+++ b/docs/static/fonts/LatoLatin-Black.woff
--- a/docs/static/fonts/LatoLatin-Black.woff2
+++ b/docs/static/fonts/LatoLatin-Black.woff2
--- a/docs/static/fonts/LatoLatin-BlackItalic.woff
+++ b/docs/static/fonts/LatoLatin-BlackItalic.woff
--- a/docs/static/fonts/LatoLatin-BlackItalic.woff2
+++ b/docs/static/fonts/LatoLatin-BlackItalic.woff2
--- a/docs/static/fonts/LatoLatin-Italic.woff
+++ b/docs/static/fonts/LatoLatin-Italic.woff
--- a/docs/static/fonts/LatoLatin-Italic.woff2
+++ b/docs/static/fonts/LatoLatin-Italic.woff2
--- a/docs/static/fonts/LatoLatin-Light.woff
+++ b/docs/static/fonts/LatoLatin-Light.woff
--- a/docs/static/fonts/LatoLatin-Light.woff2
+++ b/docs/static/fonts/LatoLatin-Light.woff2
--- a/docs/static/fonts/LatoLatin-Regular.woff
+++ b/docs/static/fonts/LatoLatin-Regular.woff
--- a/docs/static/fonts/LatoLatin-Regular.woff2
+++ b/docs/static/fonts/LatoLatin-Regular.woff2
--- a/docs/static/images/android.svg
+++ b/docs/static/images/android.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 328.5 385.1" enable-background="new 0 0 328.5 385.1" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M31.1,276.6C13.9,276.6,0,262.6,0,245.5l0-95.2c0-17.1,13.9-31.1,31.1-31.1c8.3,0,16.1,3.2,22,9.1
+		c5.9,5.9,9.1,13.7,9.1,22l0,95.2c0,8.3-3.2,16.1-9.1,22C47.2,273.3,39.4,276.6,31.1,276.6"/>
+	<path fill="#FFFFFF" d="M31.1,127.5c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.8c12.6,0,22.7-10.2,22.7-22.8
+		l0-95.2C53.8,137.7,43.6,127.5,31.1,127.5"/>
+	<path fill="#FFFFFF" d="M275,132.2l-8.4,0l-204.8,0l-8.4,0l0-8.4c0-34.3,18.7-66.2,49.3-85.1L90.8,17.1c-1.5-2.5-1.8-5.8-1-8.7
+		c0.9-2.9,2.9-5.5,5.6-6.9C97.1,0.5,99,0,100.9,0c4.2,0,8.1,2.3,10.1,6l12.5,22.7c12.9-4.7,26.5-7.1,40.6-7.1
+		c14.3,0,28,2.4,40.9,7.2L217.4,6c2-3.7,5.9-6,10.1-6c1.9,0,3.8,0.5,5.5,1.4c2.8,1.5,4.8,4,5.6,7c0.9,3,0.5,6.1-1,8.8l-11.9,21.7
+		c30.6,18.9,49.3,50.8,49.3,85.1L275,132.2z"/>
+	<path fill="#FFFFFF" d="M214.4,42l15.9-29c0.8-1.5,0.3-3.5-1.2-4.3c-1.6-0.8-3.5-0.3-4.3,1.3l-16,29.3c-13.5-6-28.6-9.4-44.5-9.3
+		c-15.9,0-31,3.3-44.4,9.3l-16-29.2c-0.8-1.5-2.8-2.1-4.3-1.3c-1.5,0.8-2.1,2.8-1.3,4.3l15.9,29c-31.2,16.1-52.3,46.7-52.3,81.9
+		l204.8,0C266.6,88.7,245.6,58.1,214.4,42 M117.6,86.8c-4.7,0-8.6-3.8-8.6-8.6c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6
+		C126.2,82.9,122.4,86.8,117.6,86.8 M210.9,86.8c-4.7,0-8.6-3.8-8.6-8.6c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6
+		C219.5,82.9,215.6,86.8,210.9,86.8"/>
+	<path fill="#FFFFFF" d="M126.2,385.1c-17.1,0-31.1-13.9-31.1-31.1l0-42l-8.2,0c-8.7,0-16.9-3.4-23.1-9.5
+		c-6.2-6.2-9.6-14.3-9.5-23.1l0-147.5l0-8.4l8.4,0l203.3,0l8.4,0l0,8.4l0,147.5c0,18-14.6,32.6-32.6,32.6l-8.2,0l0,42
+		c0,17.1-13.9,31.1-31.1,31.1c-8.3,0-16.1-3.2-22-9.1c-5.9-5.9-9.1-13.7-9.1-22l0-42l-14,0v42C157.3,371.1,143.3,385.1,126.2,385.1"
+		/>
+	<path fill="#FFFFFF" d="M62.7,279.3c0,13.4,10.8,24.3,24.3,24.3l16.5,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7
+		c12.6,0,22.7-10.2,22.7-22.8l0-50.4l30.7,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7l0-50.4l16.6,0
+		c13.4,0,24.3-10.9,24.3-24.3l0-147.6l-203.3,0L62.7,279.3z"/>
+	<path fill="#FFFFFF" d="M297.4,276.5c-17.1,0-31.1-13.9-31.1-31.1l0-95.2c0-17.2,13.9-31.1,31.1-31.1c17.2,0,31.1,13.9,31.1,31.1
+		l0,95.2C328.5,262.6,314.6,276.5,297.4,276.5"/>
+	<path fill="#FFFFFF" d="M297.4,127.5c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7
+		l0-95.2C320.1,137.7,310,127.5,297.4,127.5"/>
+	<path fill="#B185E7" d="M31.1,127.5c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7
+		l0-95.2C53.8,137.7,43.6,127.5,31.1,127.5 M214.4,42l15.9-29c0.8-1.5,0.3-3.4-1.2-4.3c-1.5-0.8-3.5-0.3-4.3,1.3l-16,29.3
+		c-13.5-6-28.6-9.4-44.6-9.4c-15.9,0-31,3.3-44.4,9.3l-16-29.2c-0.8-1.5-2.8-2.1-4.3-1.3c-1.5,0.8-2.1,2.8-1.3,4.3l15.9,29
+		c-31.2,16.1-52.3,46.7-52.3,81.9l204.8,0C266.6,88.7,245.6,58.1,214.4,42 M117.6,86.8c-4.7,0-8.6-3.8-8.6-8.6
+		c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6C126.2,82.9,122.4,86.8,117.6,86.8 M210.9,86.8c-4.7,0-8.6-3.8-8.6-8.6
+		c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6C219.5,82.9,215.6,86.8,210.9,86.8 M62.6,131.8l0,147.6c0,13.4,10.8,24.3,24.3,24.3
+		l16.5,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.8l0-50.4l30.7,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7
+		c12.6,0,22.7-10.2,22.7-22.7l0-50.4l16.6,0c13.4,0,24.3-10.8,24.3-24.3l0-147.6L62.6,131.8z M320.2,150.2
+		c0-12.6-10.2-22.7-22.7-22.7c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7
+		L320.2,150.2z"/>
+</g>
+</svg>
--- a/docs/static/images/apple.svg
+++ b/docs/static/images/apple.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="svg2811" xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 747.6 909.3"
+	 enable-background="new 0 0 747.6 909.3" xml:space="preserve">
+<g id="g25472" transform="translate(19.48863,19.49672)">
+	<rect x="0" y="0" fill="none" width="708.7" height="870.3"/>
+	<g id="g186" transform="matrix(54.85033,0,0,-54.85033,-1411.313,6454.729)">
+		<path id="path188" fill="#B185E7" d="M36.5,109.2c0,2,1.6,3,1.7,3c-0.9,1.4-2.4,1.6-2.9,1.6c-1.2,0.1-2.4-0.7-3-0.7
+			c-0.6,0-1.6,0.7-2.6,0.7c-1.3,0-2.6-0.8-3.3-2c-1.4-2.4-0.4-6,1-8c0.7-1,1.5-2,2.5-2c1,0,1.4,0.7,2.6,0.7c1.2,0,1.6-0.7,2.6-0.6
+			c1.1,0,1.8,1,2.4,2c0.8,1.1,1.1,2.2,1.1,2.3C38.6,106,36.5,106.8,36.5,109.2"/>
+	</g>
+	<path id="path190" fill="#B185E7" d="M482.3,139c30.4-36.8,50.9-88,45.3-139c-43.8,1.8-96.8,29.2-128.2,66
+		c-28.1,32.5-52.8,84.6-46.1,134.6C402,204.4,451.9,175.7,482.3,139"/>
+</g>
+</svg>
--- a/docs/static/images/facebook.png
+++ b/docs/static/images/facebook.png
--- a/docs/static/images/instagram.png
+++ b/docs/static/images/instagram.png
--- a/docs/static/logo.svg
+++ b/docs/static/logo.svg
--- a/docs/static/og_image.png
+++ b/docs/static/og_image.png
--- a/docs/static/oss_logo.png
+++ b/docs/static/oss_logo.png
--- a/docs/support.md
+++ b/docs/support.md