Revert "New getting started guide (#715)"

This reverts commit 2827f077baab6674a8ee47f3006e82ce991118b8.

20 files changed, 749 insertions, 411 deletions

diff --git a/docs/public/code.css b/docs/public/code.css
index 58a631e57..76b44bd24 100644
--- a/docs/public/code.css
+++ b/docs/public/code.css
@@ -8,91 +8,148 @@
 	opacity: 0.7;
 }
 
-.token.plain-text,
-[class*="language-bash"] span.token,
-[class*="language-shell"] span.token {
-	color: var(--color-gray-200);
+.token.atrule {
+	color: #c792ea;
 }
 
-[class*="language-bash"] span.token,
-[class*="language-shell"] span.token {
-	font-style: bold;
+.token.attr-name {
+	color: #ffcb6b;
+}
+
+.token.attr-value {
+	color: #a5e844;
+}
+
+.token.attribute {
+	color: #a5e844;
+}
+
+.token.boolean {
+	color: #c792ea;
+}
+
+.token.builtin {
+	color: #ffcb6b;
+}
+
+.token.cdata {
+	color: #80cbc4;
+}
+
+.token.char {
+	color: #80cbc4;
+}
+
+.token.class {
+	color: #ffcb6b;
 }
 
-.token.prolog,
-.token.comment,
-[class*="language-bash"] span.token.comment,
-[class*="language-shell"] span.token.comment {
-  color: var(--color-gray-400);
+.token.class-name {
+	color: #f2ff00;
+}
+
+.token.comment {
+	color: #999;
+}
+
+.token.constant {
+	color: #c792ea;
 }
 
-.token.selector,
-.token.tag,
-.token.unit,
-.token.url,
-.token.variable,
-.token.entity,
 .token.deleted {
-	color: #FA5E5B;
-}
-
-.token.boolean,
-.token.constant,
-.token.doctype,
-.token.number,
-.token.regex,
-.token.builtin,
-.token.class,
-.token.hexcode,
-.token.class-name,
-.token.attr-name {
-	color: var(--color-yellow);
+	color: #ff6666;
 }
 
-.token.atrule,
-.token.attribute,
-.token.attr-value .token.punctuation,
-.token.attr-value,
-.token.pseudo-class,
-.token.pseudo-element,
-.token.string {
-	color: var(--color-green);
+.token.doctype {
+	color: #999;
 }
 
-.token.symbol,
-.token.function,
-.token.id,
-.token.important
- {
-	color: var(--color-blue);
+.token.entity {
+	color: #ff6666;
 }
 
-.token.important,
-.token.id {
-  font-weight: bold;
+.token.function {
+	color: #c792ea;
 }
 
+.token.hexcode {
+	color: #f2ff00;
+}
 
-.token.cdata,
-.token.char,
-.token.property {
-	color: #23B1AF;
+.token.id {
+	color: #c792ea;
+	font-weight: bold;
+}
+
+.token.important {
+	color: #c792ea;
+	font-weight: bold;
 }
 
 .token.inserted {
-	color: var(--color-green);
+	color: #80cbc4;
 }
 
 .token.keyword {
-	color: #FF657C;
-  font-style: italic;
+	color: #c792ea;
+}
+
+.token.number {
+	color: #fd9170;
 }
 
 .token.operator {
-	color: var(--color-gray-300);
+	color: #89ddff;
+}
+
+.token.prolog {
+	color: #999;
+}
+
+.token.property {
+	color: #80cbc4;
+}
+
+.token.pseudo-class {
+	color: #a5e844;
+}
+
+.token.pseudo-element {
+	color: #a5e844;
 }
 
-.token.attr-value .token.attr-equals,
 .token.punctuation {
-	color: var(--color-gray-200);
+	color: #89ddff;
+}
+
+.token.regex {
+	color: #f2ff00;
+}
+
+.token.selector {
+	color: #ff6666;
+}
+
+.token.string {
+	color: #a5e844;
+}
+
+.token.symbol {
+	color: #c792ea;
+}
+
+.token.tag {
+	color: #ff6666;
+}
+
+.token.unit {
+	color: #fd9170;
+}
+
+.token.url {
+	color: #ff6666;
+}
+
+.token.variable {
+	color: #ff6666;
 }
diff --git a/docs/public/index.css b/docs/public/index.css
index 14f7e3518..2b41accad 100644
--- a/docs/public/index.css
+++ b/docs/public/index.css
@@ -5,7 +5,7 @@
 
 :root {
   --user-font-scale: 1rem - 16px;
-  --max-width: calc(100% - 1rem);
+  --max-width: calc(100% - 2rem);
 }
 
 @media (min-width: 50em) {
@@ -20,8 +20,12 @@ body {
   min-height: 100vh;
   font-family: var(--font-body);
   font-size: 1rem;
-  font-size: clamp(0.9rem, 0.7500rem + 0.3750vw + var(--user-font-scale), 1rem);
-  line-height: 1.5;
+  font-size: clamp(
+    0.875rem,
+    0.4626rem + 1.0309vw + var(--user-font-scale),
+    1.125rem
+  );
+  line-height: 1.625;
 }
 
 nav ul {
@@ -33,15 +37,11 @@ nav ul {
   margin-top: 1rem;
 }
 
-.content main > :first-child {
-  margin-top: 0;
-}
-
 /* Typography */
 :is(h1, h2, h3, h4, h5, h6) {
-  margin-bottom: 1rem;
+  margin-bottom: 1.38rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.3;
 }
 
 :is(h1, h2) {
@@ -53,26 +53,27 @@ nav ul {
 }
 
 h1 {
-  font-size: 2.5rem;
+  font-size: 3.5rem;
   font-weight: bold;
 }
 
 h2 {
-  font-size: 1.75rem;
+  font-size: 32px;
   font-weight: bold;
 }
 
 h3 {
-  font-size: 1.25rem;
+  font-size: 24px;
+  font-weight: bold;
 }
 
 h4 {
   font-size: 1rem;
+  font-weight: bold;
 }
 
 h5 {
-  font-size: 0.8rem;
-  font-weight: bold;
+  font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
 }
 
 p,
@@ -94,20 +95,6 @@ a {
   gap: 0.5rem;
 }
 
-article :is(ul, ol) > * + *,
-article li > * + * {
-  margin-top: 0.75rem;
-}
-
-article :is(ul, ol) {
-  padding-left: 0;
-}
-
-article ::marker {
-  font-weight: bold;
-  color: var(--theme-text-light);
-}
-
 a > code:not([class*='language']) {
   position: relative;
   color: var(--theme-text-accent);
@@ -175,26 +162,16 @@ pre {
   --padding-inline: 2rem;
   padding: var(--padding-block) var(--padding-inline);
   padding-right: calc(var(--padding-inline) * 2);
-  margin-left: calc(var(--padding-inline) * -1);
-  margin-right: calc(var(--padding-inline) * -1);
-  font-family: var(--font-mono);
 
-  line-height: 1.5;
-  font-size: 0.85rem;
+  line-height: 1.414;
   overflow-y: hidden;
   overflow-x: auto;
 }
 
-pre code {
-  font: inherit;
-}
-
 @media (min-width: 37.75em) {
   pre {
     --padding-inline: 1.25rem;
     border-radius: 8px;
-    margin-left: 0;
-    margin-right: 0;
   }
 }
 
@@ -216,30 +193,6 @@ img {
   align-items: center;
 }
 
-header {
-  position: relative;
-  transition: transform 300ms 200ms cubic-bezier(0.23, 1, 0.320, 1);
-}
-
-header::after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  height: 0.5rem;
-  background: var(--theme-navbar-bg);
-}
-
-header.hidden {
-  transform: translateY(calc(-100% - 1px));
-  transition: transform 200ms 100ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-header.hidden:is(:hover, :focus, :focus-within) {
-  transform: translateY(0);
-}
-
 header button {
   background-color: var(--theme-bg);
 }
@@ -305,7 +258,7 @@ button {
 }
 
 #theme-toggle .checked {
-  color: var(--theme-navbar-bg);
+  color: var(--theme-accent);
   transform: scale(1.125);
   opacity: 1;
 }
@@ -323,13 +276,13 @@ input[name='theme-toggle'] {
 .sidebar-nav {
   width: 100%;
   position: sticky;
-  min-height: calc(100vh - var(--theme-navbar-height));
-  height: calc(100vh - var(--theme-navbar-height));
-  top: var(--theme-navbar-height);
+  min-height: calc(100vh - 3.5rem);
+  height: calc(100vh - 3.5rem);
+  top: 3.5rem;
 }
 .sidebar-nav-inner {
   height: 100%;
-  padding: 0;
+  padding: 2rem 0;
   overflow: auto;
 }
 
@@ -349,8 +302,7 @@ h2.heading {
 
 .header-link:hover,
 .header-link:focus {
-  border-left-color: var(--theme-accent);
-  color: var(--theme-accent);
+  border-left-color: var(--color-gray-300);
 }
 .header-link:focus-within {
   color: var(--theme-text-light);
@@ -383,6 +335,36 @@ h2.heading {
   font-size: 1rem;
 }
 
+/* Scrollbar */
+
+/* width */
+::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: var(--theme-divider);
+  border-radius: 1rem;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--theme-text-lighter);
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-text-light);
+}
+
+/* Buttons */
+::-webkit-scrollbar-button {
+  display: none;
+}
+/* Scrollbar - End */
+
 /* Screenreader Only Text */
 .sr-only {
   position: absolute;
@@ -400,32 +382,3 @@ h2.heading {
 :target {
   scroll-margin-top: 4rem;
 }
-
-#site-title {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin: 0;
-  line-height: 1;
-  color: var(--color-white);
-  text-decoration: none;
-}
-
-#site-title svg {
-  width: 118px;
-  height: 48px;
-  display: block;
-}
-
-#site-title:hover,
-#site-title:focus {
-  opacity: 0.8;
-}
-
-#site-title h1 {
-  font: inherit;
-  color: inherit;
-  margin: 0;
-}
diff --git a/docs/public/nav.js b/docs/public/nav.js
deleted file mode 100644
index 93fadcd61..000000000
--- a/docs/public/nav.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const nav = document.querySelector('body > header');
-
-if (!window.matchMedia('(prefers-reduced-motion)').matches) {
-  window.addEventListener('scroll', onScroll, { passive: true });
-}
-
-let prev = -1;
-let prevDir = 0;
-let threshold = 32;
-
-function onScroll() {
-  const curr = window.scrollY;
-  const dir = curr > prev ? 1 : -1;
-  
-  if (curr < threshold) {
-    show();
-    document.documentElement.classList.add('initial');
-  } else if (dir !== prevDir) {
-    if (dir === 1) {
-      hide();
-    } else {
-      show();
-    }
-  }
-  
-  prev = curr;
-}
-
-const hide = () => {
-  nav.classList.add('hidden')
-  document.documentElement.classList.add('scrolled');
-  document.documentElement.classList.remove('initial');
-};
-const show = () => {
-  nav.classList.remove('hidden');
-  document.documentElement.classList.remove('scrolled');
-}
diff --git a/docs/public/theme.css b/docs/public/theme.css
index f5db78d1f..22d765714 100644
--- a/docs/public/theme.css
+++ b/docs/public/theme.css
@@ -2,7 +2,8 @@
   --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
     sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --font-body: system-ui, var(--font-fallback);
-  --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+  --font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 
   --color-white: #fff;
   --color-black: #000014;
@@ -36,14 +37,14 @@
 
 :root {
   color-scheme: light;
-  --theme-accent: var(--color-purple);
-  --theme-accent-rgb: var(--color-purple-rgb);
+  --theme-accent: var(--color-blue);
+  --theme-accent-rgb: var(--color-blue-rgb);
   --theme-accent-opacity: 0.1;
   --theme-divider: var(--color-gray-100);
   --theme-text: var(--color-gray-800);
   --theme-text-light: var(--color-gray-600);
   --theme-text-lighter: var(--color-gray-400);
-  --theme-text-accent: var(--color-purple);
+  --theme-text-accent: var(--color-blue);
   --theme-bg: var(--color-white);
   --theme-bg-hover: var(--color-gray-50);
   --theme-bg-offset: var(--color-gray-100);
@@ -52,9 +53,6 @@
   --theme-code-inline-text: var(--theme-text);
   --theme-code-bg: var(--color-gray-700);
   --theme-code-text: var(--color-gray-100);
-  --theme-navbar-bg: var(--color-green);
-  --theme-navbar-height: 3.5rem;
-  --theme-sidebar-offset: var(--theme-navbar-height);
 }
 
 body {
@@ -62,10 +60,6 @@ body {
   color: var(--theme-text);
 }
 
-:root.scrolled {
-  --theme-sidebar-offset: 0;
-}
-
 :root.theme-dark {
   color-scheme: dark;
   --theme-accent-opacity: 0.3;
@@ -73,17 +67,17 @@ body {
   --theme-text: var(--color-gray-200);
   --theme-text-light: var(--color-gray-300);
   --theme-text-lighter: var(--color-gray-600);
-  --theme-text-accent: #A550FF;
+  --theme-text-accent: var(--color-white);
   --theme-bg: var(--color-gray-800);
   --theme-bg-hover: var(--color-gray-600);
   --theme-bg-offset: var(--color-gray-950);
-  --theme-code-inline-bg: var(--color-gray-900);
+  --theme-code-inline-bg: var(--color-gray-600);
   --theme-code-inline-text: var(--color-white);
   --theme-code-bg: var(--color-gray-950);
   --theme-code-text: var(--color-white);
 }
 
 ::selection {
-  color: var(--color-green);
-  background-color: rgba(var(--color-green-rgb), var(--theme-accent-opacity));
+  color: var(--theme-text-accent);
+  background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
 }
diff --git a/docs/src/components/SiteSidebar.astro b/docs/src/components/SiteSidebar.astro
index 33e9fbfb6..6d003d71d 100644
--- a/docs/src/components/SiteSidebar.astro
+++ b/docs/src/components/SiteSidebar.astro
@@ -24,15 +24,13 @@ const {currentPage} = Astro.props;
 <style>
   nav {
     position: sticky;
-    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;
+    min-height: calc(100vh - 3.5rem);
+    height: calc(100vh - 3.5rem);
+    top: 3.5rem;
   }
   .nav-groups {
     height: 100%;
-    padding: 0;
+    padding: 2rem 0;
     overflow: auto;
   }
 
@@ -68,4 +66,4 @@ const {currentPage} = Astro.props;
     font-weight: 600;
   }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/docs/src/components/ThemeToggle.tsx b/docs/src/components/ThemeToggle.tsx
index 37191bf25..31ab5ea74 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 = ['light', 'dark'];
+const themes = ['system', 'light', 'dark'];
 
 const icons = [
   <svg
@@ -13,6 +13,19 @@ 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 d972fb366..bb96ac4e9 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -3,7 +3,6 @@ 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 ccacf6a82..396e2b0b3 100644
--- a/docs/src/layouts/Main.astro
+++ b/docs/src/layouts/Main.astro
@@ -5,18 +5,14 @@ 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;
-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}`;
-}
+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}`;
 ---
 
-<html lang="{content.lang ?? 'en-us'}" class="initial">
+<html lang="{content.lang ?? 'en-us'}">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
@@ -30,15 +26,11 @@ if (currentPage) {
           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: var(--theme-navbar-height) 1fr;
+        grid-template-rows: 3.5rem 1fr;
         --gutter: 0.5rem;
         --doc-padding: 2rem;
       }
@@ -49,23 +41,10 @@ if (currentPage) {
         z-index: 10;
         height: 56px;
         width: 100%;
-        background-color: var(--theme-navbar-bg);
+        background-color: var(--theme-bg-offset);
         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 {
@@ -75,17 +54,34 @@ if (currentPage) {
           minmax(var(--gutter), 1fr) 
           minmax(0, var(--max-width)) 
           minmax(var(--gutter), 1fr);
+        gap: 1em;
       }
 
-      .logo {
+      .menu-and-logo {
+        gap: 1em;
+      }
+
+      #site-title {
         display: flex;
         align-items: center;
-        justify-content: center;
-        gap: 1em;
-        width: 100%;
-        margin-left: -40px;
-        transform: translateY(4px);
-        z-index: -1;
+        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 {
@@ -103,27 +99,12 @@ if (currentPage) {
       }
 
       .sidebar {
-        min-height: calc(100vh - var(--theme-navbar-height));
-        height: calc(100vh - var(--theme-navbar-height));
+        min-height: calc(100vh - 3.5rem);
+        height: calc(100vh - 3.5rem);
         max-height: 100vh;
         position: sticky;
-        top: var(--doc-padding);
-        margin-top: var(--theme-navbar-height);
+        top: 3.5rem;
         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 {
@@ -141,7 +122,6 @@ if (currentPage) {
       }
 
       .content {
-        padding: 0;
         max-width: 75ch;
         width: 100%;
         height: 100%;
@@ -169,11 +149,6 @@ if (currentPage) {
         display: block;
       }
       @media (min-width: 60em) {
-        .logo {
-          width: auto;
-          margin: 0;
-          z-index: 0;
-        }
         #sidebar-site {
           display: flex;
         }
@@ -190,7 +165,6 @@ if (currentPage) {
           grid-template-columns: 
             20rem 
             minmax(0, var(--max-width));
-          gap: 1em;
         }
         #article {
           grid-column: 2;
@@ -208,12 +182,6 @@ if (currentPage) {
       }
 
       @media (min-width: 82em) {
-        header .site-content-title {
-          display: block;
-        }
-        main .content-title {
-          display: none;
-        }
         .layout {
           grid-template-columns: 
             20rem 
@@ -234,9 +202,6 @@ if (currentPage) {
           display: flex;
           grid-column: 3;
         }
-        .nav-wrapper {
-          padding: 0;
-        }
       }
 
     </style>
@@ -245,24 +210,16 @@ if (currentPage) {
   <body>
     <header>
       <nav class="nav-wrapper">
-        <div class="menu-toggle">
-            <MenuToggle client:idle/>
-        </div>
-
-        <div class="logo flex">
+        <div class="menu-and-logo flex">
+          <div class="menu-toggle">
+              <MenuToggle client:idle/>
+          </div>
           <a id="site-title" href="/">
-            <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>
+            <h1>Astro Documentation</h1>
           </a>
         </div>
 
-        <div class="site-content-title">
-          {content?.title && <h1 class="content-title">{content?.title}</h1>}
-        </div>
+        <div />
 
         <div class="theme-toggle-wrapper">
           <ThemeToggle client:idle />
@@ -272,24 +229,22 @@ if (currentPage) {
 
     <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>
-          {currentPage && <ArticleFooter path={currentFile} />}
+          <ArticleFooter path={currentFile} />
         </article>
       </div>
       <aside class="sidebar" id="sidebar-content">
-        {currentPage && <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />}
+        <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 b1770ee31..bfe117e9a 100644
--- a/docs/src/pages/404.astro
+++ b/docs/src/pages/404.astro
@@ -1,9 +1,240 @@
 ---
-import Layout from '../layouts/Main.astro';
+import SiteSidebar from '../components/SiteSidebar.astro';
+import AstroLogo from '../components/AstroLogo.astro';
+import ThemeToggle from '../components/ThemeToggle.tsx';
+import MenuToggle from '../components/MenuToggle.tsx';
 ---
 
-<Layout>
-  <h1>404</h1>
-  <p>This page isn't in our solar system.</p>
-  <a href="/">Take me home.</a>
-</Layout>
+<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>
diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md
deleted file mode 100644
index 71b5434ef..000000000
--- a/docs/src/pages/getting-started.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-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 ca8365e5e..39518fc78 100644
--- a/docs/src/pages/guides/deploy.md
+++ b/docs/src/pages/guides/deploy.md
@@ -3,6 +3,8 @@ 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).
@@ -251,7 +253,3 @@ 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 358e44cbc..e5b06cc10 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -1,9 +1,251 @@
 ---
-import Layout from '../layouts/Main.astro';
+import SiteSidebar from '../components/SiteSidebar.astro';
+import AstroLogo from '../components/AstroLogo.astro';
+import ThemeToggle from '../components/ThemeToggle.tsx';
+import MenuToggle from '../components/MenuToggle.tsx';
 ---
 
-<Layout>
-  <h1>
-    <code>npm init astro</code>
-  </h1>
-</Layout>
+<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>
diff --git a/docs/src/pages/integrations/data-sources-cms.md b/docs/src/pages/integrations/data-sources-cms.md
new file mode 100644
index 000000000..d5af468d9
--- /dev/null
+++ b/docs/src/pages/integrations/data-sources-cms.md
@@ -0,0 +1,4 @@
+---
+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
new file mode 100644
index 000000000..5cec38a50
--- /dev/null
+++ b/docs/src/pages/integrations/deploy-astro.md
@@ -0,0 +1,4 @@
+---
+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
new file mode 100644
index 000000000..1f719306d
--- /dev/null
+++ b/docs/src/pages/integrations/developer-tools.md
@@ -0,0 +1,4 @@
+---
+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
new file mode 100644
index 000000000..4a65c3eb0
--- /dev/null
+++ b/docs/src/pages/integrations/state-management.md
@@ -0,0 +1,4 @@
+---
+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
new file mode 100644
index 000000000..2107e8947
--- /dev/null
+++ b/docs/src/pages/integrations/styles-and-css-libraries.md
@@ -0,0 +1,4 @@
+---
+layout: ~/layouts/Main.astro
+title: Styles & CSS Libraries
+---
diff --git a/examples/README.md b/examples/README.md
deleted file mode 100644
index 557736ab2..000000000
--- a/examples/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Astro Examples Library
-
-
-The easiest way to check out one of these examples on your machine is by running this command in an empty directory:
-
-```
-npm init astro --template [EXAMPLE_NAME]
-```
-
-## Community Examples
-
-Visit [awesome-astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm init astro` to check out any community examples:
-
-```
-npm init astro --template [GITHUB_USER]/[REPO_NAME]
-```
-
-Paths to examples nested inside of a repo are also supported:
-
-```
-npm init astro --template [GITHUB_USER]/[REPO_NAME]/path/to/example
-```
diff --git a/examples/docs/public/index.css b/examples/docs/public/index.css
index d58558799..5f41eb6ed 100644
--- a/examples/docs/public/index.css
+++ b/examples/docs/public/index.css
@@ -391,4 +391,4 @@ body {
 ::-webkit-scrollbar-button {
   display: none;
 }
-/* Scrollbar - End */
+/* Scrollbar - End */
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
index 8a50797c7..b7bac0e99 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,8 +1,5 @@
 {
   "cleanUrls": true,
   "trailingSlash": false,
-  "redirects": [
-    { "source": "/chat", "destination": "https://discord.gg/grF4GTXXYm" },
-    { "source": "/", "destination": "/getting-started" }
-  ]
+  "redirects": [{ "source": "/chat", "destination": "https://discord.gg/grF4GTXXYm" }]
 }