Update defaults directory structure to `src` and `dist` (#132)

* chore: update defaults in docs

* chore: update config defaults

* test: update tests to config defaults

* chore: update gitignore to new defaults

* docs: update readme to new defaults

* chore: update examples to new defaults

* chore: update default exclude in lang server

* chore: update tests

* test: fix failing tests

* chore: update www defaults

19 files changed, 1301 insertions, 0 deletions

diff --git a/examples/snowpack/src/components/Banner.astro b/examples/snowpack/src/components/Banner.astro
new file mode 100644
index 000000000..565027678
--- /dev/null
+++ b/examples/snowpack/src/components/Banner.astro
@@ -0,0 +1,10 @@
+<section class="grid-banner">
+  <div class="notification">
+    <div class="container">
+      Snowpack 3.0 is out now!
+      <a href="/posts/2021-01-13-snowpack-3-0">
+        Read the announcement post →
+      </a>
+    </div>
+  </div>
+</section>
diff --git a/examples/snowpack/src/components/BaseHead.astro b/examples/snowpack/src/components/BaseHead.astro
new file mode 100644
index 000000000..a96fc7327
--- /dev/null
+++ b/examples/snowpack/src/components/BaseHead.astro
@@ -0,0 +1,38 @@
+---
+import Banner from './Banner.astro';
+import Nav from './Nav.astro';
+
+export let title: string;
+export let description: string;
+export let permalink: string;
+---
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+<link rel="manifest" href="/favicon/site.webmanifest" />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content="{description}" />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={permalink} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content="https://www.snowpack.dev/img/social-2.jpg" />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={permalink} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg" />
+
+<!-- Global Stylesheets -->
+<link rel="stylesheet" href="/css/app.css" />
+<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700;900&display=swap" rel="stylesheet" />
diff --git a/examples/snowpack/src/components/BaseLayout.astro b/examples/snowpack/src/components/BaseLayout.astro
new file mode 100644
index 000000000..040739515
--- /dev/null
+++ b/examples/snowpack/src/components/BaseLayout.astro
@@ -0,0 +1,20 @@
+---
+import Banner from './Banner.astro';
+import Nav from './Nav.astro';
+---
+
+<Banner />
+<Nav />
+
+<slot></slot>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-9"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', 'UA-130280175-9', { page_path: location.pathname === '/' ? (location.pathname + location.hash) : (location.pathname) });
+</script>
\ No newline at end of file
diff --git a/examples/snowpack/src/components/Card.css b/examples/snowpack/src/components/Card.css
new file mode 100644
index 000000000..2fa7efe20
--- /dev/null
+++ b/examples/snowpack/src/components/Card.css
@@ -0,0 +1,67 @@
+.card {
+  display: flex;
+  grid-column: span 1;
+  overflow: hidden;
+  font-family: Open Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+    Roboto, sans-serif;
+  color: #1a202c;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+}
+
+.card:hover {
+  border-color: #2a85ca;
+  box-shadow: 0 2px 2px 0 rgba(46, 94, 130, 0.4);
+}
+
+.card:hover .card-image {
+  opacity: 0.9;
+}
+
+.card:nth-child(4n + 0) .card-image {
+  background: #f2709c;
+  background: linear-gradient(30deg, #ff9472, #f2709c);
+}
+
+.card:nth-child(4n + 1) .card-image {
+  background: #fbd3e9;
+  background: linear-gradient(30deg, #bb377d, #fbd3e9);
+}
+
+.card:nth-child(4n + 2) .card-image {
+  background: #b993d6;
+  background: linear-gradient(30deg, #8ca6db, #b993d6);
+}
+
+.card:nth-child(4n + 3) .card-image {
+  background: #00d2ff;
+  background: linear-gradient(30deg, #3a7bd5, #00d2ff);
+}
+
+.card-image {
+  width: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+}
+
+.card-image__sm {
+  flex-grow: 1;
+  height: 120px;
+}
+
+.card-image__lg {
+  height: 200px;
+}
+
+.card-text {
+  padding: 1rem;
+}
+
+.card-title {
+  margin: 0 0 0.25rem 0;
+  font-weight: 600;
+  font-size: 20px;
+  font-family: 'Overpass';
+  line-height: 1.1;
+}
diff --git a/examples/snowpack/src/components/Card.jsx b/examples/snowpack/src/components/Card.jsx
new file mode 100644
index 000000000..ee9460dcf
--- /dev/null
+++ b/examples/snowpack/src/components/Card.jsx
@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import { format as formatDate, parseISO } from 'date-fns';
+import './Card.css';
+
+export default function Card({ item }) {
+  return (
+    <article class="card">
+      <a
+        href={item.url}
+        style="text-decoration: none; color: initial; flex-grow: 1;"
+      >
+        {item.img ? (
+          <img
+            class="card-image card-image__sm"
+            src={item.img}
+            alt=""
+            style={{ background: item.imgBackground || undefined }}
+          />
+        ) : (
+          <div class="card-image card-image__sm"></div>
+        )}
+        <div class="card-text">
+          <h3 class="card-title">{item.title}</h3>
+          {item.date && (
+            <time class="snow-toc-link">
+              {formatDate(parseISO(item.date), 'MMMM	d, yyyy')}
+            </time>
+          )}
+          {item.description && (
+            <p style="margin: 0.5rem 0 0.25rem;">{item.description}</p>
+          )}
+        </div>
+      </a>
+    </article>
+  );
+}
diff --git a/examples/snowpack/src/components/CompanyLogo.jsx b/examples/snowpack/src/components/CompanyLogo.jsx
new file mode 100644
index 000000000..98be3f2eb
--- /dev/null
+++ b/examples/snowpack/src/components/CompanyLogo.jsx
@@ -0,0 +1,13 @@
+import {h} from 'preact';
+
+export default function CompanyLogo({ user }) {
+  return (
+    <a href={user.url} target="_blank" rel="noopener noreferrer nofollow">
+      {user.img ? (
+        <img class="company-logo" src={user.img} alt={user.name} />
+      ) : (
+        <span>{user.name}</span>
+      )}
+    </a>
+  );
+}
diff --git a/examples/snowpack/src/components/ContentfulRichText.jsx b/examples/snowpack/src/components/ContentfulRichText.jsx
new file mode 100644
index 000000000..1f4528f6b
--- /dev/null
+++ b/examples/snowpack/src/components/ContentfulRichText.jsx
@@ -0,0 +1,22 @@
+import { BLOCKS, MARKS } from '@contentful/rich-text-types';
+import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
+
+const options = {
+  renderMark: {
+    [MARKS.BOLD]: (text) => `<custom-bold>${text}<custom-bold>`,
+  },
+  renderNode: {
+    [BLOCKS.PARAGRAPH]: (node, next) =>
+      `<custom-paragraph>${next(node.content)}</custom-paragraph>`,
+  },
+};
+
+export function RichTextDocument({ document }) {
+  return (
+    <div
+      dangerouslySetInnerHTML={{
+        html: documentToHtmlString(document, options),
+      }}
+    />
+  );
+}
diff --git a/examples/snowpack/src/components/Hero.astro b/examples/snowpack/src/components/Hero.astro
new file mode 100644
index 000000000..441f30f12
--- /dev/null
+++ b/examples/snowpack/src/components/Hero.astro
@@ -0,0 +1,202 @@
+<style lang="scss">
+  @use '../../public/css/var' as *;
+  @use '../../public/css/animations' as *;
+
+  .hero {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+    min-height: 20rem;
+    max-height: 30rem;
+    color: #111;
+    line-height: 1.5;
+    background: #2a85ca40;
+    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: calc(100% + 100px) calc(100% + 64px);
+    background-size: 50%;
+    border-bottom: 1px solid #0003;
+    //margin-top: $nav-height;
+
+    @media (min-width: $breakpoint-l) {
+      margin: 0;
+    }
+
+    a {
+      color: white;
+    }
+
+    > svg {
+      display: block;
+      margin: auto;
+      opacity: 0.9;
+    }
+
+    .logo {
+      position: absolute;
+      right: 0;
+      width: 100%;
+    }
+    .logo path {
+      fill: #fff;
+    }
+
+    .section {
+      padding: 1rem * 2;
+    }
+  }
+
+  .hero-cta {
+    display: flex;
+    justify-content: center;
+    margin: 1.5rem auto 0;
+  }
+
+  .header-link {
+    padding-left: 2px;
+  }
+
+  .header-logo {
+    display: flex;
+    align-items: center;
+    float: left;
+    margin: 0 -20px 0 0;
+    font-weight: bold;
+    font-size: 36px;
+    line-height: 1;
+
+    @media (min-width: $breakpoint-m) {
+      margin: 0 20px 0 0;
+    }
+
+    svg {
+      width: 31px;
+      height: 31px;
+      margin-right: 8px;
+      margin-left: 2px;
+      padding: 0;
+      color: #fff;
+    }
+  }
+
+  .header-snowpack {
+    margin: 0 auto 0.75rem;
+    font-weight: 900;
+    font-size: 3.5rem;
+    font-weight: 700;
+    font-family: $heading;
+    line-height: 1;
+    letter-spacing: -0.045em;
+    text-align: center;
+    opacity: 0.9;
+
+    @media (min-width: $breakpoint-m) {
+      max-width: none;
+      font-size: 5.75rem;
+      opacity: 1;
+    }
+  }
+
+  .header-snowpack-subtitle {
+    margin: 0;
+    margin: auto;
+    font-weight: 500;
+    font-family: $heading;
+    font-size: 2rem;
+    line-height: 1;
+    letter-spacing: -1px;
+    text-align: center;
+
+    @media (min-width: $breakpoint-m) {
+      font-size: 3rem;
+    }
+  }
+
+  .copy-button {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 292px;
+    padding: 0.75rem 1.25rem;
+    padding-bottom: 0.75rem;
+    font-size: 100%;
+    font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace;
+    line-height: 1.5rem;
+    background-color: white;
+    border: 1px solid #0006;
+    border-radius: 4px;
+    cursor: pointer;
+    @include animation-copy-button;
+
+    svg,
+    .faded {
+      color: #ccc;
+      transition: color 0.1s ease-out;
+    }
+  }
+
+  // I don't think this is used
+  .copy-button.active {
+    animation: pulse 0.5s;
+    animation-iteration-count: 1;
+
+    svg {
+      color: #ccc;
+    }
+  }
+</style>
+
+<div class="hero">
+  <div class="section">
+    <h1 class="header-snowpack">Snowpack</h1>
+    <p class="header-snowpack-subtitle">The faster frontend build tool.</p>
+
+    <div class="hero-cta">
+      <a href="/tutorials/quick-start" class="button button-primary">Get started</a>
+      <div style="margin: 0.5rem"></div>
+      <button id="copy-button" class="copy-button hidden-mobile" data-clipboard-text="npm install snowpack">
+        <span class="faded" style="margin-right: 0.75rem;">$</span>
+        <span id="copy-button-text">npm install snowpack</span>
+        <svg style="height: 22px;width: 22px;margin: -0.1rem -0.1rem 0 0.75rem;" aria-hidden="true" focusable="false"
+          data-prefix="far" data-icon="clone" class="svg-inline--fa fa-clone fa-w-16" role="img"
+          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
+          <path fill="currentColor"
+            d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z">
+          </path>
+        </svg>
+      </button>
+      <script type="module">
+        import Clipboard from 'https://cdn.skypack.dev/pin/clipboard@v2.0.6-eJjsV6JYCJOnOsq3YfEc/min/clipboard.js';
+        const clippy = new Clipboard('.copy-button');
+        const copyText = document.getElementById('copy-button').innerHTML;
+        clippy.on('success', function (e) {
+          document.getElementById('copy-button').style.minWidth = document.getElementById('copy-button').offsetWidth;
+          console.info('Trigger:', e);
+          document.getElementById('copy-button').innerHTML = '<span>copied to clipboard!</span>';
+          document.getElementById('copy-button').addEventListener("mouseleave", function (event) {
+            document.getElementById('copy-button').innerHTML = copyText;
+          }, false);
+
+          setTimeout(() => {
+            e
+              .trigger
+              .classList
+              .remove('active')
+          }, 1000);
+          e.clearSelection();
+        });
+      </script>
+    </div>
+    <div class="hero-cta">
+      <!-- Place this tag where you want the button to render. -->
+      <div class="hidden-mobile" style="text-align: center; height: 36px;">
+        <a class="github-button" href="https://github.com/snowpackjs/snowpack" data-icon="octicon-star"
+          data-size="large" data-show-count="true" aria-label="Star snowpackjs/snowpack on GitHub">Star</a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/examples/snowpack/src/components/MainLayout.astro b/examples/snowpack/src/components/MainLayout.astro
new file mode 100644
index 000000000..c9ce65f08
--- /dev/null
+++ b/examples/snowpack/src/components/MainLayout.astro
@@ -0,0 +1,20 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import Menu from './Menu.astro';
+---
+
+<BaseLayout>
+  <div class="container">
+    <section class="snow-view__docs is-full">
+
+      <aside id="nav-primary" class="snow-view-nav">
+        <Menu />
+      </aside>
+
+      <article class="snow-view-main">
+        <slot></slot>
+      </article>
+
+    </section>
+  </div>
+</BaseLayout>
diff --git a/examples/snowpack/src/components/Menu.astro b/examples/snowpack/src/components/Menu.astro
new file mode 100644
index 000000000..120a8af86
--- /dev/null
+++ b/examples/snowpack/src/components/Menu.astro
@@ -0,0 +1,130 @@
+<style lang="scss">
+  @use '../../public/css/var' as *;
+
+  .toc {
+    transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
+  }
+
+  .contents {
+    margin: 0;
+    padding: 0;
+    line-height: 1.8;
+    list-style: none;
+  }
+
+  .section {
+    + .section {
+      margin-top: 1.5rem;
+    }
+  }
+
+  .header {
+    margin-top: 0;
+    margin-bottom: 8px;
+    color: rgba($white, 0.6);
+    font-weight: 600;
+    font-size: 20px;
+    font-family: $heading;
+    line-height: 1.2em;
+
+    @media (min-width: $breakpoint-m) {
+      color: $dark-grey;
+    }
+  }
+
+  .items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .link,
+  .subnav a {
+    position: relative;
+    display: block;
+    color: $white;
+    text-decoration: none;
+    border: none;
+    transition: color 0.3s;
+
+    @media (min-width: $breakpoint-m) {
+      color: $grey;
+    }
+
+    &::before {
+      position: absolute;
+      top: -2px;
+      left: -19px;
+      font-weight: 400;
+      font-size: 26px;
+      line-height: 1;
+      opacity: 0;
+      transition: left 0.14s ease-out;
+      content: '▸';
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.active {
+      color: #0c8cec;
+      text-decoration: underline;
+
+      &::before {
+        left: -17px;
+        opacity: 1;
+      }
+    }
+  }
+</style>
+
+<nav class="toc">
+  <ol class="contents">
+    <li class="section">
+      <span class="header">Concepts</span>
+      <ol class="items">
+        <li><a class="link" href="/concepts/how-snowpack-works">How Snowpack Works</a></li>
+        <li><a class="link" href="/concepts/dev-server">The Dev Server</a></li>
+        <li><a class="link" href="/concepts/build-pipeline">The Build Pipeline</a></li>
+        <li><a class="link" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a></li>
+      </ol>
+    </li>
+
+    <li class="section">
+      <span class="header">Getting Started</span>
+      <ol class="items">
+        <li><a class="link" href="/tutorials/quick-start">Quick Start</a></li>
+        <li><a class="link" href="/tutorials/getting-started">Getting Started</a></li>
+        <li><a class="link" href="/tutorials/react">React</a></li>
+        <li><a class="link" href="/tutorials/svelte">Svelte</a></li>
+      </ol>
+    </li>
+
+    <li class="section">
+      <a class="link" href="/guides"><span class="header">Guides</span></a>
+    </li>
+
+    <li class="section">
+      <span class="header">Reference</span>
+      <ol class="items">
+        <li><a class="link" href="/reference/configuration">snowpack.config.js</a></li>
+        <li><a class="link" href="/reference/cli-command-line-interface">Command Line API</a></li>
+        <li><a class="link" href="/reference/javascript-interface">JavaScript API</a></li>
+        <li><a class="link" href="/reference/plugins">Plugin API</a></li>
+        <li><a class="link" href="/reference/environment-variables">Environment Variables</a></li>
+        <li><a class="link" href="/reference/hot-module-replacement">HMR API</a></li>
+        <li><a class="link" href="/reference/supported-files">Supported Files</a></li>
+        <li><a class="link" href="/reference/common-error-details">Common Errors</a></li>
+      </ol>
+    </li>
+
+    <li class="section">
+      <a class="link" href="/plugins"><span class="header">Plugin Catalog</span></a>
+    </li>
+
+    <li class="section">
+      <a class="link" href="/news"><span class="header">Community & News</span></a>
+    </li>
+  </ol>
+</nav>
diff --git a/examples/snowpack/src/components/Nav.astro b/examples/snowpack/src/components/Nav.astro
new file mode 100644
index 000000000..0c97dd425
--- /dev/null
+++ b/examples/snowpack/src/components/Nav.astro
@@ -0,0 +1,352 @@
+---
+export let version: string = '3.1.2';
+---
+
+<style lang="scss">
+  @use '../../public/css/var' as *;
+
+  /**
+   * Top nav
+   * The thing at the top
+   */
+
+  .nav {
+    position: sticky;
+    top: 0;
+    z-index: map-get($map: $layers, $key: 'nav');
+    display: grid;
+    grid-template-areas:
+      'mobile logo version'
+      'search search search';
+    grid-template-rows: $nav-height $nav-height;
+    grid-template-columns: 1fr 2fr 1fr;
+    align-items: center;
+    height: $nav-height;
+    padding-right: 0.5rem;
+    padding-left: 0.625rem;
+    color: $white;
+    background-color: $dark-blue;
+
+    :global(body.is-nav-open) & {
+      height: $nav-height * 2;
+    }
+
+    @media (min-width: $breakpoint-m) {
+      display: flex;
+      height: $nav-height;
+      padding-left: 0;
+    }
+  }
+
+  .link {
+    display: inline-block;
+    padding: 0.5em;
+    color: $white;
+    font-weight: 500;
+    text-decoration: none;
+    opacity: 0.7;
+    transition: opacity 150ms linear;
+
+    &:focus,
+    &:hover {
+      opacity: 1;
+    }
+
+    &__desktop {
+      display: none;
+
+      @media (min-width: $breakpoint-m) {
+        display: block;
+      }
+    }
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    grid-area: logo;
+    justify-content: center;
+    padding: 0.5rem;
+    color: $white;
+    font-size: 24px;
+    text-decoration: none;
+
+    @media (min-width: $breakpoint-m) {
+      justify-content: flex-start;
+      padding: 0.5rem 1.25rem;
+    }
+  }
+
+  .logo-icon {
+    display: block;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.25em;
+    margin-bottom: 0.15rem;
+    fill: currentColor;
+  }
+
+  .logo-type {
+    font-weight: 700;
+    font-family: $heading;
+    letter-spacing: -0.03em;
+    padding-top: 0.2rem;
+  }
+
+  .mobile-open {
+    display: flex;
+    grid-area: mobile;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    color: $white;
+    font-size: 16px;
+    background: none;
+    border: none;
+    appearance: none;
+
+    @media (min-width: $breakpoint-m) {
+      display: none;
+    }
+  }
+
+  .search {
+    position: relative;
+    z-index: 1000;
+    display: flex;
+    flex-grow: 1;
+    grid-area: search;
+    margin: 0 6px;
+    > * {
+      flex-grow: 1;
+    }
+
+    > :global(.algolia-autocomplete) {
+      width: 100%;
+    }
+
+    @media (min-width: $breakpoint-m) {
+      max-width: 600px;
+    }
+
+    @media (max-width: $breakpoint-m - 1) {
+      & {
+        display: none;
+      }
+      body.is-nav-open & {
+        display: flex;
+      }
+    }
+
+    & .sr-only {
+      display: none;
+    }
+  }
+
+  .search-hint {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    padding: 6px 12px;
+    color: #c2ced9;
+    font-size: 16px;
+    pointer-events: none;
+
+    & * {
+      font-family: $code;
+    }
+
+    &::before {
+      display: inline-block;
+      width: 1px;
+      height: 1.5em;
+      margin-right: 0.5em;
+      vertical-align: -35%;
+      background-color: rgba($white, 0.25);
+      content: '';
+    }
+
+    @media (min-width: $breakpoint-m) {
+      display: block;
+    }
+  }
+
+  .search-input {
+    flex-grow: 1;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding-top: 0.5rem;
+    padding-right: 1rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    overflow: visible;
+    color: #fff;
+    font-weight: 500;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: inherit;
+    background-color: #446e8f;
+    border-color: rgba($white, 0.25);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 0.25rem;
+    outline: 0;
+    transition-timing-function: ease-in-out;
+    transition-duration: 0.2s;
+    transition-property: border-color, color;
+    -webkit-font-smoothing: antialiased;
+
+    &:focus {
+      color: white;
+      border-color: rgba($white, 0.75);
+
+      &::placeholder {
+        color: rgba($white, 0.8);
+      }
+    }
+    &::placeholder {
+      color: #c2ced9;
+    }
+
+    &__desktop {
+      display: none;
+
+      @media (min-width: $breakpoint-m) {
+        display: block;
+      }
+    }
+  }
+
+  .version {
+    grid-area: version;
+    margin-left: 0.5em;
+    font-size: 0.8em;
+    font-family: $code;
+    text-align: right;
+
+    @media (min-width: $breakpoint-m) {
+      text-align: left;
+
+      &::after {
+        display: inline-block;
+        width: 1px;
+        height: 1.5em;
+        margin-left: 0.5em;
+        vertical-align: -25%;
+        background-color: rgba($white, 0.25);
+        content: '';
+      }
+    }
+  }
+</style>
+
+<nav class="nav">
+  <button id="toc-drawer-button" class="mobile-open" type="button" aria-expanded="false"
+    aria-controls="nav-primary">
+    <svg focusable="false" class="snow-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
+      <title>Toggle mobile menu</title>
+      <path
+        d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
+      </path>
+    </svg>
+  </button>
+  <a class="logo" href="/">
+    <svg class="logo-icon" viewbox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
+        <path
+          d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z"
+          id="Shape"></path>
+      </g>
+    </svg>
+    <span class="logo-type">Snowpack</span>
+  </a>
+  <div class="search">
+    <input type="text" name="search" placeholder="Search documentation..." class="search-input"
+      id="search-form-input">
+    <span class="search-hint">
+      <span class="sr-only">Press </span>
+      <kbd class="font-sans"><abbr title="Command" style="text-decoration: none;">⌘</abbr></kbd>
+      <span class="sr-only"> and </span>
+      <kbd class="font-sans">K</kbd>
+      <span class="sr-only"> to search</span>
+    </span>
+  </div>
+  <div style="flex-grow: 1"></div>
+  <a href="https://github.com/snowpackjs/snowpack/releases" target="_blank" class="link version">
+    {`v${version}`}
+  </a>
+  <a href="https://github.com/snowpackjs/snowpack" target="_blank" class="link link__desktop">
+    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="snow-icon" role="img"
+      xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512">
+      <path fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
+      </path>
+    </svg>
+  </a>
+  <a href="https://twitter.com/snowpackjs" target="_blank" class="link link__desktop">
+    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="snow-icon" role="img"
+      xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
+      <path fill="currentColor"
+        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
+      </path>
+    </svg>
+  </a>
+  <a href="https://discord.gg/snowpack" target="_blank" class="link link__desktop">
+    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="snow-icon" role="img"
+      xmlns="http://www.w3.org/2000/svg" viewbox="0 0 210 240">
+      <path
+        d="M84.79 90.45c-6.45 0-11.55 5.66-11.55 12.57s5.21 12.57 11.55 12.57c6.45 0 11.55-5.66 11.55-12.57.11-6.91-5.09-12.57-11.55-12.57zm41.32 0c-6.45 0-11.55 5.66-11.55 12.57s5.21 12.57 11.55 12.57c6.45 0 11.55-5.66 11.55-12.57s-5.09-12.57-11.55-12.57z" />
+      <path fill="currentColor"
+        d="M185.4 0H24.6C11.04 0 0 11.04 0 24.72v162.24c0 13.68 11.04 24.72 24.6 24.72h136.08l-6.36-22.2 15.36 14.28 14.52 13.44L210 240V24.72C210 11.04 198.96 0 185.4 0zm-46.32 156.72s-4.32-5.16-7.92-9.72c15.72-4.44 21.72-14.28 21.72-14.28-4.92 3.24-9.6 5.52-13.8 7.08-6 2.52-11.76 4.2-17.4 5.16-11.52 2.16-22.08 1.56-31.08-.12-6.84-1.32-12.72-3.24-17.64-5.16-2.76-1.08-5.76-2.4-8.76-4.08-.36-.24-.72-.36-1.08-.6-.24-.12-.36-.24-.48-.36-2.16-1.2-3.36-2.04-3.36-2.04s5.76 9.6 21 14.16c-3.6 4.56-8.04 9.96-8.04 9.96-26.52-.84-36.6-18.24-36.6-18.24 0-38.64 17.28-69.96 17.28-69.96 17.28-12.96 33.72-12.6 33.72-12.6l1.2 1.44c-21.6 6.24-31.56 15.72-31.56 15.72s2.64-1.44 7.08-3.48c12.84-5.64 23.04-7.2 27.24-7.56.72-.12 1.32-.24 2.04-.24 7.32-.96 15.6-1.2 24.24-.24 11.4 1.32 23.64 4.68 36.12 11.52 0 0-9.48-9-29.88-15.24l1.68-1.92s16.44-.36 33.72 12.6c0 0 17.28 31.32 17.28 69.96 0 0-10.2 17.4-36.72 18.24z" />
+    </svg>
+  </a>
+</nav>
+
+<script>
+  function handleMobileNav(evt) {
+    evt.preventDefault();
+    /*If hidden-mobile class is enabled that means we are on desktop do overflow normal but we
+      if we are at mobile fixed body position, so that its not scrollable(which currently causing bug) and navbar  handling its
+      owns scroll. Case to consider there are chance use can open navbar using toggle button and user when click on any link
+      body postion should be unset
+      */
+    document.body.classList.toggle('is-nav-open');
+    const isOpen = document.body.classList.contains('is-nav-open');
+    if (isOpen) {
+      evt.target.setAttribute('aria-expanded', 'true');
+    } else {
+      evt.target.setAttribute('aria-expanded', 'false');
+    }
+  }
+
+  const mobileNavBtn = document.getElementById('toc-drawer-button');
+  mobileNavBtn.addEventListener('click', handleMobileNav);
+  mobileNavBtn.addEventListener('touchend', handleMobileNav);
+  if (window.location.pathname.startsWith('/posts')) {
+    mobileNavBtn.style.display = 'none';
+  }
+
+  const searchFormInputEl = document.getElementById('search-form-input');
+  searchFormInputEl.addEventListener('keyup', () => {
+    const gridTocEl = document.querySelector('#nav-primary');
+    if (searchFormInputEl.value) {
+      gridTocEl.classList.add('is-mobile-hidden');
+    } else {
+      gridTocEl.classList.remove('is-mobile-hidden');
+    }
+  });
+
+  document.onkeydown = function (e) {
+    if ((e.ctrlKey || e.metaKey) && e.which == 75) {
+      e.preventDefault();
+      searchFormInputEl.focus();
+    }
+  };
+</script>
+<script type="module" src="./docsearch.js"></script>
+<doc-search api-key="562139304880b94536fc53f5d65c5c19" selector="#search-form-input"></doc-search>
diff --git a/examples/snowpack/src/components/NewsAssets.svelte b/examples/snowpack/src/components/NewsAssets.svelte
new file mode 100644
index 000000000..f53078e79
--- /dev/null
+++ b/examples/snowpack/src/components/NewsAssets.svelte
@@ -0,0 +1,14 @@
+<script>
+	//let name = 'world';
+	// TODO make this dynamic?
+</script>
+
+<h3>Assets</h3>
+
+<ul>
+	<li><a href="(img/snowpack-logo-white.png">Snowpack Logo (PNG, White)</a></li>
+	<li><a href="(img/snowpack-logo-dark.png">Snowpack Logo (PNG, Dark)</a></li>
+	<li><a href="(img/snowpack-logo-black.png">Snowpack Logo (PNG, Black)</a></li>
+	<li><a href="(img/snowpack-wordmark-white.png">Snowpack Wordmark (PNG, White)</a></li>
+	<li><a href="(img/snowpack-wordmark-black.png">Snowpack Wordmark (PNG, Black)</a></li>
+</ul>
\ No newline at end of file
diff --git a/examples/snowpack/src/components/NewsTitle.vue b/examples/snowpack/src/components/NewsTitle.vue
new file mode 100644
index 000000000..00194ac1e
--- /dev/null
+++ b/examples/snowpack/src/components/NewsTitle.vue
@@ -0,0 +1,15 @@
+<template>
+  <h2 class="content-title">
+    {{ title }}
+  </h2>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/examples/snowpack/src/components/PluginSearchPage.jsx b/examples/snowpack/src/components/PluginSearchPage.jsx
new file mode 100644
index 000000000..51c7e6b0f
--- /dev/null
+++ b/examples/snowpack/src/components/PluginSearchPage.jsx
@@ -0,0 +1,121 @@
+import { h, Fragment } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import Styles from './PluginSearchPage.module.css';
+
+async function searchPlugins(val) {
+  const params3 = new URLSearchParams([
+    ['q', 'snowpack plugin ' + (val || '')],
+    ['count', '100'],
+  ]);
+  const res = await fetch(
+    `https://api.skypack.dev/v1/search?${params3.toString()}`,
+  );
+  const jsonres = await res.json();
+  return jsonres.results;
+}
+
+function Card({ result }) {
+  const updatedAtFormatted = Intl.DateTimeFormat('en', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(Date.parse(result.updatedAt));
+  return (
+    <li class={Styles.Card}>
+      <img class={Styles.Icon__Plugin} src="/img/plug-light.svg" />
+      <header class={Styles.CardHeader}>
+        <h3 class={Styles.CardName}>
+          <a href="https://www.npmjs.com/package/{result.name}" target="_blank">
+            <span itemprop="name">{result.name}</span>
+          </a>
+        </h3>
+      </header>
+      <p class={Styles.CardDesc} itemprop="description">
+        {result.description.split('. ')[0]}
+      </p>
+      <p class={Styles.CardSubtitle}>
+        Updated
+        <time class="" datetime={result.updatedAt}>
+          {updatedAtFormatted}
+        </time>
+      </p>
+    </li>
+  );
+}
+
+function PluginSearchPageLive() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const [results, setResults] = useState(null);
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q'));
+  useEffect(() => {
+    (async () => {
+      setResults(await searchPlugins(searchParams.get('q')));
+    })();
+  }, []);
+
+  async function onFormSubmit(e) {
+    e.preventDefault();
+    const form = new FormData(e.target);
+    const formula = form.get('q');
+    // document.getElementById('loading-message').style.display = 'block';
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set('q', formula);
+    window.history.pushState(null, null, '?' + searchParams.toString());
+    setSearchQuery(formula);
+    setResults(await searchPlugins(formula));
+    return false;
+  }
+
+  return (
+    <>
+      <form
+        name="myform"
+        id="myform"
+        class={Styles.Form}
+        action="https://www.npmjs.com/search"
+        method="GET"
+        onSubmit={onFormSubmit}
+      >
+        <input
+          type="search"
+          name="q"
+          defaultValue={searchQuery}
+          placeholder="search Sass, sitemaps, image optimization..."
+          class={Styles.Input}
+        />
+        <button type="submit" class={Styles.Submit}>
+          Search
+        </button>
+      </form>
+      <div class={Styles.Count} id="total-result-count">
+        {!searchQuery &&
+          results &&
+          results.length > 50 &&
+          `${results.length}+ plugins available!`}
+      </div>
+      <section id="search-results" class={Styles.Results}>
+        {!results && (
+          <div id="loading-message" class={Styles.Loading}>
+            Loading...
+          </div>
+        )}
+        {results && results.length === 0 && (
+          <ul class={Styles.CardList}>
+            <li style="margin: 1rem; text-align: center;">No results found.</li>
+          </ul>
+        )}
+        {results && results.length > 0 && (
+          <ul class={Styles.CardList}>
+            {results.map((r) => (
+              <Card result={r} />
+            ))}
+          </ul>
+        )}
+      </section>
+    </>
+  );
+}
+
+export default function PluginSearchPage(props) {
+  return import.meta.env.astro ? <div>Loading...</div> : <PluginSearchPageLive {...props} />
+}
diff --git a/examples/snowpack/src/components/PluginSearchPage.module.css b/examples/snowpack/src/components/PluginSearchPage.module.css
new file mode 100644
index 000000000..d67dfd72d
--- /dev/null
+++ b/examples/snowpack/src/components/PluginSearchPage.module.css
@@ -0,0 +1,131 @@
+.Card {
+  margin: 0.5rem 0.25em;
+  border-radius: 4px;
+  padding: 0.5rem 0.5rem 0.5rem 48px;
+  flex-direction: column;
+  position: relative;
+  display: flex;
+  grid-column: span 1;
+  overflow: hidden;
+  font-family: Open Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
+    Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Segoe UI, Roboto,
+    sans-serif;
+  color: #1a202c;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+}
+
+.Card:nth-child(3n + 2) .Icon__Plugin {
+  filter: hue-rotate(-60deg);
+}
+
+.Card:nth-child(3n + 3) .Icon__Plugin {
+  filter: hue-rotate(-120deg);
+}
+
+.CardList {
+  list-style: none;
+  max-width: 600px;
+  padding-left: 0;
+}
+
+.CardName {
+  margin: 0;
+  font-weight: 500;
+}
+
+.CardHeader {
+  font-size: 1.1447rem;
+}
+
+.CardDesc {
+  max-width: 80ch;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+  line-height: 1.25;
+}
+
+.CardSubtitle {
+  margin: 0;
+  color: #7986a5;
+  font-size: 0.8735804647362989em;
+}
+
+.Count {
+  max-width: 600px;
+  min-height: 24px;
+  margin: 0.5rem 0 1rem;
+  color: rgba(black, 0.6);
+  font-weight: 300;
+  font-size: 1em;
+  font-style: italic;
+  text-align: center;
+
+  @media (min-width: 600px) {
+    font-size: 1.2em;
+  }
+}
+
+.Form {
+  display: flex;
+  width: 100%;
+  max-width: 600px;
+}
+
+.Icon__Plugin {
+  height: 52px;
+  width: 52px;
+  opacity: 0.5;
+  transform: rotate(45deg);
+  /* background: radial-gradient(to top,red,blue); */
+  position: absolute;
+  top: 13px;
+  left: -15px;
+}
+
+.Loading {
+  margin: 1rem;
+  text-align: center;
+}
+
+.Input {
+  flex-grow: 1;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0.25em 0.75em;
+  font-size: 1em;
+  border-width: 1px 0 1px 1px;
+  border-radius: 4px 0 0 4px;
+  box-shadow: 0 0 0 2px rgba(46, 94, 130, 0);
+  transition: box-shadow 150ms linear;
+  appearance: none;
+}
+
+.Input:focus {
+  border-color: #2e5e82;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(46, 94, 130, 1);
+}
+
+.Input:focus + .Submit {
+  box-shadow: 0 0 0 2px rgba(46, 94, 130, 1);
+}
+
+.Results {
+  max-width: 600px;
+}
+
+.Submit {
+  padding: 0.5em 1em;
+  color: white;
+  font-weight: 700;
+  font-size: 1em;
+  font-family: 'Overpass', sans-serif;
+  background-color: #2e5e82;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  box-shadow: 0 0 0 2px rgba(46, 94, 130, 0);
+  transition: box-shadow 150ms linear;
+  appearance: none;
+}
diff --git a/examples/snowpack/src/components/PokemonLookup.astro b/examples/snowpack/src/components/PokemonLookup.astro
new file mode 100644
index 000000000..0de7713e3
--- /dev/null
+++ b/examples/snowpack/src/components/PokemonLookup.astro
@@ -0,0 +1,16 @@
+---
+export let number: number;
+
+const pokemonDataReq = await fetch(`https://pokeapi.co/api/v2/pokemon/${number}`);
+const pokemonData = await pokemonDataReq.json();
+---
+
+<style>
+.mb1 { margin-bottom: 1rem; }
+</style>
+
+<div class="notification mb1">
+    <div class="container">
+        Pokemon #{number} is: {pokemonData.name}
+    </div>
+</div>
diff --git a/examples/snowpack/src/components/Subnav.astro b/examples/snowpack/src/components/Subnav.astro
new file mode 100644
index 000000000..69560cae1
--- /dev/null
+++ b/examples/snowpack/src/components/Subnav.astro
@@ -0,0 +1,76 @@
+---
+export let title: string;
+export let inputPath: string;
+export let headers: string;
+---
+
+<style lang="scss">
+@use "../../public/css/var" as *;
+
+.header {
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: rgba($white, 0.6);
+  font-weight: 600;
+  font-size: 20px;
+  font-family: $heading;
+  line-height: 1.2em;
+
+  @media (min-width: $breakpoint-m) {
+    color: $dark-grey;
+  }
+}
+
+.subnav {
+  position: static;
+  z-index: 1;
+  padding-top: 2rem;
+
+  .header {
+    color: $dark-grey;
+  }
+
+  hr {
+    display: block;
+    height: 1px;
+    margin: 1rem 0;
+    background-color: $light-grey;
+    border: none;
+    appearance: none;
+  }
+
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    line-height: 1.8;
+  }
+
+  a {
+    color: $grey;
+  }
+}
+</style>
+
+<script type="module" defer src="/js/index.js"></script>
+<aside class="subnav">
+  {headers.length > 0 && (
+    <div>
+      <h4 class="header">On this page</h4>
+      <nav class="toc">
+        <ol>
+          {headers.map((heading) => {
+          return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
+          })}
+        </ol>
+      </nav>
+      <hr />
+    </div>
+  )}
+
+  <h4 class="header">Suggest a change</h4>
+  <a href="https://github.com/snowpackjs/snowpack/blob/main/www/{inputPath}">Edit this page on GitHub</a>
+</aside>
diff --git a/examples/snowpack/src/components/docsearch.js b/examples/snowpack/src/components/docsearch.js
new file mode 100644
index 000000000..d7ae95f30
--- /dev/null
+++ b/examples/snowpack/src/components/docsearch.js
@@ -0,0 +1,17 @@
+import docsearch from 'docsearch.js/dist/cdn/docsearch.min.js';
+
+customElements.define('doc-search', class extends HTMLElement {
+  connectedCallback() {
+    if(!this._setup) {
+      const apiKey = this.getAttribute('api-key');
+      const selector = this.getAttribute('selector');
+      docsearch({
+        apiKey: apiKey,
+        indexName: 'snowpack',
+        inputSelector: selector,
+        debug: true // Set debug to true if you want to inspect the dropdown
+      });
+      this._setup = true;
+    }
+  }
+});
\ No newline at end of file
diff --git a/examples/snowpack/src/components/index.ts b/examples/snowpack/src/components/index.ts
new file mode 100644
index 000000000..b9d3e23cb
--- /dev/null
+++ b/examples/snowpack/src/components/index.ts
@@ -0,0 +1 @@
+console.log('Hello world!');