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.
main
Joel Marcey 8 years ago committed by Islam AbdelRahman
parent 2a9c97108e
commit ea9e0757ff
  1. 9
      docs/.gitignore
  2. 2
      docs/Gemfile
  3. 136
      docs/Gemfile.lock
  4. 48
      docs/README.md
  5. 59
      docs/_config.yml
  6. 6
      docs/_config_local_dev.yml
  7. 4
      docs/_data/authors.yml
  8. 19
      docs/_data/features.yml
  9. 15
      docs/_data/nav.yml
  10. 7
      docs/_data/nav_docs.yml
  11. 6
      docs/_data/powered_by.yml
  12. 14
      docs/_data/powered_by_highlight.yml
  13. 28
      docs/_data/promo.yml
  14. 8
      docs/_docs/getting-started.md
  15. 8
      docs/_docs/hello-world.md
  16. 8
      docs/_docs/making-changes.md
  17. 29
      docs/_includes/blog_pagination.html
  18. 5
      docs/_includes/content/gridblocks.html
  19. 37
      docs/_includes/content/items/gridblock.html
  20. 25
      docs/_includes/doc.html
  21. 0
      docs/_includes/doc_paging.html
  22. 33
      docs/_includes/footer.html
  23. 25
      docs/_includes/head.html
  24. 19
      docs/_includes/header.html
  25. 0
      docs/_includes/hero.html
  26. 22
      docs/_includes/home_header.html
  27. 3
      docs/_includes/katex_import.html
  28. 210
      docs/_includes/katex_render.html
  29. 28
      docs/_includes/nav.html
  30. 65
      docs/_includes/nav/collection_nav.html
  31. 19
      docs/_includes/nav/collection_nav_group.html
  32. 1
      docs/_includes/nav/collection_nav_group_item.html
  33. 30
      docs/_includes/nav/header_nav.html
  34. 15
      docs/_includes/nav_search.html
  35. 3
      docs/_includes/plugins/all_share.html
  36. 2
      docs/_includes/plugins/ascii_cinema.html
  37. 6
      docs/_includes/plugins/button.html
  38. 4
      docs/_includes/plugins/github_star.html
  39. 4
      docs/_includes/plugins/github_watch.html
  40. 5
      docs/_includes/plugins/google_share.html
  41. 6
      docs/_includes/plugins/iframe.html
  42. 18
      docs/_includes/plugins/like_button.html
  43. 5
      docs/_includes/plugins/plugin_row.html
  44. 34
      docs/_includes/plugins/post_social_plugins.html
  45. 88
      docs/_includes/plugins/slideshow.html
  46. 5
      docs/_includes/plugins/twitter_follow.html
  47. 4
      docs/_includes/plugins/twitter_share.html
  48. 35
      docs/_includes/post.html
  49. 28
      docs/_includes/powered_by.html
  50. 24
      docs/_includes/social_plugins.html
  51. 1
      docs/_includes/ui/button.html
  52. 12
      docs/_layouts/basic.html
  53. 11
      docs/_layouts/blog.html
  54. 14
      docs/_layouts/blog_default.html
  55. 12
      docs/_layouts/default.html
  56. 14
      docs/_layouts/doc_default.html
  57. 10
      docs/_layouts/doc_page.html
  58. 5
      docs/_layouts/docs.html
  59. 17
      docs/_layouts/home.html
  60. 3
      docs/_layouts/page.html
  61. 10
      docs/_layouts/plain.html
  62. 8
      docs/_layouts/post.html
  63. 6
      docs/_layouts/redirect.html
  64. 10
      docs/_layouts/support.html
  65. 12
      docs/_posts/2016-04-07-blog-post-example.md
  66. 492
      docs/_sass/_base.scss
  67. 45
      docs/_sass/_blog.scss
  68. 47
      docs/_sass/_buttons.scss
  69. 82
      docs/_sass/_footer.scss
  70. 115
      docs/_sass/_gridBlock.scss
  71. 138
      docs/_sass/_header.scss
  72. 69
      docs/_sass/_poweredby.scss
  73. 55
      docs/_sass/_promo.scss
  74. 332
      docs/_sass/_react_docs_nav.scss
  75. 141
      docs/_sass/_react_header_nav.scss
  76. 43
      docs/_sass/_reset.scss
  77. 142
      docs/_sass/_search.scss
  78. 48
      docs/_sass/_slideshow.scss
  79. 129
      docs/_sass/_syntax-highlighting.scss
  80. 47
      docs/_sass/_tables.scss
  81. 20
      docs/blog/all.html
  82. 12
      docs/blog/index.html
  83. 149
      docs/css/main.scss
  84. 6
      docs/docs/index.html
  85. 30
      docs/feed.xml
  86. 49
      docs/index.md
  87. BIN
      docs/static/favicon.png
  88. BIN
      docs/static/fonts/LatoLatin-Black.woff
  89. BIN
      docs/static/fonts/LatoLatin-Black.woff2
  90. BIN
      docs/static/fonts/LatoLatin-BlackItalic.woff
  91. BIN
      docs/static/fonts/LatoLatin-BlackItalic.woff2
  92. BIN
      docs/static/fonts/LatoLatin-Italic.woff
  93. BIN
      docs/static/fonts/LatoLatin-Italic.woff2
  94. BIN
      docs/static/fonts/LatoLatin-Light.woff
  95. BIN
      docs/static/fonts/LatoLatin-Light.woff2
  96. BIN
      docs/static/fonts/LatoLatin-Regular.woff
  97. BIN
      docs/static/fonts/LatoLatin-Regular.woff2
  98. 42
      docs/static/images/android.svg
  99. 17
      docs/static/images/apple.svg
  100. BIN
      docs/static/images/facebook.png
  101. Some files were not shown because too many files have changed in this diff Show More

