New getting started guide (#715)

* New getting started guide

* style: small style tweaks

* style: theme updates

* chore: add redirect

* style: theme tweaks

* fix: clamp logo height

* style: fix sidebar width

Co-authored-by: Nate Moore <nate@skypack.dev>

13 files changed, 174 insertions, 570 deletions

diff --git a/docs/src/components/SiteSidebar.astro b/docs/src/components/SiteSidebar.astro
index 6d003d71d..33e9fbfb6 100644
--- a/docs/src/components/SiteSidebar.astro
+++ b/docs/src/components/SiteSidebar.astro
@@ -24,13 +24,15 @@ const {currentPage} = Astro.props;
 <style>
   nav {
     position: sticky;
-    min-height: calc(100vh - 3.5rem);
-    height: calc(100vh - 3.5rem);
-    top: 3.5rem;
+    min-height: calc(100vh - var(--theme-navbar-height));
+    height: calc(100vh - var(--theme-navbar-height));
+    top: var(--theme-navbar-height);
+    width: 100%;
+    margin-right: 1rem;
   }
   .nav-groups {
     height: 100%;
-    padding: 2rem 0;
+    padding: 0;
     overflow: auto;
   }
 
@@ -66,4 +68,4 @@ const {currentPage} = Astro.props;
     font-weight: 600;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/src/components/ThemeToggle.tsx b/docs/src/components/ThemeToggle.tsx
index 31ab5ea74..37191bf25 100644
--- a/docs/src/components/ThemeToggle.tsx
+++ b/docs/src/components/ThemeToggle.tsx
@@ -2,7 +2,7 @@ import type { FunctionalComponent } from 'preact';
 import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
-const themes = ['system', 'light', 'dark'];
+const themes = ['light', 'dark'];
 
 const icons = [
   <svg
@@ -13,19 +13,6 @@ const icons = [
     fill="currentColor"
   >
     <path
-      fill-rule="evenodd"
-      d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z"
-      clip-rule="evenodd"
-    />
-  </svg>,
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
       fillRule="evenodd"
       d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
       clipRule="evenodd"
diff --git a/docs/src/config.ts b/docs/src/config.ts
index bb96ac4e9..d972fb366 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -3,6 +3,7 @@ export const sidebar = [
     text: 'Setup',
     link: '',
     children: [
+      { text: 'Getting Started', link: 'getting-started' },
       { text: 'Installation', link: 'installation' },
       { text: 'Quickstart', link: 'quick-start' },
       { text: 'Examples', link: 'examples' },
diff --git a/docs/src/layouts/Main.astro b/docs/src/layouts/Main.astro
index 396e2b0b3..ccacf6a82 100644
--- a/docs/src/layouts/Main.astro
+++ b/docs/src/layouts/Main.astro
@@ -5,14 +5,18 @@ import ThemeToggle from '../components/ThemeToggle.tsx';
 import DocSidebar from '../components/DocSidebar.tsx';
 import MenuToggle from '../components/MenuToggle.tsx';
 
-const { content } = Astro.props;
+const { content = {} } = Astro.props;
 const headers = content?.astro?.headers;
-const currentPage = Astro.request.url.pathname;
-const currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`;
-const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
+const currentPage = Astro.request?.url?.pathname;
+let currentFile;
+let githubEditUrl;
+if (currentPage) {
+  currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`;
+  githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
+}
 ---
 
-<html lang="{content.lang ?? 'en-us'}">
+<html lang="{content.lang ?? 'en-us'}" class="initial">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
@@ -26,11 +30,15 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
           type="image/svg+xml" 
           href="/favicon.svg">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet">
+
     <style>
       body {
         width: 100%;
         display: grid;
-        grid-template-rows: 3.5rem 1fr;
+        grid-template-rows: var(--theme-navbar-height) 1fr;
         --gutter: 0.5rem;
         --doc-padding: 2rem;
       }
@@ -41,10 +49,23 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
         z-index: 10;
         height: 56px;
         width: 100%;
-        background-color: var(--theme-bg-offset);
+        background-color: var(--theme-navbar-bg);
         display: flex;
         align-items: center;
         justify-content: center;
+        z-index: 1001;
+      }
+
+      header .site-content-title {
+        display: none;
+        width: var(--max-width);
+        margin: 0 auto;
+      }
+
+      header .content-title {
+        color: var(--color-white);
+        margin: 0;
+        font-size: 1.5rem;
       }
 
       .layout {
@@ -54,34 +75,17 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
           minmax(var(--gutter), 1fr) 
           minmax(0, var(--max-width)) 
           minmax(var(--gutter), 1fr);
-        gap: 1em;
       }
 
-      .menu-and-logo {
-        gap: 1em;
-      }
-
-      #site-title {
+      .logo {
         display: flex;
         align-items: center;
-        gap: 0.25em;
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin: 0;
-        line-height: 1;
-        color: var(--theme-text);
-        text-decoration: none;
-      }
-
-      #site-title:hover,
-      #site-title:focus {
-        color: var(--theme-text-light);
-      }
-
-      #site-title h1 {
-        font: inherit;
-        color: inherit;
-        margin: 0;
+        justify-content: center;
+        gap: 1em;
+        width: 100%;
+        margin-left: -40px;
+        transform: translateY(4px);
+        z-index: -1;
       }
 
       .nav-wrapper {
@@ -99,12 +103,27 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
       }
 
       .sidebar {
-        min-height: calc(100vh - 3.5rem);
-        height: calc(100vh - 3.5rem);
+        min-height: calc(100vh - var(--theme-navbar-height));
+        height: calc(100vh - var(--theme-navbar-height));
         max-height: 100vh;
         position: sticky;
-        top: 3.5rem;
+        top: var(--doc-padding);
+        margin-top: var(--theme-navbar-height);
         padding: 0;
+        transition: transform 300ms 200ms cubic-bezier(0.23, 1, 0.320, 1);
+      }
+
+      :global(:root.scrolled) .sidebar {
+        transform: translateY(0);
+        transition: transform 200ms 100ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      }
+
+      :global(:root) .sidebar {
+        transform: translateY(var(--theme-navbar-height));
+      }
+      :global(:root.initial) .sidebar {
+        transform: translateY(0);
+        transition: transform 150ms linear;
       }
 
       #sidebar-site {
@@ -122,6 +141,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
       }
 
       .content {
+        padding: 0;
         max-width: 75ch;
         width: 100%;
         height: 100%;
@@ -149,6 +169,11 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
         display: block;
       }
       @media (min-width: 60em) {
+        .logo {
+          width: auto;
+          margin: 0;
+          z-index: 0;
+        }
         #sidebar-site {
           display: flex;
         }
