src/pages/index.html

<html>
  <head>
    <!-- Greeting API Setup -->
    <script>
      globalThis.addEventListener('DOMContentLoaded', () => {
        globalThis.document.getElementsByTagName('form')[0].addEventListener('submit', async (e) => {
          e.preventDefault();

          const form = new FormData(e.currentTarget);
          const name = form.get('name');
          const data = await fetch(new URL(`/api/greeting?name=${name}`, window.location.href)).then(resp => resp.json());

          document.getElementById('greeting-output').textContent = `${data.message}! 👋`;
        });
      });
    </script>

    <!-- Fragment API Setup -->
    <script>
      globalThis.addEventListener('DOMContentLoaded', () => {
        const limit = 10;
        const page = limit;
        let offset = 0 - page;

        globalThis.document.getElementById('load-products').addEventListener('click', async () => {
          offset = offset += page;

          const html = await fetch(`/api/fragment?offset=${offset}&limit=10`).then(resp => resp.text());
          const fragment = Document.parseHTMLUnsafe(html, 'text/html', {
            includeShadowRoots: true
          });

          document.getElementById('load-products-output').insertAdjacentHTML('beforeend', fragment.body.innerHTML);
        });
      });
    </script>
  </head>

  <body>
    <article>
      <h2>JSON API</h2>
      <p>This is an example of a Greenwood API Route returning JSON when fetched on-submit of the form to display a message on the page.  You can see it fire in the network tab as <i>/api/greeting</i></p>
      <form>
        <label>
          <input type="text" name="name" placeholder="your name..." required/>
        </label>
        <button type="submit">Click me for a greeting!</button>
      </form>
      <h2 id="greeting-output"></h2>
    </article>
    <article>
      <h2>Fragments API (w/ WCC)</h2>
      <p>This is an example of a Greenwood API route returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Product Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/fragment</i></p>
      <div id="load-products-output" class="products-cards-container" aria-live="polite"></div>
      <button id="load-products">Load More Products</button>
    </article>
  </body>
</html>