<!doctype html>
<html lang="en">

  <head>
    {% include 'partials/meta.njk' %}
    <link rel="stylesheet" href="/styles.css">
  </head>

  <body data-gr-c-s-loaded="true">
    <div id="app">
      <div class="theme-container no-sidebar">
        {% include 'partials/header.njk' %}
        <div class="sidebar-mask"></div>
        <aside class="sidebar">
          <nav class="nav-links">
            <div class="nav-item">
              <a href="/" class="nav-link router-link-exact-active router-link-active">
                Home
              </a>
            </div>
            <div class="nav-item">
              <a href="/guide/" class="nav-link">
                Guide
              </a>
            </div>
            <div class="nav-item">
              <a href="/faq/" class="nav-link">
                FAQ
              </a>
            </div>
            <div class="nav-item">
              <a href="/about/" class="nav-link">
                About
              </a>
            </div>
            <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer" class="repo-link">
              GitHub
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound">
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
              </svg>
            </a>
          </nav>
          <!---->
        </aside>
        <main aria-labelledby="main-title" class="home">
          <header class="hero">
            <svg viewbox="0 0 244 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" alt="open-wc" class="logo">
              <use xlink:href="#logo"></use>
            </svg>
            <h1 id="main-title">open-wc</h1>
            <p class="description">
              Open Web Component Recommendations
            </p>
            <clipboard-copy for="homepage-npm-init-command" tabindex="0" role="button">
              <code id="homepage-npm-init-command" class="language-bash">npm init @open-wc</code>
            </clipboard-copy>
            <p class="action">
              <a href="/guide/" class="nav-link action-button">
                Get Started →
              </a>
            </p>
          </header>
          <div class="features">
            <div class="feature">
              <h2>Smart Defaults</h2>
              <p>Enjoy the peace of mind that comes from having a well-known default solution for almost everything. From linting to testing to demos to publishing - have the full experience.</p>
            </div>
            <div class="feature">
              <h2>Awesome Generators</h2>
              <p>Get up and running quickly with opinionated generators, or add recommended tools to existing projects. Our comprehensive fleet of generators have got you covered.</p>
            </div>
            <div class="feature">
              <h2>Open Source Love</h2>
              <p>Open Web Components is a community-effort, independent of any framework or company. We use mostly open-source tools and services.</p>
            </div>
          </div>
          <div class="theme-default-content custom content__default">
            {{ content.html | safe }}
            <div class="footer">
              MIT Licensed | Copyright © 2018-2020 open-wc
            </div>
          </main>
        </div>
        <div class="global-ui"></div>
      </div>

      {% include "partials/sidebar-script.njk" %}
      {% include 'partials/service-worker.njk' %}
    </body>

  </html>