@@ -165,6 +190,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
           grid-template-columns: 
             20rem 
             minmax(0, var(--max-width));
+          gap: 1em;
         }
         #article {
           grid-column: 2;
@@ -182,6 +208,12 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
       }
 
       @media (min-width: 82em) {
+        header .site-content-title {
+          display: block;
+        }
+        main .content-title {
+          display: none;
+        }
         .layout {
           grid-template-columns: 
             20rem 
@@ -202,6 +234,9 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
           display: flex;
           grid-column: 3;
         }
+        .nav-wrapper {
+          padding: 0;
+        }
       }
 
     </style>
@@ -210,16 +245,24 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
   <body>
     <header>
       <nav class="nav-wrapper">
-        <div class="menu-and-logo flex">
-          <div class="menu-toggle">
-              <MenuToggle client:idle/>
-          </div>
+        <div class="menu-toggle">
+            <MenuToggle client:idle/>
+        </div>
+
+        <div class="logo flex">
           <a id="site-title" href="/">
-            <h1>Astro Documentation</h1>
+            <svg xmlns="http://www.w3.org/2000/svg" width="270" height="102" viewBox="0 0 270 102" fill="none">
+              <path fill="currentColor" fill-rule="evenodd" d="M55.07 14.216l16.81 54.865a72.6 72.6 0 00-20.765-6.984L39.808 24.135a1.475 1.475 0 00-2.827.005L25.81 62.078a72.598 72.598 0 00-20.859 6.995L21.847 14.2c.998-3.243 1.497-4.865 2.47-6.066a8 8 0 013.239-2.392c1.434-.576 3.13-.576 6.524-.576h8.751c3.398 0 5.097 0 6.532.577a8 8 0 013.241 2.397c.972 1.203 1.47 2.827 2.465 6.076z" clip-rule="evenodd"/>
+              <path fill="currentColor" fill-rule="evenodd" d="M54.618 71.779c-2.863 2.432-8.578 4.091-15.161 4.091-8.08 0-14.852-2.499-16.649-5.86-.642 1.926-.786 4.13-.786 5.539 0 0-.423 6.915 4.418 11.725 0-2.498 2.037-4.522 4.551-4.522 4.309 0 4.304 3.734 4.3 6.764v.27c0 4.6 2.829 8.541 6.852 10.203a9.22 9.22 0 01-.938-4.064c0-4.386 2.592-6.02 5.604-7.917 2.396-1.51 5.06-3.188 6.894-6.554a12.297 12.297 0 001.502-5.905c0-1.314-.206-2.581-.587-3.77z" clip-rule="evenodd"/>
+              <path fill="currentColor" d="M117.872 69.96c5.952 0 10.688-2.56 13.056-6.784V69h10.624V22.6H130.48v18.88c-2.496-3.584-6.592-5.44-12.096-5.44C108.592 36.04 102 42.824 102 53c0 10.112 6.464 16.96 15.872 16.96zm4.224-7.424c-5.312 0-8.64-3.712-8.64-9.664s3.136-9.472 8.448-9.472 8.768 3.328 8.768 8.704v1.92c0 5.12-3.456 8.512-8.576 8.512zM167.909 69.96c11.712 0 19.968-6.208 19.968-17.024 0-10.752-8.256-16.896-19.968-16.896-11.776 0-20.033 6.144-20.033 16.896 0 10.816 8.257 17.024 20.033 17.024zm0-7.36c-5.376 0-8.768-3.456-8.768-9.664s3.392-9.536 8.768-9.536c5.312 0 8.704 3.328 8.704 9.536s-3.392 9.664-8.704 9.664zM212.346 69.96c10.112 0 17.344-4.544 18.88-11.84l-10.944-1.984c-.896 3.84-3.648 5.952-8 5.952-5.312 0-8.64-3.52-8.64-9.344 0-5.568 3.264-8.896 8.576-8.896 4.288 0 7.104 2.048 8 5.824l11.008-1.792c-1.6-7.552-8.384-11.84-18.688-11.84-12.544 0-20.224 6.4-20.224 16.896 0 10.368 7.872 17.024 20.032 17.024zM253.125 69.96c11.136 0 16.832-4.16 16.832-10.88 0-5.568-3.2-8.64-10.944-9.664l-9.664-1.088c-2.752-.384-3.904-1.088-3.904-2.624 0-1.856 1.856-2.688 6.08-2.688 5.824 0 9.856 1.344 13.12 3.968l5.184-5.184c-3.584-3.712-9.792-5.76-17.472-5.76-10.816 0-16.832 3.84-16.832 10.304 0 5.632 3.712 8.768 11.392 9.792l8.704 1.024c3.456.448 4.48 1.088 4.48 2.752 0 1.92-1.92 2.944-6.4 2.944-6.656 0-11.136-1.792-14.144-5.12l-5.888 4.864c3.904 4.864 10.56 7.36 19.456 7.36z"/>
+            </svg>
+            <h1 class="sr-only">Astro Documentation</h1>
           </a>
         </div>
 
