From 6e4367fd490f9c1748288ac10f2bf27632ae7a03 Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Sun, 21 Mar 2021 20:34:11 -0700
Subject: [PATCH] another pass at head/body handling in pages

---
 examples/snowpack/astro/layouts/base.hmx      |  42 ++--
 .../astro/layouts/content-with-cover.hmx      |  76 +++----
 examples/snowpack/astro/layouts/content.hmx   |  43 ++--
 examples/snowpack/astro/layouts/main.hmx      |  28 +--
 examples/snowpack/astro/layouts/post.hmx      | 214 +++++++++---------
 examples/snowpack/astro/pages/guides.hmx      |  58 +++--
 examples/snowpack/astro/pages/index.hmx       | 162 +++++++------
 examples/snowpack/astro/pages/news.hmx        |  90 ++++----
 examples/snowpack/astro/pages/plugins.hmx     |  23 +-
 src/@types/astro.ts                           |   1 -
 src/codegen/index.ts                          |  30 +--
 src/compiler/parse/state/tag.ts               |   4 +-
 src/optimize/styles.ts                        |   2 +-
 src/transform2.ts                             |  26 +--
 test/fixtures/hmx-basic/astro/pages/index.hmx |   8 +-
 test/snowpack-integration.test.js             |   9 +-
 16 files changed, 374 insertions(+), 442 deletions(-)

diff --git a/examples/snowpack/astro/layouts/base.hmx b/examples/snowpack/astro/layouts/base.hmx
index c002416e7..d773a07c1 100644
--- a/examples/snowpack/astro/layouts/base.hmx
+++ b/examples/snowpack/astro/layouts/base.hmx
@@ -12,7 +12,7 @@
   }
 </script>
 
-<slot:head>
+<astro:head>
   <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" />
@@ -27,14 +27,14 @@
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
-  <meta property="og:url" content={context.permalink}/>
+  <meta property="og:url" content={context.permalink} />
   <meta property="og:title" content={context.title} />
   <meta property="og:description" content={context.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={context.permalink}/>
+  <meta property="twitter:url" content={context.permalink} />
   <meta property="twitter:title" content={context.title} />
   <meta property="twitter:description" content={context.description} />
   <meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg" />
@@ -42,27 +42,21 @@
   <!-- 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" />
+</astro:head>
 
-  <!-- Note: You can then add additional, custom things here as well. -->
-  <!-- if no slot given, assume add to bottom -->
-  <slot></slot>
-</slot:head>
+<Banner></Banner>
+<Nav version={context.currentSnowpackVersion} />
 
-<slot:body>
-  <Banner></Banner>
-  <Nav version={context.currentSnowpackVersion} />
+<!-- if no slot given, assume add to bottom -->
+<slot></slot>
 
-  <!-- if no slot given, assume add to bottom -->
-  <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>
-</slot:body>
\ No newline at end of file
+<!-- 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/astro/layouts/content-with-cover.hmx b/examples/snowpack/astro/layouts/content-with-cover.hmx
index 2934ec307..858a9d31e 100644
--- a/examples/snowpack/astro/layouts/content-with-cover.hmx
+++ b/examples/snowpack/astro/layouts/content-with-cover.hmx
@@ -8,50 +8,45 @@
   }
 </script>
 
-<slot:head>
-  <style>
-    .cover-wrapper {
-      width: 100%;
-      height: 44vh;
-      min-height: 20rem;
-      max-height: 30rem;
-      position: relative;
-      background: #2a85ca40;
-      overflow: hidden;
-    }
-    .cover,
-    .cover-blur {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      height: 100%;
-      width: 100%;
-    }
+
+<style>
+  .cover-wrapper {
+    width: 100%;
+    height: 44vh;
+    min-height: 20rem;
+    max-height: 30rem;
+    position: relative;
+    background: #2a85ca40;
+    overflow: hidden;
+  }
+  .cover,
+  .cover-blur {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+  }
+  .cover-blur {
+    object-fit: cover;
+    filter: blur(3px) brightness(1.5);
+    transform: scale(1.1);
+  }
+  .cover {
+    object-fit: contain;
+    filter: brightness(1.5);
+  }
+  @media (max-width: 1200px) {
     .cover-blur {
       object-fit: cover;
-      filter: blur(3px) brightness(1.5);
-      transform: scale(1.1);
     }
     .cover {
-      object-fit: contain;
-      filter: brightness(1.5);
+      object-fit: cover;
     }
-    @media (max-width: 1200px) {
-      .cover-blur {
-        object-fit: cover;
-      }
-      .cover {
-        object-fit: cover;
-      }
-    }
-  </style>
-  
-  <slot></slot>
-</slot:head>
-
-<slot:body>
+  }
+</style>
 
 <div class="cover-wrapper">
   <img class="cover-blur" src={context.cover} alt=""/>
