Prepare 1.1.0 release

Merge pull request #187 from squidfunk/refactor/sidebar-height-spacing
Added tabs navigation feature (optional)
2017-02-26 15:50:12 +01:00 · 2017-02-26 15:35:23 +01:00 · 2017-02-26 15:30:48 +01:00 · 2017-02-26 15:06:50 +01:00 · 2017-02-26 14:15:21 +01:00 · 2017-02-26 13:59:54 +01:00
83 changed files with 1954 additions and 1347 deletions
@@ -23,6 +23,10 @@
 /material
 /site

+# Files used and generated by flow
+/lib/declarations
+/tmp
+
 # Files generated by visual tests
 /gemini-report
 /tests/visual/data
@@ -169,7 +169,7 @@
    "space-unary-ops": 2,
    "spaced-comment": [2, "always", {
      "line": {
-        "markers": ["/"],
+        "markers": ["/", ":"],
        "exceptions": ["-", "+"]
      },
      "block": {
@@ -0,0 +1,8 @@
+[ignore]
+.*/node_modules/.*
+
+[libs]
+lib/declarations/
+
+[options]
+strip_root=true
@@ -31,7 +31,7 @@ function cleanup {
    git apply "$PATCH_FILE" 2> /dev/null
    rm "$PATCH_FILE"
  fi
-	exit $EXIT_CODE
+  exit $EXIT_CODE
 }

 # Register signal handlers
@@ -45,17 +45,25 @@ git checkout -- .
 FILES=$(git diff --cached --name-only --diff-filter=ACMR | \
  grep "\.\(js\|jsx\|scss\)$")

-# Run the check and print indicator
+# Run check and print indicator
 if [ "$FILES" ]; then
-  npm run lint --silent

-  # If we're on master, abort commit
+  # If linter terminated with errors, abort commit
  if [ $? -gt 0 ]; then
    echo -e "\x1B[31m✗\x1B[0m Linter - \x1B[31m$MESSAGE\x1B[0m"
-  	exit 1
+    exit 1
  else
    echo -e "\x1B[32m✓\x1B[0m Linter"
  fi
+
+  # If flow terminated with errors, abort commit
+  npm run flow --silent > /dev/null
+  if [ $? -gt 0 ]; then
+    echo -e "\x1B[31m✗\x1B[0m Flow - \x1B[31m$MESSAGE\x1B[0m"
+    exit 1
+  else
+    echo -e "\x1B[32m✓\x1B[0m Flow"
+  fi
 fi

 # We're good
@@ -24,6 +24,7 @@
 # NPM-related
 /node_modules
 /npm-debug.log*
+/yarn-error.log

 # Files generated by build
 /build
@@ -31,6 +32,9 @@
 /MANIFEST
 /site

+# Files generated by flow typechecker
+/tmp
+
 # Files generated by visual tests
 /gemini-report
 /tests/visual/baseline/local
@@ -21,15 +21,82 @@
 language: node_js
 sudo: false

+# -----------------------------------------------------------------------------
+# Regular builds
+# -----------------------------------------------------------------------------
+
 # Node.js versions
 node_js:
  - 5
  - 6
  - 7

-# Build visual tests separately - temporary disabled until tests are stable
-# matrix:
-#   include:
+# Limit clone depth to 5, to speed up build
+git:
+  depth: 5
+
+# Cache dependencies
+cache:
+  pip: true
+  yarn: true
+  directories:
+    - node_modules
+
+# Install yarn as Travis doesn't support it out of the box
+before_install:
+  - npm install -g yarn
+
+# Install dependencies
+install:
+  - yarn install --ignore-optional
+  - pip install --user -r requirements.txt
+
+# Perform build and tests
+script:
+  - yarn run build
+
+# -----------------------------------------------------------------------------
+# Additional builds
+# -----------------------------------------------------------------------------
+
+# Matrix for additional builds
+matrix:
+  include:
+
+    # Build release and docker image and send to PyPI and Docker Hub.
+    - node_js: 5
+      services:
+        - docker
+      env:
+        - __TASK=RELEASE
+
+      # If we're not on a release branch, exit early and indicate success
+      before_install:
+        - echo "$TRAVIS_BRANCH" | grep -qvE "^[0-9.]+$" && exit 0; :;
+
+      # Install wheel for build
+      install:
+        - pip install wheel
+
+      # Perform build
+      script:
+        - python setup.py build sdist bdist_wheel --universal
+        - docker build -t $TRAVIS_REPO_SLUG .
+
+      # If build was successful, publish
+      after_success:
+
+        # Install twine and push release to PyPI
+        - pip install twine
+        - twine upload -u $PYPI_USERNAME -p $PYPI_PASSWORD dist/*
+
+        # Push to Docker Hub
+        - docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
+        - docker tag $TRAVIS_REPO_SLUG $TRAVIS_REPO_SLUG:$TRAVIS_BRANCH
+        - docker tag $TRAVIS_REPO_SLUG $TRAVIS_REPO_SLUG:latest
+        - docker push $TRAVIS_REPO_SLUG
+
+#      # Build visual tests separately - temporary disabled until tests stable
 #     - node_js: 5
 #       addons:
 #         artifacts:
@@ -45,26 +112,3 @@ node_js:
 #         - CXX=g++-4.8
 #       install: yarn install
 #       script: yarn run test:visual:run
-
-# Limit clone depth to 5, to speed up build
-git:
-  depth: 5
-
-# Cache dependencies
-cache:
-  pip: true
-  yarn: true
-  directories:
-    - node_modules
-
-# Install yarn as Travis doesn't support it out of the box
-before_install: npm install -g yarn
-
-# Do not install optional dependencies by default
-install: yarn install --ignore-optional
-
-# Install dependencies
-before_script: pip install --user -r requirements.txt
-
-# Perform build and tests
-script: yarn run build
@@ -1,3 +1,18 @@
+mkdocs-material-1.1.0 (2017-02-26)
+
+  * Added tabs navigation feature (optional)
+  * Added Disqus integration (optional)
+  * Added a high resolution Favicon with the new logo
+  * Added static type checking using Facebook's Flow
+  * Fixed #173: Dictionary elements have no bottom spacing
+  * Fixed #175: Tables cannot be set to 100% width
+  * Fixed race conditions in build related to asset revisioning
+  * Fixed accidentally re-introduced Permalink on top-level headline
+  * Fixed alignment of logo in drawer on IE11
+  * Refactored styles related to tables
+  * Refactored and automated Docker build and PyPI release
+  * Refactored build scripts
+
 mkdocs-material-1.0.5 (2017-02-18)

  * Fixed #153: Sidebar flows out of constrained area in Chrome 56
@@ -21,17 +21,30 @@
 FROM jfloff/alpine-python:2.7-slim
 MAINTAINER Martin Donath <martin.donath@squidfunk.com>

-# Set working directory
-WORKDIR /docs
+# Set build directory
+WORKDIR /tmp

-# Install packages
+# Install dependencies
 COPY requirements.txt .
 RUN \
  pip install -r requirements.txt && \
-  pip install mkdocs-material && \
  rm requirements.txt

-# Expose MkDocs default port
+# Copy files necessary for build
+COPY material material
+COPY MANIFEST.in MANIFEST.in
+COPY package.json package.json
+COPY setup.py setup.py
+
+# Perform build and cleanup artifacts
+RUN \
+  python setup.py install && \
+  rm -rf /tmp/*
+
+# Set working directory
+WORKDIR /docs
+
+# Expose MkDocs development server port
 EXPOSE 8000

 # Start development server by default
@@ -55,9 +55,11 @@ let args = yargs
  .default("sourcemaps", false)        /* Create sourcemaps */
  .argv

-/* Only use the last value seen, so overrides are possible */
+/* Only use the last seen value if boolean, so overrides are possible */
 args = Object.keys(args).reduce((result, arg) => {
-  result[arg] = [].concat(args[arg]).pop()
+  result[arg] = Array.isArray(args[arg]) && typeof args[arg][0] === "boolean"
+    ? [].concat(args[arg]).pop()
+    : args[arg]
  return result
 }, {})

@@ -99,6 +101,10 @@ gulp.src = (...glob) => {

 /*
 * Helper function to load a task
+ *
+ * This function returns a callback that will require the task with the given
+ * name and execute the function that is returned by this task. It omits the
+ * need to load all tasks upfront, speeding up the build a gazillion times.
 */
 const load = task => {
  return done => {
@@ -114,26 +120,26 @@ const load = task => {
 /*
 * Copy favicon
 */
-gulp.task("assets:images:build:ico",
+gulp.task("assets:images:build:ico", [
+  args.clean ? "assets:images:clean" : false
+].filter(t => t),
  load("assets/images/build/ico"))

 /*
 * Copy and minify vector graphics
 */
-gulp.task("assets:images:build:svg",
+gulp.task("assets:images:build:svg", [
+  args.clean ? "assets:images:clean" : false
+].filter(t => t),
  load("assets/images/build/svg"))

 /*
 * Copy images
 */
-gulp.task("assets:images:build", args.clean ? [
-  "assets:images:clean"
-] : [], () => {
-  return gulp.start([
-    "assets:images:build:ico",
-    "assets:images:build:svg"
-  ])
-})
+gulp.task("assets:images:build", [
+  "assets:images:build:ico",
+  "assets:images:build:svg"
+])

 /*
 * Clean images generated by build
@@ -147,30 +153,39 @@ gulp.task("assets:images:clean",

 /*
 * Build application logic
+ *
+ * When revisioning assets, the build must be serialized due to possible race
+ * conditions when two tasks try to write manifest.json simultaneously
 */
-gulp.task("assets:javascripts:build:application",
+
+gulp.task("assets:javascripts:build:application", [
+  args.clean ? "assets:javascripts:clean" : false,
+  args.lint ? "assets:javascripts:lint" : false,
+  args.revision ? "assets:stylesheets:build" : false
+].filter(t => t),
  load("assets/javascripts/build/application"))

 /*
 * Build custom modernizr
+ *
+ * When revisioning assets, the build must be serialized due to possible race
+ * conditions when two tasks try to write manifest.json simultaneously
 */
 gulp.task("assets:javascripts:build:modernizr", [
-  "assets:stylesheets:build"
-], load("assets/javascripts/build/modernizr"))
+  "assets:stylesheets:build",
+  args.clean ? "assets:javascripts:clean" : false,
+  args.lint ? "assets:javascripts:lint" : false,
+  args.revision ? "assets:javascripts:build:application" : false
+].filter(t => t),
+  load("assets/javascripts/build/modernizr"))

 /*
- * Build application logic and modernizr
+ * Build application logic and Modernizr
 */
-gulp.task("assets:javascripts:build", (args.clean ? [
-  "assets:javascripts:clean"
-] : []).concat(args.lint ? [
-  "assets:javascripts:lint"
-] : []), () => {
-  return gulp.start([
-    "assets:javascripts:build:application",
-    "assets:javascripts:build:modernizr"
-  ])
-})
+gulp.task("assets:javascripts:build", [
+  "assets:javascripts:build:application",
+  "assets:javascripts:build:modernizr"
+])

 /*
 * Clean JavaScript generated by build
@@ -178,6 +193,12 @@ gulp.task("assets:javascripts:build", (args.clean ? [
 gulp.task("assets:javascripts:clean",
  load("assets/javascripts/clean"))

+/*
+ * Annotate JavaScript
+ */
+gulp.task("assets:javascripts:annotate",
+  load("assets/javascripts/annotate"))
+
 /*
 * Lint JavaScript
 */
@@ -191,11 +212,10 @@ gulp.task("assets:javascripts:lint",
 /*
 * Build stylesheets from SASS source
 */
-gulp.task("assets:stylesheets:build", (args.clean ? [
-  "assets:stylesheets:clean"
-] : []).concat(args.lint ? [
-  "assets:stylesheets:lint"
-] : []),
+gulp.task("assets:stylesheets:build", [
+  args.clean ? "assets:stylesheets:clean" : false,
+  args.lint ? "assets:stylesheets:lint" : false
+].filter(t => t),
  load("assets/stylesheets/build"))

 /*
@@ -239,11 +259,13 @@ gulp.task("assets:clean", [
 /*
 * Minify views
 */
-gulp.task("views:build", (args.revision ? [
-  "assets:build"
-] : []).concat(args.clean ? [
-  "views:clean"
-] : []),
+
+gulp.task("views:build", [
+  args.clean ? "views:clean" : false,
+  args.revision ? "assets:images:build" : false,
+  args.revision ? "assets:stylesheets:build" : false,
+  args.revision ? "assets:javascripts:build" : false
+].filter(t => t),
  load("views/build"))

 /*
@@ -285,11 +307,10 @@ gulp.task("mkdocs:serve",
 * Generate visual tests
 */
 gulp.task("tests:visual:generate", [
-].concat(args.clean ? [
-  "tests:visual:clean",
-  "assets:build",
-  "views:build"
-] : []),
+  args.clean ? "tests:visual:clean" : false,
+  args.clean ? "assets:build" : false,
+  args.clean ? "views:build" : false
+].filter(t => t),
  load("tests/visual/generate"))

 /*
@@ -327,10 +348,9 @@ gulp.task("tests:visual:session", [
 */
 gulp.task("build", [
  "assets:build",
-  "views:build"
-].concat(args.mkdocs ? [
-  "mkdocs:build"
-] : []))
+  "views:build",
+  args.mkdocs ? "mkdocs:build" : false
+].filter(f => f))

 /*
 * Clean assets and documentation
@@ -354,10 +374,6 @@ gulp.task("watch", [
  if (args.mkdocs)
    gulp.start("mkdocs:serve")

-  /* Start karma test runner */
-  // if (args.karma)
-  //   gulp.start("tests:unit:watch")
-
  /* Rebuild stylesheets */
  gulp.watch([
    `${config.assets.src}/stylesheets/**/*.scss`
@@ -1,21 +1,17 @@
 [![Travis][travis-image]][travis-link]
-[![Dependencies][deps-image]][deps-link]
 [![Codacy][codacy-image]][codacy-link]
 [![Docker][docker-image]][docker-link]
 [![PyPI][pypi-image]][pypi-link]

  [travis-image]: https://travis-ci.org/squidfunk/mkdocs-material.svg?branch=master
  [travis-link]: https://travis-ci.org/squidfunk/mkdocs-material
-  [deps-image]: https://david-dm.org/squidfunk/mkdocs-material/dev-status.svg
-  [deps-link]: https://david-dm.org/squidfunk/mkdocs-material?type=dev
  [codacy-image]: https://api.codacy.com/project/badge/Grade/fe07aa1fa91d453cb69711d3885c5d7e
  [codacy-link]: https://www.codacy.com/app/squidfunk/mkdocs-material?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=squidfunk/mkdocs-material&amp;utm_campaign=Badge_Grade
-  [docker-image]: https://img.shields.io/docker/pulls/squidfunk/mkdocs-material.svg
+  [docker-image]: https://img.shields.io/docker/automated/squidfunk/mkdocs-material.svg
  [docker-link]: https://hub.docker.com/r/squidfunk/mkdocs-material/
  [pypi-image]: https://img.shields.io/pypi/v/mkdocs-material.svg
  [pypi-link]: https://pypi.python.org/pypi/mkdocs-material

-
 # Material for MkDocs

 A Material Design theme for [MkDocs](http://www.mkdocs.org).
@@ -6,7 +6,7 @@

    The official [Docker image][1] for Material comes with all dependencies
    pre-installed and ready-to-use with the latest version published on PyPI,
-    packaged in a very small image (27MB compressed).
+    packaged in a very small image (28MB compressed).

 ### Installing MkDocs

@@ -246,7 +246,7 @@ extra:
 ```

  [12]: https://fonts.google.com/specimen/Roboto
-  [13]: https://fonts.google.com/
+  [13]: https://fonts.google.com
  [14]: https://fonts.google.com/specimen/Ubuntu

 ### Adding a logo
@@ -300,6 +300,21 @@ google_analytics:
  - 'auto'
 ```

+### Disqus integation
+
+Material for MkDocs is integrated with [Disqus][16], so if you want to add a
+comments section to your documentation set the shortname of your Disqus project
+in your `mkdocs.yml`:
+
+``` yaml
+extra:
+  disqus: 'your-disqus-shortname'
+```
+
+The necessary JavaScript is automatically included.
+
+  [16]: https://disqus.com
+
 ### Localization <small>L10N</small>

 In order to localize the labels (e.g. *Previous* and *Next* in the footer),
@@ -309,6 +324,7 @@ translations inside the macro `t`:
 ``` jinja
 {% macro t(key) %}{{ {
  "edit.link.title": "Edit this page",
+  "comments": "Comments",
  "footer.previous": "Previous",
  "footer.next": "Next",
  "search.placeholder": "Search",
@@ -318,7 +334,7 @@ translations inside the macro `t`:
 ```

 Just copy the file from the original theme and make your adjustments. See the
-section on [overriding partials][16] in the customization guide.
+section on [overriding partials][17] in the customization guide.

 !!! warning "Migrating from Material 0.2.x"

@@ -326,18 +342,18 @@ section on [overriding partials][16] in the customization guide.
    `mkdocs.yml`. With 1.0.0 this is no longer possible as the configuration
    will be ignored.

-  [16]: customization.md#overriding-partials
+  [17]: customization.md#overriding-partials

 ### More advanced customization

 If you want to change the general appearance of the Material theme, see
-[this article][17] for more information on advanced customization.
+[this article][18] for more information on advanced customization.

-  [17]: customization.md
+  [18]: customization.md

 ## Extensions

-MkDocs supports several [Markdown extensions][18]. The following extensions
+MkDocs supports several [Markdown extensions][19]. The following extensions
 are not enabled by default (see the link for which are enabled by default)
 but highly recommended, so they should be switched on at all times:

@@ -351,18 +367,18 @@ markdown_extensions:
 For more information, see the following list of extensions supported by the
 Material theme including more information regarding installation and usage:

-* [Admonition][19]
-* [Codehilite][20]
-* [Permalinks][21]
-* [Footnotes][22]
-* [PyMdown Extensions][23]
+* [Admonition][20]
+* [Codehilite][21]
+* [Permalinks][22]
+* [Footnotes][23]
+* [PyMdown Extensions][24]

-  [18]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
-  [19]: extensions/admonition.md
-  [20]: extensions/codehilite.md
-  [21]: extensions/permalinks.md
-  [22]: extensions/footnotes.md
-  [23]: extensions/pymdown.md
+  [19]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
+  [20]: extensions/admonition.md
+  [21]: extensions/codehilite.md
+  [22]: extensions/permalinks.md
+  [23]: extensions/footnotes.md
+  [24]: extensions/pymdown.md

 ## Full example

@@ -380,7 +396,7 @@ repo_name: 'GitHub'
 repo_url: 'https://github.com/my-github-handle/my-project'

 # Copyright
-copyright: 'Copyright &copy; 2016 John Doe'
+copyright: 'Copyright &copy; 2016 - 2017 John Doe'

 # Documentation and theme
 theme: 'material'
@@ -394,13 +410,14 @@ extra:
  font:
    text: 'Roboto'
    code: 'Roboto Mono'
+  disqus: 'your-disqus-shortname'
  social:
    - type: 'github'
-      link: 'https://github.com/squidfunk'
+      link: 'https://github.com/john-doe'
    - type: 'twitter'
-      link: 'https://twitter.com/squidfunk'
+      link: 'https://twitter.com/jonh-doe'
    - type: 'linkedin'
-      link: 'https://de.linkedin.com/in/martin-donath-20a95039'
+      link: 'https://de.linkedin.com/in/john-doe'

 # Google Analytics
 google_analytics:
@@ -12,11 +12,29 @@ To determine the currently installed version, use the following command:

 ``` sh
 pip show mkdocs-material | grep -E ^Version
-# Version 1.0.4
+# Version 1.1.0
 ```

 ## Changelog

+### 1.1.0 <small> _ February 26, 2017</small>
+
+* Added tabs navigation feature (optional)
+* Added Disqus integration (optional)
+* Added a high resolution Favicon with the new logo
+* Added static type checking using Facebook's Flow
+* Fixed [#173][173]: Dictionary elements have no bottom spacing
+* Fixed [#175][175]: Tables cannot be set to 100% width
+* Fixed race conditions in build related to asset revisioning
+* Fixed accidentally re-introduced Permalink on top-level headline
+* Fixed alignment of logo in drawer on IE11
+* Refactored styles related to tables
+* Refactored and automated Docker build and PyPI release
+* Refactored build scripts
+
+  [173]: https://github.com/squidfunk/mkdocs-material/issues/173
+  [175]: https://github.com/squidfunk/mkdocs-material/issues/175
+
 ### 1.0.5 <small> _ February 18, 2017</small>

 * Fixed [#153][153]: Sidebar flows out of constrained area in Chrome 56
@@ -137,6 +137,24 @@ tincidunt. Aenean ullamcorper sit amet nulla at interdum.
  sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
  nulla. Vivamus a pharetra leo.

+### Definition lists
+
+Lorem ipsum dolor sit amet
+
+:   Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
+    tellus non sem sollicitudin, quis rutrum leo facilisis. Nulla tempor
+    lobortis orci, at elementum urna sodales vitae. In in vehicula nulla.
+
+    Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
+    Nam vulputate tincidunt fringilla.
+    Nullam dignissim ultrices urna non auctor.
+
+Cras arcu libero
+
+:   Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
+    ut eros sed sapien ullamcorper consequat. Nunc ligula ante, fringilla at
+    aliquam ac, aliquet sed mauris.
+
 ## Code blocks

 ### Inline
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Declarations
+ * ------------------------------------------------------------------------- */
+
+declare module "fastclick" {
+
+  /* Type: FastClick */
+  declare type FastClick = {
+    attach(name: HTMLElement): void
+  }
+
+  /* Exports */
+  declare export default FastClick
+}
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Declarations
+ * ------------------------------------------------------------------------- */
+
+declare module "js-cookie" {
+
+  /* Type: Options for setting cookie values */
+  declare type Options = {
+    path?: string,
+    expires?: number | string
+  }
+
+  /* Type: Cookie */
+  declare type Cookie = {
+    getJSON(json: string): Object,
+    set(key: string, value: string, options?: Options): string
+  }
+
+  /* Exports */
+  declare export default Cookie
+}
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Declarations
+ * ------------------------------------------------------------------------- */
+
+declare class Jsx {
+  static createElement(tag: string, properties?: Object,
+    ...children?: Array<string | number | Array<HTMLElement>>
+  ): HTMLElement
+}
+
+/* Exports */
+declare export default Jsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Declarations
+ * ------------------------------------------------------------------------- */
+
+/*
+ * Currently, it's not possible to export a function that returns a class type,
+ * as the imports just don't correctly work with flow. As a workaround we
+ * export an object until this error is fixed.
+ */
+declare module "lunr" {
+  declare function exports(name: () => void): Object
+}
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Declarations
+ * ------------------------------------------------------------------------- */
+
+declare class Modernizr {
+  static addTest(name: string, test: () => boolean): void
+}
+
+/* Exports */
+declare export default Modernizr
@@ -24,13 +24,13 @@
 * Module
 * ------------------------------------------------------------------------- */

-export default /* JSX */ {
+export default /* Jsx */ {

  /**
   * Create a native DOM node from JSX's intermediate representation
   *
   * @param {string} tag - Tag name
-   * @param {object} properties - Properties
+   * @param {?Object} properties - Properties
   * @param {...(string|number|Array)} children - Child nodes
   * @return {HTMLElement} Native DOM node
   */
@@ -28,7 +28,7 @@ import changed from "gulp-changed"

 export default (gulp, config) => {
  return () => {
-    return gulp.src(`${config.assets.src}/images/**/*.ico`)
+    return gulp.src(`${config.assets.src}/images/**/favicon.*`)
      .pipe(changed(`${config.assets.build}/images`))
      .pipe(gulp.dest(`${config.assets.build}/images`))
  }
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { transform } from "babel-core"
+import jsdoc2flow from "flow-jsdoc"
+import through from "through2"
+
+/* ----------------------------------------------------------------------------
+ * Task: annotate JavaScript
+ * ------------------------------------------------------------------------- */
+
+export default (gulp, config) => {
+  return () => {
+    return gulp.src(`${config.assets.src}/javascripts/**/*.{js,jsx}`)
+
+      /* Linting */
+      .pipe(
+        through.obj(function(file, enc, done) {
+          if (file.isNull() || file.isStream())
+            return done()
+
+          /* Perform Babel transformation to resolve JSX calls */
+          const transformed = transform(file.contents.toString(), {
+            plugins: [
+              ["transform-react-jsx", {
+                "pragma": "Jsx.createElement"
+              }]
+            ]
+          })
+
+          /* Annotate contents */
+          file.contents = new Buffer(jsdoc2flow(
+            `/* @flow */\n\n${transformed.code}`
+          ).toString())
+
+          /* Push file to next stage */
+          this.push(file)
+          done()
+        }))
+
+      /* Print errors */
+      .pipe(gulp.dest("tmp/assets/javascripts"))
+  }
+}
@@ -70,7 +70,7 @@ export default (gulp, config, args) => {

            /* Provide JSX helper */
            new webpack.ProvidePlugin({
-              JSX: path.join(process.cwd(), `${config.lib}/providers/jsx.js`)
+              Jsx: path.join(process.cwd(), `${config.lib}/providers/jsx.js`)
            })
          ].concat(

@@ -39,7 +39,7 @@ const format = eslint.getFormatter()

 export default (gulp, config) => {
  return () => {
-    return gulp.src(`${config.assets.src}/javascripts/**/*.js`)
+    return gulp.src(`${config.assets.src}/javascripts/**/*.{js,jsx}`)

      /* Linting */
      .pipe(
@@ -29,7 +29,7 @@ import vinyl from "vinyl-paths"

 export default (gulp, config) => {
  return () => {
-    return gulp.src(`${config.views.build}/**/*.html`)
+    return gulp.src(`${config.views.build}/**/*.{html,py}`)
      .pipe(vinyl(clean))
  }
 }
@@ -1,4 +1,4 @@
-{% extends "main.html" %}
+{% extends "base.html" %}
 {% block content %}
  <h1>404 - Not found</h1>
 {% endblock %}
@@ -17,15 +17,13 @@
      {% if config.site_favicon %}
        <link rel="shortcut icon" href="{{ base_url }}/{{ config.site_favicon }}">
      {% else %}
-        <link rel="shortcut icon" href="{{ base_url }}/assets/images/favicon.ico">
+        <link rel="shortcut icon" href="{{ base_url }}/assets/images/favicon.png">
      {% endif %}
-      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-1.0.5">
+      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-1.1.0">
    {% endblock %}
    {% block htmltitle %}
-      {% if page.title %}
+      {% if page.title and not page.is_homepage %}
        <title>{{ page.title }} - {{ config.site_name }}</title>
-      {% elif config.site_description %}
-        <title>{{ config.site_name }} - {{ config.site_description }}</title>
      {% else %}
        <title>{{ config.site_name }}</title>
      {% endif %}
@@ -34,9 +32,9 @@
      <script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
    {% endblock %}
    {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9c62e3c932.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-45f91e8d31.css">
      {% if config.extra.palette %}
-        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
+        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-49c4a440b6.palette.css">
      {% endif %}
    {% endblock %}
    {% block fonts %}
@@ -82,6 +80,10 @@
      {% include "partials/header.html" %}
    {% endblock %}
    <div class="md-container">
+      {% set feature = config.extra.get("feature", {}) %}
+      {% if feature.tabs %}
+        {% include "partials/tabs.html" %}
+      {% endif %}
      <main class="md-main">
        <div class="md-main__inner md-grid" data-md-component="container">
          {% block site_nav %}
@@ -115,6 +117,23 @@
                {% endif %}
                {{ page.content }}
              {% endblock %}
+              {% if config.extra.disqus and not page.is_homepage %}
+                <h2>{{ lang.t('comments') }}</h2>
+                <div id="disqus_thread"></div>
+                <script>
+                  var disqus_config = function () {
+                    this.page.url = "{{ page.canonical_url }}";
+                    this.page.identifier =
+                      "{{ page.canonical_url | replace(config.site_url, "") }}";
+                  };
+                  (function() {
+                    var d = document, s = d.createElement("script");
+                    s.src = "//{{ config.extra.disqus }}.disqus.com/embed.js";
+                    s.setAttribute("data-timestamp", +new Date());
+                    (d.head || d.body).appendChild(s);
+                  })();
+                </script>
+              {% endif %}
            </article>
          </div>
        </div>
@@ -124,7 +143,7 @@
      {% endblock %}
    </div>
    {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-f7ac33b6fb.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-30ac6a1727.js"></script>
      <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
      {% for path in extra_javascript %}
        <script src="{{ path }}"></script>
@@ -2,11 +2,14 @@
  <nav class="md-header-nav md-grid">
    <div class="md-flex">
      <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-header-nav__button">
-          {% if config.extra.logo %}
+        {% if config.extra.logo %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-logo md-header-nav__button">
            <img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
-          {% endif %}
-        </a>
+          </a>
+        {% else %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-icon md-icon--home md-header-nav__button">
+          </a>
+        {% endif %}
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
@@ -32,11 +35,11 @@
        {% endblock %}
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
-          <div class="md-header-nav__source">
-            {% if config.repo_url %}
-              {% include "partials/source.html" %}
-            {% endif %}
-          </div>
+        <div class="md-header-nav__source">
+          {% if config.repo_url %}
+            {% include "partials/source.html" %}
+          {% endif %}
+        </div>
      </div>
    </div>
  </nav>
@@ -1,5 +1,6 @@
 {% macro t(key) %}{{ {
  "edit.link.title": "Edit this page",
+  "comments": "Comments",
  "footer.previous": "Previous",
  "footer.next": "Next",
  "search.placeholder": "Search",
@@ -8,14 +8,15 @@
    <label class="md-nav__link" for="{{ path }}">
      {{ nav_item.title }}
    </label>
-    <nav class="md-nav" data-md-component="collapsible">
+    <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
      <label class="md-nav__title" for="{{ path }}">
-        {{ nav_item.title}}
+        {{ nav_item.title }}
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        {% set base = path %}
        {% for nav_item in nav_item.children %}
          {% set path = base + "-" + loop.index | string %}
+          {% set level = level + 1 %}
          {% include "partials/nav-item.html"  %}
        {% endfor %}
      </ul>
@@ -1,10 +1,12 @@
-<nav class="md-nav md-nav--primary">
+<nav class="md-nav md-nav--primary" data-md-level="0">
  <label class="md-nav__title md-nav__title--site" for="drawer">
-    <i class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-nav__button">
-      {% if config.extra.logo %}
+    {% if config.extra.logo %}
+      <i class="md-logo md-nav__button">
        <img src="{{ base_url }}/{{ config.extra.logo }}">
-      {% endif %}
-    </i>
+      </i>
+    {% else %}
+      <i class="md-icon md-icon--home md-nav__button"></i>
+    {% endif %}
    {{ config.site_name }}
  </label>
  {% if config.repo_url %}
@@ -15,6 +17,7 @@
  <ul class="md-nav__list" data-md-scrollfix>
    {% for nav_item in nav %}
      {% set path = "nav-" + loop.index | string %}
+      {% set level = 1 %}
      {% include "partials/nav-item.html" %}
    {% endfor %}
  </ul>
@@ -3,7 +3,7 @@
  <div class="md-search__overlay"></div>
  <div class="md-search__inner">
    <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query" placeholder="{{ lang.t('search.placeholder') }}" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false">
+      <input type="text" class="md-search__input" name="query" placeholder="{{ lang.t('search.placeholder') }}" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
      <label class="md-icon md-search__icon" for="search"></label>
    </form>
    <div class="md-search__output">
@@ -0,0 +1,25 @@
+{% if nav_item.is_homepage %}
+  <li class="md-tabs__item">
+    {% if not page.ancestors | length and nav | selectattr("url", page.url) %}
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link md-tabs__link--active">
+        {{ nav_item.title }}
+      </a>
+    {% else %}
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link">
+        {{ nav_item.title }}
+      </a>
+    {% endif %}
+  </li>
+{% elif nav_item.children and nav_item.children | length > 0 %}
+  <li class="md-tabs__item">
+    {% if nav_item.active %}
+      <a href="{{ (nav_item.children | first).url }}" title="{{ nav_item.title }}" class="md-tabs__link md-tabs__link--active">
+        {{ nav_item.title }}
+      </a>
+    {% else %}
+      <a href="{{ (nav_item.children | first).url }}" title="{{ nav_item.title }}" class="md-tabs__link">
+        {{ nav_item.title }}
+      </a>
+    {% endif %}
+  </li>
+{% endif %}
@@ -0,0 +1,13 @@
+{% set class = "md-tabs" %}
+{% if page.ancestors | length > 0 %}
+  {% set class = "md-tabs md-tabs--active" %}
+{% endif %}
+<nav class="{{ class }}" data-md-component="tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      {% for nav_item in nav %}
+        {% include "partials/tabs-item.html" %}
+      {% endfor %}
+    </ul>
+  </div>
+</nav>
@@ -51,6 +51,7 @@ extra:
 markdown_extensions:
  - markdown.extensions.admonition
  - markdown.extensions.codehilite(guess_lang=false)
+  - markdown.extensions.def_list
  - markdown.extensions.footnotes
  - markdown.extensions.meta
  - markdown.extensions.toc(permalink=true)
@@ -1,6 +1,6 @@
 {
  "name": "mkdocs-material",
-  "version": "1.0.5",
+  "version": "1.1.0",
  "description": "A Material Design theme for MkDocs",
  "keywords": [
    "mkdocs",
@@ -25,6 +25,7 @@
  "scripts": {
    "build": "scripts/build",
    "clean": "scripts/clean",
+    "flow": "scripts/flow",
    "lint": "scripts/lint",
    "start": "scripts/start",
    "test:visual:run": "scripts/test/visual/run",
@@ -34,7 +35,7 @@
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.7.3",
-    "babel-core": "^6.0.0",
+    "babel-core": "^6.23.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.3.1",
    "babel-plugin-add-module-exports": "^0.2.1",
@@ -48,8 +49,10 @@
    "custom-event-polyfill": "^0.3.0",
    "del": "^2.2.2",
    "ecstatic": "^2.1.0",
-    "eslint": "^3.14.0",
+    "eslint": "^3.16.0",
    "fastclick": "^1.0.6",
+    "flow-bin": "^0.39.0",
+    "flow-jsdoc": "^0.2.2",
    "git-hooks": "^1.1.7",
    "gulp": "^3.9.1",
    "gulp-changed": "^2.0.0",
@@ -72,7 +75,7 @@
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "js-cookie": "^2.1.3",
-    "lunr": "^0.7.2",
+    "lunr": "^1.0.0",
    "material-design-color": "2.3.2",
    "material-shadows": "3.0.1",
    "modularscale-sass": "2.1.1",
@@ -93,14 +96,6 @@
    "chai": "^3.5.0",
    "eslint-plugin-mocha": "^4.8.0",
    "gemini": "^4.14.3",
-    "karma": "^1.3.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-notify-reporter": "^1.0.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^2.0.1",
    "mocha": "^3.2.0",
    "moniker": "^0.1.2",
    "saucelabs": "^1.4.0",
@@ -0,0 +1,44 @@
+#!/bin/bash
+
+# Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to
+# deal in the Software without restriction, including without limitation the
+# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+# sell copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+# IN THE SOFTWARE.
+
+# Check if "npm install" was executed
+if [[ ! -d `npm bin` ]]; then
+  echo "\"node_modules\" not found:"
+  echo "npm install"
+  exit 1
+fi
+
+# Annotate source files
+`npm bin`/gulp assets:javascripts:annotate "$@"
+FLOW_JSDOC=$?
+
+# Run flow typecheck
+`npm bin`/flow check tmp
+FLOW=$?
+
+# If one command failed, exit with error
+if [ $FLOW_JSDOC -gt 0 ] || [ $FLOW -gt 0 ]; then
+  exit 1
+fi;
+
+# Otherwise return with success
+exit 0
@@ -28,4 +28,5 @@ if [[ ! -d `npm bin` ]]; then
 fi

 # Run command
+`npm bin`/gulp clean && \
 `npm bin`/gulp watch --no-lint "$@"
@@ -4,7 +4,7 @@
  ],
  "plugins": [
    ["transform-react-jsx", {
-      "pragma": "JSX.createElement"
+      "pragma": "Jsx.createElement"
    }]
  ]
 }
@@ -20,7 +20,7 @@
  IN THE SOFTWARE.
 -->

-{% extends "main.html" %}
+{% extends "base.html" %}

 <!-- Content block -->
 {% block content %}
@@ -27,35 +27,40 @@ import Material from "./components/Material"
 * Application
 * ------------------------------------------------------------------------- */

-export const initialize = config => {
+/**
+ * Initialize Material for MkDocs
+ *
+ * @param {Object} config - Configuration
+ */
+function initialize(config) { // eslint-disable-line func-style

  /* Initialize Modernizr and FastClick */
  new Material.Event.Listener(document, "DOMContentLoaded", () => {
+    if (!(document.body instanceof HTMLElement))
+      throw new ReferenceError
+
+    /* Attach FastClick to mitigate 300ms delay on touch devices */
+    FastClick.attach(document.body)

    /* Test for iOS */
    Modernizr.addTest("ios", () => {
      return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
    })

-    /* Test for web application context */
-    Modernizr.addTest("standalone", () => {
-      return !!navigator.standalone
-    })
-
-    /* Attach FastClick to mitigate 300ms delay on touch devices */
-    FastClick.attach(document.body)
-
    /* Wrap all data tables for better overflow scrolling */
    const tables = document.querySelectorAll("table:not([class])")
    Array.prototype.forEach.call(tables, table => {
-      const wrap = document.createElement("div")
-      wrap.classList.add("md-typeset__table")
+      const wrap = (
+        <div class="md-typeset__scrollwrap">
+          <div class="md-typeset__table"></div>
+        </div>
+      )
      if (table.nextSibling) {
        table.parentNode.insertBefore(wrap, table.nextSibling)
      } else {
        table.parentNode.appendChild(wrap)
      }
-      wrap.appendChild(table)
+      wrap.children[0].appendChild(table)
    })

    /* Force 1px scroll offset to trigger overflow scrolling */
@@ -78,14 +83,31 @@ export const initialize = config => {
    }
  }).listen()

+  /* Component: header shadow toggle */
+  new Material.Event.MatchMedia("(min-width: 1220px)",
+    new Material.Event.Listener(window, [
+      "scroll", "resize", "orientationchange"
+    ], new Material.Header.Shadow("[data-md-component=container]")))
+
+  /* Component: tabs visibility toggle */
+  if (document.querySelector("[data-md-component=tabs]"))
+    new Material.Event.Listener(window, [
+      "scroll", "resize", "orientationchange"
+    ], new Material.Tabs.Toggle("[data-md-component=tabs]")).listen()
+
  /* Component: sidebar with navigation */
  new Material.Event.MatchMedia("(min-width: 1220px)",
    new Material.Event.Listener(window, [
      "scroll", "resize", "orientationchange"
    ], new Material.Sidebar.Position("[data-md-component=navigation]")))

-  /* Component: sidebar with table of contents */
-  new Material.Event.MatchMedia("(min-width: 960px)",
+  /* Component: sidebar with table of contents - register two separate
+     listeners, as the offset at the top might change */
+  new Material.Event.MatchMedia("(min-width: 960px) and (max-width: 1219px)",
+    new Material.Event.Listener(window, [
+      "scroll", "resize", "orientationchange"
+    ], new Material.Sidebar.Position("[data-md-component=toc]")))
+  new Material.Event.MatchMedia("(min-width: 1220px)",
    new Material.Event.Listener(window, [
      "scroll", "resize", "orientationchange"
    ], new Material.Sidebar.Position("[data-md-component=toc]")))
@@ -93,7 +115,7 @@ export const initialize = config => {
  /* Component: link blurring for table of contents */
  new Material.Event.MatchMedia("(min-width: 960px)",
    new Material.Event.Listener(window, "scroll",
-      new Material.Nav.Blur("[data-md-component=toc] .md-nav__link")))
+      new Material.Nav.Blur("[data-md-component=toc] [href]")))

  /* Component: collapsible elements for navigation */
  const collapsibles =
@@ -116,7 +138,7 @@ export const initialize = config => {
      new Material.Search.Lock("[data-md-toggle=search]")))

  /* Component: search results */
-  new Material.Event.Listener(document.forms.search.query, [
+  new Material.Event.Listener("[data-md-component=query]", [
    "focus", "keyup"
  ], new Material.Search.Result("[data-md-component=result]", () => {
    return fetch(`${config.url.base}/mkdocs/search_index.json`, {
@@ -140,6 +162,8 @@ export const initialize = config => {
    new Material.Event.Listener("[data-md-component=navigation] [href^='#']",
      "click", () => {
        const toggle = document.querySelector("[data-md-toggle=drawer]")
+        if (!(toggle instanceof HTMLInputElement))
+          throw new ReferenceError
        if (toggle.checked) {
          toggle.checked = false
          toggle.dispatchEvent(new CustomEvent("change"))
@@ -149,16 +173,23 @@ export const initialize = config => {
  /* Listener: focus input after opening search */
  new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
    setTimeout(toggle => {
-      const query = document.forms.search.query
-      if (toggle.checked)
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
+      if (toggle.checked) {
+        const query = document.querySelector("[data-md-component=query]")
+        if (!(query instanceof HTMLInputElement))
+          throw new ReferenceError
        query.focus()
+      }
    }, 400, ev.target)
  }).listen()

  /* Listener: open search on focus */
  new Material.Event.MatchMedia("(min-width: 960px)",
-    new Material.Event.Listener(document.forms.search.query, "focus", () => {
+    new Material.Event.Listener("[data-md-component=query]", "focus", () => {
      const toggle = document.querySelector("[data-md-toggle=search]")
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
      if (!toggle.checked) {
        toggle.checked = true
        toggle.dispatchEvent(new CustomEvent("change"))
@@ -169,6 +200,8 @@ export const initialize = config => {
  new Material.Event.MatchMedia("(min-width: 960px)",
    new Material.Event.Listener(document.body, "click", () => {
      const toggle = document.querySelector("[data-md-toggle=search]")
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
      if (toggle.checked) {
        toggle.checked = false
        toggle.dispatchEvent(new CustomEvent("change"))
@@ -180,10 +213,15 @@ export const initialize = config => {
    const code = ev.keyCode || ev.which
    if (code === 27) {
      const toggle = document.querySelector("[data-md-toggle=search]")
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
      if (toggle.checked) {
        toggle.checked = false
        toggle.dispatchEvent(new CustomEvent("change"))
-        document.forms.search.query.blur()
+        const query = document.querySelector("[data-md-component=query]")
+        if (!(query instanceof HTMLInputElement))
+          throw new ReferenceError
+        query.focus()
      }
    }
  }).listen()
@@ -201,13 +239,16 @@ export const initialize = config => {
  /* Retrieve facts for the given repository type */
  ;(() => {
    const el = document.querySelector("[data-md-source]")
-    if (!el) return Promise.resolve([])
+    if (!el)
+      return Promise.resolve([])
+    else if (!(el instanceof HTMLAnchorElement))
+      throw new ReferenceError
    switch (el.dataset.mdSource) {
      case "github": return new Material.Source.Adapter.GitHub(el).fetch()
      default: return Promise.resolve([])
    }

-  /* Render repository source information */
+  /* Render repository information */
  })().then(facts => {
    const sources = document.querySelectorAll("[data-md-source]")
    Array.prototype.forEach.call(sources, source => {
@@ -216,3 +257,11 @@ export const initialize = config => {
    })
  })
 }
+
+/* ----------------------------------------------------------------------------
+ * Exports
+ * ------------------------------------------------------------------------- */
+
+export {
+  initialize
+}
@@ -21,10 +21,12 @@
 */

 import Event from "./Material/Event"
+import Header from "./Material/Header"
 import Nav from "./Material/Nav"
 import Search from "./Material/Search"
 import Sidebar from "./Material/Sidebar"
 import Source from "./Material/Source"
+import Tabs from "./Material/Tabs"

 /* ----------------------------------------------------------------------------
 * Module
@@ -32,8 +34,10 @@ import Source from "./Material/Source"

 export default {
  Event,
+  Header,
  Nav,
  Search,
  Sidebar,
-  Source
+  Source,
+  Tabs
 }
@@ -30,14 +30,22 @@ export default class Listener {
   * Generic event listener
   *
   * @constructor
-   * @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
-   * @param {Array.<string>} events - Event names
-   * @param {(object|function)} handler - Handler to be invoked
+   *
+   * @property {(Array<EventTarget>)} els_ - Event targets
+   * @property {Object} handler_- Event handlers
+   * @property {Array<string>} events_ - Event names
+   * @property {Function} update_ - Update handler
+   *
+   * @param {?(string|EventTarget|NodeList<EventTarget>)} els -
+   *   Selector or Event targets
+   * @param {(string|Array<string>)} events - Event names
+   * @param {(Object|Function)} handler - Handler to be invoked
   */
  constructor(els, events, handler) {
-    this.els_ = (typeof els === "string")
-      ? document.querySelectorAll(els)
-      : [].concat(els)
+    this.els_ = Array.prototype.slice.call(
+      (typeof els === "string")
+        ? document.querySelectorAll(els)
+        : [].concat(els))

    /* Set handler as function or directly as object */
    this.handler_ = typeof handler === "function"
@@ -53,7 +61,7 @@ export default class Listener {
   * Register listener for all relevant events
   */
  listen() {
-    Array.prototype.forEach.call(this.els_, el => {
+    this.els_.forEach(el => {
      this.events_.forEach(event => {
        el.addEventListener(event, this.update_, false)
      })
@@ -68,7 +76,7 @@ export default class Listener {
   * Unregister listener for all relevant events
   */
  unlisten() {
-    Array.prototype.forEach.call(this.els_, el => {
+    this.els_.forEach(el => {
      this.events_.forEach(event => {
        el.removeEventListener(event, this.update_)
      })
@@ -20,6 +20,8 @@
 * IN THE SOFTWARE.
 */

+import Listener from "./Listener" // eslint-disable-line no-unused-vars
+
 /* ----------------------------------------------------------------------------
 * Class
 * ------------------------------------------------------------------------- */
@@ -33,6 +35,9 @@ export default class MatchMedia {
   * switches the given listeners on or off.
   *
   * @constructor
+   *
+   * @property {Function} handler_ - Media query event handler
+   *
   * @param {string} query - Media query to test for
   * @param {Listener} listener - Event listener
   */
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import Shadow from "./Header/Shadow"
+
+/* ----------------------------------------------------------------------------
+ * Module
+ * ------------------------------------------------------------------------- */
+
+export default {
+  Shadow
+}
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Class
+ * ------------------------------------------------------------------------- */
+
+export default class Shadow {
+
+  /**
+   * Show or hide header shadow depending on page y-offset
+   *
+   * @constructor
+   *
+   * @property {HTMLElement} el_ - Content container
+   * @property {HTMLElement} header_ - Header
+   * @property {number} height_ - Offset height of previous nodes
+   * @property {boolean} active_ - Header shadow state
+   *
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    const ref = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+    if (!(ref instanceof HTMLElement) ||
+        !(ref.parentNode instanceof HTMLElement))
+      throw new ReferenceError
+
+    /* Grab parent and header */
+    this.el_ = ref.parentNode
+    if (!(this.el_.parentNode instanceof HTMLElement) ||
+        !(this.el_.parentNode.previousElementSibling instanceof HTMLElement))
+      throw new ReferenceError
+    this.header_ = this.el_.parentNode.previousElementSibling
+
+    /* Initialize height and state */
+    this.height_ = 0
+    this.active_ = false
+  }
+
+  /**
+   * Calculate total height of previous nodes
+   */
+  setup() {
+    let current = this.el_
+    while ((current = current.previousElementSibling)) {
+      if (!(current instanceof HTMLElement))
+        throw new ReferenceError
+      this.height_ += current.offsetHeight
+    }
+    this.update()
+  }
+
+  /**
+   * Update shadow state
+   */
+  update() {
+    const active = window.pageYOffset >= this.height_
+    if (active !== this.active_)
+      this.header_.dataset.mdState = (this.active_ = active) ? "shadow" : ""
+  }
+
+  /**
+   * Reset shadow state
+   */
+  reset() {
+    this.header_.dataset.mdState = ""
+    this.height_ = 0
+    this.active_ = false
+  }
+}
@@ -27,9 +27,16 @@
 export default class Blur {

  /**
-   * Blur anchors within the navigation above current page y-offset
+   * Blur links within the table of contents above current page y-offset
   *
   * @constructor
+   *
+   * @property {NodeList<HTMLElement>} els_ - Table of contents links
+   * @property {Array<HTMLElement>} anchors_ - Referenced anchor nodes
+   * @property {number} index_ - Current link index
+   * @property {number} offset_ - Current page y-offset
+   * @property {boolean} dir_ - Scroll direction change
+   *
   * @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
   */
  constructor(els) {
@@ -38,27 +45,28 @@ export default class Blur {
      : els

    /* Initialize index and page y-offset */
-    this.index_  = 0
+    this.index_ = 0
    this.offset_ = window.pageYOffset

    /* Necessary state to correctly reset the index */
    this.dir_ = false

    /* Index anchor node offsets for fast lookup */
-    this.anchors_ = [].map.call(this.els_, el => {
-      return document.getElementById(el.hash.substring(1))
-    })
+    this.anchors_ = [].reduce.call(this.els_, (anchors, el) => {
+      return anchors.concat(
+        document.getElementById(el.hash.substring(1)) || [])
+    }, [])
  }

  /**
-   * Initialize anchor states
+   * Initialize blur states
   */
  setup() {
    this.update()
  }

  /**
-   * Update anchor states
+   * Update blur states
   *
   * Deduct the static offset of the header (56px) and sidebar offset (24px),
   * see _permalinks.scss for more information.
@@ -67,7 +75,7 @@ export default class Blur {
    const offset = window.pageYOffset
    const dir = this.offset_ - offset < 0

-    /* Hack: reset index if direction changed, to catch very fast scrolling,
+    /* Hack: reset index if direction changed to catch very fast scrolling,
       because otherwise we would have to register a timer and that sucks */
    if (this.dir_ !== dir)
      this.index_ = dir
@@ -109,7 +117,7 @@ export default class Blur {
  }

  /**
-   * Reset anchor states
+   * Reset blur states
   */
  reset() {
    Array.prototype.forEach.call(this.els_, el => {
@@ -30,12 +30,18 @@ export default class Collapse {
   * Expand or collapse navigation on toggle
   *
   * @constructor
+   *
+   * @property {HTMLElement} el_ - Navigation list
+   *
   * @param {(string|HTMLElement)} el - Selector or HTML element
   */
  constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
  }

  /**
@@ -75,11 +81,16 @@ export default class Collapse {

    /* Remove state on end of transition */
    const end = ev => {
-      ev.target.removeAttribute("data-md-state")
-      ev.target.style.maxHeight = ""
+      const target = ev.target
+      if (!(target instanceof HTMLElement))
+        throw new ReferenceError
+
+      /* Reset height and state */
+      target.removeAttribute("data-md-state")
+      target.style.maxHeight = ""

      /* Only fire once, so directly remove event listener */
-      ev.target.removeEventListener("transitionend", end)
+      target.removeEventListener("transitionend", end)
    }
    this.el_.addEventListener("transitionend", end, false)
  }
@@ -30,12 +30,18 @@ export default class Scrolling {
   * Set overflow scrolling on the current active pane (for iOS)
   *
   * @constructor
+   *
+   * @property {HTMLElement} el_ - Primary navigation
+   *
   * @param {(string|HTMLElement)} el - Selector or HTML element
   */
  constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
  }

  /**
@@ -49,13 +55,22 @@ export default class Scrolling {
    /* Find all toggles and check which one is active */
    const toggles = this.el_.querySelectorAll("[data-md-toggle]")
    Array.prototype.forEach.call(toggles, toggle => {
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
      if (toggle.checked) {

        /* Find corresponding navigational pane */
        let pane = toggle.nextElementSibling
-        while (pane.tagName !== "NAV")
+        if (!(pane instanceof HTMLElement))
+          throw new ReferenceError
+        while (pane.tagName !== "NAV" && pane.nextElementSibling)
          pane = pane.nextElementSibling

+        /* Check references */
+        if (!(toggle.parentNode instanceof HTMLElement) ||
+            !(toggle.parentNode.parentNode instanceof HTMLElement))
+          throw new ReferenceError
+
        /* Find current and parent list elements */
        const parent = toggle.parentNode.parentNode
        const target = pane.children[pane.children.length - 1]
@@ -73,34 +88,48 @@ export default class Scrolling {
   * @param {Event} ev - Change event
   */
  update(ev) {
+    const target = ev.target
+    if (!(target instanceof HTMLElement))
+      throw new ReferenceError

    /* Find corresponding navigational pane */
-    let pane = ev.target.nextElementSibling
-    while (pane.tagName !== "NAV")
+    let pane = target.nextElementSibling
+    if (!(pane instanceof HTMLElement))
+      throw new ReferenceError
+    while (pane.tagName !== "NAV" && pane.nextElementSibling)
      pane = pane.nextElementSibling

-    /* Find current and parent list elements */
-    const parent = ev.target.parentNode.parentNode
-    const target = pane.children[pane.children.length - 1]
+    /* Check references */
+    if (!(target.parentNode instanceof HTMLElement) ||
+        !(target.parentNode.parentNode instanceof HTMLElement))
+      throw new ReferenceError
+
+    /* Find parent and active panes */
+    const parent = target.parentNode.parentNode
+    const active = pane.children[pane.children.length - 1]

    /* Always reset all lists when transitioning */
    parent.style.webkitOverflowScrolling = ""
-    target.style.webkitOverflowScrolling = ""
+    active.style.webkitOverflowScrolling = ""

-    /* Set overflow scrolling on parent */
-    if (!ev.target.checked) {
+    /* Set overflow scrolling on parent pane */
+    if (!target.checked) {
      const end = () => {
-        parent.style.webkitOverflowScrolling = "touch"
-        pane.removeEventListener("transitionend", end)
+        if (pane instanceof HTMLElement) {
+          parent.style.webkitOverflowScrolling = "touch"
+          pane.removeEventListener("transitionend", end)
+        }
      }
      pane.addEventListener("transitionend", end, false)
    }

-    /* Set overflow scrolling on target */
-    if (ev.target.checked) {
+    /* Set overflow scrolling on active pane */
+    if (target.checked) {
      const end = () => {
-        target.style.webkitOverflowScrolling = "touch"
-        pane.removeEventListener("transitionend", end, false)
+        if (pane instanceof HTMLElement) {
+          active.style.webkitOverflowScrolling = "touch"
+          pane.removeEventListener("transitionend", end)
+        }
      }
      pane.addEventListener("transitionend", end, false)
    }
@@ -117,20 +146,29 @@ export default class Scrolling {
    /* Find all toggles and check which one is active */
    const toggles = this.el_.querySelectorAll("[data-md-toggle]")
    Array.prototype.forEach.call(toggles, toggle => {
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
      if (toggle.checked) {

        /* Find corresponding navigational pane */
        let pane = toggle.nextElementSibling
-        while (pane.tagName !== "NAV")
+        if (!(pane instanceof HTMLElement))
+          throw new ReferenceError
+        while (pane.tagName !== "NAV" && pane.nextElementSibling)
          pane = pane.nextElementSibling

-        /* Find current and parent list elements */
+        /* Check references */
+        if (!(toggle.parentNode instanceof HTMLElement) ||
+            !(toggle.parentNode.parentNode instanceof HTMLElement))
+          throw new ReferenceError
+
+        /* Find parent and active panes */
        const parent = toggle.parentNode.parentNode
-        const target = pane.children[pane.children.length - 1]
+        const active = pane.children[pane.children.length - 1]

        /* Always reset all lists when transitioning */
        parent.style.webkitOverflowScrolling = ""
-        target.style.webkitOverflowScrolling = ""
+        active.style.webkitOverflowScrolling = ""
      }
    })
  }
@@ -30,12 +30,25 @@ export default class Lock {
   * Lock body for full-screen search modal
   *
   * @constructor
+   *
+   * @property {HTMLInputElement} el_ - Lock toggle
+   * @property {HTMLElement} lock_ - Element to lock (document body)
+   * @property {number} offset_ - Current page y-offset
+   *
   * @param {(string|HTMLElement)} el - Selector or HTML element
   */
  constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el
+    if (!(ref instanceof HTMLInputElement))
+      throw new ReferenceError
+    this.el_ = ref
+
+    /* Retrieve element to lock (= body) */
+    if (!document.body)
+      throw new ReferenceError
+    this.lock_ = document.body
  }

  /**
@@ -60,13 +73,13 @@ export default class Lock {

        /* Lock body after finishing transition */
        if (this.el_.checked) {
-          document.body.dataset.mdState = "lock"
+          this.lock_.dataset.mdState = "lock"
        }
      }, 400)

    /* Exiting search mode */
    } else {
-      document.body.dataset.mdState = ""
+      this.lock_.dataset.mdState = ""

      /* Scroll to former position, but wait for 100ms to prevent flashes on
         iOS. A short timeout seems to do the trick */
@@ -81,8 +94,8 @@ export default class Lock {
   * Reset locked state and page y-offset
   */
  reset() {
-    if (document.body.dataset.mdState === "lock")
+    if (this.lock_.dataset.mdState === "lock")
      window.scrollTo(0, this.offset_)
-    document.body.dataset.mdState = ""
+    this.lock_.dataset.mdState = ""
  }
 }
@@ -32,13 +32,24 @@ export default class Result {
   * Perform search and update results on keyboard events
   *
   * @constructor
+   *
+   * @property {HTMLElement} el_ - Search result container
+   * @property {(Array<Object>|Function)} data_ - Raw document data
+   * @property {Object} docs_ - Indexed documents
+   * @property {HTMLElement} meta_ - Search meta information
+   * @property {HTMLElement} list_ - Search result list
+   * @property {Object} index_ - Search index
+   *
   * @param {(string|HTMLElement)} el - Selector or HTML element
-   * @param {(Array.<object>|Function)} data - Promise or array providing data
+   * @param {(Array<Object>|Function)} data - Function providing data or array
   */
  constructor(el, data) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref

    /* Set data and create metadata and list elements */
    this.data_ = data
@@ -54,19 +65,26 @@ export default class Result {
    /* Inject created elements */
    this.el_.appendChild(this.meta_)
    this.el_.appendChild(this.list_)
+  }

-    /* Truncate a string after the given number of characters - this is not
-       a reasonable approach, since the summaries kind of suck. It would be
-       better to create something more intelligent, highlighting the search
-       occurrences and making a better summary out of it */
-    this.truncate_ = function(string, n) {
-      let i = n
-      if (string.length > i) {
-        while (string[i] !== " " && --i > 0);
-        return `${string.substring(0, i)}...`
-      }
-      return string
+  /**
+   * Truncate a string after the given number of character
+   *
+   * This is not a reasonable approach, since the summaries kind of suck. It
+   * would be better to create something more intelligent, highlighting the
+   * search occurrences and making a better summary out of it
+   *
+   * @param {string} string - String to be truncated
+   * @param {number} n - Number of characters
+   * @return {string} Truncated string
+   */
+  truncate_(string, n) {
+    let i = n
+    if (string.length > i) {
+      while (string[i] !== " " && --i > 0);
+      return `${string.substring(0, i)}...`
    }
+    return string
  }

  /**
@@ -90,7 +108,7 @@ export default class Result {
        })

        /* Index documents */
-        this.data_ = data.reduce((docs, doc) => {
+        this.docs_ = data.reduce((docs, doc) => {
          this.index_.add(doc)
          docs[doc.location] = doc
          return docs
@@ -104,15 +122,20 @@ export default class Result {
          : init(this.data_)
      }, 250)

-    /* Execute search on new input event after clearing current list */
+    /* Execute search on new input event */
    } else if (ev.type === "keyup") {
+      const target = ev.target
+      if (!(target instanceof HTMLInputElement))
+        throw new ReferenceError
+
+      /* Clear current list */
      while (this.list_.firstChild)
        this.list_.removeChild(this.list_.firstChild)

      /* Perform search on index and render documents */
-      const result = this.index_.search(ev.target.value)
+      const result = this.index_.search(target.value)
      result.forEach(item => {
-        const doc = this.data_[item.ref]
+        const doc = this.docs_[item.ref]

        /* Check if it's a anchor link on the current page */
        let [pathname] = doc.location.split("#")
@@ -143,6 +166,8 @@ export default class Result {
      Array.prototype.forEach.call(anchors, anchor => {
        anchor.addEventListener("click", ev2 => {
          const toggle = document.querySelector("[data-md-toggle=search]")
+          if (!(toggle instanceof HTMLInputElement))
+            throw new ReferenceError
          if (toggle.checked) {
            toggle.checked = false
            toggle.dispatchEvent(new CustomEvent("change"))
@@ -30,15 +30,25 @@ export default class Position {
   * Set sidebars to locked state and limit height to parent node
   *
   * @constructor
+   *
+   * @property {HTMLElement} el_ - Sidebar
+   * @property {HTMLElement} parent_ - Sidebar container
+   * @property {number} height_ - Current sidebar height
+   * @property {number} offset_ - Current page y-offset
+   *
   * @param {(string|HTMLElement)} el - Selector or HTML element
   */
  constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el
+    if (!(ref instanceof HTMLElement) ||
+        !(ref.parentNode instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref

    /* Initialize parent container and current height */
-    this.parent_ = this.el_.parentNode
+    this.parent_ = ref.parentNode
    this.height_ = 0
  }

@@ -46,7 +56,7 @@ export default class Position {
   * Initialize sidebar state
   */
  setup() {
-    this.offset_ = this.el_.offsetTop - this.parent_.offsetTop
+    this.offset_ = this.el_.offsetTop - 56
    this.update()
  }

@@ -55,25 +65,25 @@ export default class Position {
   *
   * The inner height of the window (= the visible area) is the maximum
   * possible height for the stretching sidebar. This height must be deducted
-   * by the top offset of the parent container, which accounts for the fixed
-   * header, setting the baseline. Depending on the page y-offset, the top
-   * offset of the sidebar must be taken into account, as well as the case
-   * where the window is scrolled beyond the sidebar container.
+   * by the height of the fixed header (56px). Depending on the page y-offset,
+   * the top offset of the sidebar must be taken into account, as well as the
+   * case where the window is scrolled beyond the sidebar container.
   */
  update() {
    const offset  = window.pageYOffset
    const visible = window.innerHeight

-    /* Calculate bounds of sidebar container  */
-    this.bounds_ = {
-      top: this.parent_.offsetTop,
+    /* Set bounds of sidebar container - must be calculated on every run, as
+       the height of the content might change due to loading images etc. */
+    const bounds = {
+      top: 56,
      bottom: this.parent_.offsetTop + this.parent_.offsetHeight
    }

    /* Calculate new offset and height */
-    const height = visible - this.bounds_.top
+    const height = visible - bounds.top
                 - Math.max(0, this.offset_ - offset)
-                 - Math.max(0, offset + visible - this.bounds_.bottom)
+                 - Math.max(0, offset + visible - bounds.bottom)

    /* If height changed, update element */
    if (height !== this.height_)
@@ -29,16 +29,25 @@ import Cookies from "js-cookie"
 export default class Abstract {

  /**
-   * Retrieve source information
+   * Retrieve repository information
   *
   * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
+   *
+   * @property {HTMLAnchorElement} el_ - Link to repository
+   * @property {string} base_ - API base URL
+   * @property {number} salt_ - Unique identifier
+   *
+   * @param {(string|HTMLAnchorElement)} el - Selector or HTML element
   */
  constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el

+    if (!(ref instanceof HTMLAnchorElement))
+      throw new ReferenceError
+    this.el_ = ref
+
    /* Retrieve base URL */
    this.base_ = this.el_.href
    this.salt_ = this.hash_(this.base_)
@@ -47,7 +56,7 @@ export default class Abstract {
  /**
   * Retrieve data from Cookie or fetch from respective API
   *
-   * @return {Promise} Promise that returns an array of facts
+   * @return {Promise<Array<string>>} Promise that returns an array of facts
   */
  fetch() {
    return new Promise(resolve => {
@@ -70,7 +79,6 @@ export default class Abstract {
   * Abstract private function that fetches relevant repository information
   *
   * @abstract
-   * @return {Promise} Promise that provides the facts in an array
   */
  fetch_() {
    throw new Error("fetch_(): Not implemented")
@@ -79,15 +87,15 @@ export default class Abstract {
  /**
   * Format a number with suffix
   *
-   * @param {Number} number - Number to format
-   * @return {Number} Formatted number
+   * @param {number} number - Number to format
+   * @return {string} Formatted number
   */
  format_(number) {
    if (number > 10000)
      return `${(number / 1000).toFixed(0)}k`
    else if (number > 1000)
      return `${(number / 1000).toFixed(1)}k`
-    return number
+    return `${number}`
  }

  /**
@@ -96,7 +104,7 @@ export default class Abstract {
   * Taken from http://stackoverflow.com/a/7616484/1065584
   *
   * @param {string} str - Input string
-   * @return {string} Hashed string
+   * @return {number} Hashed string
   */
  hash_(str) {
    let hash = 0
@@ -29,10 +29,10 @@ import Abstract from "./Abstract"
 export default class GitHub extends Abstract {

  /**
-   * Retrieve source information from GitHub
+   * Retrieve repository information from GitHub
   *
   * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
+   * @param {(string|HTMLAnchorElement)} el - Selector or HTML element
   */
  constructor(el) {
    super(el)
@@ -42,9 +42,9 @@ export default class GitHub extends Abstract {
  }

  /**
-   * Fetch relevant source information from GitHub
+   * Fetch relevant repository information from GitHub
   *
-   * @return {function} Promise returning an array of facts
+   * @return {Promise<Array<string>>} Promise returning an array of facts
   */
  fetch_() {
    return fetch(this.base_)
@@ -30,21 +30,27 @@ export default class Repository {
   * Render repository information
   *
   * @constructor
+   *
+   * @property {HTMLElement} el_ - Repository information
+   *
   * @param {(string|HTMLElement)} el - Selector or HTML element
   */
  constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
      ? document.querySelector(el)
      : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
  }

  /**
-   * Initialize the source repository
+   * Initialize the repository
   *
-   * @param {Array.<string>} facts - Facts to be rendered
+   * @param {Array<string>} facts - Facts to be rendered
   */
  initialize(facts) {
-    if (facts.length)
+    if (facts.length && this.el_.children.length)
      this.el_.children[this.el_.children.length - 1].appendChild(
        <ul class="md-source__facts">
          {facts.map(fact => <li class="md-source__fact">{fact}</li>)}
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import Toggle from "./Tabs/Toggle"
+
+/* ----------------------------------------------------------------------------
+ * Module
+ * ------------------------------------------------------------------------- */
+
+export default {
+  Toggle
+}
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Class
+ * ------------------------------------------------------------------------- */
+
+export default class Toggle {
+
+  /**
+   * Toggle tabs visibility depending on page y-offset
+   *
+   * @constructor
+   *
+   * @property {HTMLElement} el_ - Content container
+   * @property {number} offset_ - Toggle page-y offset
+   * @property {boolean} active_ - Tabs visibility
+   *
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    const ref = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+    if (!(ref instanceof Node))
+      throw new ReferenceError
+    this.el_ = ref
+
+    /* Initialize offset and state */
+    this.offset_ = 5
+    this.active_ = false
+  }
+
+  /**
+   * Update visibility
+   */
+  update() {
+    const active = window.pageYOffset >= this.offset_
+    if (active !== this.active_)
+      this.el_.dataset.mdState = (this.active_ = active) ? "hidden" : ""
+  }
+
+  /**
+   * Reset visibility
+   */
+  reset() {
+    this.el_.dataset.mdState = ""
+    this.active_ = false
+  }
+}
@@ -135,6 +135,20 @@ button[data-md-color-accent] {
        border-left: 0.4rem solid $color;
      }
    }
+
+    // [screen +]: Set background color for tabs
+    @include break-from-device(screen) {
+
+      // Tabs with outline
+      .md-tabs {
+        background: mix($color, $md-color-black, 75%);
+
+        // Fade-out tabs background upon scrolling
+        &[data-md-state="hidden"] {
+          background: $color;
+        }
+      }
+    }
  }
 }

@@ -49,6 +49,7 @@
@import "layout/search";
@import "layout/sidebar";
@import "layout/source";
+@import "layout/tabs";

@import "extensions/admonition";
@import "extensions/codehilite";
@@ -351,6 +351,11 @@ kbd {
    }
  }

+  // Definition lists
+  dd {
+    margin: 1em 0 1em 1.875em;
+  }
+
  // Limit width to container
  iframe,
  img,
@@ -362,18 +367,18 @@ kbd {
  table:not([class]) {
    @include z-depth(2);

-    margin: 2em 0;
+    display: inline-block;
+    max-width: 100%;
    border-radius: 0.2rem;
    font-size: ms(-1);
-    overflow: hidden;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;

-    // Semi-cool overflow solution, in case JavaScript is not available
-    .no-js & {
-      display: inline-block;
-      max-width: 100%;
-      margin: 0.8em 0;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
+    // Due to margin collapse because of the necessary inline-block hack, we
+    // cannot increase the bottom margin on the table, so we just increase the
+    // top margin on the following element
+    & + * {
+      margin-top: 1.5em;
    }

    // Table headings and cells
@@ -409,16 +414,25 @@ kbd {
    }
  }

-  // Data table wrapper, in case JavaScript is available
-  .md-typeset__table {
-    margin: 1.6em -1.6rem;
+  // Wrapper for scrolling on overflow
+  &__scrollwrap {
+    margin: 1em -1.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
+  }
+
+  // Data table wrapper, in case JavaScript is available
+  .md-typeset__table {
+    display: inline-block;
+    margin-bottom: 0.5em;
+    padding: 0 1.6rem;

    // Data tables
    table {
-      display: inline-block;
-      margin: 0 1.6rem;
+      display: table;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
    }
  }
 }
@@ -85,7 +85,7 @@
    padding-top: 0.8rem;

    // Hide anchor for top-level heading, as it makes no sense
-    &.headerlink {
+    .headerlink {
      display: none;
    }
  }
@@ -47,11 +47,11 @@
    // [screen +]: Increase spacing
    @include break-from-device(screen) {
      margin: 2.4rem;
+    }

-      // Hack: remove bottom spacing, due to margin collapse
-      :last-child {
-        margin-bottom: 0;
-      }
+    // Hack: remove bottom spacing of last element, due to margin collapse
+    > :last-child {
+      margin-bottom: 0;
    }
  }

@@ -38,6 +38,21 @@
  color: $md-color-white;
  z-index: 1;

+  // Always show shadow, in case JavaScript is not available
+  .no-js & {
+    @include z-depth(2);
+  }
+
+  // [screen +]: Show shadow depending on scroll offset
+  @include break-from-device(screen) {
+    box-shadow: none;
+
+    // Show and animate shadow
+    &[data-md-state="shadow"] {
+      @include z-depth(2);
+    }
+  }
+
  // Hide for print
  @media print {
    display: none;
@@ -66,7 +66,7 @@

  // List item
  &__item {
-    padding: 0.625em 1.2rem 0;
+    padding: 0 1.2rem;

    // Add bottom spacing to last item
    &:last-child {
@@ -98,6 +98,7 @@
  // Link inside item
  &__link {
    display: block;
+    margin-top: 0.625em;
    transition: color 0.125s;
    text-overflow: ellipsis;
    cursor: pointer;
@@ -283,6 +284,7 @@
      // Link inside item
      .md-nav__link {
        position: relative;
+        margin-top: 0;
        padding: 1.6rem;

        // Rotate icon
@@ -424,7 +426,8 @@
      display: none;
    }

-    // Link inside item
+    // Link inside item - ideally the link display method would be set to
+    // inline on screen, but this doesn't work with text ellipsis
    &__link {

      // Item contains a nested list
@@ -112,6 +112,9 @@
    max-height: 100%;
    margin: 0 0.4rem;
    overflow-y: auto;
+    // Hack: putting the scroll wrapper on the GPU massively reduces jitter
+    // when locking the sidebars into place
+    backface-visibility: hidden;

    // [tablet -]: Adjust margins
    @include break-to-device(tablet) {
@@ -64,7 +64,7 @@
  line-height: 1.2;
  white-space: nowrap;

-  // Hovered source information
+  // Hovered source container
  &:hover {
    opacity: 0.7;
  }
@@ -0,0 +1,153 @@
+////
+/// Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Tabs with outline
+.md-tabs {
+  width: 100%;
+  transition: background 0.25s;
+  background: mix($md-color-primary, $md-color-black, 75%);
+  overflow: auto;
+
+  // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
+  @include break-to-device(tablet) {
+    display: none;
+  }
+
+  // List of items
+  &__list {
+    margin: 0;
+    margin-left: 0.4rem;
+    padding: 0;
+    list-style: none;
+    white-space: nowrap;
+  }
+
+  // List item
+  &__item {
+    display: inline-block;
+    height: 4.8rem;
+    padding-right: 1.2rem;
+    padding-left: 1.2rem;
+  }
+
+  // Link inside item - could be defined as block elements and aligned via
+  // line height, but this would imply more repaints when scrolling
+  &__link {
+    display: block;
+    margin-top: 1.6rem;
+    transition:
+      color 0.25s,
+      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity 0.1s;
+    color: $md-color-white--light;
+    font-size: 1.4rem;
+
+    // Active or hovered link
+    &--active,
+    &:hover {
+      color: $md-color-white;
+    }
+
+    // Delay transitions by a small amount
+    @for $i from 2 through 16 {
+      .md-tabs__item:nth-child(#{$i}) & {
+        transition-delay: 0.02s * ($i - 1);
+      }
+    }
+  }
+
+  // Fade-out tabs background upon scrolling
+  &[data-md-state="hidden"] {
+    background: $md-color-primary;
+
+    // Hide tabs upon scrolling - disable transition to minimizes repaints whilte
+    // scrolling down, while scrolling up seems to be okay
+    .md-tabs__link {
+      transform: translateY(50%);
+      transition:
+        color 0.25s,
+        transform 0s 0.4s,
+        opacity 0.1s;
+      opacity: 0;
+    }
+  }
+
+  // [screen +]: Adjust main navigation styles
+  @include break-from-device(screen) {
+
+    // Hide 1st level nested items, as they are listed in the tabs by setting
+    // font-size to zero, as we need to preserve bottom padding
+    ~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
+      font-size: 0;
+    }
+
+    // We're on the 2nd+ level
+    &--active ~ .md-main {
+
+      // Adjust 1st level styles
+      .md-nav--primary {
+
+        // Hide site title
+        .md-nav__title--site {
+          display: none;
+        }
+
+        // Hide 1st level normal items
+        & > .md-nav__list > .md-nav__item {
+          font-size: 0;
+
+          // Show 1st level nested items and induce margin collapse
+          &--nested {
+            font-size: 1.4rem;
+            overflow: auto;
+
+            // Render link same as main navigation title
+            > .md-nav__link {
+              margin-top: 1.2rem;
+              font-weight: 700;
+              pointer-events: none;
+
+              // Hide icon for expansion
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      // Always expand nested navigation on 2nd level
+      .md-nav[data-md-level="1"] {
+        max-height: initial;
+
+        // Remove left spacing on 2nd level items
+        > .md-nav__list > .md-nav__item {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+}
@@ -52,20 +52,18 @@
            href="{{ base_url }}/{{ config.site_favicon }}">
      {% else %}
        <link rel="shortcut icon"
-            href="{{ base_url }}/assets/images/favicon.ico">
+            href="{{ base_url }}/assets/images/favicon.png">
      {% endif %}

      <!-- Generator banner -->
      <meta name="generator"
-        content="mkdocs-{{ mkdocs_version }}, $theme-name$-$theme-version$" />
+          content="mkdocs-{{ mkdocs_version }}, $theme-name$-$theme-version$" />
    {% endblock %}

    <!-- Block: site title -->
    {% block htmltitle %}
-      {% if page.title %}
+      {% if page.title and not page.is_homepage %}
        <title>{{ page.title }} - {{ config.site_name }}</title>
-      {% elif config.site_description %}
-        <title>{{ config.site_name }} - {{ config.site_description }}</title>
      {% else %}
        <title>{{ config.site_name }}</title>
      {% endif %}
@@ -98,7 +96,7 @@
                    | default("Roboto Mono") %}
        {% set font = text + ':300,400,400i,700|' + code | replace(' ', '+') %}
        <link rel="stylesheet" type="text/css"
-          href="https://fonts.googleapis.com/css?family={{ font }}" />
+            href="https://fonts.googleapis.com/css?family={{ font }}" />
        <style>
          body, input {
            font-family: "{{ text }}", "Helvetica Neue",
@@ -171,6 +169,10 @@

    <!-- Container, necessary for web-application context -->
    <div class="md-container">
+      {% set feature = config.extra.get("feature", {}) %}
+      {% if feature.tabs %}
+        {% include "partials/tabs.html" %}
+      {% endif %}

      <!-- Main container -->
      <main class="md-main">
@@ -230,6 +232,25 @@
                <!-- Content -->
                {{ page.content }}
              {% endblock %}
+
+              <!-- Disqus integration -->
+              {% if config.extra.disqus and not page.is_homepage %}
+                <h2>{{ lang.t('comments') }}</h2>
+                <div id="disqus_thread"></div>
+                <script>
+                  var disqus_config = function () {
+                    this.page.url = "{{ page.canonical_url }}";
+                    this.page.identifier =
+                      "{{ page.canonical_url | replace(config.site_url, "") }}";
+                  };
+                  (function() {
+                    var d = document, s = d.createElement("script");
+                    s.src = "//{{ config.extra.disqus }}.disqus.com/embed.js";
+                    s.setAttribute("data-timestamp", +new Date());
+                    (d.head || d.body).appendChild(s);
+                  })();
+                </script>
+              {% endif %}
            </article>
          </div>
        </div>
@@ -29,18 +29,17 @@

      <!-- Link to home -->
      <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
-            class="
-              {% if config.extra.logo %}
-                md-logo
-              {% else %}
-                md-icon md-icon--home
-              {% endif %} md-header-nav__button">
-          {% if config.extra.logo %}
+        {% if config.extra.logo %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
+              class="md-logo md-header-nav__button">
            <img src="{{ base_url }}/{{ config.extra.logo }}"
                width="24" height="24" />
-          {% endif %}
-        </a>
+          </a>
+        {% else %}
+          <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
+              class="md-icon md-icon--home md-header-nav__button">
+          </a>
+        {% endif %}
      </div>

      <!-- Button to toggle drawer -->
@@ -78,11 +77,11 @@

      <!-- Repository containing source -->
      <div class="md-flex__cell md-flex__cell--shrink">
-          <div class="md-header-nav__source">
-            {% if config.repo_url %}
-              {% include "partials/source.html" %}
-            {% endif %}
-          </div>
+        <div class="md-header-nav__source">
+          {% if config.repo_url %}
+            {% include "partials/source.html" %}
+          {% endif %}
+        </div>
      </div>
    </div>
  </nav>
@@ -23,6 +23,7 @@
 <!-- Translations -->
 {% macro t(key) %}{{ {
  "edit.link.title": "Edit this page",
+  "comments": "Comments",
  "footer.previous": "Previous",
  "footer.next": "Next",
  "search.placeholder": "Search",
@@ -37,9 +37,10 @@
    <label class="md-nav__link" for="{{ path }}">
      {{ nav_item.title }}
    </label>
-    <nav class="md-nav" data-md-component="collapsible">
+    <nav class="md-nav" data-md-component="collapsible"
+        data-md-level="{{ level }}">
      <label class="md-nav__title" for="{{ path }}">
-        {{ nav_item.title}}
+        {{ nav_item.title }}
      </label>
      <ul class="md-nav__list" data-md-scrollfix>

@@ -47,6 +48,7 @@
        {% set base = path %}
        {% for nav_item in nav_item.children %}
          {% set path = base + "-" + loop.index | string %}
+          {% set level = level + 1 %}
          {% include "partials/nav-item.html"  %}
        {% endfor %}
      </ul>
@@ -21,28 +21,32 @@
 -->

 <!-- Main navigation -->
-<nav class="md-nav md-nav--primary">
+<nav class="md-nav md-nav--primary" data-md-level="0">
+
+  <!-- Site title -->
  <label class="md-nav__title md-nav__title--site" for="drawer">
-    <i class="
-          {% if config.extra.logo %}
-            md-logo
-          {% else %}
-            md-icon md-icon--home
-          {% endif %} md-nav__button">
-      {% if config.extra.logo %}
+    {% if config.extra.logo %}
+      <i class="md-logo md-nav__button">
        <img src="{{ base_url }}/{{ config.extra.logo }}" />
-      {% endif %}
-    </i>
+      </i>
+    {% else %}
+      <i class="md-icon md-icon--home md-nav__button"></i>
+    {% endif %}
    {{ config.site_name }}
  </label>
+
+  <!-- Repository containing source -->
  {% if config.repo_url %}
    <div class="md-nav__source">
      {% include "partials/source.html" %}
    </div>
  {% endif %}
+
+  <!-- Render item list -->
  <ul class="md-nav__list" data-md-scrollfix>
    {% for nav_item in nav %}
      {% set path = "nav-" + loop.index | string %}
+      {% set level = 1 %}
      {% include "partials/nav-item.html" %}
    {% endfor %}
  </ul>
@@ -30,7 +30,7 @@
      <input type="text" class="md-search__input" name="query"
          placeholder="{{ lang.t('search.placeholder') }}"
          accesskey="s" autocapitalize="off" autocorrect="off"
-          autocomplete="off" spellcheck="false" />
+          autocomplete="off" spellcheck="false" data-md-component="query" />
      <label class="md-icon md-search__icon" for="search"></label>
    </form>
    <div class="md-search__output">
@@ -0,0 +1,55 @@
+<!--
+  Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Home page -->
+{% if nav_item.is_homepage %}
+  <li class="md-tabs__item">
+    {% if not page.ancestors | length and nav | selectattr("url", page.url) %}
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+          class="md-tabs__link md-tabs__link--active">
+        {{ nav_item.title }}
+      </a>
+    {% else %}
+      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+          class="md-tabs__link">
+        {{ nav_item.title }}
+      </a>
+    {% endif %}
+  </li>
+
+<!-- Main navigation item with nested items -->
+{% elif nav_item.children and nav_item.children | length > 0 %}
+  <li class="md-tabs__item">
+    {% if nav_item.active %}
+      <a href="{{ (nav_item.children | first).url }}"
+          title="{{ nav_item.title }}"
+          class="md-tabs__link md-tabs__link--active">
+        {{ nav_item.title }}
+      </a>
+    {% else %}
+      <a href="{{ (nav_item.children | first).url }}"
+          title="{{ nav_item.title }}" class="md-tabs__link">
+        {{ nav_item.title }}
+      </a>
+    {% endif %}
+  </li>
+{% endif %}
@@ -0,0 +1,38 @@
+<!--
+  Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Determine class according to level -->
+{% set class = "md-tabs" %}
+{% if page.ancestors | length > 0 %}
+  {% set class = "md-tabs md-tabs--active" %}
+{% endif %}
+
+<!-- Tabs with outline -->
+<nav class="{{ class }}" data-md-component="tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      {% for nav_item in nav %}
+        {% include "partials/tabs-item.html" %}
+      {% endfor %}
+    </ul>
+  </div>
+</nav>
@@ -140,16 +140,16 @@ const generate = (dirname, components) => {
      for (const state of states) {
        const test = subsuite => {

-            /* Resolve and apply relevant breakpoints */
+          /* Resolve and apply relevant breakpoints */
          const breakpoints = resolve(config.breakpoints, component.break)
          for (const breakpoint of breakpoints) {
            subsuite.capture(`@${breakpoint.name}`, actions => {

-                /* Set window size according to breakpoint */
+              /* Set window size according to breakpoint */
              actions.setWindowSize(
-                  breakpoint.size.width, breakpoint.size.height)
+                breakpoint.size.width, breakpoint.size.height)

-                /* Add the name as a CSS class to the captured element */
+              /* Add the name as a CSS class to the captured element */
              if (state.name)
                actions.executeJS(new Function(`
                    document.querySelector(
@@ -157,22 +157,22 @@ const generate = (dirname, components) => {
                    ).classList.add("${state.name}")
                  `))

-                /* Execute function inside an IIFE */
+              /* Execute function inside an IIFE */
              if (state.exec)
                actions.executeJS(new Function(`(${state.exec})()`))

-                /* Wait the specified time before taking a screenshot */
+              /* Wait the specified time before taking a screenshot */
              if (state.wait)
                actions.wait(state.wait)
            })
          }
        }

-          /* No state sub-suite if the name is empty */
+        /* No state sub-suite if the name is empty */
        if (state.name.length > 0)
          gemini.suite(state.name, subsuite => test(subsuite))
        else
-            test(suite)
+          test(suite)
      }

      /* Generate sub-suites */
Author	SHA1	Message	Date
squidfunk	8bf2368892	Prepare 1.1.0 release	2017-02-26 15:50:12 +01:00
Martin Donath	ca4b8aa94b	Merge pull request #187 from squidfunk/refactor/sidebar-height-spacing Added tabs navigation feature (optional)	2017-02-26 15:35:23 +01:00
squidfunk	842146183d	Deactivate tabs by default	2017-02-26 15:30:48 +01:00
squidfunk	d52f605200	Refactored and cleaned up partials	2017-02-26 15:06:50 +01:00
squidfunk	eb6aedf5cc	Added palette colors for tabs	2017-02-26 14:15:21 +01:00
squidfunk	0eee81b048	Added support for tabs	2017-02-26 13:59:54 +01:00
squidfunk	09d579b516	Fixed Gulp build pipeline	2017-02-26 11:55:47 +01:00
squidfunk	2c3ca5aeb4	Merge branch 'master' into refactor/sidebar-height-spacing	2017-02-26 11:04:12 +01:00
greenkeeper[bot]	eb66e7f894	chore(package): update lunr to version 1.0.0 https://greenkeeper.io/	2017-02-26 08:56:24 +01:00
Martin Donath	968516a9c8	Merge pull request #186 from squidfunk/chore/flow-type-checking Integrate static type-checking with JSDoc and Flow	2017-02-25 17:30:02 +01:00
squidfunk	aaa3c8d6b4	Trigger new build	2017-02-25 17:25:47 +01:00
squidfunk	ac2f924dad	Correct indentation [ci skip]	2017-02-25 17:20:38 +01:00
squidfunk	c6e5159cc6	Merge branch 'master' into chore/flow-type-checking	2017-02-25 17:18:44 +01:00
squidfunk	2823b2b53d	Make githook less chatty	2017-02-25 17:15:18 +01:00
squidfunk	22a2f084a1	Integrated static type-checking via JSDoc and Flow	2017-02-25 17:13:50 +01:00
squidfunk	672a39b697	Fixed issues with JSX.createElement definitions	2017-02-25 14:49:49 +01:00
squidfunk	8f48f0bce6	Fixed inconsistencies in table-styling	2017-02-25 11:36:10 +01:00
squidfunk	de3bd8d665	Added disqus integration	2017-02-24 22:58:30 +01:00
squidfunk	ad39b98734	Updated badges [ci skip]	2017-02-24 22:05:49 +01:00
squidfunk	26b83b0365	Fixed yarn install routine	2017-02-24 21:33:14 +01:00
squidfunk	0c7f500c41	Fixed before_install routine	2017-02-24 21:33:14 +01:00
squidfunk	e55aa3bc77	Polished .travis.yml	2017-02-24 21:33:14 +01:00
squidfunk	43a994245e	Restructure install procedure for Travis build	2017-02-24 21:33:14 +01:00
squidfunk	bf439d34b7	Install wheel as a dependency for build	2017-02-24 21:33:14 +01:00
squidfunk	604be71a37	Remove branch check temporary to test build	2017-02-24 21:33:14 +01:00
squidfunk	309a951b93	Fixed parse errors in Travis pre-install script	2017-02-24 21:33:14 +01:00
squidfunk	0f7782a321	Updated yarn lock file	2017-02-24 21:33:14 +01:00
squidfunk	521ef0b8ee	Fixed parse errors in .travis.yml	2017-02-24 21:33:14 +01:00
squidfunk	a9e7a5d421	Added support for automatic builds and releases	2017-02-24 21:33:14 +01:00
squidfunk	7908140dc5	Fixed flow in build process	2017-02-20 23:26:51 +01:00
squidfunk	07e2eb4f85	Tried to rework type safety	2017-02-19 23:33:52 +01:00
squidfunk	af4db15a27	Play with flow type checker	2017-02-19 17:19:30 +01:00
squidfunk	3e50c3394a	Added support for definition lists	2017-02-19 16:20:39 +01:00
squidfunk	6a68347a87	Merge branch 'master' into refactor/sidebar-height-spacing	2017-02-11 23:02:12 +01:00
squidfunk	c4ba189c05	Only show active subsection on screen when tabs are active	2017-01-28 17:56:34 +01:00
squidfunk	79f277c8fe	Activate root tab when there'e an active page on the root level	2017-01-27 23:54:52 +01:00
squidfunk	9a36dd67b2	Remove headerlink on top-level headline again	2017-01-27 23:37:24 +01:00
squidfunk	82a98ae9d3	Reduce repaints on scroll with new tabs	2017-01-27 23:21:41 +01:00
squidfunk	c994ce1dd9	Fixed a bug with breakpoints and sidebar height	2017-01-27 23:09:31 +01:00
squidfunk	1655f18a20	Merge branch 'master' into refactor/sidebar-height-spacing	2017-01-27 22:45:22 +01:00
squidfunk	4c4edff9cb	Cleaned up and refactored tabs implementation	2017-01-27 22:41:55 +01:00
squidfunk	fc900aa4b5	Speed up build by lazy-loading Gulp	2017-01-27 22:40:09 +01:00
squidfunk	53e1977c65	Only directly show shadow on header, in case JS is not available	2017-01-26 23:20:38 +01:00
squidfunk	33616c7deb	Merge branch 'master' into refactor/sidebar-height-spacing	2017-01-26 23:08:31 +01:00
squidfunk	25e1960511	Added dynamic box shadow on header	2017-01-26 22:58:24 +01:00
squidfunk	e9af74f3df	Merge branch 'master' of github.com:squidfunk/mkdocs-material into refactor/sidebar-height-spacing	2017-01-26 21:33:49 +01:00
squidfunk	fc71fd4c71	Added style for tabs	2017-01-26 21:18:31 +01:00
squidfunk	71b300aaa1	Added possibility to add tabs	2017-01-26 21:10:52 +01:00
squidfunk	2c3ae17131	Refactored sidebar/container spacing for arbitrary height elements above content	2017-01-26 14:20:40 +01:00