-        <div />
+        <div class="site-content-title">
+          {content?.title && <h1 class="content-title">{content?.title}</h1>}
+        </div>
 
         <div class="theme-toggle-wrapper">
           <ThemeToggle client:idle />
@@ -229,22 +272,24 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
 
     <main class="layout">
       <aside class="sidebar" id="sidebar-site">
-        <SiteSidebar currentPage={currentPage.slice(1)} />
+        <SiteSidebar currentPage={currentPage?.slice(1) ?? ''} />
       </aside>
       <div id="article">
         <article class="content">
           <main>
-            <h1 class="content-title" id="overview">{content.title}</h1>
+            <h1 class="content-title" id="overview">{content?.title}</h1>
             <slot />
           </main>
-          <ArticleFooter path={currentFile} />
+          {currentPage && <ArticleFooter path={currentFile} />}
         </article>
       </div>
       <aside class="sidebar" id="sidebar-content">
-        <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />
+        {currentPage && <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />}
       </aside>
     </main>
 
+    <script type="module" src="/nav.js" />
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script>
     <script>
diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro
index bfe117e9a..b1770ee31 100644
--- a/docs/src/pages/404.astro
+++ b/docs/src/pages/404.astro
@@ -1,240 +1,9 @@
 ---
-import SiteSidebar from '../components/SiteSidebar.astro';
-import AstroLogo from '../components/AstroLogo.astro';
-import ThemeToggle from '../components/ThemeToggle.tsx';
-import MenuToggle from '../components/MenuToggle.tsx';
+import Layout from '../layouts/Main.astro';
 ---
 
