docs: add note about maintenance status (#153)

* Update getting-started.md

* Update README.md

* Apply suggestions from code review

Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>

Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>

.github/ISSUE_TEMPLATE.md

@@ -1,4 +1,42 @@
 <!--
-TODO: Add a list of questions relative to your own project that will help people
-open issues
+  Hello and thank you for participating to jekyll-algolia!
+
+  This form is to report issues or new features. For more generic questions
+  about "How to do this or that?", you should rather check
+  https://discourse.algolia.com/ where we'll be happy to help you.
+
+  Please make sure you are using the latest version. Also don't hesitate to give
+  us as much details about your issue or feature as you can, so we can have the
+  needed context to give you the best possible answer.
+
+  You can delete any HTML comment and non-relevant question.
 -->
+
+## I want to report a bug:
+
+### What is the current behavior?
+
+### What is your expected behavior?
+
+### Git repository to reproduce the issue:
+<!-- 
+  This will greatly help us reproduce the issue and fix it quickly.
+  If you don't have one or can't share it, screenshots or terminal output will
+  be very helpful.
+--> 
+
+### Ruby version used:
+<!-- `ruby -v` should give you this information -->
+
+### Jekyll version used:
+<!-- `bundle exec jekyll -v` should give you this one -->
+
+
+
+## I want to suggest a feature:
+
+### What is your use case for such a feature?
+<!-- The more you can tell us about WHY you want to do this, the easier is will be for us to tell you HOW to do it. -->
+
+### What is your proposed API? Is this a new option? A new behavior?
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +0,0 @@
-<!--
-TODO: Add a list of requirements for people to submit PRs: tests, doc, branches..
--->

.gitignore

@@ -1,10 +1,14 @@
 Gemfile.lock
+.envrc
 pkg/
 coverage/
 docs-dev/
 gemfiles/*.lock
-spec/fixtures/*/_site
+spec/site/_site
+spec/integration/site/_site
 
+spec/site/.jekyll-cache/
+.jekyll-cache/
 
 .DS_Store
 .*.sw[a-z]

.travis.yml

@@ -3,9 +3,9 @@ cache: bundler
 before_script: bundle update
 script: bundle exec rake test
 rvm:
+ - 2.6.2
  - 2.4.2
  - 2.3.5
- - 2.3.0
 notifications:
   email:
     on_success: never

CONTRIBUTING.md

@@ -1,10 +1,9 @@
 Hi collaborator!
 
-If you have a fix or a new feature, please start by checking in the
-[issues](https://github.com/algolia/jekyll-algolia/issues) if it is
-already referenced. If not, feel free to open one.
+If you have a fix or a new feature, please start by checking in the [issues][1]
+if it is already referenced. If not, feel free to open one.
 
-We use [pull requests](https://github.com/algolia/jekyll-algolia/pulls)
+We use [pull requests][2]
 for collaboration. The workflow is as follow:
 
 - Create a local branch, starting from `develop`
@@ -20,23 +19,18 @@ Start by running `bundle install` to get all the dependencies up to date.
 
 ## Testing
 
-Run `rake test` to launch all tests. You can run `rake test_details` to get an
-output with more details about the tests.
+Run `rake test` to launch the test suite. Run `./scripts/test_all_ruby_versions`
+to run the test on all the supported ruby versions (requires `rvm`).
 
 ## TDD
 
-// TODO
-
-## Testing different ruby versions
-
-You can test the gem across all the supported Ruby versions by running
-`./scripts/test_all_ruby_versions`. Note that you will need to have RVM
-installed for this to work.
+Run `rake watch` to start a watcher on the code and test files. Whenever you
+update the code, the relevant tests will be run. Incredibly useful for TDD.
 
 ## Testing local changes on an existing Jekyll website
 
 If you want to test the plugin on an existing Jekyll website while developping,
-I suggest updating the website `Gemfile` to point to the correct local directory
+we suggest updating the website `Gemfile` to point to the correct local directory
 
 ```ruby
 group :jekyll_plugins do
@@ -44,10 +38,29 @@ group :jekyll_plugins do
 end
 ```
 
+## Running integration tests
+
+Integration tests will do a full jekyll run, and push data to an Algolia index,
+checking that records and settings are correctly saved. It is the slowest
+possible kind of tests, but also the one closest to a real implementation.
+
+Running those tests requires a real Algolia plan. You need to define
+`ALGOLIA_APPLICATION_ID`, `ALGOLIA_API_KEY` and `ALGOLIA_INDEX_NAME` (we suggest
+using `direnv` for that), and then run `./scripts/test_integration`.
+
+## Linting
+
+Run `rake lint` to check the style of all ruby files. Run `rake
+lint:auto_correct` to try to automatically correct the potential violations.
+It's always a good practice to double check the modification after an
+auto-correct.
+
 # Git Hooks
 
-If you plan on submitting a PR, I suggest you install the git hooks located in
-`./scripts/git_hook`.
+If you plan on submitting a PR, we suggest you install the git hooks located in
+`./scripts/git_hook`. Those hooks will run the linter on each commit, and the
+tests before each push. This greatly help reduce the chances of breaking the
+build on Travis.
 
 The easiest way is to create a symlink from your `.git/hooks` folder:
 
@@ -67,28 +80,36 @@ the git tags, create the gem and push it to Rubygems.
 
 ## Requirements
 
-To run this project, you will need:
+The documentation website uses Metalsmith (and not Jekyll), so you'll need:
 
-- Node.js >= v9.2.0, use nvm - [install instructions](https://github.com/creationix/nvm#install-script)
-- Yarn >= v1.3.2 - [install instructions](https://yarnpkg.com/en/docs/install#alternatives-tab)
+- Node.js >= v9.2.0, use nvm - [install instructions][3]
+- Yarn >= v1.3.2 - [install instructions][4]
 
 ## Development
 
-```sh
-yarn
-yarn start
-```
+All the documentation source files live in the `./docs-src` folder.
 
-Go to <http://localhost:3000>.
+To serve a local version of the documentation (including livereload), run `rake
+docs:serve`. The documentation will be available on
+[localhost:3000](http://localhost:3000/).
 
-## Update docs
+This will create a `./docs-dev` folder and serve files from there. This folder
+is ignored by git.
 
-```sh
-yarn docs:update
-git push
-```
+## Deploying docs
 
+To update the documentation website, you should run `rake docs:deploy` from the
+`develop` branch. This will merge `develop` into master, build the documentation
+into `docs` and push it. The content of the `./docs` folder will then be server
+by GitHub pages.
 
 # Project owner
 
-[@pixelastic](https://github.com/pixelastic)
+[@pixelastic][5]
+
+
+[1]: https://github.com/algolia/jekyll-algolia/issues
+[2]: https://github.com/algolia/jekyll-algolia/pulls
+[3]: https://github.com/creationix/nvm#install-script
+[4]: https://yarnpkg.com/en/docs/install#alternatives-tab
+[5]: https://github.com/pixelastic

Guardfile

@@ -1,9 +1,14 @@
-# Launch tests whenever a file in ./lib or ./spec changes
+# frozen_string_literal: true
+
+# Live-reload unit tests
 guard :rspec, cmd: 'bundle exec rspec --color --format progress' do
   watch(%r{^spec/.+_spec\.rb$})
   watch(%r{^lib/(.+)\.rb$}) do |match|
     "spec/#{match[1]}_spec.rb"
   end
+  watch(%r{^lib/jekyll/algolia/overwrites/jekyll-algolia-site\.rb$}) do
+    'spec/jekyll-algolia_spec.rb'
+  end
   watch('spec/spec_helper.rb') { 'spec' }
 end
 

Guardfile_integration

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+# Live-reload integration tests
+guard :rspec, cmd: 'bundle exec rspec --color --format progress' do
+  watch(%r{^spec/integration/.+_spec\.rb$})
+  watch('spec/integration/spec_helper.rb') { 'spec/integration' }
+end
+
+notification :off

MAINTAINERS

@@ -0,0 +1,4 @@
+# Maintainers list to contact for any security issue
+# You can find all contributors in the GitHub interface or the git log
+
+Tim Carry (@pixelastic)

README.md

@@ -1,12 +1,15 @@
 # Jekyll Algolia Plugin
 
-[![Gem Version][1]](http://badge.fury.io/rb/jekyll-algolia) [![Build
-Status][2]](https://travis-ci.org/algolia/jekyll-algolia) [![Coverage
-Status][3]](https://coveralls.io/github/algolia/jekyll-algolia?branch=master)
-[![Code Climate][4]](https://codeclimate.com/github/algolia/jekyll-algolia)
-![Jekyll >= 3.6.0][5] ![Ruby >= 2.3.0][6]
+[![gem version][1]][16]
+![ruby][2]
+![jekyll][3]
+[![build master][4]][17]
+[![build develop][6]][17]
+[![coverage master][5]][18]
 
-Jekyll plugin to automatically index your content on Algolia.
+Add fast and relevant search to your Jekyll site.
+
+> While this plugin was created by Algolia, it is not an officially supported API client. It is possible that future major versions of Jekyll break compatibility, or require changes.
 
 ## Usage
 
@@ -18,8 +21,8 @@ This will push the content of your Jekyll website to your Algolia index.
 
 ## Documentation
 
-Official documentation can be found on
-[https://community.algolia.com/jekyll-algolia/](https://community.algolia.com/jekyll-algolia/)
+Full documentation can be found on
+[https://community.algolia.com/jekyll-algolia/][20]
 
 ## Installation
 
@@ -32,7 +35,7 @@ section.
 # Gemfile
 
 group :jekyll_plugins do
-  gem 'jekyll-algolia'
+  gem 'jekyll-algolia', '~> 1.0'
 end
 ```
 
@@ -40,60 +43,89 @@ Once this is done, download all dependencies with `bundle install`.
 
 ## Basic configuration
 
-You need to provide certain Algolia credentials for this plugin to *index* your
+You need to provide certain Algolia credentials for this plugin to _index_ your
 site.
 
-*If you don't yet have an Algolia account, you can open a free [Community plan
-here][9]. Once signed in, you can get your credentials from
-[your dashboard][10].*
+_If you don't yet have an Algolia account, we suggest that you open a free
+[Community plan here][8]. You can find more information about the Algolia plans
+[in our FAQ][10]._
 
-Once you have your credentials, you should define your `application_id` and
-`index_name` inside your `_config.yml` file like this:
+Once signed in, you should get your application ID from [your dashboard][9] and
+define it inside your `_config.yml` file like this:
 
 ```yaml
 # _config.yml
 
 algolia:
   application_id: 'your_application_id'
-  index_name:     'your_index_name'
 ```
 
 ## Run it
 
-Once your credentials are setup, you can run the indexing by running the
+Once your application ID is setup, you can run the indexing by running the
 following command:
 
 ```shell
-ALGOLIA_API_KEY='{your_admin_api_key}' bundle exec jekyll algolia
+ALGOLIA_API_KEY='your_admin_api_key' bundle exec jekyll algolia
 ```
 
 Note that `ALGOLIA_API_KEY` should be set to your admin API key.
 
+## More about the Community plan
+
+The Algolia [Community plan][11] lets you host up to 10k records and perform up
+to 100k add/edit/delete operations per month (search operations are free). The
+plan is entirely free, with no time limit.
+
+What we ask in exchange is that you display a "Search by Algolia" logo next to
+your search results. Our [InstantSearch libraries][12] have a simple boolean
+option to toggle that on an off. If you want more flexibility, you can find
+all versions of our logo [here][13].
+
+If you need more information about the other Algolia plans, you can [check our
+FAQ][10].
+
 # Thanks
 
-Thanks to [Anatoliy Yastreb][21] for a [great tutorial][22] on creating Jekyll
+Thanks to [Anatoliy Yastreb][14] for a [great tutorial][15] on creating Jekyll
 plugins.
 
-
 [1]: https://badge.fury.io/rb/jekyll-algolia.svg
-[2]: https://travis-ci.org/algolia/jekyll-algolia.svg?branch=master
-[3]: https://coveralls.io/repos/algolia/jekyll-algolia/badge.svg?branch=master&service=github
-[4]: https://codeclimate.com/github/algolia/jekyll-algolia/badges/gpa.svg
-[5]: https://img.shields.io/badge/jekyll-%3E%3D%203.6.0-green.svg
-[6]: https://img.shields.io/badge/ruby-%3E%3D%202.3.0-green.svg
-[7]: https://pages.github.com/versions.json
-[8]: http://bundler.io/
-[9]: https://www.algolia.com/users/sign_up/hacker
-[10]: https://www.algolia.com/licensing
-[11]: http://www.methods.co.nz/asciidoc/
-[12]: https://github.com/textile
-[13]: https://www.algolia.com/doc/api-reference/api-methods/set-settings/?language=ruby#set-settings
-[14]: https://www.algolia.com/doc/javascript
-[15]: https://github.com/algolia/hyde
-[16]: https://travis-ci.org/
-[17]: https://travis-ci.org/
-[18]: http://docs.travis-ci.com/user/environment-variables/
-[19]: /docs/travis-settings.png
-[20]: https://travis-ci.org
-[21]: https://github.com/ayastreb/
-[22]: https://ayastreb.me/writing-a-jekyll-plugin/
+
+[2]: https://img.shields.io/badge/ruby-%3E%3D%202.3.0-green.svg
+
+[3]: https://img.shields.io/badge/jekyll-%3E%3D%203.6.0-green.svg
+
+[4]: https://img.shields.io/badge/dynamic/json.svg?label=build%3Amaster&query=value&uri=https%3A%2F%2Fimg.shields.io%2Ftravis%2Falgolia%2Fjekyll-algolia.json%3Fbranch%3Dmaster
+
+[5]: https://coveralls.io/repos/github/algolia/jekyll-algolia/badge.svg?branch=master
+
+[6]: https://img.shields.io/badge/dynamic/json.svg?label=build%3Adevelop&query=value&uri=https%3A%2F%2Fimg.shields.io%2Ftravis%2Falgolia%2Fjekyll-algolia.json%3Fbranch%3Ddevelop
+
+[7]: https://coveralls.io/repos/github/algolia/jekyll-algolia/badge.svg?branch=develop
+
+[8]: #more-about-the-community-plan
+
+[9]: https://www.algolia.com/api-keys
+
+[10]: https://community.algolia.com/jekyll-algolia/faq.html#how-many-records-will-the-plugin-need
+
+[11]: https://www.algolia.com/users/sign_up/hacker
+
+[12]: https://community.algolia.com/instantsearch.js/
+
+[13]: https://www.algolia.com/press/?section=brand-guidelines
+
+[14]: https://github.com/ayastreb/
+
+[15]: https://ayastreb.me/writing-a-jekyll-plugin/
+
+[16]: https://rubygems.org/gems/jekyll-algolia
+
+[17]: https://travis-ci.org/algolia/jekyll-algolia
+
+[18]: https://coveralls.io/github/algolia/jekyll-algolia?branch=master
+
+[19]: https://coveralls.io/github/algolia/jekyll-algolia?branch=develop
+
+[20]: https://community.algolia.com/jekyll-algolia/getting-started.html

Rakefile

@@ -9,10 +9,14 @@ rescue Bundler::BundlerError => e
   warn 'Run `bundle install` to install missing gems'
   exit e.status_code
 end
+require 'algoliasearch'
 require 'rake'
+require 'rspec/core'
+require 'rspec/core/rake_task'
+require 'rubocop/rake_task'
 
 # LINT
-require 'rubocop/rake_task'
+desc 'Check files for linting issues'
 RuboCop::RakeTask.new(:lint) do |task|
   task.patterns = [
     'lib/**/*.rb',
@@ -25,9 +29,7 @@ RuboCop::RakeTask.new(:lint) do |task|
 end
 
 # TEST
-require 'rspec/core'
-require 'rspec/core/rake_task'
-desc 'Run tests (with simple progress)'
+desc 'Run unit tests'
 RSpec::Core::RakeTask.new(:test) do |task|
   task.rspec_opts = '--color --format progress'
   task.pattern = [
@@ -35,35 +37,76 @@ RSpec::Core::RakeTask.new(:test) do |task|
     'spec/jekyll/**/*.rb'
   ]
 end
-desc 'Run tests (with full details)'
-RSpec::Core::RakeTask.new(:test_details) do |task|
-  task.rspec_opts = '--color --format documentation'
-  task.pattern = [
-    'spec/*.rb',
-    'spec/jekyll/**/*.rb'
-  ]
-end
-desc 'Run tests in all Ruby versions (with full details)'
-task :test_all_ruby_versions do
-  puts 'Please, run ./scripts/test_all_ruby_versions manually'
-end
+namespace 'test' do
+  desc 'Run tests in all Ruby versions'
+  task :all_ruby_versions do
+    puts 'Please, run ./scripts/test_all_ruby_versions manually'
+  end
 
-# COVERAGE
-desc 'Generate locally browsable coverage files'
-task :coverage do
-  ENV['COVERAGE'] = 'true'
-  Rake::Task['test'].execute
-end
+  # Generate locally browsable coverage files
+  task :coverage do
+    ENV['COVERAGE'] = 'true'
+    Rake::Task['test'].execute
+  end
 
-# WATCH
-desc 'Watch for changes in files and reload tests'
-task :watch do
-  # We specifically watch for ./lib and ./spec and not the whole dir because:
-  # 1. It's the only directories we are interested in
-  # 2. Listening to the whole parent dir might throw Guard errors if we have
-  #    symlink
-  sh 'bundle exec guard --clear --watchdir lib spec'
+  desc 'Live-reload unit tests'
+  task :watch do
+    # We specifically watch for ./lib and ./spec and not the whole dir because:
+    # 1. It's the only directories we are interested in
+    # 2. Listening to the whole parent dir might throw Guard errors if we have
+    #    symlink
+    sh 'bundle exec guard --clear --watchdir lib spec'
+  end
+
+  # Integration tests need to run `bundle exec jekyll build/algolia`. Using
+  # bundle from inside a Rakefile does not seem to work, so the scripts have to
+  # be run manually. Each script run the needed commands to prepare the test
+  # site, then actually run the _run and _watch_run tasks below.
+  desc 'Run integration tests'
+  task :integration do
+    puts 'Please, run ./scripts/test_integration manually'
+  end
+  namespace 'integration' do
+    desc 'Live-reload integration tests'
+    task :watch do
+      puts 'Please, run ./scripts/test_integration_watch manually'
+    end
+    # Delete the test indices
+    task :_delete_indices do
+      Algolia.init(
+        application_id: ENV['ALGOLIA_APPLICATION_ID'],
+        api_key: ENV['ALGOLIA_API_KEY']
+      )
+      Algolia::Index.new(ENV['ALGOLIA_INDEX_NAME']).delete_index!
+      Algolia::Index
+        .new("#{ENV['ALGOLIA_INDEX_NAME']}_object_ids").delete_index!
+    end
+    # Run only the integration tests
+    desc ''
+    RSpec::Core::RakeTask.new(:_run) do |task|
+      task.rspec_opts = '--color --format progress'
+      task.pattern = [
+        # Check that the default build has the expected results
+        'spec/integration/main_spec.rb',
+        # Check various config and its impact on the settings
+        'spec/integration/settings_spec.rb',
+        # Check that object ids are stored in dedicated index
+        'spec/integration/object_ids_spec.rb'
+      ]
+    end
+    # Live-reloading integration tests
+    # It will reload the tests whenever they are changed. It will not
+    # live-rebuild everything, you still have to run rake
+    # ./scripts/test_integration_prepare for that
+    task :_watch_run do
+      sh 'bundle exec guard '\
+         '--clear '\
+         '--watchdir lib spec/integration '\
+         '--guardfile Guardfile_integration'
+    end
+  end
 end
+task watch: 'test:watch'
 
 # GEM RELEASE
 desc 'Release a new version of the gem'
@@ -75,14 +118,14 @@ task release: %i[lint test] do
   Rake::Task['release:update_master_from_develop'].invoke
 end
 namespace 'release' do
-  desc 'Getting up to date from master'
+  # Getting up to date from master
   task :update_develop_from_master do
     sh 'git checkout master --quiet'
     sh 'git pull --rebase origin master --quiet'
     sh 'git checkout develop --quiet'
     sh 'git rebase master --quiet'
   end
-  desc 'Update current version'
+  # Update current version
   task :update_version do
     version_file_path = 'lib/jekyll/algolia/version.rb'
     require_relative version_file_path
@@ -100,23 +143,33 @@ namespace 'release' do
 
     # Commit it in git
     sh "git commit -a -m 'release #{new_version}'"
+
     # Create the git tag
-    sh "git tag -am 'tag v#{new_version}' #{new_version}"
+    last_tag = `git describe --tags --abbrev=0`.strip
+    changelog = `git log #{last_tag}..HEAD --format=%B`.gsub("\n\n", "\n")
+    tag_name = new_version
+    sh 'git tag '\
+      "-a #{tag_name} "\
+      "-m \"#{changelog}\""\
+      ' 2>/dev/null'
+
+    sh "git tag #{tag_name} #{tag_name} -f -a"
   end
-  desc 'Build the gem'
+  # Build the gem
   task :build do
     sh 'bundle install'
     sh 'gem build jekyll-algolia.gemspec'
   end
-  desc 'Push the gem to rubygems'
+  # Push the gem to rubygems
   task :push do
+    # This will throw a warning because we're redefining a constant. That's ok.
     load 'lib/jekyll/algolia/version.rb'
     current_version = Jekyll::Algolia::VERSION.to_s
     sh "gem push jekyll-algolia-#{current_version}.gem"
     sh "rm jekyll-algolia-#{current_version}.gem"
     sh "git push origin #{current_version}"
   end
-  desc 'Update master'
+  # Update master
   task :update_master_from_develop do
     sh 'git checkout master --quiet'
     sh 'git rebase develop --quiet'
@@ -143,7 +196,7 @@ namespace 'docs' do
 
     Rake::Task['docs:build'].invoke
     sh 'git add ./docs'
-    sh "git commit -m 'Updating documentation website'"
+    sh "git commit -m 'Updating documentation website' || true"
 
     sh 'git checkout master --quiet'
     sh 'git rebase develop --quiet'
@@ -151,6 +204,13 @@ namespace 'docs' do
 
     sh 'git checkout develop --quiet'
   end
+  desc 'Serve the documentation locally'
+  task :serve do
+    Dir.chdir('./docs-src') do
+      sh 'yarn'
+      sh 'yarn run serve'
+    end
+  end
 end
 
 task default: :test

docs-src/config.js

@@ -27,6 +27,7 @@ const sidebarMenu = [
     items: [
       { title: 'Getting Started', url: 'getting-started.html' },
       { title: 'How it works', url: 'how-it-works.html' },
+      { title: 'FAQ', url: 'faq.html' },
     ],
   },
   {
@@ -35,7 +36,6 @@ const sidebarMenu = [
       { title: 'Options', url: 'options.html' },
       { title: 'Commandline', url: 'commandline.html' },
       { title: 'Hooks', url: 'hooks.html' },
-      { title: 'Indexing modes', url: 'indexing-modes.html' },
     ],
   },
   {
@@ -43,15 +43,13 @@ const sidebarMenu = [
     items: [
       { title: 'Deploying on Netlify', url: 'netlify.html' },
       { title: 'Deploying on Github Pages', url: 'github-pages.html' },
+      { title: 'Themes', url: 'themes.html' },
+      { title: 'Migration guide', url: 'migration-guide.html' },
     ],
   },
   {
     title: 'Tutorials',
-    items: [
-      { title: 'Blog', url: 'blog.html' },
-      // { title: 'Dropdown menu', url: 'autocomplete.html' },
-      // { title: 'Collection search', url: 'collections.html' },
-    ],
+    items: [{ title: 'Blog', url: 'blog.html' }],
   },
 ];
 
@@ -59,5 +57,5 @@ module.exports = {
   ...environmentConfig[process.env.NODE_ENV],
   publicPath: process.env.PUBLIC_PATH || '/',
   header,
-  sidebarMenu
+  sidebarMenu,
 };

docs-src/lib/middlewares.js

@@ -54,7 +54,7 @@ module.exports = {
     onlyChanged,
     layouts({
       engine: 'pug',
-      directory: 'src/layouts'
+      directory: 'src/layouts',
     }),
   ],
   build: [
@@ -78,7 +78,7 @@ module.exports = {
     }),
     layouts({
       engine: 'pug',
-      directory: 'src/layouts'
+      directory: 'src/layouts',
     }),
   ],
 };

docs-src/lib/plugins/onlyChanged.js

@@ -11,8 +11,8 @@ const chokidar = require('chokidar');
 let lastRunTime = false;
 let layoutChange = true;
 let cssChange = true;
-const layoutFiles = path.join(__dirname, '../layouts/**/*');
-const cssFiles = path.join(__dirname, '../src/stylesheets/**/*');
+const layoutFiles = path.join(__dirname, '../../src/layouts/**/*');
+const cssFiles = path.join(__dirname, '../../src/stylesheets/**/*');
 const CSSEntryPoints = ['stylesheets/index.css', 'stylesheets/header.css'];
 
 const hasChanged = file =>

docs-src/package.json

@@ -35,7 +35,7 @@
     "hasha": "3.0.0",
     "http-server": "0.10.0",
     "jstransformer-markdown-it": "2.0.0",
-    "lodash": "4.17.4",
+    "lodash": "4.17.5",
     "markdown-it": "8.4.0",
     "markdown-it-anchor": "4.0.0",
     "metalsmith": "2.3.0",
@@ -45,7 +45,7 @@
     "metalsmith-sass": "1.4.0",
     "ms-webpack": "2.0.0",
     "node-sass": "4.7.2",
-    "nodemon": "1.12.5",
+    "nodemon": "1.18.7",
     "postcss": "6.0.14",
     "postcss-loader": "2.0.9",
     "postcss-scss": "1.0.2",
@@ -66,8 +66,8 @@
     "webpack-hot-middleware": "2.21.0"
   },
   "engines": {
-    "node": "^9.2.0",
-    "yarn": "^1.3.2"
+    "node": ">=9.2.0",
+    "yarn": ">=1.3.2"
   },
   "renovate": {
     "extends": [

docs-src/src/about.md

@@ -1,8 +0,0 @@
----
-title: ⚡ About
-layout: single-column.pug
----
-
-# About
-
-Hello

docs-src/src/assets/images/aerial-background-bottom.svg

@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1161" height="228" viewBox="0 0 1161 228">
+    <defs>
+        <filter id="a" width="167.9%" height="317%" x="-33.9%" y="-108%" filterUnits="objectBoundingBox">
+            <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="127"/>
+            <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+        <linearGradient id="b" x1="-101.327%" x2="83.637%" y1="100%" y2="100%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+        <linearGradient id="c" x1="-213.872%" x2="25.054%" y1="100%" y2="50%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+        <linearGradient id="d" x1="0%" x2="83.637%" y1="100%" y2="100%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+        <linearGradient id="e" x1="0%" x2="83.637%" y1="100%" y2="100%">
+            <stop offset="0%" stop-color="#00AEFF"/>
+            <stop offset="100%" stop-color="#3369E6"/>
+        </linearGradient>
+        <linearGradient id="f" x1="-76.487%" x2="83.637%" y1="100%" y2="100%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd" filter="url(#a)" opacity=".8" transform="rotate(-6 796.658 625.324)">
+        <path fill="url(#b)" d="M0 64h310c8.837 0 16 7.162 16 16 0 8.837-7.17 16-16 16H0V64zm0 256h131.006c8.833 0 15.994 7.162 15.994 16 0 8.837-7.165 16-15.994 16H0v-32z" opacity=".2"/>
+        <path fill="url(#c)" d="M0 32h209.996C218.835 32 226 39.162 226 48c0 8.837-7.169 16-16.004 16H0V32z" opacity=".25"/>
+        <path fill="url(#d)" d="M0 0h84.003C92.838 0 100 7.162 100 16c0 8.837-7.172 16-15.997 16H0V0z" opacity=".1"/>
+        <path fill="url(#e)" d="M0 224h1049.798c8.835 0 15.998 7.162 15.998 16 0 8.837-7.16 16-15.998 16H0v-32z"/>
+        <path fill="url(#e)" d="M0 192h1109.793c8.834 0 15.996 7.162 15.996 16 0 8.837-7.171 16-15.996 16H0v-32z" opacity=".9"/>
+        <path fill="url(#e)" d="M0 192h918.993c8.84 0 16.007 7.162 16.007 16 0 8.837-7.154 16-16.007 16H0v-32zm0-32h1076.995c8.84 0 16.005 7.162 16.005 16 0 8.837-7.16 16-16.005 16H0v-32z" opacity=".9"/>
+        <path fill="url(#d)" d="M0 128h1049.798c8.835 0 15.998 7.162 15.998 16 0 8.837-7.16 16-15.998 16H0v-32z" opacity=".4"/>
+        <path fill="url(#d)" d="M0 96h933c8.837 0 16 7.162 16 16 0 8.837-7.16 16-16 16H0V96z" opacity=".2"/>
+        <path fill="url(#e)" d="M0 160h703.995c8.84 0 16.005 7.162 16.005 16 0 8.837-7.155 16-16.005 16H0v-32z" opacity=".2" style="mix-blend-mode:overlay"/>
+        <path fill="url(#e)" d="M0 160h464.996c8.839 0 16.004 7.162 16.004 16 0 8.837-7.173 16-16.004 16H0v-32z" opacity=".75"/>
+        <path fill="url(#f)" d="M0 96h537.01c8.83 0 15.99 7.162 15.99 16 0 8.837-7.169 16-15.99 16H0V96zm0 32h803.007c8.833 0 15.993 7.162 15.993 16 0 8.837-7.158 16-15.993 16H0v-32zm0 128h918.993c8.84 0 16.007 7.162 16.007 16 0 8.837-7.154 16-16.007 16H0v-32z" opacity=".4"/>
+        <path fill="url(#d)" d="M0 128h277.998c8.837 0 16.002 7.162 16.002 16 0 8.837-7.158 16-16.002 16H0v-32z" opacity=".2"/>
+    </g>
+</svg>

docs-src/src/assets/images/aerial-background-top.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="196" viewBox="0 0 1440 196">
+    <defs>
+        <filter id="a" width="169.9%" height="338.6%" x="-34.9%" y="-118.6%" filterUnits="objectBoundingBox">
+            <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="214.5"/>
+            <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+        <linearGradient id="b" x1="0%" x2="83.637%" y1="100%" y2="100%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+        <linearGradient id="c" x1="115.053%" x2="0%" y1="50%" y2="100%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd" filter="url(#a)" opacity=".3" transform="rotate(174 894.83 70.479)">
+        <path fill="url(#b)" d="M0 54.182h523.917c14.934 0 27.04 12.105 27.04 27.045 0 14.937-12.117 27.046-27.04 27.046H0V54.182zm0 432.727h221.407c14.929 0 27.03 12.105 27.03 27.046 0 14.936-12.108 27.045-27.03 27.045H0v-54.09z" opacity=".4"/>
+        <path fill="url(#b)" d="M0 .09h354.904c14.938 0 27.048 12.106 27.048 27.046 0 14.937-12.115 27.046-27.048 27.046H0V.09z" opacity=".2"/>
+        <path fill="url(#b)" d="M0 270.545h1553.146c14.942 0 27.054 12.106 27.054 27.046 0 14.937-12.092 27.045-27.054 27.045H0v-54.09zm0-54.09h1820.179c14.939 0 27.05 12.105 27.05 27.045 0 14.937-12.1 27.045-27.05 27.045H0v-54.09z" opacity=".4"/>
+        <path fill="url(#c)" d="M0 162.364h1774.214c14.933 0 27.038 12.105 27.038 27.045 0 14.937-12.1 27.046-27.038 27.046H0v-54.091z" opacity=".4"/>
+        <path fill="url(#b)" d="M0 108.273h1576.82c14.934 0 27.04 12.105 27.04 27.045 0 14.937-12.1 27.046-27.04 27.046H0v-54.091z" opacity=".2"/>
+        <path fill="url(#b)" d="M0 108.273h907.574c14.926 0 27.025 12.105 27.025 27.045 0 14.937-12.115 27.046-27.025 27.046H0v-54.091zm0 54.09h1357.125c14.928 0 27.029 12.106 27.029 27.046 0 14.937-12.098 27.046-27.029 27.046H0v-54.091zm0 216.364h1553.146c14.942 0 27.054 12.106 27.054 27.046 0 14.937-12.092 27.045-27.054 27.045H0v-54.09z" opacity=".4"/>
+    </g>
+</svg>

docs-src/src/assets/images/algolia-fast-bg.svg

@@ -1 +1,75 @@
-<svg width="1721" height="405" viewBox="0 0 1721 405" xmlns="http://www.w3.org/2000/svg"><title>Slice</title><defs><linearGradient x1="1.736%" y1="96.745%" y2="2.447%" id="a"><stop stop-color="#00AEFF" offset="0%"/><stop stop-color="#3369E6" offset="34.64%"/><stop stop-color="#8136CE" offset="100%"/></linearGradient><linearGradient x1="14.764%" y1="50%" x2="94.5%" y2="50%" id="b"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M441.01 37H2169v421.5H441.01V37z" fill="url(#a)" transform="matrix(-1 0 0 1 2166.01 -49)"/><path d="M1138 313h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1138V313zM477 118h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H477V118z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M732 265h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H732V265zM0 175h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H0V175zM184 403h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H184V403zM1235 146h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1235V146zM216 45h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H216V45z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M569 372h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H569V372z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M980 388h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H980V388z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M1291 448h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1291V448zM788 45h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H788V45z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M1138 0h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1138V0z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/></g></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 1721 405" style="enable-background:new 0 0 1721 405;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{opacity:0.2;fill:url(#SVGID_2_);}
+	.st2{opacity:0.2;fill:url(#SVGID_3_);}
+	.st3{opacity:0.2;fill:url(#SVGID_4_);}
+	.st4{opacity:0.3;fill:url(#SVGID_5_);}
+	.st5{opacity:0.2;fill:url(#SVGID_6_);}
+	.st6{opacity:0.2;fill:url(#SVGID_7_);}
+	.st7{opacity:0.2;fill:url(#SVGID_8_);}
+	.st8{opacity:0.1;fill:url(#SVGID_9_);}
+	.st9{opacity:0.2;fill:url(#SVGID_10_);}
+	.st10{opacity:0.2;fill:url(#SVGID_11_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="563.341" y1="622.4076" x2="564.3237" y2="623.3506" gradientTransform="matrix(-1727.99 0 0 -421.5 975146.375 262739.625)">
+	<stop  offset="0" style="stop-color:#00AEFF"/>
+	<stop  offset="0.3464" style="stop-color:#3369E6"/>
+	<stop  offset="1" style="stop-color:#8136CE"/>
+</linearGradient>
+<path class="st0" d="M1725-12H-3v421.5h1728V-12z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1046.1437" y1="-4308.4199" x2="1682.1683" y2="-4308.4199" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st1" d="M1534.9,409.5H-3v-84.3h1537.9c23.3,0,42.1,18.9,42.1,42.1v0C1577.1,390.6,1558.2,409.5,1534.9,409.5z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="740.8774" y1="-14861.9697" x2="1191.838" y2="-14861.9697" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st2" d="M1325.5,325.2H-3v-84.3h1328.5c23.3,0,42.1,18.9,42.1,42.1v0C1367.7,306.3,1348.8,325.2,1325.5,325.2z"/>
+<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="878.0895" y1="-25415.5195" x2="1412.2334" y2="-25415.5195" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<rect x="-3" y="156.6" class="st3" width="1728" height="84.3"/>
+<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="719.771" y1="-35969.0703" x2="1157.9362" y2="-35969.0703" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st4" d="M1196.9,156.6H-3V72.3h1199.8c23.3,0,42.2,18.9,42.2,42.1v0C1239,137.7,1220.1,156.6,1196.9,156.6z"/>
+<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="921.9622" y1="-46522.6211" x2="1482.7032" y2="-46522.6211" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st5" d="M1440.4,72.3H-3V-12h1443.4c23.3,0,42.1,18.9,42.1,42.1v0C1482.5,53.4,1463.7,72.3,1440.4,72.3z"/>
+<title>Slice</title>
+<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="122.4733" y1="367.35" x2="800.0635" y2="367.35">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st6" d="M804.7,409.5H-3v-84.3h807.6c23.3,0,42.1,18.9,42.1,42.1v0C846.8,390.6,827.9,409.5,804.7,409.5z"/>
+<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="76.9093" y1="283.05" x2="508.4219" y2="283.05">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st7" d="M496,325.2H-3v-84.3h499c23.3,0,42.1,18.9,42.1,42.1v0C538.2,306.3,519.3,325.2,496,325.2z"/>
+<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="151.9346" y1="198.75" x2="988.6369" y2="198.75">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st8" d="M1004.2,240.9H-3v-84.3h1007.2c23.3,0,42.2,18.9,42.2,42.1v0C1046.4,222,1027.5,240.9,1004.2,240.9z"/>
+<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="114.8298" y1="114.45" x2="751.14" y2="114.45">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st9" d="M752.9,156.6H-3V72.3h755.9c23.3,0,42.1,18.9,42.1,42.1v0C795,137.7,776.2,156.6,752.9,156.6z"/>
+<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="48.9211" y1="30.15" x2="329.2777" y2="30.15">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st10" d="M306.5,72.3H-3V-12h309.5c23.3,0,42.1,18.9,42.1,42.1v0C348.6,53.4,329.7,72.3,306.5,72.3z"/>
+</svg>

docs-src/src/assets/images/background-hero.svg

@@ -1,22 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1407" height="448" viewBox="0 0 1407 448">
-  <defs>
-    <linearGradient id="a" x1="0%" x2="135.886%" y1="100%" y2="100%">
-      <stop stop-color="#00D8FF" stop-opacity="0" offset="0%"/>
-      <stop stop-color="#00D8FF" offset="26.611%"/>
-      <stop stop-color="#00A7FF" offset="100%"/>
-    </linearGradient>
-  </defs>
-  <g fill="url(#a)" fill-rule="evenodd">
-    <path d="M0 320L163.45914 320C172.298538 320 179.464286 327.161501 179.464286 336L179.464286 336C179.464286 344.836556 172.304428 352 163.45914 352L0 352 0 320zM0 352L272.939619 352C281.775005 352 288.9375 359.161501 288.9375 368L288.9375 368C288.9375 376.836556 281.777195 384 272.939619 384L0 384 0 352zM0 416L91.6742726 416C100.513203 416 107.678571 423.161501 107.678571 432L107.678571 432C107.678571 440.836556 100.509175 448 91.6742726 448L0 448 0 416zM0 64L276.52637 64C285.363156 64 292.526786 71.1615011 292.526786 80L292.526786 80C292.526786 88.836556 285.368389 96 276.52637 96L0 96 0 64zM0 32L186.797028 32C195.632267 32 202.794643 39.1615011 202.794643 48L202.794643 48C202.794643 56.836556 195.636641 64 186.797028 64L0 64 0 32zM0-.42108547e-14L73.7415627-.42108547e-14C82.5729163-.42108547e-14 89.7321429 7.16150109 89.7321429 16L89.7321429 16C89.7321429 24.836556 82.5783803 32 73.7415627 32L0 32 0-.42108547e-14zM0 224L1275.24038 224C1284.07979 224 1291.24554 231.161501 1291.24554 240L1291.24554 240C1291.24554 248.836556 1284.08279 256 1275.24038 256L0 256 0 224z"/>
-    <path d="M0,192 L1347.93083,192 C1356.76614,192 1363.92857,199.161501 1363.92857,208 L1363.92857,208 C1363.92857,216.836556 1356.774,224 1347.93083,224 L0,224 L0,192 Z" opacity=".5"/>
-    <path d="M0 192L822.996231 192C831.832403 192 838.995536 199.161501 838.995536 208L838.995536 208C838.995536 216.836556 831.837373 224 822.996231 224L0 224 0 192zM0 160L1202.56918 160C1211.40205 160 1218.5625 167.161501 1218.5625 176L1218.5625 176C1218.5625 184.836556 1211.40634 192 1202.56918 192L0 192 0 160z"/>
-    <path d="M0 160L1391.00191 160C1399.83741 160 1407 167.161501 1407 176L1407 176C1407 184.836556 1399.82735 192 1391.00191 192L0 192 0 160zM0 128L1275.24038 128C1284.07979 128 1291.24554 135.161501 1291.24554 144L1291.24554 144C1291.24554 152.836556 1284.08279 160 1275.24038 160L0 160 0 128zM-.13686838e-13 96L835.564779 96C844.397611 96 851.558036 103.161501 851.558036 112L851.558036 112C851.558036 120.836556 844.388506 128 835.564779 128L-.13686838e-13 128-.13686838e-13 96z"/>
-    <path d="M0,160 L1053.60441,160 C1062.44248,160 1069.60714,167.161501 1069.60714,176 L1069.60714,176 C1069.60714,184.836556 1062.44043,192 1053.60441,192 L0,192 L0,160 Z"/>
-    <path d="M-.84217094e-14 160L415.609285 160C424.447123 160 431.611607 167.161501 431.611607 176L431.611607 176C431.611607 184.836556 424.458025 192 415.609285 192L-.84217094e-14 192-.84217094e-14 160zM.68434189e-14 96L480.218367 96C489.055135 96 496.21875 103.161501 496.21875 112L496.21875 112C496.21875 120.836556 489.060814 128 480.218367 128L.68434189e-14 128 .68434189e-14 96z"/>
-    <path d="M0,128 L718.905576,128 C727.742504,128 734.90625,135.161501 734.90625,144 L734.90625,144 C734.90625,152.836556 727.750924,160 718.905576,160 L0,160 L0,128 Z" opacity=".5"/>
-    <path d="M0 256L630.080927 256C638.912237 256 646.071429 263.161501 646.071429 272L646.071429 272C646.071429 280.836556 638.898695 288 630.080927 288L0 288 0 256zM0 128L247.805594 128C256.645964 128 263.8125 135.161501 263.8125 144L263.8125 144C263.8125 152.836556 256.653652 160 247.805594 160L0 160 0 128z"/>
-    <path d="M0 256L199.357266 256C208.193754 256 215.357143 263.161501 215.357143 272L215.357143 272C215.357143 280.836556 208.191825 288 199.357266 288L0 288 0 256zM0 288L561.873077 288C570.710695 288 577.875 295.161501 577.875 304L577.875 304C577.875 312.836556 570.712166 320 561.873077 320L0 320 0 288z"/>
-    <path d="M0,288 L701.857187,288 C710.693719,288 717.857143,295.161501 717.857143,304 L717.857143,304 C717.857143,312.836556 710.694141,320 701.857187,320 L0,320 L0,288 Z"/>
-    <path d="M0,288 L342.925991,288 C351.763972,288 358.928571,295.161501 358.928571,304 L358.928571,304 C358.928571,312.836556 351.758837,320 342.925991,320 L0,320 L0,288 Z"/>
-  </g>
-</svg>

docs-src/src/assets/images/logo_isjs.svg

@@ -1 +0,0 @@
-<svg width="348" height="320" viewBox="0 0 348 320" xmlns="http://www.w3.org/2000/svg"><title>logo</title><defs><linearGradient x1="0%" y1="0%" x2="106.528%" y2="100%" id="a"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient></defs><g transform="translate(-932)" fill-rule="nonzero" fill="url(#a)" opacity=".4"><path d="M1105.4 141.2c8 0 15.6-1.6 23.2-4l12.8 22 8.8 15.2c2.4 4.4 6.8 6.8 11.6 6.8 2.4 0 4.4-.4 6.8-1.6 6.4-3.6 8.4-12 4.8-18.4l-8.8-15.2-12.8-22.4c14.8-12.8 24.4-32 24.4-53.2 0-38.8-31.6-70.4-70.4-70.4-38.8 0-70.8 31.6-70.8 70.8 0 39.2 31.6 70.4 70.4 70.4zm0-114.4c24 0 43.6 19.6 43.6 43.6s-19.6 43.6-43.6 43.6-43.6-19.6-43.6-43.6 19.6-43.6 43.6-43.6zM1209.2 178.778c-34.4 0-62.8 24.8-69.2 57.2h-42.8c-7.2 0-13.2 6-13.2 13.2 0 7.2 6 13.2 13.2 13.2h42.8c6.4 32.4 34.8 57.2 69.2 57.2 38.8 0 70.4-31.6 70.4-70.4 0-38.8-31.6-70.4-70.4-70.4zm0 114.4c-24 0-43.6-19.6-43.6-43.6s19.6-43.6 43.6-43.6 43.6 19.6 43.6 43.6-19.6 43.6-43.6 43.6zm-160.4-96.8c14.8 12.8 24.4 31.6 24 53.2 0 38.8-31.6 70.4-70.4 70.4-38.8 0-70.4-31.2-70.4-70.4s31.6-70.8 70.4-70.8c8.4 0 16 1.6 23.2 4l12.8-22 8.8-15.2c4-6.4 12-8.4 18.4-4.8 6.4 4 8.4 12 4.8 18.4l-8.8 15.2-12.8 22zm-46.4 96.8c24.4 0 44-19.6 43.6-43.6 0-24-19.6-43.6-43.6-43.6s-43.6 19.6-43.6 43.6 19.6 43.6 43.6 43.6z"/></g></svg>

docs-src/src/assets/images/servers.svg

@@ -0,0 +1,543 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="319" height="225" viewBox="0 0 319 225">
+    <defs>
+        <linearGradient id="a" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#00AEFF"/>
+            <stop offset="100%" stop-color="#3369E7"/>
+        </linearGradient>
+        <linearGradient id="b" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#00AEFF"/>
+            <stop offset="100%" stop-color="#3369E7"/>
+        </linearGradient>
+        <linearGradient id="c" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#00AEFF"/>
+            <stop offset="100%" stop-color="#3369E7"/>
+        </linearGradient>
+        <linearGradient id="d" x1="13.18%" x2="83.027%" y1="104.551%" y2="1.628%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="e" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#FCFCFE"/>
+            <stop offset="97%" stop-color="#C3DCFF"/>
+        </linearGradient>
+        <linearGradient id="f" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="g" x1="0%" y1="49.999%" y2="49.999%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="h" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="i" x1="2432.721%" x2="-380.797%" y1="-284.627%" y2="110.372%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="j" x1="2398.758%" x2="-408.065%" y1="-280.53%" y2="114.469%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="k" x1="2374.682%" x2="-439.141%" y1="-276.335%" y2="118.664%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="l" x1="2340.36%" x2="-466.464%" y1="-272.247%" y2="122.754%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="m" x1="2317.071%" x2="-496.75%" y1="-268.316%" y2="126.686%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="n" x1="2282.531%" x2="-523.159%" y1="-264.177%" y2="130.822%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="o" x1="2258.421%" x2="-555.409%" y1="-260.015%" y2="134.987%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="p" x1="2228.824%" x2="-584.997%" y1="-255.748%" y2="139.149%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="q" x1="2200.809%" x2="-613.012%" y1="-251.995%" y2="143.007%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="r" x1="2170.724%" x2="-642.809%" y1="-247.734%" y2="147.264%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="s" x1="2137.389%" x2="-669.44%" y1="-243.682%" y2="151.316%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="t" x1="1511.212%" x2="-1302.609%" y1="-155.19%" y2="239.812%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="u" x1="1479.139%" x2="-1327.397%" y1="-151.069%" y2="243.93%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="v" x1="1452.706%" x2="-1361.124%" y1="-146.91%" y2="248.092%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="w" x1="1420.87%" x2="-1385.954%" y1="-142.767%" y2="252.13%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="x" x1="1393.853%" x2="-1419.976%" y1="-138.648%" y2="256.351%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="y" x1="1362.185%" x2="-1443.795%" y1="-134.504%" y2="260.392%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="z" x1="1336.35%" x2="-1477.176%" y1="-130.595%" y2="264.404%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="A" x1="1306.782%" x2="-1507.038%" y1="-126.362%" y2="268.568%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="B" x1="1278.835%" x2="-1534.988%" y1="-122.566%" y2="272.432%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="C" x1="1249.188%" x2="-1564.635%" y1="-118.341%" y2="276.66%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="D" x1="1217.556%" x2="-1588.974%" y1="-114.266%" y2="280.763%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="E" x1="554.312%" x2="-2259.215%" y1="-20.807%" y2="374.225%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="F" x1="524.566%" x2="-2282.263%" y1="-16.713%" y2="378.286%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="G" x1="495.518%" x2="-2318.306%" y1="-12.542%" y2="382.457%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="H" x1="467.388%" x2="-2339.439%" y1="-8.673%" y2="386.359%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="I" x1="438.094%" x2="-2375.432%" y1="-4.486%" y2="390.515%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="J" x1="408.972%" x2="-2397.008%" y1="-.357%" y2="394.543%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="K" x1="379.391%" x2="-2434.435%" y1="3.758%" y2="398.789%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="L" x1="349.665%" x2="-2464.156%" y1="7.978%" y2="402.874%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="M" x1="321.962%" x2="-2491.868%" y1="11.822%" y2="406.824%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="N" x1="292.035%" x2="-2521.494%" y1="16.02%" y2="411.019%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="O" x1="263.995%" x2="-2542.829%" y1="19.89%" y2="414.891%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="P" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="Q" x1="0%" y1="49.999%" y2="49.999%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="R" x1="225.492%" x2="-1.392%" y1="-795.033%" y2="297.459%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="S" x1="253.935%" x2="27.047%" y1="-931.975%" y2="160.518%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="T" x1="-14.798%" x2="97.707%" y1="94.881%" y2="17.469%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="U" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="V" x1="0%" y1="49.999%" y2="49.999%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="W" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="X" x1="91732.971%" x2="88835.912%" y1="22530.887%" y2="21820.521%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="Y" x1="91653.156%" x2="88756.097%" y1="22511.316%" y2="21800.95%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="Z" x1="91319.213%" x2="88430.23%" y1="22492.004%" y2="21781.638%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aa" x1="91494.132%" x2="88597.073%" y1="22472.324%" y2="21761.958%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ab" x1="91414.924%" x2="88517.865%" y1="22452.901%" y2="21742.535%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ac" x1="91109.039%" x2="88219.184%" y1="22433.589%" y2="21723.223%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ad" x1="91256.959%" x2="88359.9%" y1="22414.168%" y2="21703.802%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ae" x1="90950.414%" x2="88060.559%" y1="22394.597%" y2="21684.231%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="af" x1="91097.935%" x2="88200.876%" y1="22375.176%" y2="21664.81%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ag" x1="90765.572%" x2="87876.586%" y1="22355.862%" y2="21645.496%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ah" x1="90939.965%" x2="88042.906%" y1="22336.441%" y2="21626.075%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ai" x1="92423.927%" x2="89526.868%" y1="22700.303%" y2="21989.937%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aj" x1="92345.138%" x2="89448.082%" y1="22680.992%" y2="21970.626%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ak" x1="92009.27%" x2="89120.284%" y1="22661.68%" y2="21951.314%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="al" x1="92186.118%" x2="89289.059%" y1="22642%" y2="21931.634%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="am" x1="92106.909%" x2="89209.85%" y1="22622.579%" y2="21912.213%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="an" x1="91799.304%" x2="88909.449%" y1="22603.267%" y2="21892.901%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ao" x1="91948.941%" x2="89051.882%" y1="22583.844%" y2="21873.478%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ap" x1="91640.678%" x2="88750.824%" y1="22564.273%" y2="21853.907%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aq" x1="91789.918%" x2="88892.859%" y1="22544.852%" y2="21834.486%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ar" x1="91455.6%" x2="88566.614%" y1="22525.539%" y2="21815.173%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="as" x1="91631.953%" x2="88734.894%" y1="22506.118%" y2="21795.752%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="at" x1="93142.168%" x2="90245.112%" y1="22876.451%" y2="22166.086%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="au" x1="93063.497%" x2="90166.438%" y1="22857.135%" y2="22146.769%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="av" x1="92724.574%" x2="89835.588%" y1="22837.564%" y2="22127.198%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aw" x1="92904.473%" x2="90007.415%" y1="22818.143%" y2="22107.777%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ax" x1="92825.265%" x2="89928.206%" y1="22798.721%" y2="22088.356%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="ay" x1="92515.873%" x2="89626.019%" y1="22773.524%" y2="22063.342%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="az" x1="92666.241%" x2="89769.182%" y1="22759.728%" y2="22049.362%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aA" x1="92357.245%" x2="89467.39%" y1="22740.415%" y2="22030.049%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aB" x1="92508.273%" x2="89611.215%" y1="22720.994%" y2="22010.628%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aC" x1="92170.904%" x2="89281.918%" y1="22701.423%" y2="21991.057%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aD" x1="92349.253%" x2="89452.194%" y1="22682.002%" y2="21971.636%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aE" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="aF" x1="20.125%" x2="83.013%" y1="96.672%" y2="-.973%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="aG" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#FCFCFE"/>
+            <stop offset="97%" stop-color="#C3DCFF"/>
+        </linearGradient>
+        <linearGradient id="aH" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#D6E5FF"/>
+            <stop offset="100%" stop-color="#7FC7FF"/>
+        </linearGradient>
+        <linearGradient id="aI" x1="0%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="aJ" x1="0%" y1="49.999%" y2="49.999%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="aK" x1="0%" y1="49.999%" y2="49.999%">
+            <stop offset="0%" stop-color="#86BFFF"/>
+            <stop offset="100%" stop-color="#56A8FF"/>
+        </linearGradient>
+        <linearGradient id="aL" x1="91319.213%" x2="88430.227%" y1="22492.004%" y2="21781.638%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aM" x1="91494.135%" x2="88597.076%" y1="22472.324%" y2="21761.958%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aN" x1="91097.932%" x2="88200.874%" y1="22375.176%" y2="21664.81%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aO" x1="90765.546%" x2="87876.56%" y1="22355.863%" y2="21645.497%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aP" x1="92423.9%" x2="89526.841%" y1="22700.305%" y2="21989.939%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aQ" x1="92345.141%" x2="89448.082%" y1="22680.992%" y2="21970.626%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aR" x1="91948.938%" x2="89051.879%" y1="22583.844%" y2="21873.478%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aS" x1="91640.676%" x2="88750.821%" y1="22564.273%" y2="21853.907%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aT" x1="93142.256%" x2="90245.197%" y1="22876.447%" y2="22166.081%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aU" x1="92904.477%" x2="90007.418%" y1="22818.143%" y2="22107.777%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aV" x1="92515.873%" x2="89626.021%" y1="22773.524%" y2="22063.342%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+        <linearGradient id="aW" x1="92349.253%" x2="89452.197%" y1="22682.002%" y2="21971.636%">
+            <stop offset="0%" stop-color="#6CA8FF"/>
+            <stop offset="100%" stop-color="#3183FF"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="nonzero">
+        <path fill="url(#a)" d="M318.84 124.762l.02 11.981-157.642 88.197-.12-12.723z"/>
+        <path fill="url(#b)" d="M161.178 225L.14 137.204v-10.74l161.038 85.633z"/>
+        <path fill="url(#c)" d="M159.96 46.402L.14 126.465l161.078 85.732 157.562-87.355z"/>
+        <path fill="url(#d)" d="M238.361 18.533L191.46 45.82v84.771l46.901-26.627z"/>
+        <path fill="url(#e)" d="M191.68 45.801l46.681-27.268L195.934.14l-46.841 24.303z"/>
+        <path fill="url(#f)" d="M148.993 24.403v84.811l42.527 21.358v-84.81z"/>
+        <path fill="url(#f)" d="M187.505 122.057l-20.015-9.797-.06-9.618 20.015 9.798z" opacity=".6"/>
+        <path fill="url(#g)" d="M187.505 108.914l-20.015-9.798-.06-9.617 20.015 9.798z" opacity=".6"/>
+        <path fill="url(#h)" d="M187.505 95.27l-20.015-9.798-.06-9.597 20.015 9.777z" opacity=".6"/>
+        <path fill="url(#i)" d="M169.128 111.618c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .161-.14.301-.32.321z"/>
+        <path fill="url(#j)" d="M170.766 112.42c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.16-.14.32-.32.32z"/>
+        <path fill="url(#k)" d="M172.424 113.221c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#l)" d="M174.062 114.023c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.18-.14.32-.32.32z"/>
+        <path fill="url(#m)" d="M175.72 114.844c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.322.32-.322s.32.14.32.321l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#n)" d="M177.358 115.646c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.18-.12.32-.32.32z"/>
+        <path fill="url(#o)" d="M179.016 116.447c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#p)" d="M180.673 117.248c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.341-.32.321z"/>
+        <path fill="url(#q)" d="M182.311 118.07c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#r)" d="M183.97 118.871c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.319.14.319.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#s)" d="M185.607 119.673c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.14.32-.32.32z"/>
+        <path fill="url(#t)" d="M169.128 98.475c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#u)" d="M170.766 99.276c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.14.321-.32.321z"/>
+        <path fill="url(#v)" d="M172.424 100.078c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#w)" d="M174.062 100.88c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.14.341-.32.321z"/>
+        <path fill="url(#x)" d="M175.72 101.68c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#y)" d="M177.358 102.482c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.18-.12.341-.32.321z"/>
+        <path fill="url(#z)" d="M179.016 103.304c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#A)" d="M180.673 104.105c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.341-.32.321z"/>
+        <path fill="url(#B)" d="M182.311 104.927c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#C)" d="M183.97 105.728c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.319.14.319.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#D)" d="M185.607 106.53c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.14.321-.32.321z"/>
+        <path fill="url(#E)" d="M169.128 84.83c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#F)" d="M170.766 85.632c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.14.321-.32.321z"/>
+        <path fill="url(#G)" d="M172.424 86.434c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#H)" d="M174.062 87.255c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.14.321-.32.321z"/>
+        <path fill="url(#I)" d="M175.72 88.057c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#J)" d="M177.358 88.858c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.12.341-.32.321z"/>
+        <path fill="url(#K)" d="M179.016 89.66c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#L)" d="M180.673 90.46c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.34-.32.32z"/>
+        <path fill="url(#M)" d="M182.311 91.282c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#N)" d="M183.97 92.084c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.319.14.319.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#O)" d="M185.607 92.905c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.322.32-.322s.32.14.32.321l.04 5.93c.02.16-.14.321-.32.321z"/>
+        <path fill="url(#P)" d="M187.505 61.43l-13.363-6.512-.06-9.617 13.363 6.511z"/>
+        <path fill="#86BFFF" d="M172.324 46.142c0-.581-.48-1.322-1.059-1.663-.579-.34-1.058-.14-1.058.44 0 .582.479 1.323 1.058 1.664.58.34 1.059.14 1.059-.441zM172.324 49.588c0-.58-.48-1.322-1.059-1.663-.579-.34-1.058-.14-1.058.441s.479 1.322 1.058 1.663c.58.34 1.059.16 1.059-.44z"/>
+        <path fill="url(#Q)" d="M187.006 75.053l-13.344-6.491-.06-9.617 13.344 6.511z" opacity=".6"/>
+        <path fill="url(#R)" d="M171.825 59.786c0-.58-.48-1.322-1.06-1.663-.578-.34-1.058-.14-1.058.441s.48 1.322 1.059 1.663c.58.34 1.059.14 1.059-.44z"/>
+        <path fill="url(#S)" d="M171.825 63.232c0-.58-.48-1.322-1.06-1.663-.578-.34-1.058-.14-1.058.441s.48 1.323 1.059 1.663c.58.34 1.059.14 1.059-.44z"/>
+        <path fill="url(#T)" d="M135.07 37.266L88.19 64.555v84.77l46.88-26.627z"/>
+        <path fill="url(#e)" d="M88.39 64.535l46.68-27.269-42.406-18.392-46.861 24.303z"/>
+        <path fill="url(#f)" d="M45.703 43.157v84.79l42.546 21.358v-84.79z"/>
+        <path fill="url(#U)" d="M84.214 140.79l-19.995-9.797-.06-9.617 20.015 9.797z"/>
+        <path fill="url(#V)" d="M84.214 127.647L64.22 117.85l-.06-9.618 20.015 9.798z"/>
+        <path fill="url(#W)" d="M84.214 114.003l-19.995-9.798-.06-9.597 20.015 9.778z"/>
+        <path fill="url(#X)" d="M65.857 130.332c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#Y)" d="M67.495 131.153c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#Z)" d="M69.133 131.955c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.18-.12.32-.32.32z"/>
+        <path fill="url(#aa)" d="M70.791 132.776c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#ab)" d="M72.45 133.577c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321.179 0 .319.14.319.32l.04 5.93c0 .161-.14.321-.32.321z"/>
+        <path fill="url(#ac)" d="M74.087 134.379c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.14.32-.32.32z"/>
+        <path fill="url(#ad)" d="M75.745 135.18c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#ae)" d="M77.383 136.002c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.16-.14.32-.32.32z"/>
+        <path fill="url(#af)" d="M79.04 136.803c-.179 0-.319-.14-.319-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#ag)" d="M80.679 137.605c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.18-.12.32-.32.32z"/>
+        <path fill="url(#ah)" d="M82.337 138.406c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#ai)" d="M65.857 117.208c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .161-.14.321-.32.321z"/>
+        <path fill="url(#aj)" d="M67.495 118.01c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#ak)" d="M69.133 118.811c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.12.321-.32.321z"/>
+        <path fill="url(#al)" d="M70.791 119.633c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#am)" d="M72.45 120.434c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32.179 0 .319.14.319.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#an)" d="M74.087 121.236c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.18-.14.32-.32.32z"/>
+        <path fill="url(#ao)" d="M75.745 122.037c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#ap)" d="M77.383 122.858c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.161-.14.321-.32.321z"/>
+        <path fill="url(#aq)" d="M79.04 123.66c-.179 0-.319-.14-.319-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#ar)" d="M80.679 124.461c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.12.321-.32.321z"/>
+        <path fill="url(#as)" d="M82.337 125.263c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#at)" d="M65.857 103.564c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#au)" d="M67.495 104.366c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#av)" d="M69.133 105.187c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.16-.12.321-.32.321z"/>
+        <path fill="url(#aw)" d="M70.791 105.988c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#ax)" d="M72.45 106.79c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32.179 0 .319.14.319.32l.04 5.93c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#ay)" d="M74.087 107.591c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.14.341-.32.321z"/>
+        <path fill="url(#az)" d="M75.745 108.413c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#aA)" d="M77.383 109.214c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.14.321-.32.321z"/>
+        <path fill="url(#aB)" d="M79.04 110.016c-.179 0-.319-.14-.319-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#aC)" d="M80.679 110.837c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.16-.12.321-.32.321z"/>
+        <path fill="url(#aD)" d="M82.337 111.638c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .161-.14.321-.32.321z"/>
+        <path fill="url(#aE)" d="M84.214 80.163L70.871 73.65l-.06-9.597 13.363 6.491z"/>
+        <path fill="#86BFFF" d="M69.053 64.875c0-.58-.479-1.322-1.058-1.663-.58-.34-1.059-.14-1.059.441s.48 1.323 1.059 1.663c.579.34 1.058.16 1.058-.44zM69.053 68.341c0-.58-.479-1.322-1.058-1.662-.58-.341-1.059-.14-1.059.44 0 .581.48 1.323 1.059 1.663.579.34 1.058.14 1.058-.44z"/>
+        <path fill="url(#aE)" d="M83.735 93.787l-13.363-6.492-.06-9.617 13.363 6.512z"/>
+        <path fill="#86BFFF" d="M68.554 78.52c0-.581-.48-1.323-1.059-1.663-.579-.341-1.058-.14-1.058.44 0 .581.48 1.323 1.058 1.663.58.341 1.059.14 1.059-.44zM68.554 81.966c0-.581-.48-1.323-1.059-1.663-.579-.34-1.058-.14-1.058.44 0 .582.48 1.323 1.058 1.664.58.34 1.059.14 1.059-.441z"/>
+        <path fill="url(#aF)" d="M202.067 71.447l-46.882 27.268v84.791l46.882-26.627z"/>
+        <path fill="url(#aG)" d="M155.385 98.715l46.682-27.268-42.427-18.413-46.841 24.324z"/>
+        <path fill="url(#aH)" d="M112.699 77.317v84.811l42.546 21.358v-84.81z"/>
+        <path fill="url(#aI)" d="M151.21 174.951l-20.015-9.777-.04-9.617 19.995 9.797z"/>
+        <path fill="url(#aJ)" d="M151.21 161.808l-20.015-9.778-.04-9.617 19.995 9.798z"/>
+        <path fill="url(#V)" d="M151.21 148.183l-20.015-9.797-.04-9.617 19.995 9.797z"/>
+        <path fill="url(#aK)" d="M151.21 114.323l-13.343-6.491-.06-9.617 13.343 6.511z"/>
+        <path fill="#86BFFF" d="M136.03 99.056c0-.58-.48-1.322-1.06-1.663-.579-.34-1.058-.14-1.058.44 0 .582.48 1.323 1.059 1.664.579.34 1.058.14 1.058-.44zM136.03 102.502c0-.58-.48-1.322-1.06-1.663-.579-.34-1.058-.14-1.058.441s.48 1.322 1.059 1.663c.579.34 1.058.14 1.058-.44z"/>
+        <path fill="url(#U)" d="M150.731 127.967l-13.363-6.511-.06-9.597 13.363 6.491z"/>
+        <path fill="#86BFFF" d="M135.53 112.7c0-.58-.48-1.322-1.059-1.663-.579-.34-1.058-.14-1.058.441s.48 1.323 1.058 1.663c.58.34 1.06.14 1.06-.44zM135.53 116.146c0-.58-.48-1.322-1.059-1.662-.579-.341-1.058-.14-1.058.44 0 .581.48 1.323 1.058 1.663.58.34 1.06.14 1.06-.44z"/>
+        <path fill="url(#X)" d="M132.973 164.392c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#Y)" d="M134.611 165.214c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#aL)" d="M136.25 166.015c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32.179 0 .319.14.319.32l.04 5.93c.02.18-.12.321-.32.321z"/>
+        <path fill="url(#aM)" d="M137.907 166.837c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#ab)" d="M139.565 167.638c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#ac)" d="M141.203 168.44c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.181-.14.321-.32.321z"/>
+        <path fill="url(#ad)" d="M142.86 169.24c-.179 0-.319-.14-.319-.32l-.04-5.93c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#ae)" d="M144.499 170.062c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.161-.14.321-.32.321z"/>
+        <path fill="url(#aN)" d="M146.157 170.864c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#aO)" d="M147.795 171.665c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c.02.18-.12.321-.32.321z"/>
+        <path fill="url(#ah)" d="M149.453 172.467c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#aP)" d="M132.973 151.269c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#aQ)" d="M134.611 152.07c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#ak)" d="M136.25 152.872c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32.179 0 .319.14.319.32l.04 5.93c.02.18-.12.32-.32.32z"/>
+        <path fill="url(#al)" d="M137.907 153.693c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+        <path fill="url(#am)" d="M139.565 154.495c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .16-.14.32-.32.32z"/>
+        <path fill="url(#an)" d="M141.203 155.296c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.14.321-.32.321z"/>
+        <path fill="url(#aR)" d="M142.86 156.098c-.179 0-.319-.14-.319-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.322-.32.322z"/>
+        <path fill="url(#aS)" d="M144.499 156.919c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.16-.14.321-.32.321z"/>
+        <path fill="url(#aq)" d="M146.157 157.72c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .161-.14.321-.32.321z"/>
+        <path fill="url(#ar)" d="M147.795 158.522c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.12.32-.32.32z"/>
+        <path fill="url(#as)" d="M149.453 159.323c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#aT)" d="M132.973 137.625c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c0 .18-.14.32-.32.32z"/>
+        <path fill="url(#au)" d="M134.611 138.426c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#av)" d="M136.25 139.248c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321.179 0 .319.14.319.32l.04 5.931c.02.16-.12.32-.32.32z"/>
+        <path fill="url(#aU)" d="M137.907 140.049c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#ax)" d="M139.565 140.85c-.18 0-.32-.14-.32-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .181-.14.321-.32.321z"/>
+        <path fill="url(#aV)" d="M141.203 141.652c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c.02.18-.14.34-.32.32z"/>
+        <path fill="url(#az)" d="M142.86 142.473c-.179 0-.319-.14-.319-.32l-.04-5.93c0-.181.14-.321.32-.321s.32.14.32.32l.04 5.93c0 .161-.14.321-.32.321z"/>
+        <path fill="url(#aA)" d="M144.499 143.275c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.18-.14.32-.32.32z"/>
+        <path fill="url(#aB)" d="M146.157 144.076c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .18-.14.321-.32.321z"/>
+        <path fill="url(#aC)" d="M147.795 144.898c-.18 0-.32-.14-.32-.321l-.04-5.93c0-.18.14-.321.32-.321s.32.14.32.32l.04 5.931c.02.16-.12.32-.32.32z"/>
+        <path fill="url(#aW)" d="M149.453 145.699c-.18 0-.32-.14-.32-.32l-.04-5.931c0-.18.14-.32.32-.32s.32.14.32.32l.04 5.93c0 .16-.14.321-.32.321z"/>
+    </g>
+</svg>

docs-src/src/assets/images/touch-point.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120" viewBox="0 0 120 120">
+    <defs>
+        <rect id="b" width="56" height="56" x="12" y="12" rx="16"/>
+        <filter id="a" width="260.7%" height="260.7%" x="-69.6%" y="-69.6%" filterUnits="objectBoundingBox">
+            <feOffset dx="6" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="14"/>
+            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.080441808 0 0 0 0 0.232361178 0 0 0 0 0.407498937 0 0 0 0.1 0"/>
+        </filter>
+        <circle id="d" cx="40" cy="41" r="5"/>
+        <filter id="c" width="700%" height="700%" x="-300%" y="-290%" filterUnits="objectBoundingBox">
+            <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="9"/>
+            <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.00392156863 0 0 0 0 0.678431373 0 0 0 0 1 0 0 0 1 0"/>
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter2"/>
+            <feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation="1.5"/>
+            <feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0.0507970813 0 0 0 0 0.0831818478 0 0 0 0 0.226217049 0 0 0 0.2 0"/>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"/>
+                <feMergeNode in="shadowMatrixOuter2"/>
+            </feMerge>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd" transform="translate(20 11)">
+        <g transform="rotate(45 40 40)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b"/>
+            <use fill="#FFF" xlink:href="#b"/>
+        </g>
+        <use fill="#000" filter="url(#c)" xlink:href="#d"/>
+        <use fill="#01ADFF" xlink:href="#d"/>
+        <circle cx="40" cy="41" r="9" stroke="#04ADFF" stroke-width="2" opacity=".1"/>
+    </g>
+</svg>

docs-src/src/assets/js/freezeGifs.js

@@ -0,0 +1,63 @@
+function createElement(type, callback) {
+  const element = document.createElement(type);
+
+  callback(element);
+
+  return element;
+}
+
+function freezeGif(img) {
+  const width = img.width;
+  const height = img.height;
+  const canvas = createElement('canvas', clone => {
+    clone.width = width;
+    clone.height = height;
+  });
+  let attr;
+
+  const freeze = function() {
+    canvas.getContext('2d').drawImage(img, 0, 0, width, height);
+
+    for (let i = 0; i < img.attributes.length; i++) {
+      attr = img.attributes[i];
+
+      if (attr.name !== '"') {
+        canvas.setAttribute(attr.name, attr.value);
+      }
+    }
+
+    canvas.style.position = 'absolute';
+
+    img.parentNode.insertBefore(canvas, img);
+    img.style.opacity = 0;
+    img.style.visibility = 'hidden';
+    canvas.style.visibility = 'visible';
+    canvas.style.opacity = 1;
+
+    img.parentNode.addEventListener('mouseover', () => {
+      img.style.opacity = 1;
+      img.style.visibility = 'visible';
+      canvas.style.visibility = 'hidden';
+      canvas.style.opacity = 0;
+    });
+    img.parentNode.addEventListener('mouseout', () => {
+      img.style.opacity = 0;
+      img.style.visibility = 'hidden';
+      canvas.style.visibility = 'visible';
+      canvas.style.opacity = 1;
+    });
+  };
+
+  if (img.complete) {
+    freeze();
+  } else {
+    img.addEventListener('load', freeze, true);
+    window.addEventListener('resize', freeze, true);
+  }
+}
+
+export function freezeAllGifs() {
+  return [].slice
+    .apply(document.querySelectorAll('.js-freeze'))
+    .map(freezeGif);
+}

docs-src/src/assets/js/main.js

@@ -5,10 +5,11 @@ import {
 import activateClipboard from './activateClipboard.js';
 import alg from 'algolia-frontend-components/javascripts.js';
 import './editThisPage.js';
+import { freezeAllGifs } from './freezeGifs.js';
 
 const docSearch = {
-  apiKey: '5cb6763f264e31381e18639a1147634c',
-  indexName: 'react-instantsearch',
+  apiKey: '5e2de32b362723ffdb03414c5c3d2ec8',
+  indexName: 'jekyll_algolia',
   inputSelector: '#searchbox',
 };
 
@@ -20,6 +21,7 @@ const container = document.querySelector('.documentation-container');
 const codeSamples = document.querySelectorAll('.code-sample');
 
 activateClipboard(codeSamples);
+freezeAllGifs();
 
 if (document.querySelector('.sidebar')) {
   repositionSidebarOnScroll();

docs-src/src/autocomplete.md

@@ -1,14 +0,0 @@
----
-title: Autocomplete
-layout: content-with-menu.pug
----
-
-# Autocomplete
-
-Showing a specific implementation of how to search using a dropdown. We push the
-data, and then we build the display using DocSearch for example.
-
-
-
-
-

docs-src/src/blog.md

@@ -15,6 +15,7 @@ already have pushed all your data, following our [getting started][2] guide.
 
 [![Search in the minima theme][3]](https://community.algolia.com/jekyll-algolia-example/)
 
+
 In this tutorial we'll add a search on the front page that will let you search
 into all your posts (both titles and content), in a fast and relevant manner.
 
@@ -73,11 +74,17 @@ exist yet.
 In that file, we'll add the following content. It's a lot of code in one go, but
 don't worry, we'll explain it all right after.
 
+_Note that for the sake of readability we will be using JavaScript features
+that might not be available in all browsers (namely [const][5], [template
+literals][6] and [arrow functions][7]). If you need compatibility with browsers
+that do not ship those features, we recommend you use [Babel][8] to
+automatically transpile your code._
+
 ```html
 <!-- Including InstantSearch.js library and styling -->
-<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
 
 <script>
 // Instanciating InstantSearch.js with Algolia credentials
@@ -91,7 +98,8 @@ const search = instantsearch({
 search.addWidget(
   instantsearch.widgets.searchBox({
     container: '#search-searchbar',
-    placeholder: 'Search into posts...'
+    placeholder: 'Search into posts...',
+    poweredBy: true // This is required if you're on the free Community plan
   })
 );
 search.addWidget(
@@ -107,9 +115,9 @@ search.start();
 
 ### Including the InstantSearch.js library
 
-The first lines will include the [InstantSearch.js][5] library as well as
-minimal styling, directlt from the jsDeliver CDN. Those files are also available
-through [Yarn][6]/[NPM][7] if you need them locally.
+The first lines will include the [InstantSearch.js][9] library as well as
+minimal styling, directly from the jsDeliver CDN. Those files are also available
+through [Yarn][10]/[NPM][11] if you need them locally.
 
 ### Instanciating the library
 
@@ -121,7 +129,7 @@ Both `application_id` and `index_name` should already be in your `_config.yml`
 file. The `search_only_api_key` should be new, though.
 
 Add a new entry in your `_config.yml` file, under the `algolia` namespace with
-the value of your Search API Key (you can find it in your [Dashboard][8]):
+the value of your Search API Key (you can find it in your [Dashboard][12]):
 
 ```yml
 # _config.yml
@@ -151,7 +159,7 @@ InstantSearch loads, it will replace the list with its own results.
 This is what it should look like at this stage. We have a search bar, but
 results are displayed in a raw JSON format. Let's work on styling this.
 
-![Minimal InstantSearch.js styling][9]
+![Minimal InstantSearch.js styling][13]
 
 ## Templating
 
@@ -181,7 +189,7 @@ search.addWidget(
 );
 ```
 
-![InstantSearch.js styling][10]
+![InstantSearch.js styling][14]
 
 This looks much better already. By using a template, we managed to make the
 result look close to what the initial display was. In the next section, we'll
@@ -196,12 +204,14 @@ default we display it exactly as it was saved in the Algolia index: as a UNIX
 timestamp.
 
 Because our template is a JavaScript function, we can reformat data before
-rendering it. Here we will use the [moment.js][11]
-library to format our date.
+rendering it. Here we will use the [moment.js][15] library to format our date.
 
 Using `moment.unix(hit.date).format('MMM D, YYYY');` we'll transform
 `1513764761` into `Dec 20, 2017`.
 
+Note that, contrary to posts, pages don't have a date defined, so we don't
+display this field if that's the case.
+
 ### Adding highlighting
 
 To make the display even easier to understand, we should add some highlighting:
@@ -224,54 +234,64 @@ All HTML nodes added by InstantSearch.js come with a custom `.ais-*` class added
 to them. This makes altering the styling of the elements to match your overall
 theme easy to achieve.
 
-### Edge-case handling
+### Headings
 
 With the current configuration, we will sometimes end up with results that look
 irrelevant: nothing is highlighted neither in the title or the content.
 
-This is because by default the plugin is searching into different fields
-(including `tags`, `categories` and the parent heading hierarchy of each
-paragraph). Because we chose to only display the title and content, it means that
-when a match in another attribute is occurring, we have no way to visually signal
-it to the user. It makes the result look irrelevant, while it is actually
-relevant (but we're not explaining why).
+This is because by default the plugin is searching not only in the content and
+the title, but also in the headings (`<h1>` to `<h6>` of the page). Because we
+currently only display the title and content, it make some perfectly relevant
+result look odd, because nothing is highlighted.
 
-One way to work around this issue is to manually tell the API in which field it
-should search, by using the `[restrictSearchableAttributes][12]` option.
+To fix that, we'll add the highlighted headings to the display when they are
+matching. We'll create a new variable called `breadcrumbs`, filled with the
+highlighted headings, and add it to our template only when not empty.
+
+We also update the url to include the `#` anchor that will point the link
+directly to the closest matching heading.
 
 ### Final code
 
 Here is the complete new version of the `_includes/algolia.html` file.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
 
 <script>
 const search = instantsearch({
   appId: '{{ site.algolia.application_id }}',
   apiKey: '{{ site.algolia.search_only_api_key }}',
-  indexName: '{{ site.algolia.index_name }}',
-  searchParameters: {
-    restrictSearchableAttributes: [
-      'title',
-      'content'
-    ]
-  }
+  indexName: '{{ site.algolia.index_name }}'
 });
 
 const hitTemplate = function(hit) {
-  const date = moment.unix(hit.date).format('MMM D, YYYY');
-  const url = hit.url;
+  let date = '';
+  if (hit.date) {
+    date = moment.unix(hit.date).format('MMM D, YYYY');
+  }
+
+  let url = `{{ site.baseurl }}${hit.url}#${hit.anchor}`;
+
   const title = hit._highlightResult.title.value;
+
+  let breadcrumbs = '';
+  if (hit._highlightResult.headings) {
+    breadcrumbs = hit._highlightResult.headings.map(match => {
+      return `<span class="post-breadcrumb">${match.value}</span>`
+    }).join(' > ')
+  }
+
   const content = hit._highlightResult.html.value;
 
   return `
     <div class="post-item">
       <span class="post-meta">${date}</span>
       <h2><a class="post-link" href="${url}">${title}</a></h2>
+      {{#breadcrumbs}}<a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}}
       <div class="post-snippet">${content}</div>
     </div>
   `;
@@ -281,7 +301,8 @@ const hitTemplate = function(hit) {
 search.addWidget(
   instantsearch.widgets.searchBox({
     container: '#search-searchbar',
-    placeholder: 'Search into posts...'
+    placeholder: 'Search into posts...',
+    poweredBy: true // This is required if you're on the free Community plan
   })
 );
 
@@ -310,31 +331,49 @@ search.start();
   font-style: normal;
   text-decoration: underline;
 }
+.post-breadcrumbs {
+  color: #424242;
+  display: block;
+}
+.post-breadcrumb {
+  font-size: 18px;
+  color: #424242;
+}
+.post-breadcrumb .ais-Highlight {
+  font-weight: bold;
+  font-style: normal;
+}
 .post-snippet .ais-Highlight {
   color: #2a7ae2;
   font-style: normal;
   font-weight: bold;
 }
+.post-snippet img {
+  display: none;
+}
 </style>
 ```
 
 ## Final result
 
-You can check the [final result live here][13], and have a look at all the code from
-the [GitHub repository][14].
+You can check the [final result live here][16], and have a look at all the code
+from the [GitHub repository][17].
 
 
 [1]: https://github.com/jekyll/minima
 [2]: ./getting-started.html
 [3]: ./assets/images/minima-search.gif
 [4]: https://raw.githubusercontent.com/jekyll/minima/master/_layouts/home.html
-[5]: https://community.algolia.com/instantsearch.js/
-[6]: https://yarnpkg.com/en/package/instantsearch.js
-[7]: https://www.npmjs.com/package/instantsearch.js
-[8]: https://www.algolia.com/api-keys
-[9]: ./assets/images/instantsearch-nostyling.png
-[10]: ./assets/images/instantsearch-styling.png
-[11]: https://momentjs.com/docs/
-[12]: https://www.algolia.com/doc/api-reference/api-parameters/restrictSearchableAttributes/
-[13]: https://community.algolia.com/jekyll-algolia-example/
-[14]: https://github.com/algolia/jekyll-algolia-example
+[5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+[6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+[7]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+[8]: https://babeljs.io/
+[9]: https://community.algolia.com/instantsearch.js/
+[10]: https://yarnpkg.com/en/package/instantsearch.js
+[11]: https://www.npmjs.com/package/instantsearch.js
+[12]: https://www.algolia.com/api-keys
+[13]: ./assets/images/instantsearch-nostyling.png
+[14]: ./assets/images/instantsearch-styling.png
+[15]: https://momentjs.com/docs/
+[16]: https://community.algolia.com/jekyll-algolia-example/
+[17]: https://github.com/algolia/jekyll-algolia-example

docs-src/src/collections.md

@@ -1,17 +0,0 @@
----
-title: Blog search
-layout: content-with-menu.pug
----
-
-# Search into custom collections
-
-This one will be a more advanced use-case, where I can explain how to search
-into a custom collection of items. I will use the actual list of Jekyll plugins
-and show how it is possible to search into them, in a more complex use-case.
-
-
-
-
-
-
-

docs-src/src/commandline.md

@@ -12,17 +12,14 @@ they do. Includes ENV variables as well.
 
 ## Arguments
 
-Here is the list of command line options you can pass to the `jekyll algolia
-push` command:
+Here is the list of command line options you can pass to the `jekyll algolia` command:
 
 | Flag                     | Description                                                           |
 | ----                     | -----                                                                 |
 | `--config ./_config.yml` | You can here specify the config file to use. Default is `_config.yml` |
-| `--future`               | With this flag, the command will also index posts with a future date  |
-| `--limit_posts 10`       | Limits the number of posts to parse and index                         |
-| `--drafts`               | Index drafts in the `_drafts` folder as well                          |
 | `--dry-run` or `-n`      | Do a dry run, do not actually push anything to your index             |
 | `--verbose`              | Display more information about what is going to be indexed            |
+| `--force-settings`       | Force update of the index settings                                    |
 
 
 ## Environment variables
@@ -33,31 +30,22 @@ to overwrite those values.
 
 key                    | value
 ---------------------- | ----------------------
-ALGOLIA_APPLICATION_ID | `your_application_id`
-ALGOLIA_API_KEY        | `your_api_key`
-ALGOLIA_INDEX_NAME     | `your_index_name`
-
+ALGOLIA_APPLICATION_ID | Your Application ID, available in [your dashboard](https://www.algolia.com/api-keys).
+ALGOLIA_INDEX_NAME     | Your Index name, any string will work
+ALGOLIA_API_KEY        | Your Admin API Key, available in [your dashboard](https://www.algolia.com/api-keys).
 
 ## `_algolia_api_key` file
 
 The recommended way to define your Algolia admin API key is to use the
 `ALGOLIA_API_KEY` environment variable. Because this key should be kept secret,
-its better if it's loaded directly from the environment.
-
-But the plugin can also load the key from another source. **Note that this
-method trades off security for convenience, so be very careful when using it.**
+its better if it's loaded directly from the environment. But the plugin can also
+load the key from another source.
 
 You can create a file named `_algolia_api_key` in your source directory that
 contains your admin API key. If no `ALGOLIA_API_KEY` environment variable is
 defined, the plugin will fallback to the value set in the `_algolia_api_key`
 file.
 
-**Do not commit this file in your versioning system**. This API key has write
-access to your index, so you have to keep it secret. For example, you should
-add `_algolia_api_key` to your `.gitignore` file. It contains your private API
-key
-
-
-
-
-
+**Note that this method trades off security for convenience, so be very careful
+when using it. Do not commit this file in your versioning system (add it to your
+`.gitignore` for example).**

docs-src/src/data/communityHeader.json

@@ -55,13 +55,9 @@
     }
   },
   "sideMenu": [
-    {
-      "name": "Getting started",
-      "url": "getting-started.html"
-    },
     {
       "name": "Documentation",
-      "url": "options.html"
+      "url": "getting-started.html"
     },
     {
       "name": "Tutorial",
@@ -75,13 +71,9 @@
   ],
   "mobileMenu": [
     {
-      "name": "Getting started",
+      "name": "Documentation",
       "url": "getting-started.html"
     },
-    {
-      "name": "Docs",
-      "url": "documentation.html"
-    },
     {
       "name": "Tutorial",
       "url": "blog.html"

docs-src/src/examples.md

@@ -1,9 +0,0 @@
----
-title: Examples
-layout: content-with-menu.pug
----
-
-- Dropdown
-- Blog (Hyde)
-- Jekyll plugins
-

docs-src/src/faq.md

@@ -0,0 +1,100 @@
+---
+title: Frequently Asked Questions
+layout: content-with-menu.pug
+---
+
+# Frequently Asked Questions
+
+## How many records will the plugin need?
+
+The plugin will not create an exact mapping of `1 page = 1 record`. Instead, it
+will split all pages into smaller chunks, and each chunk will be saved as a
+record. Splitting into small chunks is key to offer the best relevance of
+results.
+
+The default chunking mechanism is to create one chunk per paragraph of content.
+So, for a blog post that is made up of 10 paragraphs of text, it will create 10
+records.
+
+Estimating the number of records you will need can be tricky as it depends on
+both the number of pages you have, and on the average length of them. Some
+configuration options (such as [nodes_to_index][1]) can also influence the final
+result.
+
+The following table should give you a ballpark estimate of what to expect. All
+calculations were done with an average of **15 paragraphs per page**, on a
+timeline of **one year**.
+
+| update frequency            | # of new pages | # of records | Algolia plan   |
+| --------------------------- | -------------- | ------------ | -------------- |
+| ~1 new page per week        | ~50            | ~750         | [Community][2] |
+| ~1 new page per day         | ~400           | ~6.000       | [Community][3] |
+| ~2 new pages per day        | ~700           | ~10.500      | [Essential][4] |
+| ~1 new page per hour        | ~8800          | ~132.000     | [Essential][5] |
+| ~1 new page every 5 minutes | ~105.000       | ~1.575.000   | [Plus][6]      |
+| More?                       | More?          | More?        | [Business][7]  |
+
+## One of my records is too big. What can I do?
+
+If you get an error about one of your records being too big, be sure to update
+the plugin to the latest version. We keep improving the plugin with ways of
+making the records smaller.
+
+If you're still having an error, you should check the `.json` log file that has
+been created in your source directory. This will contain the content of the
+record that has been rejected. It might give you hints about what went wrong.
+
+A common cause for this issue often lies in the page HTML. Maybe the HTML is
+malformed (a tag is not closed for example), or instead of several small
+paragraphs there is only one large paragraph. This can cause the parser to take
+the whole page content (instead of small chunks of it) to create the records.
+
+If you don't find where the issue is coming from, feel free to open a [GitHub
+issue][8] with a copy of the log file and we'll be happy to help you.
+
+## How can I tweak the relevance ranking?
+
+The plugin default configuration will rank results based on their textual
+relevance. You can adapt the ranking to fit your needs by using a
+combination of front-matter and Algolia index settings.
+
+For example, if you know some of your blog posts are popular, you might want to
+give them a boost in their ranking. To do so, add a `popular: true` entry to the
+front-matter of such posts. Any custom key added to a front-matter is
+automatically pushed to their corresponding records.
+
+Then, you would have to edit your `_config.yml` file to pass a custom
+`settings.customRanking` value. The `customRanking` is one of the way ranking
+can be configured in an Algolia index and follows a tie-breaking algorithm. You
+can find more information about the way it works either in the [official
+documentation][9] or in [this video][10].
+
+The default `customRanking` used by the plugin is [defined here][11] and use the
+date, weight of the header and position in the page by default. You can
+overwrite it to also take the `popular` flag into account like:
+
+```yml
+algolia:
+  settings:
+    customRanking:
+      - desc(popular)
+      - desc(date)
+      - desc(custom_ranking.heading)
+      - asc(custom_ranking.position)
+```
+
+This will rank popular posts matching your keywords before other posts. You can
+use either boolean or numeric values for the `customRanking`.
+
+[1]: options.html#nodes-to-index
+[2]: https://www.algolia.com/pricing
+[3]: https://www.algolia.com/pricing
+[4]: https://www.algolia.com/pricing
+[5]: https://www.algolia.com/pricing
+[6]: https://www.algolia.com/pricing
+[7]: https://www.algolia.com/pricing
+[8]: https://github.com/algolia/jekyll-algolia/issues
+[9]: https://community.algolia.com/jekyll-algolia/options.html#settings
+[10]: https://www.youtube.com/watch?v=H6crAohtUBw
+[11]:
+  https://github.com/algolia/jekyll-algolia/blob/develop/lib/jekyll/algolia/configurator.rb#L27-L30

docs-src/src/getting-started.md

@@ -7,9 +7,11 @@ layout: content-with-menu.pug
 
 ## Welcome to jekyll-algolia
 
-`jekyll-algolia` is a Jekyll plugin that lets you index all your content in an
+`jekyll-algolia` is a Jekyll plugin that lets you push all your content in an
 Algolia index.
 
+> While this plugin was created by Algolia, it is not an officially supported API client. It is possible that future major versions of Jekyll break compatibility, or require changes.
+
 ## Requirements
 
 You'll need:
@@ -55,8 +57,8 @@ Once you have your credentials, you should define your `application_id` and
 # _config.yml
 
 algolia:
-  application_id: 'your_application_id'
-  index_name:     'your_index_name'
+  application_id: your_application_id
+  index_name:     jekyll # You can replace that with whatever name you want
 ```
 
 ## Usage
@@ -65,7 +67,7 @@ Once your credentials are setup, you can run the indexing by running the
 following command:
 
 ```shell
-ALGOLIA_API_KEY='{your_admin_api_key}' bundle exec jekyll algolia
+ALGOLIA_API_KEY='your_admin_api_key' bundle exec jekyll algolia
 ```
 
 Note that `ALGOLIA_API_KEY` should be set to your admin API key. This key has
@@ -73,10 +75,11 @@ write access to your index so will be able to push new data. This is also why
 you have to set it on the command line and not in the `_config.yml` file: you
 want to keep this key secret and not commit it to your versioning system.
 
-<script type="text/javascript" src="https://asciinema.org/a/VQw3ofNmGXjYs11tneq49PBVc.js" id="asciicast-VQw3ofNmGXjYs11tneq49PBVc" async></script>
+![jekyll algolia command example][6]
 
-_Note that the method can be simplified to `jekyll algolia` by using an
-[alternative way][6] of loading the API key and using [rubygems-bundler][7]._
+_Note that in the animation we simplified the method call to `jekyll algolia` by using an
+[alternative way][7] of loading the API key and using [rubygems-bundler][8] to
+remove the need to add `bundle exec`._
 
 ## Front-end
 
@@ -84,24 +87,26 @@ The plugin only takes care of extracting your data and pushing it to an Algolia
 index. Building the front-end that will allow your users to search into that
 data is not part of the plugin.
 
-As it would depend too much on the theming you applied to Jekyll, we could not
+As it would depend too much on the theme you applied to Jekyll, we could not
 create a one-size-fits-all solution. Instead, the best solution is to use our
-[InstantSearch.js][8] library (also available for [Vue.js][9] and [React][10]).
-It's an easy-to-use set of UI widgets you can use to build your own search in
-a matter of minutes.
-
-You can also head to the [Examples][11] section to see some tutorials
-on the most common use-cases.
+[InstantSearch.js][9] library (also available for [Vue.js][10], [React][11] and
+[Angular][12]). It's an easy-to-use set of UI widgets you can use to build your
+own search in a matter of minutes.
 
+You can follow [this tutorial][13] to see how to add search on the default blog
+theme.
 
 [1]: https://jekyllrb.com/
 [2]: https://www.ruby-lang.org/en/
 [3]: http://bundler.io/
 [4]: https://www.algolia.com/users/sign_up/hacker
-[5]: https://www.algolia.com/licensing
-[6]: ./commandline.html#algolia-api-key-file
-[7]: https://github.com/rvm/rubygems-bundler
-[8]: https://community.algolia.com/instantsearch.js/
-[9]: https://community.algolia.com/vue-instantsearch/
-[10]: https://community.algolia.com/react-instantsearch/
-[11]: ./examples.html
+[5]: https://www.algolia.com/api-keys
+[6]: ./assets/images/getting-started.gif
+[7]: ./commandline.html#algolia-api-key-file
+[8]: https://github.com/rvm/rubygems-bundler
+[9]: https://community.algolia.com/instantsearch.js/
+[10]: https://community.algolia.com/vue-instantsearch/
+[11]: https://community.algolia.com/react-instantsearch/
+[12]: https://community.algolia.com/angular-instantsearch/
+[13]: ./blog.html
+[14]: https://www.algolia.com/press#resources

docs-src/src/github-pages.md

@@ -30,11 +30,11 @@ your GitHub Pages is done.
 Here are the steps to follow to setup your Travis account for your project:
 
 - Go to [travis-ci.org][5] and open an account
-- Click on your avatar and "Accounts"
+- Click on your avatar and "Profile"
 - Find your GitHub repository in the list and activate it
 
 _You should also uncheck the "Build pull request updates" in the options.
-This will avoid re-indexing your date every time you receive a pull request._
+This will avoid re-indexing your data every time you receive a pull request._
 
 ![Travis configuration](./assets/images/travis-config.png)
 
@@ -50,6 +50,8 @@ keeping track of the configuration easier.
 # This file should be at the root of your project
 language: ruby
 cache: bundler
+before_install:
+  - gem install bundler
 script:
   - bundle exec jekyll algolia
 branches:
@@ -68,6 +70,16 @@ You might have to edit the `branches.only` value to either `master` or
 `gh-pages`, depending on which branch is configured to be deployed in your
 GitHub Pages configuration.
 
+### Ignoring vendors
+
+Travis bundles all gems in the `vendor` directory on its servers, which Jekyll
+will mistakenly read. This will likely make the process fail. To avoid this,
+add `vendor` to the `exclude` list in your `_config.yml` file.
+
+```yml
+exclude: [vendor]
+```
+
 ## Adding the API Key
 
 The plugin will need your Admin API key to push data. Because you don't want to

docs-src/src/hooks.md

@@ -14,7 +14,7 @@ but they will also give you much more flexibility.
 
 ### Usage
 
-You'll have to extend the `Jekyll::Algolia` class to overwrite the method
+You'll have to extend the `Jekyll::Algolia::Hooks` class to overwrite the method
 definition of the hooks. The best way to do so is to [add a custom plugin][2] to
 your Jekyll site.
 
@@ -67,20 +67,21 @@ end
 
 ## `before_indexing_each`
 
-This hook will be called on every single record before indexing them. It gives you
-a way to edit the record before pushing it. You can use this hook to add, edit
-or delete keys from the record. If the hook returns `nil`, the
-record will not be indexed.
+This hook will be called on every single record before indexing them. It gives
+you a way to edit the record before pushing it. You can use this hook to add,
+edit or delete keys from the record. If the hook returns `nil`, the record will
+not be indexed.
 
-The hook will receive two arguments: `record` and `node`. `record` is the hash
-of the record, ready to be pushed to Algolia. `node` is a [Nokogiri][5]
-representation of the HTML node the record was extracted from (as specified in
-[nodes_to_index][6].
+The hook will receive three arguments: `record`, `node` and `context`. `record`
+is the hash of the record, ready to be pushed to Algolia. `node` is
+a [Nokogiri][5] representation of the HTML node the record was extracted from
+(as specified in [nodes_to_index][6]). `context` gives more information about
+the whole indexing process (check the following table for more details).
 
 | Key  | Value  |
 | ---- | ---- |
-| Signature | `before_indexing_each(record, node)` |
-| Arguments | <ul><li>`record`: A hash of the record that will be pushed</li><li>`node`: A [Nokogiri][7] representation of the HTML node it was extracted from</li></ul> |
+| Signature | `before_indexing_each(record, node, context)` |
+| Arguments | <ul><li>`record`: A hash of the record that will be pushed</li><li>`node`: A [Nokogiri][7] representation of the HTML node used to extract the content</li><li>`context`: More information about the whole website. <ul><li>`context.data`: Any data defined in the `_data` folder</li><li>`context.config`: Settings defined in  `_config.yml`</li><li>`data.collections`: Custom collections and posts</li></ul></li></ul> |
 | Expected returns | <ul><li>A hash of the record to be indexed</li><li>`nil` if the record should not be indexed</li></ul> |
 
 ### Example
@@ -89,9 +90,9 @@ representation of the HTML node the record was extracted from (as specified in
 module Jekyll
   module Algolia
     module Hooks
-      def self.before_indexing_each(record, node)
+      def self.before_indexing_each(record, node, context)
         # Do not index deprecation warnings
-        return nil if node.attr('class') =~ 'deprecation-notice'
+        return nil if node.matches?('.deprecation-notice')
         # Add my name as an author to each record
         record[:author] = 'Myself'
 
@@ -104,20 +105,22 @@ end
 
 ## `before_indexing_all`
 
-This hook is very similar to [before_index_each][8], but instead of being called
+This hook is similar to [before_index_each][8], but instead of being called
 on every record, it is called only once, on the full list of record, right
 before pushing them.
 
-It will be called with one argument, `records`, being the full list of records
-to be pushed, and expects a list of records to be returned.
+It will be called with two arguments: `records` will be the full list of records
+to be pushed, and `context` will contain more information about the current
+indexing (check the following table for more details). The method expects a list
+of records to be returned.
 
 You can use this hook to add, edit or delete complete records from the list,
 knowing the full context of what is going to be pushed.
 
 | Key  | Value  |
 | ---- | ---- |
-| Signature | `before_indexing_all(records)` |
-| Arguments | <ul><li>`records`: An array of hashes representing the records that are going to be pushed</li></ul> |
+| Signature | `before_indexing_all(records, context)` |
+| Arguments | <ul><li>`records`: An array of hashes representing the records that are going to be pushed</li><li>`context`: More information about the whole website. <ul><li>`context.data`: Any data defined in the `_data` folder</li><li>`context.config`: Settings defined in  `_config.yml`</li><li>`data.collections`: Custom collections and posts</li></ul></li></ul> |
 | Expected returns | <ul><li>An array of hashes to be pushed as records</li></ul> |
 
 ### Example
@@ -126,7 +129,7 @@ knowing the full context of what is going to be pushed.
 module Jekyll
   module Algolia
     module Hooks
-      def self.before_indexing_all(records)
+      def self.before_indexing_all(records, context)
         # Add a tags array to each record
         records.each do |record|
           record[:tags] = []
@@ -143,11 +146,12 @@ module Jekyll
 end
 ```
 
+
 [1]: ./options.html
 [2]: https://jekyllrb.com/docs/plugins/#installing-a-plugin
 [3]: ./options.html#extensions-to-index
 [4]: ./options.html#files-to-exclude
 [5]: http://www.nokogiri.org
 [6]: ./options.html#nodes-to-index
-[7]: http://www.nokogiri.org
+[7]: https://github.com/sparklemotion/nokogiri/wiki/Cheat-sheet
 [8]: hooks.html#hook-before-indexing-each

docs-src/src/how-it-works.md

@@ -5,6 +5,12 @@ layout: content-with-menu.pug
 
 # How does this work?
 
+This page will give you a bit more insight about how the internals of the plugin
+are working. This should give you more context to better understand the options
+you can configure.
+
+## Extracting data
+
 The plugin will work like a `jekyll build` run, but instead of writing `.html`
 files to disk, it will push content to Algolia. It will go through each file
 Jekyll would have processed in a regular build: pages, posts and collections.
@@ -22,24 +28,19 @@ Here is an example of what a record looks like:
   "title": "New experimental version of Hacker News Search built with Algolia",
   "type": "post",
   "url": "/2015/01/12/try-new-experimental-version-hn-search.html",
-  "draft": false,
-  "layout": "post",
-  "ext": ".md",
   "date": 1421017200,
   "excerpt_html": "<p>Exactly a year ago, we began to power […]</p>",
   "excerpt_text": "Exactly a year ago, we began to power […]",
   "slug": "try-new-experimental-version-hn-search",
 
   "html": "<p>We've learned a lot from your comments […]</p>",
-  "text": "We've learned a lot from your comments […]",
-  "tag_name": "p",
-  "hierarchy": {
-    "lvl0": null,
-    "lvl1": "Applying more UI best practices",
-    "lvl2": "Focus on readability",
-  },
+  "content": "We've learned a lot from your comments […]",
+  "headings": [
+    "Applying more UI best practices",
+    "Focus on readability"
+  ],
   "anchor": "focus-on-readability",
-  "weight": {
+  "custom_ranking": {
     "position": 8,
     "heading": 70
   }
@@ -49,19 +50,37 @@ Here is an example of what a record looks like:
 Each record created that way will contain a mix of shared data and specific
 data. Shared data is the metadata of the page it was extracted from (`title`,
 `slug`, `url`, `tags`, etc, as well as any custom field added to the
-front-matter). Specific data is the paragraph content, and information
-about its position in the page (where its situated in the hierarchy of headings
-in the page).
+front-matter). Specific data is the paragraph content and, if applicable, the
+list of parent headings (based on the `<h1>` and `<h6>` of the page).
 
-Once displayed, results are grouped so only the best matching paragraph of each
-page is returned for a specific query. This greatly improves the perceived
-relevance of the search results.
+Using the [distinct setting][1] of the Algolia API, the best matching
+paragraph of each page is returned for a specific query. This greatly improves
+the perceived relevance of the search results as you can highlight specifically
+the part that was matching.
 
-Because the plugin is splitting each page into smaller chunks, it can be hard to get
-an estimate of how many records will actually be pushed. The plugin tries to be
-smart and consume as less operations as possible, but you can always run it in
-`--dry-run` mode to better understand what it would do.
+Also note that the response you'll get from the API might be enriched with
+[\_highlightResult][2] and [\_snippetResult][3] keys. Those keys are
+automatically added when performing a search and are not part of the saved
+record.
 
-<div class="m-l-r-auto">
-  <script type="text/javascript" src="https://asciinema.org/a/FSuwJWRZR3g7S5JUYg8nySwXe.js" id="asciicast-FSuwJWRZR3g7S5JUYg8nySwXe" async></script>
-</div>
+## Pushing data
+
+The plugin tries to be smart by using as less operations as possible, to be
+mindful of your Algolia quota. Whenever you run `jekyll algolia`, records
+that changed since your last push will be updated.
+
+This is made possible because each record is attributed a unique `objectID`,
+computed as a hash of the actual content of the record. Whenever the content of
+the record changes, its `objectID` will change as well. This allows us to
+compare what is available in your index and what is about to be
+pushed, to update what actually changed.
+
+Previous outdated records will be deleted, and new updated records will be added
+instead. All those operations are grouped into a batch call, making sure that
+the changes are done atomically: your index will never be in an inconsistent
+state where records are partially updated.
+
+
+[1]: https://www.algolia.com/doc/guides/ranking/distinct/?language=ruby#distinct-to-index-large-records
+[2]: https://www.algolia.com/doc/api-reference/api-methods/search/?language=ruby#method-response-_highlightresult
+[3]: https://www.algolia.com/doc/api-reference/api-methods/search/?language=ruby#method-response-_snippetresult

docs-src/src/includes/mixins.pug

@@ -0,0 +1,25 @@
+mixin feature(options)
+  - var title = options.title
+  - var image = options.image || './assets/images/placeholder.png'
+  - var isFlipped = options.flip || false
+  section.row.p-xlarge.m-l-none.m-r-none.pos-rel
+    .container
+      .inline.spacer40.hidden-sm
+      .col-md-12.z-10
+        if isFlipped === false
+          .col-md-6.hidden-sm
+            img.section-illustration(src=image, alt=title, width="525")
+
+        .col-md-6.p-r-xlarge
+          header
+            h3.no-p-t.m-t-none.text-thin=title
+          .spacer16.visible-sm
+          img.section-illustration.visible-sm(src=image, alt=title, width="525")
+          .spacer24
+          p.color-east-bay.text-regular.text-normal 
+            block
+          .spacer24
+
+        if isFlipped === true
+          .col-md-6.hidden-sm
+            img.section-illustration(src=image, alt=title, width="525")

docs-src/src/index.md

@@ -1,8 +1,6 @@
 ---
-title: ⚡ Homepage
-layout: single-column.pug
+title: Algolia for Jekyll
+layout: index.pug
 ---
 
-# Homepage
-
-Hello you!
+<!-- the content is in layouts/index.pug -->

docs-src/src/indexing-modes.md

@@ -1,66 +0,0 @@
----
-title: Indexing modes
-layout: content-with-menu.pug
----
-
-# Indexing modes
-
-Algolia's pricing model is based on the number of records you have in your index
-as well as the number of add/edit/delete operations you operate on your index
-per month.
-
-The plugin tries to be mindful of your quotaes and act in a smart way by
-default: only updating records if they changed.
-
-Because of the nature of Jekyll (having no state, regenerating everything on
-each build), doing a sync between local data and remote index requires some
-assumptions, and comes with a some drawbacks.
-
-This page will list the different `indexing_modes` that can be configured,
-explaining their pros and cons so you can pick the one that best suits your
-needs.
-
-## `diff` (default)
-
-Using the default `diff` mode, the plugin will try to be smart when pushing
-content to your index: it will delete old the records and add new ones. All
-records that didn't change will stay untouched.
-
-To do so, it first grabs the list of all records in your index, then compares
-them with the records generated locally. It then deletes the old records that no
-longer exists, and add the newly created ones.
-
-### Pros
-
-It will consume a small number of **operations** on your Algolia quota. Only
-changed content will be updated, the rest will be untouched.
-
-### Cons
-
-All operations will be done on the same index, sequentially. Old records will
-first be discarded, then new ones will be added. Users doing a search on your
-website during the update will have inconsistent or incomplete results
-
-## `atomic`
-
-The `atomic` mode solves the inconsistency issue of the `diff` mode. Instead of
-doing all changes in sequence on the same index, the updates will be done on
-a temporary index in the background.
-
-The plugin will push all records to a temporary index. Once everything is
-pushed, it will replace the current index with the temporary one in one atomic
-move.
-
-### Pros
-
-The moment the update is finished, all the users now search into the new version
-of your data. Users either search into the old version, or the new version, but
-never in an inconsistent state that was a mix of both.
-
-### Cons
-
-It consumes a lot of **operations** as the plugin actually pushes **all**
-records to a temporary index on each call. It also requires that you have a plan
-that can hold **twice the number of records**: during the update you'll have
-both the old index and the temporary one on your account.
-

docs-src/src/layouts/common/footer.pug

@@ -9,7 +9,7 @@ section.footer-new-cta.footer-new.h300.pos-rel
           span.cf.hidden-xs
           | no strings attached.
         p
-          | Dive into Algolia with our 14-day trial - No credit card required. Plenty of time to see how Algolia can change your business.
+          | Dive into Algolia with our forever-free Community plan. No credit card required and up to 10k records to give us a spin.
     .col-md-7.pos-rel.z-10
       .spacer120.inline.hidden-sm
       .spacer32.inline.hidden-sm
@@ -17,10 +17,9 @@ section.footer-new-cta.footer-new.h300.pos-rel
       .button-holder.h200.p-r-large
         .spacer16.hidden-md.hidden-sm
         span.inline.pos-rel
-          a.btn.btn-static-primary.btn-static-shadow-dark(href='https://algolia.com/users/sign_up')
+          a.btn.btn-static-primary.btn-static-shadow-dark(href='https://www.algolia.com/users/sign_up/hacker')
             | Get Started
-            svg.arrow-icon(width="22")
-              use(xlink:href="#arrow-right")
+            i.icon.icon-arrow-right.color-bunting.m-l-small
 
           svg.search-icon(width="22")
             use(xlink:href="#search-icon")

docs-src/src/layouts/common/header.pug

@@ -1,9 +1,8 @@
-- var long_desc = "Jekyll plugin to automatically index your content on Algolia."
 - var project = "Algolia for Jekyll"
-- var image = "https://res.cloudinary.com/hilnmyskv/image/upload/v1502375309/InstantSearch-React-OG_zbf1tb.png"
 - var url = "https://community.algolia.com/jekyll-algolia/"
-- var project_desc = project + " - " + description
-- var short_desc = "Search your Jekyll content with Algolia"
+- var image = "https://community.algolia.com/jekyll-algolia/assets/images/card.png"
+- var long_desc = "Add fast and relevant search to your Jekyll site"
+- var short_desc = "Add fast and relevant search to your Jekyll site"
 
 base(href=publicPath)
 meta(content='IE=edge', http-equiv='X-UA-Compatible')

docs-src/src/layouts/common/meta.pug

@@ -1,3 +1,5 @@
+include ../../includes/mixins
+
 doctype html
 html(lang="en")
   head
@@ -5,7 +7,7 @@ html(lang="en")
 
   body
     div !{header}
-    .spacer64
+    .spacer56
     block body
 
   include ./footer.pug
@@ -13,3 +15,4 @@ html(lang="en")
   script(src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js")
   script(src=webpack.assets['js/common.js'])
   script(src=webpack.assets['js/main.js'])
+  script(src=webpack.assets['js/freezeGifs.js'])

docs-src/src/layouts/index.pug

@@ -0,0 +1,105 @@
+extends ./common/meta.pug
+
+block body
+
+  section.hero.pos-rel
+    .spacer32.visible-sm
+    .flex-container.hero-top.container
+      .flex-it-2.flex-it-1-sm.flex-container.flex-center
+        .flex-none.flex-it-1-sm
+          .text-heading.color-titan-white.text-bold Algolia for Jekyll
+          .color-titan-white.text-regular.text-thin Add fast and relevant search to your Jekyll site
+          .spacer32
+          a.btn.color-purple-heart.fill-titan-white.text-bold.elevation0.m-t-large.p-small.p-l-xlarge.p-r-xlarge.h-auto(href="getting-started.html").
+            <span class="gradient-blue-purple gradient-text">Read the documentation</span><i class="icon icon-arrow-right m-l-small"></i>
+      .flex-it-2.flex-it-1-sm.flex-row-center-horizontal
+        .flex-none
+          .spacer64
+          .relative
+            img.hero-markdown(src="./assets/images/markdown.svg")
+            .hero-animated
+              img.js-freeze.w100p.radius6.elevation2.pos-rel.z-20(src="http://res.cloudinary.com/hilnmyskv/image/upload/v1516723333/minima-search_ay0ezw.gif")
+    .spacer120.visible-sm
+    .spacer40.visible-sm
+    .flex-container.hero-bottom
+      .flex-it-2.flex-it-1-sm.flex-dir-col.p-xlarge.pos-rel.z-10
+        .flex-none.align-right.text-lg Demo
+        .spacer16
+        .flex-container.flex-dir-row.flex-row-align-right
+          a.flex-none.m-r-large.color-bunting.p-r-large.p-l-large.p-t-small.p-b-small.radius6.fill-athens-gray(href="https://github.com/algolia/jekyll-algolia")
+            i.icon.icon-github.m-r-small
+            | GitHub
+          a.flex-none.color-bunting.p-r-large.p-l-large.p-t-small.p-b-small.radius6.fill-athens-gray(href="https://community.algolia.com/jekyll-algolia-example/")
+            i.icon.icon-play.m-r-small
+            | Live Demo
+
+  section.section-intro.pos-rel
+    .spacer120.hidden-sm
+    .spacer40.visible-sm
+    .container.z-10.pos-rel
+      .row.m600.m-l-r-auto.text-center
+        h3.text-thin.text-lg Automatic Indexing
+        .spacer16
+        p.color-logan.text-regular.text-normal
+          | Plug in your Algolia API keys and run #[code jekyll algolia]. The plugin will
+          | traverse all your posts, pages and custom collections and push them to
+          | your index.
+
+      .spacer16
+      .row.m600.m-l-r-auto
+        pre.home-code
+          .color-bunting.
+            <span class="text-bold">$</span> <span class="color-royal-blue">bundle exec</span> <span class="color-radical-red text-bold">jekyll algolia</span>
+            <span class="text-bold">~</span> Configuration file: <span class="color-royal-blue">/home/user/jekyll-website/_config.yml</span>
+            <span class="text-bold">~</span> Processing site...
+            <span class="text-bold">~</span> Extracting records...
+            <span class="text-bold">~</span> Updating records in index <span class="color-royal-blue">jekyll-website</span>...
+            <span class="text-bold">~</span> Pushing <span class="color-radical-red text-bold">822</span> records
+            <span class="color-royal-blue text-bold">✔</span> Indexing complete
+
+  section.section-explain.fill-titan.pos-rel
+    .container.z-10
+      .col-md-12.col-sm-12.home-funnel
+        .spacer120.visible-sm
+        .spacer120.visible-sm
+        .col-md-5.col-sm-5
+          .card.pos-rel.z-10.funnel-extensible
+            .pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge
+              h2.text-lg.text-thin.m-t-none Extensible
+              .spacer8
+              p.text-regular.text-thin.color-east-bay
+                | Customize which files are indexed and many other behaviors using
+                | a variety of configuration options. You can even add your own
+                | custom Ruby hooks into the plugin lifecycle to get the exact
+                | output you want.
+
+        .col-md-2.col-sm-2.pos-rel.h700.hidden-sm.z-2
+          p#text-lines.w100p.m-l-n-small.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita.
+
+        .col-md-2.col-sm-2.pos-rel.visible-sm
+          p#text-lines.w100p.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa
+
+
+        .col-md-5.col-sm-5
+          .card.pos-rel.funnel-incremental
+            .pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge
+              h2.text-lg.text-thin.m-t-none Incremental
+              .spacer8
+              p.text-regular.text-thin.color-east-bay
+                | The plugin is smart enough to only index content that changed
+                | between two runs. This helps make the most out of your Algolia
+                | quota.
+  section.section-conclusion.fill-white.pos-rel
+    .spacer48.hidden-sm
+    .spacer64.visible-sm
+    .container.pos-rel.z-10
+      .row.m600.m-l-r-auto.text-center
+        h3.text-thin.text-lg Index on deploy
+        .spacer16
+        p.color-logan.text-regular.text-normal
+          | If your website is hosted on Netlify or GitHub Pages, the plugin can
+          | automatically re-index your content on each deploy. This keeps your search
+          | and your site in sync!
+
+    .spacer120
+    .spacer120.hidden-sm

docs-src/src/migration-guide.md

@@ -0,0 +1,121 @@
+---
+title: Migration guide
+layout: content-with-menu.pug
+---
+
+# Migrating from `algoliasearch-jekyll`
+
+If you're using the previous `algoliasearch-jekyll` gem, and would
+like to migrate to the new `jekyll-algolia`, this guide will help you through
+the migration process.
+
+## Renaming
+
+Most of the changes you'll have to do to migrate is to rename configuration
+settings.
+
+The most obvious one being that the gem is now called `jekyll-algolia` and not
+`algoliasearch-jekyll`. You should update your `Gemfile` to add the
+`jekyll-algolia` gem to the `:jekyll_plugin` group, like this:
+
+```ruby
+source 'https://rubygems.org'
+
+gem 'jekyll', '~> 3.6'
+
+group :jekyll_plugins do
+  gem 'jekyll-algolia'
+end
+```
+
+Note that you no longer need to add the plugin to the list of `plugins` in your
+`_config.yml`, this is now taken care of at the `Gemfile` level. The other
+important change is that the new version requires at least Ruby 2.3 and Jekyll
+3.6 to work.
+
+The command to run the plugin has been simplified from `jekyll algolia push` to
+`jekyll algolia`.
+
+## Options
+
+All the previous option and behaviors are still available, but their names have
+been changed:
+
+`excluded_files` has been renamed to [files_to_exclude][1],
+`record_css_selector` to [nodes_to_index][2] and `allowed_extensions` to
+[extensions_to_index][3].  Note that for the last one, it now expects
+a comma-separated list of extensions.
+
+The `lazy_update` option does not exist anymore. The new indexing mode is
+equal to `lazy_update: true`. Only records that changed between the current
+build and the previous one will be updated, and it will even be done in an
+atomic way (all in one go).
+
+## Hooks
+
+All three hooks (`custom_hook_excluded_file?`, `custom_hook_each` and
+`custom_hook_all`) are still here, but they have been renamed to
+[should_be_excluded?][4], [before_indexing_each][5] and [before_indexing_all][6].
+
+They all have the same behavior and expect the same arguments as before, but
+should now extend the `Jekyll::Algolia::Hooks` module. It means that the file
+you used to define them should now look like this:
+
+```ruby
+module Jekyll
+  module Algolia
+    module Hooks
+    # Add your hooks here
+    end
+  end
+end
+```
+
+You can find the complete documentation on the [dedicated page][7].
+
+## Records
+
+Records extracted from Jekyll have the same structure as before, except that the
+`text` key has been renamed to `content`.
+
+Here is an example of a record extracted by the plugin:
+
+```json
+{
+  "objectID": "e2dd8dd1eaaf961baa6da4de309628e9",
+  "title": "New experimental version of Hacker News Search built with Algolia",
+  "type": "post",
+  "url": "/2015/01/12/try-new-experimental-version-hn-search.html",
+  "date": 1421017200,
+  "excerpt_html": "<p>Exactly a year ago, we began to power […]</p>",
+  "excerpt_text": "Exactly a year ago, we began to power […]",
+  "slug": "try-new-experimental-version-hn-search",
+
+  "html": "<p>We've learned a lot from your comments […]</p>",
+  "content": "We've learned a lot from your comments […]",
+  "headings": [
+    "Applying more UI best practices",
+    "Focus on readability"
+  ],
+  "anchor": "focus-on-readability",
+  "custom_ranking": {
+    "position": 8,
+    "heading": 70
+  }
+}
+```
+
+## Need more help?
+
+If you need more help migrating from the previous plugin to this new version,
+you can [file an issue][8] on the GitHub repo and we'll do our best to help you.
+
+
+[1]: ./options.html#files-to-exclude
+[2]: ./options.html#nodes-to-index
+[3]: ./options.html#extensions-to-index
+[4]: ./hooks.html#should-be-excluded
+[5]: ./hooks.html#before-indexing-each
+[6]: ./hooks.html#before-indexing-all
+[7]: ./hooks.html
+[8]: https://github.com/algolia/jekyll-algolia/issues

docs-src/src/netlify.md

@@ -37,7 +37,8 @@ will make its management easier.
 
 This file will be read by Netlify on each push to your repo. Because you have
 a `Gemfile` in your project, Netlify will automatically detect that it's a Ruby
-project and will setup Bundler for you.
+project and will setup Bundler for you, making the use of `bundle exec`
+optional.
 
 It will then run the defined `command`, building the website and then pushing
 records to Algolia. Once done, the directory specified in `publish` will be

docs-src/src/options.md

@@ -20,22 +20,27 @@ indexed.
 
 By default, all HTML and markdown source files will be indexed.
 
-If you are using another markup language (such as [AsciiDoc][2] or [Textile][3],
+If you are using another markup language (such as [AsciiDoc][2] or [Textile][3]),
 you might want to update the value like this:
 
 ```yml
 algolia:
   # Also index AsciiDoc and Textile files
-  extensions_to_index: 'html,md,adoc,textile'
+  extensions_to_index:
+    - html
+    - md
+    - adoc
+    - textile
 ```
 
 ## `files_to_exclude`
 
-This option lets you define a blacklist of source files you don't want to index.
+This option lets you define a list of source files you don't want to index.
 
-By default it will exclude all the `index.html` and `index.md` files. Those
-files are usually not containing much text (landing pages) or containing
-redundant text (latest blog articles) so they are not included by default.
+By default it will exclude the `index.html` and `index.md` files found at the
+root. Those files are usually not containing much text (landing pages) or
+containing redundant text (latest blog articles) so they are not included by
+default.
 
 If you want to index those files, you should set the value to an empty array.
 
@@ -46,7 +51,7 @@ algolia:
 ```
 
 If you want to exclude more files, you should add them to the array. Note that
-you can use glob patterns to exclude several files at once.
+you can use glob patterns (`*` and `**`) to exclude several files at once.
 
 ```yml
 algolia:
@@ -57,6 +62,7 @@ algolia:
     - excluded-file.html
     - _posts/2017-01-20-date-to-forget.md
     - subdirectory/*.html
+    - **/*.tmp.html
 ```
 
 _Note that some files (pagination pages, static assets, etc) will **always** be
@@ -80,12 +86,6 @@ algolia:
   nodes_to_index: 'p,blockquote,li,div.paragraph'
 ```
 
-## `indexing_mode`
-
-This option will let you choose the strategy used to sync your data with your
-Algolia index. The default value should work for most cases, but feel free to
-[read the pros and cons][4] of each and pick the one best suited for your needs.
-
 ## `settings`
 
 This option let you pass specific settings to your Algolia index.
@@ -93,7 +93,7 @@ This option let you pass specific settings to your Algolia index.
 By default the plugin will configure your Algolia index with settings tailored
 to the format of the extracted records. You are of course free to overwrite
 them or configure them as best suits your needs. Every option passed to the
-`settings` entry will be set as [settings to your index][5].
+`settings` entry will be set as [setting to your index][4].
 
 For example if you want to change the HTML tag used for the highlighting, you
 can overwrite it like this:
@@ -105,14 +105,30 @@ algolia:
     highlightPostTag: '</em>'
 ```
 
+Settings defined here will take precedence over any setting you manually defined
+through the [Algolia dashboard][5] UI, though. If you'd like this not to happen
+at all, and only take the dashboard settings in account, pass `false` to the
+settings configuration.
+
+```yml
+algolia:
+  settings: false
+```
+
+We suggest users to at least run with the default settings once, so that the default
+relevance settings are set, which you can override via the dashboard after.
+
 ## `indexing_batch_size`
 
-The Algolia API allows you to send batches of changes to add or update several
-records at once, instead of doing one HTTP call per record. The plugin will
-batch updates by groups of 1000 records by default.
+This option defines the number of operations that will be grouped as part of one
+updating batch. All operations of one batch are applied atomically. The default
+value is `1000`.
 
-If you are on an unstable internet connection, you might want to decrease the
-value. You will send more batches, but each will be smaller in size.
+You might want to increase this value if you are doing a lot of updates on each
+run and still want to have your changes done atomically.
+
+You might want to decrease this value if you're using an unstable internet
+connection. Smaller batches are easier to send that large ones.
 
 ```yml
 algolia:
@@ -120,8 +136,27 @@ algolia:
   indexing_batch_size: 500
 ```
 
+## `max_record_size`
+
+**This is an advanced option. It has no effect on Community plans.**
+
+If you're using a paid Algolia plan, you can push records that weight up to 20Kb
+(as opposed to 10Kb with the free Community plan). This option allows you to
+adjust the maximum size of one record (in bytes).
+
+```yml
+algolia:
+  # Recommended setting for paid plans
+  max_record_size: 20000
+```
+
+_Note that if you push a record that is larger than your allowed limit,
+the push will be rejected by the API. This might result in incomplete data being
+uploaded._
+
+
 [1]: ./how-it-works.html
 [2]: http://www.methods.co.nz/asciidoc/
 [3]: https://github.com/textile
-[4]: ./indexing-modes.html
-[5]: https://www.algolia.com/doc/api-reference/api-methods/set-settings/?language=ruby#set-settings
+[4]: https://www.algolia.com/doc/api-reference/api-methods/set-settings/?language=ruby#set-settings
+[5]: https://www.algolia.com/dashboard

docs-src/src/stylesheets/components/_documentation.scss

@@ -127,11 +127,7 @@ $offset-height: 64px;
         li {
           line-height: 26px;
 
-          &:before {
-            content: '-';
-            float: left;
-            margin-right: 6px;
-            color: $logan; } } } }
+           } } }
 
     .content {
       position: relative;

docs-src/src/stylesheets/index.scss

@@ -7,7 +7,7 @@
 @import 'modules/mixins';
 
 @import 'components/navigation';
-@import 'components/hero';
+// @import 'components/hero';
 @import 'components/medias';
 @import 'components/icons';
 @import 'components/buttons';
@@ -16,9 +16,10 @@
 @import 'components/sidebar';
 @import 'components/code-snippets';
 @import 'components/code-highlighting';
+@import 'partials/helpers';
 
 
-@import 'pages/home';
+@import 'pages/index';
 @import 'pages/examples';
 
 
@@ -31,3 +32,22 @@
 .absolute { position: absolute; }
 .relative { position: relative; }
 .fixed { position: fixed; }
+.bottom-0 { bottom: 0; }
+
+.flex-none { flex: none; }
+.flex-auto { flex: 1 1 auto; min-width: 0; min-height: 0; }
+.flex-row-center-vertical { display: flex; align-items: center; }
+.flex-row-center-horizontal { display: flex; justify-content: center; }
+.flex-column-center-vertical { display: flex; justify-content: center; }
+.flex-column-center-horizontal { display: flex; align-items: center; }
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.flex-row-align-left { justify-content: flex-start; }
+.flex-row-align-right { justify-content: flex-end; }
+.flex-column-align-top { justify-content: flex-start; }
+.flex-column-align-bottom { justify-content: flex-end; }
+
+.w50 { width: 50%; }
+.w75 { width: 75%; }
+.color-titan-white { color: $titan-white; }
+.fill-titan-white { background-color: $titan-white; }
+.align-right { text-align: right; }

docs-src/src/stylesheets/modules/_mixins.scss

@@ -242,3 +242,8 @@
         transform: none;
         opacity: 1; } } } }
 
+@keyframes floating {
+    from { transform: translate(0,  0px); }
+    65%  { transform: translate(0, 15px); }
+    to   { transform: translate(0, -0px); }
+}

docs-src/src/stylesheets/pages/_home.scss

@@ -1,218 +0,0 @@
-a {
-  color: #00A7FF; }
-
-.home {
-  @media (max-width: $screen-md) {
-    .btn-static-theme {
-      margin: auto;
-      display: block; } }
-  h3 {
-    font-size: 32px; } }
-
-.screen-mockup {
-  top: -260px;
-  img {
-    @media (max-width: $screen-lg) {
-      width: 50vw !important; } }
-
-  @media (max-height: 730px) {
-    top: -120px; }
-
-  @media (max-width: $screen-sm) {
-    top: -180px;
-    img {
-      max-width: 80% !important;
-      width: inherit !important; } } }
-
-.section-best-practices {
-  @media (max-width: $screen-sm) {
-    .img-responsive {
-      top: 100px; } } }
-
-.section-infinite-possibilities {
-  @include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after) {
-    top: -80px;
-    left: 0; } }
-
-.section-framework {
-  @include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after) {
-    top: -80px;
-    left: 0; }
-
-  .phone_illustration,
-  .computer_illustration {
-    position: absolute; }
-
-  .computer_illustration {
-    max-width: 720px;
-    display: block;
-    left: -200px; }
-
-  .phone_illustration {
-    z-index: 4;
-    max-width: 200px;
-    left: 50%;
-    top: 50px; }
-
-  @media (max-width: $screen-sm) {
-    .phone_illustration,
-    .computer_illustration {
-      transform: scale(0.5); } } }
-
-.start-section {
-  @include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after) {
-    top: -80px;
-    left: 0; }
-
-  a {
-    text-decoration: none; }
-
-  a:hover span {
-    text-decoration: underline; }
-
-  .container .col-md-12 {
-    transform-style: preserve-3d;
-    perspective: 1030px;
-
-    .row {
-      @media (max-width: $screen-sm) {
-        height: auto !important; } } }
-
-  .card {
-    margin: auto;
-    width: 100%;
-    top: 0;
-    left: 0;
-
-    @media (max-width: $screen-md) {
-      transform: none !important; } } }
-
-
-.section-live {
-  a {
-    color: inherit;
-
-    &:hover {
-      text-decoration: none; } }
-
-  .flex-it-3:hover .p-large {
-    background: #f7f7f7 !important; }
-
-  .flex-container {
-    padding: 0; }
-
-  @media (max-width: $screen-sm) {
-    .flex-it-3 {
-      flex: 0 1 100%; } } }
-
-.discover-section {
-  @include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after) {
-    top: -80px;
-    left: 0; }
-  .card {
-    line-height: 60px; }
-
-  .card:hover {
-    background: $titan-white !important; }
-
-  @media (max-width: $screen-sm) {
-    .logos-container {
-      height: auto !important; }
-
-    .card {
-      margin-bottom: 1em; }
-
-    .col-md-12 .col-md-4,
-    .mobile-projects {
-      padding: 0; } } }
-
-
-
-.content {
-  .btn {
-    @media (max-width: $screen-sm) {
-      margin: auto;
-      display: block;
-      max-width: 280px; }
-
-    @media (max-width: $screen-xs) {
-      width: 100%; } } }
-
-.home {
-  &.content {
-    margin-bottom: 300px; }
-
-  @media (max-width: $screen-sm) {
-    .container,
-    .col-md-12,
-    .col-md-6,
-    .col-md-8.col-md-offset-2,
-    .col-md-10.col-md-offset-2 {
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-      max-width: 100%; }
-    .col-md-10.col-md-offset-2 .m-l-large {
-      margin-left: 0 !important; }
-    .col-md-12.row {
-      margin: 0 !important; }
-
-    .section-illustration {
-      display: block;
-      max-width: 80%;
-      margin: 2em auto; }
-
-    h3, p {
-      text-align: center; }
-
-    .screen-mockup img {
-      max-width: 600px; } } }
-
-.algc-navigation .algc-navigation__container {
-  max-width: 1140px; }
-
-
-
-
-
-/// List
-ul.subtle-check-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  width: 200px;
-  position: absolute;
-  z-index: 9;
-  right: 20px;
-  width: 170px;
-  top: 140px;
-
-  li {
-    display: inline-block;
-    width: 100%;
-    color: #00aeff;
-    font-weight: 400;
-    padding: 0 16px;
-    height: 40px;
-    min-width: 150px;
-    margin-bottom: 20px;
-    line-height: 40px;
-    clear: both;
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 18px;
-    -webkit-box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2);
-    box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2);
-    text-transform: uppercase;
-
-    svg {
-      width: 12px;
-      height: 36px;
-      float: right;
-
-      use {
-        fill: $purple-heart;
-        width: 12px; } } }
-
-  @media (max-width: $screen-sm) {
-    left: 0;
-    right: 0;
-    margin: auto; } }

docs-src/src/stylesheets/pages/_index.scss

@@ -0,0 +1,358 @@
+.container {
+  padding: 0;
+  margin: auto;
+}
+
+
+@media (max-width: $screen-sm) {
+  .row {
+    margin: 0;
+    padding: 0 1em;
+  }
+}
+
+.hero {
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 290px;
+    background: #fff;
+    transform: skewY(-4deg);
+    bottom: -90px;
+    z-index: 2;
+  }
+  background-image:
+    url(../assets/images/aerial-background-top.svg),
+    url(../assets/images/aerial-background-bottom.svg),
+    linear-gradient(to bottom, rgba(62, 56, 107, 0), #0e0740),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)),
+    linear-gradient(#413b7e, #413b7e);
+  background-repeat: no-repeat, no-repeat;
+  background-position: top left, bottom left;
+  background-size: 100%, 100%;
+
+  @media (max-width: $screen-sm) {
+    text-align: center;
+  }
+}
+
+.hero-top {
+  height: 544px;
+
+  @media (max-width: $screen-sm) {
+    flex-flow: row wrap;
+
+    .text-heading {
+      font-size: 28px;
+    }
+  }
+
+  @media (max-width: $screen-lg) {
+
+    .text-heading {
+      font-size: 36px;
+    }
+  }
+}
+
+.hero-animated {
+  position: absolute;
+  width: 560px;
+  left: -110px;
+  top: 150px;
+
+  @media (max-width: $screen-sm) {
+    width: 100% !important;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  @media (max-width: $screen-lg) {
+    width: 420px;
+    left: 0;
+  }
+
+  @media (max-width: $screen-md) {
+    width: 360px;
+    left: 0;
+  }
+
+  &:before,
+  &:after {
+    content:'';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(62,57,107, 0.4) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g fill="none" fill-rule="evenodd"><circle cx="75" cy="75" r="70" stroke="%23FFF" stroke-width="6"/><path fill="%23FFF" d="M106 75l-47 25V50z"/></g></svg>');
+    background-size:  150px;
+    background-repeat: no-repeat;
+    background-position:  center center, center center;
+    z-index: 25;
+    border-radius: 6px;
+  }
+
+  &:before {
+    background: url(http://res.cloudinary.com/hilnmyskv/image/upload/q_10/v1516723333/minima-search_ay0ezw.png);
+    background-size: 100%;
+    z-index: 24;
+  }
+
+  &:hover:before,
+  &:hover:after {
+    display: none;
+  }
+}
+
+
+.hero-bottom {
+  @media (max-width: $screen-sm) {
+    text-align: center;
+
+    .align-right {
+      text-align: center;
+    }
+
+    .flex-row-align-right {
+      justify-content: center;
+    }
+  }
+}
+
+.home-code {
+  color: $logan;
+  background-color: white;
+  border-radius: 0;
+  border: 0;
+  line-height: 2;
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.8) 100%),
+  }
+}
+// Section explain
+.section-intro {
+
+  @media (max-width: $screen-sm) {
+    .row.m600 {
+      max-width: 100%;
+      text-align: left;
+    }
+  }
+}
+
+.home-code {
+  @media (max-width: $screen-sm) {
+    font-size: 12px;
+    max-width: 100%;
+  }
+}
+
+// Section explain
+.section-explain {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 240px;
+    background: white;
+    transform: skewY(-4deg);
+    top: -90px;
+    z-index: 2;
+  }
+}
+
+.home-funnel {
+  height: 825px;
+
+  @media (max-width: $screen-sm) {
+    height: 1400px;
+
+    .col-md-5:not(:last-child) {
+      &:before {
+        content: '';
+        display: block;
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        z-index: 20;
+        top: -350px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background: url(../assets/images/illu-funnel.svg) no-repeat calc(50% + 10px) center / contain;
+      }
+    }
+
+    .col-md-5:last-child {
+      margin-top: 110px;
+      &:before {
+        content: '';
+        display: block;
+        width: 300px;
+        height: 200px;
+        position: absolute;
+        z-index: 20;
+        bottom: -350px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background: url(../assets/images/servers.svg) no-repeat center center / contain;
+      }
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background:
+      url(../assets/images/illu-funnel.svg) center 0% no-repeat,
+      url(../assets/images/touch-point.svg) calc(50% - 10px) 285px no-repeat,
+      url(../assets/images/touch-point.svg) calc(50% - 10px) 435px no-repeat,
+      url(../assets/images/servers.svg) center 100% no-repeat;
+    pointer-events: none;
+    z-index: 10;
+
+    @media (max-width: $screen-sm) {
+      background: none
+    }
+  }
+}
+.funnel-extensible {
+  margin-top: 240px;
+  @media (max-width: $screen-sm) {
+    margin-top: 200px;
+  }
+}
+.funnel-incremental {
+  margin-top: 420px;
+
+  @media (max-width: $screen-sm) {
+    margin-top: 80px;
+    margin-bottom: 120px;
+  }
+}
+
+#text-lines {
+  position: absolute;
+  width: 640px;
+  line-height: 1.1;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
+  transform: translate(-50%, -50%) rotate(-90deg);
+
+  &:after {
+    z-index: 10;
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, #f8faff 0%, rgba(#f8faff, 0) 30%,  #f8faff 80%);
+    top: 0;
+    left: 0;
+  }
+
+  @media (max-width: $screen-sm) {
+    width: 1000px;
+
+    &:after {
+      background: linear-gradient(to right, #f8faff, rgba(#f8faff, 0) 10%, #f8faff)
+    }
+  }
+}
+
+
+.card {
+  &:after {
+    content: '';
+    display: block;
+    height: 1px;
+    width: 140px;
+    background: rgba(#01adff, 0.2);
+    position: absolute;
+    top: 35%;
+    right: -100px;
+    z-index: 0;
+  }
+
+  @media (max-width: $screen-sm) {
+    &:after {
+      display: none;
+    }
+    &:before {
+      content: '';
+      display: block;
+      width: 100px;
+      height: 100px;
+      position: absolute;
+      z-index: 20;
+      top: -50px;
+      left: 0;
+      right: 0;
+      margin: auto;
+      background: url(../assets/images/touch-point.svg)no-repeat center center / contain;
+    }
+  }
+
+  &.funnel-incremental{
+    &:after {
+      right: inherit;
+      left: -120px;
+    }
+
+    animation-direction: reverse
+  }
+
+  will-change: transform;
+  animation-name: floating;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+
+  @media (max-width: $screen-sm) {
+    animation: none
+  }
+}
+
+
+.section-conclusion {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 240px;
+    background: white;
+    transform: skewY(-4deg);
+    top: -90px;
+    z-index: 2;
+  }
+
+    @media (max-width: $screen-sm) {
+    .row.m600 {
+      max-width: 100%;
+      text-align: left;
+    }
+  }
+}
+
+

docs-src/src/stylesheets/partials/_helpers.sass

@@ -0,0 +1,11 @@
+// Override some aerial.css classes
+.text-heading
+  font-size: 48px
+
+.h-auto
+  height: auto
+
+.m-l-n-large
+  margin-left: -26px
+
+