9
docs/.gitignore vendored

@ -0,0 +1,9 @@
.DS_STORE
_site/
*.swo
*.swp
_site
.sass-cache
*.psd
*~

@ -0,0 +1,2 @@
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

@ -0,0 +1,136 @@
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

@ -0,0 +1,48 @@
# 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.

@ -0,0 +1,59 @@
# 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]

@ -0,0 +1,6 @@
# 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"

@ -0,0 +1,4 @@
exampleauthor:
full_name: Example Author
fbid: 1234

@ -0,0 +1,19 @@
- 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

@ -0,0 +1,15 @@
- 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

@ -0,0 +1,7 @@
- title: Quick Start
items:
- id: getting-started
- id: hello-world
- title: Another Doc Group
items:
- id: making-changes

@ -0,0 +1,6 @@
- title: Who Uses This Project?
items:
- name: Example Company
url: https://www.example.com/
- name: Another Example
url: https://www.example.com

@ -0,0 +1,14 @@
- 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

@ -0,0 +1,28 @@
# 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

@ -0,0 +1,8 @@
---
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.

@ -0,0 +1,8 @@
---
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.

@ -0,0 +1,8 @@
---
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.

@ -0,0 +1,29 @@
<!-- 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 %}

@ -0,0 +1,5 @@
<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>