-<html lang="en-us">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Astro Documentation</title>
-    <link rel="stylesheet" href="/theme.css" />
-    <link rel="stylesheet" href="/code.css" />
-    <link rel="stylesheet" href="/index.css" />
-    <script src="/theme.js" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: 3.5rem 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-
-      header {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        height: 56px;
-        width: 100%;
-        background-color: var(--theme-bg-offset);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: 
-          minmax(var(--gutter), 1fr) 
-          minmax(0, var(--max-width)) 
-          minmax(var(--gutter), 1fr);
-        gap: 1em;
-      }
-
-      .menu-and-logo {
-        gap: 1em;
-      }
-
-      #site-title {
-        display: flex;
-        align-items: center;
-        gap: 0.25em;
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin: 0;
-        line-height: 1;
-        color: var(--theme-text);
-        text-decoration: none;
-      }
-
-      #site-title:hover,
-      #site-title:focus {
-        color: var(--theme-text-light);
-      }
-
-      #site-title h1 {
-        font: inherit;
-        color: inherit;
-        margin: 0;
-      }
-
-      .nav-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        max-width: 82em;
-        padding: 0 1rem;
-      }
-
-      .layout :global(> *) {
-        width: 100%;
-        height: 100%;
-      }
-
-      .sidebar {
-        min-height: calc(100vh - 3.5rem);
-        height: calc(100vh - 3.5rem);
-        max-height: 100vh;
-        position: sticky;
-        top: 3.5rem;
-        padding: 0;
-      }
-
-      #sidebar-site {
-        position: fixed;
-        background-color: var(--theme-bg);
-        z-index: 1000;
-      }
-
-
-      #article {
-        padding: var(--doc-padding) var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-
-@font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(data:font/woff;base64,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) format('woff');
-}
-
-      .content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .content > main {
-        margin-bottom: 4rem;
-      }
-
-      #sidebar-content {
-        display: none;
-      }
-      .theme-toggle-wrapper {
-        display: none;
-      }
-
-      #sidebar-site {
-        display: none;
-      }
-      :global(.mobile-sidebar-toggle) {
-        overflow: hidden;
-      }
-      :global(.mobile-sidebar-toggle) #sidebar-site {
-        display: block;
-      }
-      @media (min-width: 60em) {
-        #sidebar-site {
-          display: flex;
-        }
-        :global(.mobile-sidebar-toggle) {
-          overflow: initial;
-        }
-        :global(.mobile-sidebar-toggle) #sidebar-site {
-          display: flex;
-        }
-        .menu-toggle {
-          display: none;
-        }
-        .layout {
-          grid-template-columns: 
-            20rem 
-            minmax(0, 1fr);
-        }
-        #article {
-          grid-column: 2;
-        }
-        #sidebar-site {
-          position: sticky;
-        }
-        #sidebar-nav {
-          display: flex;
-        }
-        .theme-toggle-wrapper {
-          display: flex;
-        }
-      }
-
-      @media (min-width: 82em) {
-        .layout {
-          grid-template-columns: 
-            20rem 
-            minmax(0, var(--max-width)) 
-            18rem;
-          padding-left: 0;
-          padding-right: 0;
-          margin: 0 auto;
-        }
-
-        #sidebar-nav {
-          grid-column: 1;
-        }
-        #article {
-          grid-column: 2/4;
-        }
-      }
-
-
-    </style>
-  </head>
-
-  <body class="mobile-sidebar-hidden">
-    <header>
-      <nav class="nav-wrapper">
-        <div class="menu-and-logo flex">
-          <div class="menu-toggle">
-              <MenuToggle client:idle/>
-          </div>
-          <a id="site-title" href="/">
-            <h1>Astro Documentation</h1>
-          </a>
-        </div>
-
-        <div />
-
-        <div class="theme-toggle-wrapper">
-          <ThemeToggle client:idle />
-        </div>
-      </nav>
-    </header>
-
-    <main class="layout">
-      <aside class="sidebar" id="sidebar-site">
-        <SiteSidebar currentPage="" />
-      </aside>
-      <div id="article">
-        <article class="content">
-          <h1>404</h1>
-          <p>This page isn't in our solar system.</p>
-          <a href="/">Take me home.</a>
-        </article>
-      </div>
-    </main>
-  </body>
-</html>
+<Layout>
+  <h1>404</h1>
+  <p>This page isn't in our solar system.</p>
+  <a href="/">Take me home.</a>
+</Layout>
diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md
new file mode 100644
index 000000000..71b5434ef
--- /dev/null
+++ b/docs/src/pages/getting-started.md
@@ -0,0 +1,60 @@
+---
+layout: ~/layouts/Main.astro
+title: Getting Started
+---
+
+
+Astro is modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources. 
+
+## Try Astro
+
+The easiest way to try Astro is to run `npm init astro` in a new directory on your machine. This CLI command will walk you through starting a new Astro project. 
+
+Read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
+
+### Online Playgrounds
+
+If you're interested in playing around with Astro in the browser, you can use an online code playground. Try a Hello World template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3). 
+
+*Note: some features (ex: Fast Refresh) are currently limited on CodeSandbox.*
+
+
+## Learn Astro
+
+People come to Astro from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.
+
+* If you prefer to **learn by doing**, start with our [examples library](https://github.com/snowpackjs/astro/tree/main/examples).
+* If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/core-concepts/project-structure).
+
+Like any unfamiliar technology, Astro does have a learning curve. With practice and some patience, you *will* get the hang of it.
+
+### Learn `.astro` Syntax
+
+When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is the **Astro component syntax**: a special HTML-like file format that Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience. 
+
+Our guide on [Astro components](/core-concepts/astro-components) walks you through the new syntax, and is best way to learn.
+
+### API Reference
+
+This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/reference/builtin-components) lists all available core components, like `<Markdown />` and `<Prism />`.
+
+### Versioned Documentation
+
+This documentation always reflects the latest stable version of Astro. Once we hit the v1.0 milestone, we will add the ability to view versioned documentation.
+
+
+## Staying Informed
+
+The [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account is the official source for the updates from the Astro team.
+
+We also post release announcements to our [Discord community](https://astro.build/chat) in the #announcements channel. 
+
+Not every Astro release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the Astro repository](https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md).
+
+## Something Missing?
+
+If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation](https://github.com/snowpackjs/astro/issues/new/choose) with your suggestions for improvement, or tweet at the [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account. We love hearing from you!
+
+## Credit
+
+This getting started guide was originally based off of [React's](https://reactjs.org/) getting started guide.
\ No newline at end of file
diff --git a/docs/src/pages/guides/deploy.md b/docs/src/pages/guides/deploy.md
index 39518fc78..ca8365e5e 100644
--- a/docs/src/pages/guides/deploy.md
+++ b/docs/src/pages/guides/deploy.md
@@ -3,8 +3,6 @@ layout: ~/layouts/Main.astro
 title: Deploy a Website
 ---
 
-> This page is based off of [Vite's](https://vitejs.dev/) well-documented [static deploy instructions](https://vitejs.dev/guide/static-deploy.html).
-
 The following guides are based on some shared assumptions:
 
 - You are using the default build output location (`dist/`). This location [can be changed using the `dist` configuration option](/reference/configuration-reference).
@@ -253,3 +251,7 @@ Install the extension in VS Code and navigate to your app root. Open the Static
 Follow the wizard started by the extension to give your app a name, choose a framework preset, and designate the app root (usually `/`) and built file location `/dist`. The wizard will run and will create a GitHub action in your repo in a `.github` folder.
 
 The action will work to deploy your app (watch its progress in your repo's Actions tab) and, when successfully completed, you can view your app in the address provided in the extension's progress window by clicking the 'Browse Website' button that appears when the GitHub action has run.
+
+## Credits
+
+This guide was originally based off of [Vite's](https://vitejs.dev/) well-documented static deploy guide.
\ No newline at end of file
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index e5b06cc10..358e44cbc 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -1,251 +1,9 @@
 ---
-import SiteSidebar from '../components/SiteSidebar.astro';
-import AstroLogo from '../components/AstroLogo.astro';
-import ThemeToggle from '../components/ThemeToggle.tsx';
-import MenuToggle from '../components/MenuToggle.tsx';
+import Layout from '../layouts/Main.astro';
 ---
 
-<html lang="en-us">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Astro Documentation</title>
-    <link rel="stylesheet" href="/theme.css" />
-    <link rel="stylesheet" href="/code.css" />
-    <link rel="stylesheet" href="/index.css" />
-    <script src="/theme.js" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: 3.5rem 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-
-      header {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        height: 56px;
-        width: 100%;
-        background-color: var(--theme-bg-offset);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: 
-          minmax(var(--gutter), 1fr) 
-          minmax(0, var(--max-width)) 
-          minmax(var(--gutter), 1fr);
-        gap: 1em;
-      }
-
-      .menu-and-logo {
-        gap: 1em;
-      }
-
-      #site-title {
-        display: flex;
-        align-items: center;
-        gap: 0.25em;
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin: 0;
-        line-height: 1;
-        color: var(--theme-text);
-        text-decoration: none;
-      }
-
-      #site-title:hover,
-      #site-title:focus {
-        color: var(--theme-text-light);
-      }
-
-      #site-title h1 {
-        font: inherit;
-        color: inherit;
-        margin: 0;
-      }
-
-      .nav-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        max-width: 82em;
-        padding: 0 1rem;
-      }
-
-      .layout :global(> *) {
-        width: 100%;
-        height: 100%;
-      }
-
-      .sidebar {
-        min-height: calc(100vh - 3.5rem);
-        height: calc(100vh - 3.5rem);
-        max-height: 100vh;
-        position: sticky;
-        top: 3.5rem;
-        padding: 0;
-      }
-
-      #sidebar-site {
-        position: fixed;
-        background-color: var(--theme-bg);
-        z-index: 1000;
-      }
-
-
-      #article {
-        padding: var(--doc-padding) var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-
-@font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(data:font/woff;base64,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) format('woff');
-}
-
-.npm-init-snippet {    
-    font-family: 'Roboto Mono', monospace;
-    font-size: 1.6rem;
-    background-color: var(--theme-code-inline-bg);
-    color: var(--theme-text);
-    border-radius: 6px;
-    padding: 4px 14px;
-    margin-top: 1rem;
-}
-
-      .content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .content > main {
-        margin-bottom: 4rem;
-      }
-
-      #sidebar-content {
-        display: none;
-      }
-      .theme-toggle-wrapper {
-        display: none;
-      }
-
-      #sidebar-site {
-        display: none;
-      }
-      :global(.mobile-sidebar-toggle) {
-        overflow: hidden;
-      }
-      :global(.mobile-sidebar-toggle) #sidebar-site {
-        display: block;
-      }
-      @media (min-width: 60em) {
-        #sidebar-site {
-          display: flex;
-        }
-        :global(.mobile-sidebar-toggle) {
-          overflow: initial;
-        }
-        :global(.mobile-sidebar-toggle) #sidebar-site {
-          display: flex;
-        }
-        .menu-toggle {
-          display: none;
-        }
-        .layout {
-          grid-template-columns: 
-            20rem 
-            minmax(0, 1fr);
-        }
-        #article {
-          grid-column: 2;
-        }
-        #sidebar-site {
-          position: sticky;
-        }
-        #sidebar-nav {
-          display: flex;
-        }
-        .theme-toggle-wrapper {
-          display: flex;
-        }
-      }
-
-      @media (min-width: 82em) {
-        .layout {
-          grid-template-columns: 
-            20rem 
-            minmax(0, var(--max-width)) 
-            18rem;
-          padding-left: 0;
-          padding-right: 0;
-          margin: 0 auto;
-        }
-
-        #sidebar-nav {
-          grid-column: 1;
-        }
-        #article {
-          grid-column: 2/4;
-        }
-      }
-
-
-    </style>
-  </head>
-
-  <body class="mobile-sidebar-hidden">
-    <header>
-      <nav class="nav-wrapper">
-        <div class="menu-and-logo flex">
-          <div class="menu-toggle">
-              <MenuToggle client:idle/>
-          </div>
-          <a id="site-title" href="/">
-            <h1>Astro Documentation</h1>
-          </a>
-        </div>
-
-        <div />
-
-        <div class="theme-toggle-wrapper">
-          <ThemeToggle client:idle />
-        </div>
-      </nav>
-    </header>
-
-    <main class="layout">
-      <aside class="sidebar" id="sidebar-site">
-        <SiteSidebar currentPage="" />
-      </aside>
-      <div id="article">
-        <article class="content">
-          <AstroLogo size={160} />
-          <div class="npm-init-snippet">
-            npm init astro
-          </div>
-        </article>
-      </div>
-    </main>
-  </body>
-</html>
+<Layout>
+  <h1>
+    <code>npm init astro</code>
+  </h1>
+</Layout>
diff --git a/docs/src/pages/integrations/data-sources-cms.md b/docs/src/pages/integrations/data-sources-cms.md
deleted file mode 100644
index d5af468d9..000000000
--- a/docs/src/pages/integrations/data-sources-cms.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: ~/layouts/Main.astro
-title: Data Sources / CMS
----
diff --git a/docs/src/pages/integrations/deploy-astro.md b/docs/src/pages/integrations/deploy-astro.md
deleted file mode 100644
index 5cec38a50..000000000
--- a/docs/src/pages/integrations/deploy-astro.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: ~/layouts/Main.astro
-title: Deploy Astro
----
diff --git a/docs/src/pages/integrations/developer-tools.md b/docs/src/pages/integrations/developer-tools.md
deleted file mode 100644
index 1f719306d..000000000
--- a/docs/src/pages/integrations/developer-tools.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: ~/layouts/Main.astro
-title: Developer Tools
----
diff --git a/docs/src/pages/integrations/state-management.md b/docs/src/pages/integrations/state-management.md
deleted file mode 100644
index 4a65c3eb0..000000000
--- a/docs/src/pages/integrations/state-management.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: ~/layouts/Main.astro
-title: State Management
----
diff --git a/docs/src/pages/integrations/styles-and-css-libraries.md b/docs/src/pages/integrations/styles-and-css-libraries.md
deleted file mode 100644
index 2107e8947..000000000
--- a/docs/src/pages/integrations/styles-and-css-libraries.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: ~/layouts/Main.astro
-title: Styles & CSS Libraries
----