@@ -80,5 +75,4 @@
 
     <Subnav title={context.title} headers={context.content.headers} />
   </section>
-</div>
-</slot:body>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/examples/snowpack/astro/layouts/content.hmx b/examples/snowpack/astro/layouts/content.hmx
index e040a47bf..921c76321 100644
--- a/examples/snowpack/astro/layouts/content.hmx
+++ b/examples/snowpack/astro/layouts/content.hmx
@@ -11,34 +11,27 @@
   }
 </script>
 
-<slot:head>
-    
-  <slot></slot>
-</slot:head>
+<div class="container">
+  <section class="snow-view__docs has-subnav">
 
-<slot:body>
-  <div class="container">
-    <section class="snow-view__docs has-subnav">
+    <aside id="nav-primary" class="snow-view-nav">
+      <Menu />
+    </aside>
 
-      <aside id="nav-primary" class="snow-view-nav">
-        <Menu />
-      </aside>
+    <Subnav title={context.title} headers={context.content.headers} />
 
-      <Subnav title={context.title} headers={context.content.headers} />
-
-      <article class="snow-view-main">
-        <div class="content">
-          <h2 class="content-title">
-            {context.title}
-          </h2>
-          <div class="content-layout">
-            <div class="content-body">
-              <slot></slot>
-            </div>
+    <article class="snow-view-main">
+      <div class="content">
+        <h2 class="content-title">
+          {context.title}
+        </h2>
+        <div class="content-layout">
+          <div class="content-body">
+            <slot></slot>
           </div>
         </div>
-      </article>
+      </div>
+    </article>
 
-    </section>
-  </div>
-</slot:body>
\ No newline at end of file
+  </section>
+</div>
\ No newline at end of file
diff --git a/examples/snowpack/astro/layouts/main.hmx b/examples/snowpack/astro/layouts/main.hmx
index c0793e3b8..d66a96baf 100644
--- a/examples/snowpack/astro/layouts/main.hmx
+++ b/examples/snowpack/astro/layouts/main.hmx
@@ -6,24 +6,16 @@
   }
 </script>
 
+<div class="container">
+  <section class="snow-view__docs is-full">
 
-<slot:head>
-  <!-- hi -->
-  <slot></slot>
-</slot:head>
+    <aside id="nav-primary" class="snow-view-nav">
+      <Menu />
+    </aside>
 
-<slot:body>
-  <div class="container">
-    <section class="snow-view__docs is-full">
+    <article class="snow-view-main">
+      <slot></slot>
+    </article>
 
-      <aside id="nav-primary" class="snow-view-nav">
-        <Menu />
-      </aside>
-
-      <article class="snow-view-main">
-        <slot></slot>
-      </article>
-
-    </section>
-  </div>
-</slot:body>
\ No newline at end of file
+  </section>
+</div>
\ No newline at end of file
diff --git a/examples/snowpack/astro/layouts/post.hmx b/examples/snowpack/astro/layouts/post.hmx
index f71824483..aca8fc6c0 100644
--- a/examples/snowpack/astro/layouts/post.hmx
+++ b/examples/snowpack/astro/layouts/post.hmx
@@ -1,143 +1,141 @@
 <script astro>
-  import {format as formatDate, parseISO} from 'date-fns';
+  import { format as formatDate, parseISO } from 'date-fns';
   export const layout = 'layouts/base.hmx';
   export function setup({ context }) {
     return {};
   }
 </script>
 
-<slot:head>
+<astro:head>
   <link rel="stylesheet" href="/css/legacy-post.css" />
-  <style>
+</astro:head>
+
+<style>
+  .markdown-body img,
+  .markdown-body video,
+  .markdown-body iframe {
+    box-shadow: 0px 5px 12px 0 #CCC;
+    border-radius: 3px;
+    min-width: 130%;
+    width: 130%;
+    margin-left: -15%;
+    margin-right: -15%;
+    margin-top: 4rem;
+    margin-bottom: -1rem;
+  }
+
+  @media (max-width: 860px) {
+
     .markdown-body img,
     .markdown-body video,
     .markdown-body iframe {
-      box-shadow: 0px 5px 12px 0 #CCC;
-      border-radius: 3px;
-      min-width: 130%;
-      width: 130%;
-      margin-left: -15%;
-      margin-right: -15%;
-      margin-top: 4rem;
-      margin-bottom: -1rem;
+      min-width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: -2rem;
     }
+  }
 
