redesign create-astro (#301)

* redesign create astro

* add changeset

* Use npm start

* Update the astro version

* Adds the changeset

Co-authored-by: Fred Schott <fks@Freds-MBP.attlocal.net>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>

43 files changed, 441 insertions, 56 deletions

diff --git a/examples/astro-markdown/package.json b/examples/astro-markdown/package.json
index fe5cebb05..9071e0a64 100644
--- a/examples/astro-markdown/package.json
+++ b/examples/astro-markdown/package.json
@@ -1,15 +1,13 @@
 {
-  "name": "@example/astro-markdown",
+  "name": "@astrojs/markdown-example",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
+    "build": "astro build"
   },
   "devDependencies": {
-    "astro": "0.12.9",
-    "nodemon": "^2.0.7"
+    "astro": "^0.12.9"
   },
   "snowpack": {
     "workspaceRoot": "../.."
diff --git a/examples/blog/.gitignore b/examples/blog/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/blog/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/blog/README.md b/examples/blog/README.md
index 2a20654f2..87c48761c 100644
--- a/examples/blog/README.md
+++ b/examples/blog/README.md
@@ -1,5 +1,7 @@
 # Astro Blog Example
 
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
 Features:
 
 - ✅ SEO-friendly setup with canonical URLs and OpenGraph data
@@ -7,24 +9,39 @@ Features:
 - ✅ RSS 2.0 generation
 - ✅ Sitemap.xml generation
 
-## Setup
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
 
 ```
-yarn
+/
+├── public/
+│   ├── robots.txt
+│   └── favicon.ico
+├── src/
+│   ├── components/
+│   │   └── Tour.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
 ```
 
-## Dev
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
 
-```
-yarn start
-```
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
 
-Preview at `http://localhost:3000`
+Any static assets, like images, can be placed in the `public/` directory.
 
-## Build
+## 🧞 Commands
 
-```
-yarn build
-```
+All commands are run from the root of the project, from a terminal:
+
+| Command         | Action                                      |
+|:----------------|:--------------------------------------------|
+| `npm install`   | Installs dependencies                       |
+| `npm run start` | Starts local dev server at `localhost:3000` |
+| `npm run build` | Build your production site to `./dist/`     |
+
+## 👀 Want to learn more?
 
-Will output static site at `./dist`
+Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://discord.gg/EsGdSGen).
diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs
index 9933e9571..c7583a774 100644
--- a/examples/blog/astro.config.mjs
+++ b/examples/blog/astro.config.mjs
@@ -1,10 +1,14 @@
 export default {
-  projectRoot: '.',
-  pages: './src/pages',
-  public: './public',
-  dist: './dist',
+  // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
+  // pages: './src/pages',   // Path to Astro components, pages, and data
+  // dist: './dist',       // When running `astro build`, path to final static output
+  // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
-    sitemap: true,
-    site: 'https://mysite.dev/', // change
+    // site: '',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    // sitemap: true,      // Generate sitemap (set to "false" to disable)
+  },
+  devOptions: {
+    // port: 3000,         // The port to run the dev server on.
+    // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
 };
diff --git a/examples/blog/meta.json b/examples/blog/meta.json
new file mode 100644
index 000000000..caa6852e5
--- /dev/null
+++ b/examples/blog/meta.json
@@ -0,0 +1,5 @@
+{
+  "title": "Blog",
+  "description": "an SEO-optimized blog starter",
+  "rank": 1
+}
diff --git a/examples/blog/package.json b/examples/blog/package.json
index 5d8d17115..c6faac56a 100644
--- a/examples/blog/package.json
+++ b/examples/blog/package.json
@@ -1,11 +1,10 @@
 {
-  "name": "@example/blog",
+  "name": "@astrojs/example-blog",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
+    "build": "astro build"
   },
   "devDependencies": {
     "astro": "^0.12.9",
diff --git a/examples/doc/public/favicon.svg b/examples/blog/public/favicon.svg
index 542f90aec..542f90aec 100644
--- a/examples/doc/public/favicon.svg
+++ b/examples/blog/public/favicon.svg
diff --git a/examples/doc/package.json b/examples/doc/package.json
deleted file mode 100644
index 61d247ff8..000000000
--- a/examples/doc/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@example/doc",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
-  },
-  "devDependencies": {
-    "astro": "^0.12.9",
-    "nodemon": "^2.0.7"
-  },
-  "snowpack": {
-    "workspaceRoot": "../.."
-  }
-}
diff --git a/examples/docs/.gitignore b/examples/docs/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/docs/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/doc/astro.config.mjs b/examples/docs/astro.config.mjs
index d97e2804d..d97e2804d 100644
--- a/examples/doc/astro.config.mjs
+++ b/examples/docs/astro.config.mjs
diff --git a/examples/docs/package.json b/examples/docs/package.json
new file mode 100644
index 000000000..cb587286d
--- /dev/null
+++ b/examples/docs/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/docs-template",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.12.9"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}
diff --git a/examples/doc/public/code.css b/examples/docs/public/code.css
index 54b2c5094..54b2c5094 100644
--- a/examples/doc/public/code.css
+++ b/examples/docs/public/code.css
diff --git a/examples/docs/public/favicon.svg b/examples/docs/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/docs/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/doc/public/index.css b/examples/docs/public/index.css
index c5ae87f5c..c5ae87f5c 100644
--- a/examples/doc/public/index.css
+++ b/examples/docs/public/index.css
diff --git a/examples/doc/public/theme.css b/examples/docs/public/theme.css
index d381604c8..d381604c8 100644
--- a/examples/doc/public/theme.css
+++ b/examples/docs/public/theme.css
diff --git a/examples/doc/public/theme.js b/examples/docs/public/theme.js
index d75d0bf99..d75d0bf99 100644
--- a/examples/doc/public/theme.js
+++ b/examples/docs/public/theme.js
diff --git a/examples/doc/src/components/ArticleFooter.astro b/examples/docs/src/components/ArticleFooter.astro
index 8078e2cc3..8078e2cc3 100644
--- a/examples/doc/src/components/ArticleFooter.astro
+++ b/examples/docs/src/components/ArticleFooter.astro
diff --git a/examples/doc/src/components/AvatarList.astro b/examples/docs/src/components/AvatarList.astro
index aafcb371b..aafcb371b 100644
--- a/examples/doc/src/components/AvatarList.astro
+++ b/examples/docs/src/components/AvatarList.astro
diff --git a/examples/doc/src/components/DocSidebar.tsx b/examples/docs/src/components/DocSidebar.tsx
index 076d460cc..076d460cc 100644
--- a/examples/doc/src/components/DocSidebar.tsx
+++ b/examples/docs/src/components/DocSidebar.tsx
diff --git a/examples/doc/src/components/EditOnGithub.tsx b/examples/docs/src/components/EditOnGithub.tsx
index f7478934f..f7478934f 100644
--- a/examples/doc/src/components/EditOnGithub.tsx
+++ b/examples/docs/src/components/EditOnGithub.tsx
diff --git a/examples/doc/src/components/Note.astro b/examples/docs/src/components/Note.astro
index 46940ddf8..46940ddf8 100644
--- a/examples/doc/src/components/Note.astro
+++ b/examples/docs/src/components/Note.astro
diff --git a/examples/doc/src/components/SiteSidebar.astro b/examples/docs/src/components/SiteSidebar.astro
index 7279d9aea..7279d9aea 100644
--- a/examples/doc/src/components/SiteSidebar.astro
+++ b/examples/docs/src/components/SiteSidebar.astro
diff --git a/examples/doc/src/components/ThemeToggle.tsx b/examples/docs/src/components/ThemeToggle.tsx
index 5a5061c15..5a5061c15 100644
--- a/examples/doc/src/components/ThemeToggle.tsx
+++ b/examples/docs/src/components/ThemeToggle.tsx
diff --git a/examples/doc/src/config.ts b/examples/docs/src/config.ts
index 6b6ce3fdc..6b6ce3fdc 100644
--- a/examples/doc/src/config.ts
+++ b/examples/docs/src/config.ts
diff --git a/examples/doc/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro
index b741098ef..b741098ef 100644
--- a/examples/doc/src/layouts/Main.astro
+++ b/examples/docs/src/layouts/Main.astro
diff --git a/examples/doc/src/pages/example.md b/examples/docs/src/pages/example.md
index 0966595d8..0966595d8 100644
--- a/examples/doc/src/pages/example.md
+++ b/examples/docs/src/pages/example.md
diff --git a/examples/doc/src/pages/index.astro b/examples/docs/src/pages/index.astro
index 75ca0da4f..75ca0da4f 100644
--- a/examples/doc/src/pages/index.astro
+++ b/examples/docs/src/pages/index.astro
diff --git a/examples/kitchen-sink/package.json b/examples/kitchen-sink/package.json
index 630007124..ea89cbe3b 100644
--- a/examples/kitchen-sink/package.json
+++ b/examples/kitchen-sink/package.json
@@ -1,15 +1,13 @@
 {
-  "name": "@example/kitchen-sink",
+  "name": "@astrojs/kitchen-sink-example",
   "private": true,
   "version": "1.0.0",
   "scripts": {
     "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
+    "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.12.9",
-    "nodemon": "^2.0.7"
+    "astro": "^0.12.9"
   },
   "snowpack": {
     "workspaceRoot": "../.."
diff --git a/examples/portfolio/.gitignore b/examples/portfolio/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/portfolio/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
index 6e2ecfac6..008c624db 100644
--- a/examples/portfolio/package.json
+++ b/examples/portfolio/package.json
@@ -1,11 +1,10 @@
 {
-  "name": "@example/portfolio",
+  "name": "@astrojs/portfolio-template",
   "private": true,
   "version": "0.0.1",
   "scripts": {
     "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
+    "build": "astro build"
   },
   "devDependencies": {
     "astro": "^0.12.9"
diff --git a/examples/starter/.gitignore b/examples/starter/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/starter/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/starter/README.md b/examples/starter/README.md
new file mode 100644
index 000000000..8565cdbb3
--- /dev/null
+++ b/examples/starter/README.md
@@ -0,0 +1,40 @@
+# Welcome to [Astro](https://astro.build)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   ├── robots.txt
+│   └── favicon.ico
+├── src/
+│   ├── components/
+│   │   └── Tour.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command         | Action                                      |
+|:----------------|:--------------------------------------------|
+| `npm install`   | Installs dependencies                       |
+| `npm run start` | Starts local dev server at `localhost:3000` |
+| `npm run build` | Build your production site to `./dist/`     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://discord.gg/EsGdSGen).
diff --git a/examples/starter/astro.config.mjs b/examples/starter/astro.config.mjs
new file mode 100644
index 000000000..e16ed1327
--- /dev/null
+++ b/examples/starter/astro.config.mjs
@@ -0,0 +1,14 @@
+export default {
+  // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
+  // pages: './src/pages',   // Path to Astro components, pages, and data
+  // dist: './dist',       // When running `astro build`, path to final static output
+  // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
+  buildOptions: {
+    // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    // sitemap: true,      // Generate sitemap (set to "false" to disable)
+  },
+  devOptions: {
+    // port: 3000,         // The port to run the dev server on.
+    // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
+  },
+};
diff --git a/examples/starter/meta.json b/examples/starter/meta.json
new file mode 100644
index 000000000..e9f3778c7
--- /dev/null
+++ b/examples/starter/meta.json
@@ -0,0 +1,5 @@
+{
+  "title": "Getting Started",
+  "description": "a friendly starting point for new astronauts",
+  "rank": 999
+}
diff --git a/examples/starter/package.json b/examples/starter/package.json
new file mode 100644
index 000000000..00dfc15e6
--- /dev/null
+++ b/examples/starter/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@astrojs/starter-kit",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.12.9"
+  }
+}
diff --git a/examples/starter/public/assets/logo.svg b/examples/starter/public/assets/logo.svg
new file mode 100644
index 000000000..d751556b2
--- /dev/null
+++ b/examples/starter/public/assets/logo.svg
@@ -0,0 +1,12 @@
+<svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.929c1.943 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53L99.746 60.56a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.224 180.224 0 00-52.01 17.557l43.52-142.281c1.989-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.085 1.157a16 16 0 016.488 4.806z" fill="url(#paint0_linear)"/>
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151c-7.14 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.962 10.367-1.962 13.902 0 0-1.055 17.355 11.016 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.973-19.87 5.977-3.79 12.616-8.001 17.192-16.449a31.013 31.013 0 003.744-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/starter/public/favicon.svg b/examples/starter/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/starter/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/starter/public/robots.txt b/examples/starter/public/robots.txt
new file mode 100644
index 000000000..1f53798bb
--- /dev/null
+++ b/examples/starter/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/examples/starter/public/style/global.css b/examples/starter/public/style/global.css
new file mode 100644
index 000000000..0ce3b249a
--- /dev/null
+++ b/examples/starter/public/style/global.css
@@ -0,0 +1,28 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-size: 1rem;
+  --user-font-scale: 1rem - 16px;
+  font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
+}
+
+body {
+  padding: 4rem 2rem;
+  width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  justify-content: center;
+  background: #f9fafb;
+  color: #111827;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #111827;
+    color: #fff;
+  }
+}
diff --git a/examples/starter/public/style/home.css b/examples/starter/public/style/home.css
new file mode 100644
index 000000000..c4271a845
--- /dev/null
+++ b/examples/starter/public/style/home.css
@@ -0,0 +1,38 @@
+:root {
+    --font-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;
+    --color-light: #F3F4F6;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-light: #1F2937;
+    }
+}
+
+a {
+    color: inherit;
+}
+
+header > div {
+    font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
+}
+
+header > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header h1 {
+    font-size: 1em;
+    font-weight: 500;
+}
+header img {
+    width: 2em;
+    height: 2.667em;
+}
+
+h2 {
+    font-weight: 500;
+    font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
+}
diff --git a/examples/starter/src/components/Tour.astro b/examples/starter/src/components/Tour.astro
new file mode 100644
index 000000000..5c822fe75
--- /dev/null
+++ b/examples/starter/src/components/Tour.astro
@@ -0,0 +1,85 @@
+---
+import { Markdown } from 'astro/components';
+---
+<article>
+    <div class="banner">
+        <p><strong>🧑‍🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p>
+    </div>
+
+    <section>
+        <Markdown>
+            ## 🚀 Project Structure
+
+            Inside of your Astro project, you'll see the following folders and files:
+
+            ```
+            /
+            ├── public/
+            │   ├── robots.txt
+            │   └── favicon.ico
+            ├── src/
+            │   ├── components/
+            │   │   └── Tour.astro
+            │   └── pages/
+            │       └── index.astro
+            └── package.json
+            ```
+
+            Astro looks for `.astro` or `.md` files in the `src/pages/` directory.
+            Each page is exposed as a route based on its file name.
+
+            There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+            Any static assets, like images, can be placed in the `public/` directory.
+        </Markdown>
+    </section>
+
+     <section>
+        <h2>👀 Want to learn more?</h2>
+        <p>Feel free to check <a href="https://github.com/snowpackjs/astro">our documentation</a> or jump into our <a href="https://discord.gg/EsGdSGen">Discord server</a>.</p>
+    </section>
+    
+</article>
+
+<style>
+    article {
+        padding-top: 2em;
+        line-height: 1.5;
+    }
+    section {
+        margin-top: 2em;
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+        max-width: 70ch;
+    }
+
+    .banner {
+        text-align: center;
+        font-size: 1.2rem;
+        background: var(--color-light);
+        padding: 1em 1.5em;
+        padding-left: 0.75em;
+        border-radius: 4px;
+    }
+
+    pre,
+    code {
+        font-family: var(--font-mono);
+        background: var(--color-light);
+        border-radius: 4px;
+    }
+
+    pre {
+        padding: 1em 1.5em;
+    }
+
+    .tree {
+        line-height: 1.2;
+    }
+
+    code:not(.tree) {
+        padding: 0.125em;
+        margin: 0 -0.125em;
+    }
+</style>
diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro
new file mode 100644
index 000000000..de052e9c4
--- /dev/null
+++ b/examples/starter/src/pages/index.astro
@@ -0,0 +1,38 @@
+---
+import Tour from '../components/Tour.astro';
+---
+
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Astro</title>
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" href="/style/home.css">
+
+    <style>
+        header {
+            display: flex;
+            flex-direction: column;
+            gap: 1em;
+            max-width: min(100%, 68ch);
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <header>
+            <div>
+                <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+                <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
+            </div>
+        </header>
+
+        <Tour />
+    </main>
+</body>
+</html>
diff --git a/examples/tailwindcss/package.json b/examples/tailwindcss/package.json
index 2bea3a777..edf0cd0bd 100644
--- a/examples/tailwindcss/package.json
+++ b/examples/tailwindcss/package.json
@@ -1,15 +1,14 @@
 {
-  "name": "@example/tailwindcss",
+  "name": "@astrojs/tailwind-example",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
+    "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.12.9",
-    "tailwindcss": "^2.1.2"
+    "tailwindcss": "^2.1.2",
+    "astro": "^0.12.9"
   },
   "snowpack": {
     "workspaceRoot": "../.."