@ -0,0 +1,37 @@
{% 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>

@ -0,0 +1,25 @@
<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>

@ -0,0 +1,33 @@
<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>

@ -0,0 +1,25 @@
<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>

@ -0,0 +1,19 @@
<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>

@ -0,0 +1,22 @@
<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>

@ -0,0 +1,3 @@
<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>

@ -0,0 +1,210 @@
<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>

@ -0,0 +1,28 @@
<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>

@ -0,0 +1,65 @@
<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>

@ -0,0 +1,19 @@
<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>

@ -0,0 +1 @@
<li class="navListItem"><a class="navItem" href="{{ groupitem.url }}">{{ groupitem.title }}</a></li>

@ -0,0 +1,30 @@
<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>

@ -0,0 +1,15 @@
<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>

@ -0,0 +1,3 @@
<div class="pluginBlock allShareBlock">
{% include plugins/like_button.html %}{% include plugins/twitter_share.html %}{% include plugins/google_share.html %}
</div>

@ -0,0 +1,2 @@
<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>

@ -0,0 +1,6 @@
<div class="pluginWrapper buttonWrapper">
<a
class="button"
href="{{ include.href }}"
>{{ include.text }}</a>
</div>

@ -0,0 +1,4 @@
<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>

@ -0,0 +1,4 @@
<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>

@ -0,0 +1,5 @@
<div class="pluginBlock">
<div class="g-plusone" data-size="medium"></div>
</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>

@ -0,0 +1,6 @@
<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>

@ -0,0 +1,18 @@
<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>

@ -0,0 +1,5 @@
<div class="pluginRowBlock">
{% for child in include.children %}
{% include plugins/{{child.type}}.html href=child.href text=child.text %}
{% endfor %}
</div>

@ -0,0 +1,34 @@
<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>

@ -0,0 +1,88 @@
<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>

@ -0,0 +1,5 @@
<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>

@ -0,0 +1,4 @@
<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>

@ -0,0 +1,35 @@
<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>

@ -0,0 +1,28 @@
{% 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 %}

@ -0,0 +1,24 @@
<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>

@ -0,0 +1 @@
<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>

@ -0,0 +1,12 @@
---
layout: doc_default
---
<div class="mainContainer blogContainer postContainer">
<div id="main_wrap" class="wrapper mainWrapper">
<div class="post basicPost">
{{ content }}
</div>
</div>
</div>

@ -0,0 +1,11 @@
---
category: blog
layout: blog_default
---
<div class="mainContainer blogContainer postContainer">
<div id="main_wrap" class="wrapper mainWrapper">
{{ content }}
</div>
</div>

@ -0,0 +1,14 @@
<!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>

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include nav.html alwayson=true %}
<div class="navPusher">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>

@ -0,0 +1,14 @@
<!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>

@ -0,0 +1,10 @@
---
layout: doc_default
---
<div class="mainContainer documentContainer postContainer">
<div id="main_wrap" class="wrapper mainWrapper">
{{ content }}
</div>
</div>

@ -0,0 +1,5 @@
---
layout: doc_page
---
{% include doc.html %}

@ -0,0 +1,17 @@
<!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>

@ -0,0 +1,3 @@
---
layout: blog
---

@ -0,0 +1,10 @@
---
layout: default
---
<div class="mainContainer blogContainer postContainer">
<div id="main_wrap" class="wrapper mainWrapper">
{{ content }}
</div>
</div>

@ -0,0 +1,8 @@
---
collection: blog
layout: blog
---
<div class="lonePost">
{% include post.html %}
</div>

@ -0,0 +1,6 @@
<html>
<head>
<meta http-equiv="refresh" content="0; {{ page.destination }}">
</head>
<body></body>
</html>

@ -0,0 +1,10 @@
---
layout: default
---
<div class="mainContainer blogContainer postContainer">
<div id="main_wrap" class="wrapper mainWrapper">
{{ content }}
</div>
</div>

@ -0,0 +1,12 @@
---
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.

@ -0,0 +1,492 @@
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;
}
}

@ -0,0 +1,45 @@
.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;
}
}
}

@ -0,0 +1,47 @@
.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;
}

@ -0,0 +1,82 @@
.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;
}
}
}

@ -0,0 +1,115 @@
.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;
}
}
}

@ -0,0 +1,138 @@
.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;
}
}
*/

@ -0,0 +1,69 @@
.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;
}
}
}

@ -0,0 +1,55 @@
.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;
}
}

@ -0,0 +1,332 @@
.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;
}
}
}

@ -0,0 +1,141 @@
.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;
}
}

@ -0,0 +1,43 @@
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;
}

@ -0,0 +1,142 @@
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%;
}
}

@ -0,0 +1,48 @@
.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;
}
}
}
}

@ -0,0 +1,129 @@
.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;
}
}

@ -0,0 +1,47 @@
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;
}
}
}

@ -0,0 +1,20 @@
---
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>

@ -0,0 +1,12 @@
---
id: blog
title: Blog
layout: blog
category: blog
---
<div class="posts">
{% for page in site.posts %}
{% include post.html truncate=true %}
{% endfor %}
</div>

@ -0,0 +1,149 @@
---
# 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;
}

@ -0,0 +1,6 @@
---
id: docs
title: Docs
layout: redirect
destination: getting-started.html
---

@ -0,0 +1,30 @@
---
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>

@ -0,0 +1,49 @@
---
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" %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,42 @@
<?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>

After

Width:  |  Height:  |  Size: 3.8 KiB

@ -0,0 +1,17 @@
<?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>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save