<!doctype html>
<html lang="en">
<!--
    Hello! This page is an example McFly page.
    See more on https://ayco.io/gh/McFly
  -->
<my-head>
  <title>WebComponent.io: Web Components in Easy Mode</title>
  <link rel="stylesheet" href="prism.css" />
  <script src="prism.js" defer></script>
  <script server:setup>
    const project = {
      name: 'WebComponent.io',
      description: 'A simple reactivity system for web components',
    };
    const author = {
      name: 'Ayo Ayco',
      url: 'https://ayco.io',
      year: '2023',
    };
  </script>
  <style>
    @counter-style publish-icons {
      system: cyclic;
      symbols: '️✅';
      suffix: ' ';
    }

    main {
      font-size: large;

      & section ul {
        list-style: publish-icons;

        & li {
          margin-bottom: 0.5em;
        }
      }

      & section.jumbo {
        & .hero-statement {
          font-size: 2em;
          text-align: center;
        }
      }

      & code-block {
        overflow: auto;
      }
    }
  </style>
</my-head>

<body>
  <awesome-header>
    <span>{{ project.name }}</span>
    <span slot="description">{{ project.description }}</span>
  </awesome-header>
  <main>
    <section class="jumbo">
      <p class="hero-statement">
        Build lightweight custom elements that browsers &
        <em>you</em> understand.
      </p>
      <call-to-action></call-to-action>
      <div>
        <feature-set>
          <h2>Features</h2>
          <ul>
            <li>
              A robust API for synchronizing your component's UI and
              properties
            </li>
            <li>
              ~1 kB base class (minified, compressed) with versatile utilities
            </li>
            <li>
              Sensible life-cycle hooks that you understand and remember
            </li>
            <li>
              Use the built-in JSX-like syntax or bring your own custom
              templating
            </li>
          </ul>
        </feature-set>
      </div>
    </section>
    <section>
      <h2>Why use this base class?</h2>
      <p>
        Often times, when simple websites need a quick
        <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements"
          target="_blank">custom element</a>, the best way is still to create one extending from
        <code-block inline>HTMLElement</code-block>. However, it can quickly
        reach a point where writing the code from scratch can seem confusing
        and hard to maintain especially when compared to other projects with
        more advanced setups.
      </p>
      <p>
        Also, when coming from frameworks with an easy declarative coding
        experience (using templates), the default imperative way (e.g.,
        creating instances of elements, manually attaching event handlers, and
        other DOM manipulations) is a frequent pain point we see.
      </p>
      <p>
        This project aims to address these with virtually zero tooling
        required and thin abstractions from vanilla custom element APIs –
        giving you only the bare minimum code to be productive.
      </p>
      <p>
        It works on current-day browsers without needing compilers,
        transpilers, or polyfills.
      </p>
      <p>
        Here's an interactive custom element:
        <my-counter></my-counter>
      </p>
      <code-block language="js">
        <pre>
import { WebComponent, html } from &quot;https://esm.sh/web-component-base&quot;;

export class Counter extends WebComponent {
  static props = {
    count: 0
  }
  get template() {
    return html`
      &lt;button onClick=${() => ++this.props.count}&gt;
        ${this.props.count}
      &lt;/button&gt;
    `;
  }
}

customElements.define(&quot;my-counter&quot;, Counter);</pre>
      </code-block>
    </section>
  </main>
  <my-footer>
    <small>
      <a href="https://ayco.io/sh/wcb/tree/main/site">Website</a>
      built with <a href="https://mcfly.js.org">McFly</a>.<br />
      Copyright &copy; {{author.year}}
      <a href="{{ author.url }}">{{ author.name }}</a>.
    </small>
  </my-footer>
</body>

</html>