<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>

<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
  <h1><%- page.title %></h1>
  <div class="Stats-bundleSizes">
    <strong class="underline">Bundle Sizes</strong>
    <dl>
      <% for (var type in theme.uppy_bundle_kb_sizes) { %>
        <% var kb = theme.uppy_bundle_kb_sizes[type]; %>
        <dt>
          <% if (kb === 'N/A') { %>
            <%- type %>
          <% } else { %>
            <a href="/uppy/<%- type %>"><%- type %></a>
          <% }%>
        </dt>
        <dd class="
          <% if (kb > 100) { %>
            red
          <% } %>
          <% if (kb < 50) { %>
            green
          <% } %>
        ">

          <% if (kb === 'N/A') { %>
            <%- kb %>
          <% } else { %>
            <%- kb %> Kb
          <% }%>
        </dd>
      <% } %>
    </dl>
  </div>

  <p class="Stats-infoText">
    To keep Uppy lightweight, we’re aiming to carefully select what packages we include.
    The graph below will help us discover low hanging fruit. Sizes and dependencies shown here
    are for the bundled version of Uppy, which includes all plugins we offer. In production,
    when you <a href="https://github.com/transloadit/uppy#usage">pick and choose just the ones you need</a>, the size will be much smaller:

    <ul>
      <li>Drag & Drop + Multipart uploads ≈ <code>18 Kb mingz</code></li>
      <li>Full-featured Dashboard with image previews and progress indicators + tus resumable uploads ≈ <code>36 Kb mingz</code></li>
    </ul>
  </p>
  <iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
  This graph is built with
  <a href="https://twitter.com/hughskennedy">Hugh Kennedy</a>’s excellent
  <a href="http://hughsk.io/disc/">disc</a>.
  <hr />

  <h2>Browser support</h2>

  <p>This reflects the current state of Uppy and is updated with every change.</p>

  <a href="https://saucelabs.com/u/transloadit-uppy">
    <img src="https://saucelabs.com/browser-matrix/transloadit-uppy.svg" alt="Sauce Test Status" width="100%">
  </a>

  <div class="footer">Caught a mistake or want to contribute to the documentation?
    <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" target="_blank">
      Edit/fork this page directly on Github
    </a>!
  </div>
</div>
