---
layout: default
---
<!-- head -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
<!-- head -->

{% if page.permalink contains '/docs' %}
  {% assign items = site.data.docs %}
  {% assign category = "Documentation" %}
{% else %}
  {% assign category = "Guides" %}
  {% assign items = site.data.guides %}
{% endif %}

{% assign flattenedItems = "" | split: "" %}
{% assign parts = "" | split: "" %}
{% for item in items %}
  {% assign flattenedItems = flattenedItems | push: item %}
  {% if item.children != null %}
    {% for child in item.children %}
      {% unless child.url contains '#' %}
        {% assign flattenedItems = flattenedItems | push: child %}
        {% if child.url == page.permalink %}
          {% assign parts = parts | push: item.title | push: child.title %}
        {% endif %}
      {% endunless %}
    {% endfor %}
  {% endif %}
  {% if item.url == page.permalink %}
    {% assign parts = parts | push: item.title %}
  {% endif %}
{% endfor %}

<div id="docs-wrapper" class="container">
  <div class="row">
    <div id="sidebar-container" class="three columns">
      <button class="sidebar-button">Document Navigation</button>
      <ul class="sidebar-list">
        <li class="search-item"><input type="text"></li>
        {% include sidebar.html items=items %}
      </ul>
    </div>
    <div id="docs-container" class="nine columns">
      <div class="row">
        <span class="breadcrumb">
          <span>{{ category }}:</span>
          <span>{{ parts | join: ' / ' }}</span>
        </span>
        <a class="edit-link" href="{{site.github}}/{{page.path}}" target="_blank" title="Edit on Github">
          {% include svg/octocat.svg %}
          <span>Edit on Github</span>
        </a>
      </div>
      <hr>
      <div id="content-container">
        {% if page.stability == "review" %}
        <div class="alert alert-warning">This page needs to be reviewed.</div>
        {% elsif page.stability == "incomplete" %}
        <div class="alert alert-warning">This page is incomplete.</div>
        {% endif %}
        <h1 id="{{ page.title | slugify }}">{{ page.title }}</h1>
        {{ content }}
      </div>
      <div class="row" id="pagination-container">
      {% for item in flattenedItems %}
        {% if page.permalink == item.url %}
          {% assign next = flattenedItems[forloop.index] %}
          {% unless forloop.first %}
            <a class="prev" href="{{ prev.url }}">
              <span class="label">{{ prev.title }}</span>
              <span class="arrow">
                <span class="tip"></span>
                <span class="shaft"></span>
              </span>
            </a>
          {% endunless %}
          {% unless forloop.last %}
            <a class="next" href="{{ next.url }}">
              <span class="label">{{ next.title }}</span>
              <span class="arrow">
                <span class="tip"></span>
                <span class="shaft"></span>
              </span>
            </a>
          {% endunless %}
        {% endif %}
        {% assign prev = item %}
      {% endfor %}
      </div>
    </div>
  </div>

  <div class="row">
    <hr>
  </div>

  {% include open-source.html %}
</div>

<!-- script -->
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script>
$(document).ready(function() {
  $('h1, h2, h3, h4', $('#docs-container')).each(function(i, h) {
    if (!h.id) return;
    $('<a class="anchor" href="#' + h.id + '"></a>').prependTo($(h));
  });
  $('#sidebar-container .sidebar-button').click(function() {
    $('#sidebar-container').toggleClass('active');
  });
  docsearch({
    apiKey: '281facf513620e95600126795a00ab6c',
    indexName: 'quilljs',
    inputSelector: '.search-item input',
    debug: false
  });
});
</script>
<!-- script -->