-    @media (max-width: 860px) {
 
-      .markdown-body img,
-      .markdown-body video,
-      .markdown-body iframe {
-        min-width: 100%;
-        margin-left: 0;
-        margin-right: 0;
-        margin-bottom: -2rem;
-      }
+
+
+  .markdown-body table td:nth-child(1) {
+    white-space: nowrap;
+  }
+
+  .grid-body {
+    padding: 4rem 0;
+  }
+
+  .grid-body-header h1 {
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+  }
+
+  .markdown-body,
+  .fbody-header {
+    max-width: 840px;
+  }
+
+  .markdown-body {
+    font-size: 18px;
+    margin-bottom: 20vh;
+  }
+
+  .markdown-body h2 {
+    font-size: 1.8em;
+  }
+
+  @media (max-width: 860px) {
+
+    .markdown-body,
+    .toc {
+      padding: 1em;
     }
+  }
 
+  @media (max-width: 740px) {
 
-
-
-    .markdown-body table td:nth-child(1) {
-      white-space: nowrap;
+    .markdown-body img,
+    .markdown-body iframe {
+      max-width: 108%;
+      margin-left: -4%;
+      margin-right: -4%;
     }
 
     .grid-body {
-      padding: 4rem 0;
+      padding: 20px 0 0 0;
     }
 
-    .grid-body-header h1 {
-      margin-bottom: 1rem;
-      margin-top: 1rem;
+    .header-snowpack {
+      font-size: 3.5rem;
+      text-align: center;
     }
 
-    .markdown-body,
-    .fbody-header {
-      max-width: 840px;
+    .markdown-body h1 {
+      font-size: 3.5em;
     }
 
-    .markdown-body {
-      font-size: 18px;
-      margin-bottom: 20vh;
+    .markdown-body h3 .header-link {
+      opacity: 1;
     }
+  }
+</style>
 
-    .markdown-body h2 {
-      font-size: 1.8em;
-    }
-
-    @media (max-width: 860px) {
-
-      .markdown-body,
-      .toc {
-        padding: 1em;
-      }
-    }
-
-    @media (max-width: 740px) {
-
-      .markdown-body img,
-      .markdown-body iframe {
-        max-width: 108%;
-        margin-left: -4%;
-        margin-right: -4%;
-      }
-
-      .grid-body {
-        padding: 20px 0 0 0;
-      }
-
-      .header-snowpack {
-        font-size: 3.5rem;
-        text-align: center;
-      }
-
-      .markdown-body h1 {
-        font-size: 3.5em;
-      }
-
-      .markdown-body h3 .header-link {
-        opacity: 1;
-      }
-    }
-  </style> 
-  <slot></slot>
-</slot:head>
-
-<slot:body>
-  <div class="grid-extra-space">
-    <div class="grid-body-header">
-      <svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1"
-        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
-          <g id="mountain-solid" 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>
+<div class="grid-extra-space">
+  <div class="grid-body-header">
+    <svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+        <g id="mountain-solid" 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>
-      <h1 class="header-snowpack">{context.title}</h1>
+      </g>
+    </svg>
+    <h1 class="header-snowpack">{context.title}</h1>
 
 
+    <div>
+      {context.tagline && <div style="margin-bottom: 1rem;">{context.tagline}</div>}
       <div>
-        {context.tagline && <div style="margin-bottom: 1rem;">{context.tagline}</div>}
-        <div>
-          Published <a href='#published-at'>{formatDate(parseISO(context.date), 'MMMM	d, yyyy')}</a> 
-          by <a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
-        </div>
+        Published <a href='#published-at'>{formatDate(parseISO(context.date), 'MMMM d, yyyy')}</a>
+        by <a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
       </div>
+    </div>
 
-      <!-- Place this tag where you want the button to render. -->
-      <div class="hidden-mobile" style="text-align: center; margin-top: 0.5rem; filter: scale(2);">
-        <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>
-      <!-- Place this tag in your head or just before your close body tag. -->
-      <script defer src="https://buttons.github.io/buttons.js"></script>
-      </div>
+    <!-- Place this tag where you want the button to render. -->
+    <div class="hidden-mobile" style="text-align: center; margin-top: 0.5rem; filter: scale(2);">
+      <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 class="grid-body">
-      <article class="markdown-body">
-        <slot></slot>
-      </article>
-    </div>
-</slot:body>
\ No newline at end of file
+    <!-- Place this tag in your head or just before your close body tag. -->
+    <script defer src="https://buttons.github.io/buttons.js"></script>
+  </div>
+</div>
+<div class="grid-body">
+  <article class="markdown-body">
+    <slot></slot>
+  </article>
+</div>
\ No newline at end of file
diff --git a/examples/snowpack/astro/pages/guides.hmx b/examples/snowpack/astro/pages/guides.hmx
index 2bf7f2cc3..0c56ce5a4 100644
--- a/examples/snowpack/astro/pages/guides.hmx
+++ b/examples/snowpack/astro/pages/guides.hmx
@@ -42,38 +42,32 @@
   }
 </script>
 
-<slot:head>
+<h2 class="content-title">
+  {context.title}
+</h2>
 
-</slot:head>
+<h3 class="content-title">
+  Using Snowpack
+</h3>
 
-<slot:body>
-  <h2 class="content-title">
-    {context.title}
-  </h2>
-
-  <h3 class="content-title">
-    Using Snowpack
-  </h3>
-
-  <div class="content">
-    <ul>
-      {context.guides.map((post) => {
-      return <li><a href={post.href}>{post.title}</a></li>;
-      })}
-    </ul>
-  </div>
-
-  <br />
-  <br />
-
-  <h3 class="content-title">
-    Popular Integration Guides
-  </h3>
-
-  <div class="card-grid card-grid-4">
-    {context.communityGuides.map((post) => {
-    return
-    <Card item={post} />;
+<div class="content">
+  <ul>
+    {context.guides.map((post) => {
+    return <li><a href={post.href}>{post.title}</a></li>;
     })}
-  </div>
-</slot:body>
\ No newline at end of file
+  </ul>
+</div>
+
+<br />
+<br />
+
+<h3 class="content-title">
+  Popular Integration Guides
+</h3>
+
+<div class="card-grid card-grid-4">
+  {context.communityGuides.map((post) => {
+  return
+  <Card item={post} />;
+  })}
+</div>
\ No newline at end of file
diff --git a/examples/snowpack/astro/pages/index.hmx b/examples/snowpack/astro/pages/index.hmx
index 03f03f8ce..82568f246 100644
--- a/examples/snowpack/astro/pages/index.hmx
+++ b/examples/snowpack/astro/pages/index.hmx
@@ -3,95 +3,91 @@
   import Hero from '../components/Hero.hmx';
 
   export const layout = 'layouts/base.hmx';
-  export function setup({context}) {
+  export function setup({ context }) {
     return {}
   }
 </script>
 
-<slot:head>
+<astro:head>
   <meta charset="AAA" />
-</slot:head>
+</astro:head>
+<Hero bar={context.title}></Hero>
 
-<slot:body>
-    <Hero bar={context.title}></Hero>
-    
-    <div foo={context.title} class="container" style="margin: 0 auto">
-      <section class="snow-view__docs is-full is-home">
-  
-        <aside id="nav-primary" class="snow-view-nav">
-          <Menu></Menu>
-        </aside>
-  
-        <article class="snow-view-main">
-          <div class="content">
-            <article class="grid-body">
-              <a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
-                rel="noopener noreferrer">
-                <img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
-              </a>
-  
-              <div class="content markdown-body feature-list">
-                <div class="feature-list-top">
-                  <p>
-                    <strong>Snowpack is a lightning-fast frontend build tool, designed for the modern web.</strong>
-                    It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development
-                    workflow. Snowpack leverages JavaScript's native module system (<a
-                      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
-                      as
-                      ESM</a>) to avoid unnecessary work and stay fast no matter how big your project grows.
-                  </p>
-                  <p>Once you try it, it's impossible to go back to anything else.</p>
-                </div>
-  
-                <ul class="feature-list-bullets">
-                  <li class="feature-list-bullet">
-                    <h3>Instant startup</h3>
-                    Snowpack's unbundled web development server
-                    <strong>starts up in 50ms or less</strong>
-                    and stays fast in large projects.
-                  </li>
-                  <li class="feature-list-bullet">
-                    <h3>Build once, cache forever</h3>
-                    Snowpack never builds the same file twice. Powered by JavaScript’s native module system (ESM) in the
-                    browser.
-                  </li>
-                  <li class="feature-list-bullet">
-                    <h3>HMR feat. Fast Refresh</h3>
-                    No refresh required. See changes reflected instantly in the browser with
-                    <a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
-                    for React, Preact & Svelte.
-                  </li>
-                  <li class="feature-list-bullet">
-                    <h3>Out-of-the-box support</h3>
-                    Enjoy Snowpack's built-in support for JSX, TypeScript, React, Preact, CSS Modules
-                    <a href="/reference/supported-files">and more.</a>
-                  </li>
-                  <li class="feature-list-bullet">
-                    <h3>Optimize for production</h3>
-                    Build for production with built-in optimizations and plugin support for your favorite bundlers.
-                  </li>
-                  <li class="feature-list-bullet">
-                    <h3>Plugins? Plugins!</h3>
-                    Babel? Sass? MDX? Browse the entire
-                    <a href="/plugins">Snowpack Plugin Catalog</a>
-                    to connect your favorite build tool (or
-                    <a href="/reference/plugins">create your own!</a>)
-                  </li>
-                </ul>
+<div foo={context.title} class="container" style="margin: 0 auto">
+  <section class="snow-view__docs is-full is-home">
+
+    <aside id="nav-primary" class="snow-view-nav">
+      <Menu></Menu>
+    </aside>
+
+    <article class="snow-view-main">
+      <div class="content">
+        <article class="grid-body">
+          <a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank" rel="noopener noreferrer">
+            <img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
+          </a>
+
+          <div class="content markdown-body feature-list">
+            <div class="feature-list-top">
+              <p>
+                <strong>Snowpack is a lightning-fast frontend build tool, designed for the modern web.</strong>
+                It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development
+                workflow. Snowpack leverages JavaScript's native module system (<a
+                  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
+                  as
+                  ESM</a>) to avoid unnecessary work and stay fast no matter how big your project grows.
+              </p>
+              <p>Once you try it, it's impossible to go back to anything else.</p>
+            </div>
+
+            <ul class="feature-list-bullets">
+              <li class="feature-list-bullet">
+                <h3>Instant startup</h3>
+                Snowpack's unbundled web development server
+                <strong>starts up in 50ms or less</strong>
+                and stays fast in large projects.
+              </li>
+              <li class="feature-list-bullet">
+                <h3>Build once, cache forever</h3>
+                Snowpack never builds the same file twice. Powered by JavaScript’s native module system (ESM) in the
+                browser.
+              </li>
+              <li class="feature-list-bullet">
+                <h3>HMR feat. Fast Refresh</h3>
+                No refresh required. See changes reflected instantly in the browser with
+                <a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
+                for React, Preact & Svelte.
+              </li>
+              <li class="feature-list-bullet">
+                <h3>Out-of-the-box support</h3>
+                Enjoy Snowpack's built-in support for JSX, TypeScript, React, Preact, CSS Modules
+                <a href="/reference/supported-files">and more.</a>
+              </li>
+              <li class="feature-list-bullet">
+                <h3>Optimize for production</h3>
+                Build for production with built-in optimizations and plugin support for your favorite bundlers.
+              </li>
+              <li class="feature-list-bullet">
+                <h3>Plugins? Plugins!</h3>
+                Babel? Sass? MDX? Browse the entire
+                <a href="/plugins">Snowpack Plugin Catalog</a>
+                to connect your favorite build tool (or
+                <a href="/reference/plugins">create your own!</a>)
+              </li>
+            </ul>
+
+            <div class="feature-list-buttons">
+              <a href="/tutorials/quick-start" class="button button-primary feature-list-button">Get started</a>
+              <a href="/concepts/how-snowpack-works" class="button feature-list-button">Learn more</a>
+            </div>
 
-                <div class="feature-list-buttons">
-                  <a href="/tutorials/quick-start" class="button button-primary feature-list-button">Get started</a>
-                  <a href="/concepts/how-snowpack-works" class="button feature-list-button">Learn more</a>
-                </div>
-  
-              </div>
-            </article>
           </div>
-  
         </article>
-      </section>
-    </div>
-  
-    <!-- Place this tag in your head or just before your close body tag. -->
-    <script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
-</slot:body>
\ No newline at end of file
+      </div>
+
+    </article>
+  </section>
+</div>
+
+<!-- Place this tag in your head or just before your close body tag. -->
+<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
\ No newline at end of file
diff --git a/examples/snowpack/astro/pages/news.hmx b/examples/snowpack/astro/pages/news.hmx
index f1350ed3f..51b7f616e 100644
--- a/examples/snowpack/astro/pages/news.hmx
+++ b/examples/snowpack/astro/pages/news.hmx
@@ -25,58 +25,54 @@
   }
 </script>
 
-<slot:head> </slot:head>
+<NewsTitle title={context.title} />
 
-<slot:body>
-  <NewsTitle title={context.title} />
+<p>
+  Get the latest news, blog posts, and tutorials on Snowpack. <a href="/feed.xml">Also available via RSS.</a>
+</p>
 
-  <p>
-    Get the latest news, blog posts, and tutorials on Snowpack. <a href="/feed.xml">Also available via RSS.</a>
-  </p>
+<p>
+  Got something that you think we should feature?
+  <a href="https://github.com/snowpackjs/snowpack/edit/main/www/_data/news.js">Submit it!</a>
+</p>
 
-  <p>
-    Got something that you think we should feature?
-    <a href="https://github.com/snowpackjs/snowpack/edit/main/www/_data/news.js">Submit it!</a>
-  </p>
+<p>
+  In case you're curious, the best pokemon is <strong>{context.pokemonData.name}.</strong>
+</p>
 
-  <p>
-    In case you're curious, the best pokemon is <strong>{context.pokemonData.name}.</strong>
-  </p>
+<div class="card-grid card-grid-3">
+  <article class="discord-banner">
+    <a href="https://discord.gg/snowpack" style="flex-shrink: 0; height: 48px;"><img alt="Join us on Discord!"
+        src="https://img.shields.io/discord/712696926406967308.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2"
+        style="height: 48px;  border: none; margin-right: 1rem; filter: brightness(1.2) contrast(1.5);" /></a>
+    <div>Join us on Discord to discuss Snowpack, meet other developers in our community, and show off what you’re
+      working on!</div>
+  </article>
 
-  <div class="card-grid card-grid-3">
-    <article class="discord-banner">
-      <a href="https://discord.gg/snowpack" style="flex-shrink: 0; height: 48px;"><img alt="Join us on Discord!"
-          src="https://img.shields.io/discord/712696926406967308.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2"
-          style="height: 48px;  border: none; margin-right: 1rem; filter: brightness(1.2) contrast(1.5);" /></a>
-      <div>Join us on Discord to discuss Snowpack, meet other developers in our community, and show off what you’re
-        working on!</div>
-    </article>
+  {context.news.reverse().map((item) =>
+  <Card:dynamic item={item} />)}
+</div>
 
-    {context.news.reverse().map((item) =>
-    <Card:dynamic item={item} />)}
+<div class="content">
+
+  <h3>Who's Using Snowpack?</h3>
+
+  <div class="company-logos">
+
+    {context.users.map((user) =>
+    <CompanyLogo user={user} />)}
+
+    <a href="https://github.com/snowpackjs/snowpack/edit/main/www/_template/news.md" target="_blank"
+      title="Add Your Project/Company!" class="add-company-button">
+      <svg style="height: 22px; margin-right: 8px;" aria-hidden="true" focusable="false" data-prefix="fas"
+        data-icon="plus" class="company-logo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path fill="currentColor"
+          d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
+        </path>
+      </svg>
+      Add your logo
+    </a>
   </div>
 
-  <div class="content">
-
-    <h3>Who's Using Snowpack?</h3>
-
-    <div class="company-logos">
-
-      {context.users.map((user) =>
-      <CompanyLogo user={user} />)}
-
-      <a href="https://github.com/snowpackjs/snowpack/edit/main/www/_template/news.md" target="_blank"
-        title="Add Your Project/Company!" class="add-company-button">
-        <svg style="height: 22px; margin-right: 8px;" aria-hidden="true" focusable="false" data-prefix="fas"
-          data-icon="plus" class="company-logo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <path fill="currentColor"
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
-          </path>
-        </svg>
-        Add your logo
-      </a>
-    </div>
-
-    <NewsAssets />
-  </div>
-</slot:body>
\ No newline at end of file
+  <NewsAssets />
+</div>
\ No newline at end of file
diff --git a/examples/snowpack/astro/pages/plugins.hmx b/examples/snowpack/astro/pages/plugins.hmx
index 8749f0169..31dd04b49 100644
--- a/examples/snowpack/astro/pages/plugins.hmx
+++ b/examples/snowpack/astro/pages/plugins.hmx
@@ -13,19 +13,14 @@
   }
 </script>
 
-<slot:head>
-</slot:head>
+<h2 class="content-title">
+  { context.title }
+</h2>
 
-<slot:body>
-  <h2 class="content-title">
-    { context.title }
-  </h2>
+<h3 class="pluginPage-subheading">Customize Snowpack with optimized build plugins.</h3>
+<p class="pluginPage-intro">To learn more about our plugin system, check out the
+  <a href="/reference/plugins">Plugin API.</a><br />Can't find what you need?
+  <a href="/reference/plugins">Creating your own plugin is easy!</a>
+</p>
 
-  <h3 class="pluginPage-subheading">Customize Snowpack with optimized build plugins.</h3>
-  <p class="pluginPage-intro">To learn more about our plugin system, check out the
-    <a href="/reference/plugins">Plugin API.</a><br />Can't find what you need?
-    <a href="/reference/plugins">Creating your own plugin is easy!</a>
-  </p>
-
-  <PluginSearchPage:dynamic />
-</slot:body>
\ No newline at end of file
+<PluginSearchPage:dynamic />
\ No newline at end of file
diff --git a/src/@types/astro.ts b/src/@types/astro.ts
index d2d82f3aa..69994375c 100644
--- a/src/@types/astro.ts
+++ b/src/@types/astro.ts
@@ -18,7 +18,6 @@ export interface JsxItem {
 export interface TransformResult {
   script: string;
   head: JsxItem | undefined;
-  body: JsxItem | undefined;
   items: JsxItem[];
 }
 
diff --git a/src/codegen/index.ts b/src/codegen/index.ts
index 444a065c3..4cba263df 100644
--- a/src/codegen/index.ts
+++ b/src/codegen/index.ts
@@ -189,9 +189,7 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
 
   const additionalImports = new Set<string>();
   let headItem: JsxItem | undefined;
-  let bodyItem: JsxItem | undefined;
   let items: JsxItem[] = [];
-  let mode: 'JSX' | 'SCRIPT' | 'SLOT' = 'JSX';
   let collectionItem: JsxItem | undefined;
   let currentItemName: string | undefined;
   let currentDepth = 0;
@@ -225,10 +223,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
           }
           collectionItem!.jsx += `,(${code.trim().replace(/\;$/, '')})`;
           return;
-        case 'Slot':
-          mode = 'SLOT';
-          collectionItem!.jsx += `,child`;
-          return;
         case 'Comment':
           return;
         case 'Fragment':
@@ -239,8 +233,8 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
           }
           break;
 
+        case 'Slot':
         case 'Head':
-        case 'Body':
         case 'InlineComponent':
         case 'Title':
         case 'Element': {
@@ -251,7 +245,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
           const attributes = getAttributes(node.attributes);
           currentDepth++;
           currentItemName = name;
-
           if (!collectionItem) {
             collectionItem = { name, jsx: '' };
             if (node.type === 'Head') {
@@ -259,14 +252,13 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
               headItem = collectionItem;
               return;
             }
-            if (node.type === 'Body') {
-              collectionItem.jsx += `h(Fragment, null`;
-              bodyItem = collectionItem;
-              return;
-            }
             items.push(collectionItem);
           }
           collectionItem.jsx += collectionItem.jsx === '' ? '' : ',';
+          if (node.type === 'Slot') {
+            collectionItem.jsx += `(children`;
+            return;
+          }
           const COMPONENT_NAME_SCANNER = /^[A-Z]/;
           if (!COMPONENT_NAME_SCANNER.test(name)) {
             collectionItem.jsx += `h("${name}", ${attributes ? generateAttributes(attributes) : 'null'}`;
@@ -296,9 +288,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
         }
         case 'Text': {
           const text = getTextFromAttribute(node);
-          if (mode === 'SLOT') {
-            return;
-          }
           if (!text.trim()) {
             return;
           }
@@ -323,17 +312,11 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
         case 'Attribute':
         case 'Comment':
           return;
-        case 'Slot': {
-          const name = node.name;
-          if (name === 'slot') {
-            mode = 'JSX';
-          }
-          return;
-        }
         case 'Fragment':
           if (!collectionItem) {
             return;
           }
+        case 'Slot':
         case 'Head':
         case 'Body':
         case 'Title':
@@ -360,7 +343,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
   return {
     script: script + '\n' + Array.from(additionalImports).join('\n'),
     head: headItem,
-    body: bodyItem,
     items,
   };
 }
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index 898aaed12..8ce297bfd 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -14,8 +14,8 @@ import list from '../../utils/list.js';
 const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
 
 const meta_tags = new Map([
-  ['slot:head', 'Head'],
-  ['slot:body', 'Body'],
+  ['astro:head', 'Head'],
+  // ['slot:body', 'Body'],
   // ['astro:options', 'Options'],
   // ['astro:window', 'Window'],
   // ['astro:body', 'Body'],
diff --git a/src/optimize/styles.ts b/src/optimize/styles.ts
index 1353cb006..abb69810b 100644
--- a/src/optimize/styles.ts
+++ b/src/optimize/styles.ts
@@ -134,7 +134,7 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
             const code = node.content.styles;
             const typeAttr = (node.attributes || []).find(({ name }: { name: string }) => name === 'type');
             styleNodes.push(node);
-            styleTransformPromises.push(transformStyle(code, { type: (typeAttr.value[0] && typeAttr.value[0].raw) || undefined, filename, fileID }));
+            styleTransformPromises.push(transformStyle(code, { type: (typeAttr && typeAttr.value[0] && typeAttr.value[0].raw) || undefined, filename, fileID }));
 
             // TODO: we should delete the old untransformed <style> node after we’re done.
             // However, the svelte parser left it in ast.css, not ast.html. At the final step, this just gets ignored, so it will be deleted, in a sense.
diff --git a/src/transform2.ts b/src/transform2.ts
index ea95b0f32..2f1e651cf 100644
--- a/src/transform2.ts
+++ b/src/transform2.ts
@@ -78,7 +78,7 @@ async function convertMdToJsx(
       export function setup({context}) {
         return {context: ${stringifiedSetupContext} };
       }
-    </script><slot:head></slot:head><slot:body><section>{${JSON.stringify(mdHtml)}}</section></slot:body>`,
+    </script><section>{${JSON.stringify(mdHtml)}}</section>`,
     { compileOptions, filename, fileID }
   );
 }
@@ -104,9 +104,7 @@ export async function compileComponent(
 ): Promise<CompileResult> {
   const sourceJsx = await transformFromSource(source, { compileOptions, filename, projectRoot });
   const headItem = sourceJsx.head;
-  const bodyItem = sourceJsx.body;
   const headItemJsx = !headItem ? 'null' : headItem.jsx;
-  const bodyItemJsx = !bodyItem ? 'null' : bodyItem.jsx;
 
   // sort <style> tags first
   // TODO: remove these and inject in <head>
@@ -120,23 +118,21 @@ ${sourceJsx.script}
 // \`__render()\`: Render the contents of the HMX module. "<slot:*>" elements are not 
 // included (see below).
 import { h, Fragment } from '${internalImport('h.js')}';
-export default function __render(props) { return h(Fragment, null, ${sourceJsx.items.map(({ jsx }) => jsx).join(',')}); }
-
-// <slot:*> render functions
-export function __slothead(context, child) { return h(Fragment, null, ${headItemJsx}); }
-export function __slotbody(context, child) { return h(Fragment, null, ${bodyItemJsx}); }
+export function __slothead(children, context) { return h(Fragment, null, ${headItemJsx}); }
+function __render(props, children, context) { return h(Fragment, null, ${sourceJsx.items.map(({ jsx }) => jsx).join(',')}); }
+export default __render;
 `;
 
-  if (headItemJsx || bodyItemJsx) {
+  if (headItemJsx) {
     modJsx += `
 // \`__renderPage()\`: Render the contents of the HMX module as a page. This is a special flow,
 // triggered by loading a component directly by URL. 
-// If the page exports a defined "layout", then load + render those first. "context", "slot:head",
+// If the page exports a defined "layout", then load + render those first. "context", "astro:head",
 // and "slot:body" should all inherit from parent layouts, merging together in the correct order.
 export async function __renderPage({request, children}) {
   const currentChild = {
     __slothead, 
-    __slotbody, 
+    __render,
     setup: typeof setup === 'undefined' ? (passthrough) => passthrough : setup,
     layout: typeof layout === 'undefined' ? undefined : layout,
   };
@@ -166,12 +162,12 @@ export async function __renderPage({request, children}) {
   let headResult;
   let bodyResult;
   for (const child of children.reverse()) {
-    headResult = await child.__slothead(mergedContext, headResult);
-    bodyResult = await child.__slotbody(mergedContext, bodyResult);
+    headResult = await child.__slothead([headResult], mergedContext);
+    bodyResult = await child.__render(undefined, [bodyResult], mergedContext);
   }
   return h(Fragment, null, [
-    h("head", null, currentChild.__slothead(mergedContext, headResult)),
-    h("body", null, currentChild.__slotbody(mergedContext, bodyResult)),
+    h("head", null, currentChild.__slothead([headResult], mergedContext)),
+    h("body", null, currentChild.__render(undefined, [bodyResult], mergedContext)),
   ]);
 };\n`;
   }
diff --git a/test/fixtures/hmx-basic/astro/pages/index.hmx b/test/fixtures/hmx-basic/astro/pages/index.hmx
index 035760ddb..19f888e04 100644
--- a/test/fixtures/hmx-basic/astro/pages/index.hmx
+++ b/test/fixtures/hmx-basic/astro/pages/index.hmx
@@ -6,10 +6,8 @@
   }
 </script>
 
-<slot:head>
+<astro:head>
   <!-- Head Stuff -->
-</slot:head>
+</astro:head>
 
-<slot:body>
-    <h1>Hello world!</h1>
-</slot:body>
\ No newline at end of file
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/snowpack-integration.test.js b/test/snowpack-integration.test.js
index da88ea8d7..e420b043a 100644
--- a/test/snowpack-integration.test.js
+++ b/test/snowpack-integration.test.js
@@ -7,6 +7,9 @@ import { doc } from './test-utils.js';
 
 const { readdir, stat } = fsPromises;
 
+// Bug: Snowpack config is still loaded relative to the current working directory.
+process.chdir(new URL('../examples/snowpack/', import.meta.url).pathname);
+
 const SnowpackDev = suite('snowpack.dev');
 
 let runtime;
@@ -67,8 +70,10 @@ SnowpackDev('Can load every page', async () => {
     assert.equal(result.statusCode, 200, `Loading ${pathname}`);
   }
 
-  console.error(failed);
-  assert.equal(failed.length, 1, 'Failed pages (1 expected)');
+  if (failed.length > 0) {
+    console.error(failed);
+  }
+  assert.equal(failed.length, 0, 'Failed pages');
 });
 
 SnowpackDev.run();