Restructure examples (#568)

* rename kitchen sink, pull out react example

* split out the rest of the examples

* align versions

* chore: rename examples

* chore: normalize gitignore

* chore: update package versions

* chore: move framework examples to `framework` namespace

* docs: add README to examples

Co-authored-by: Austin Crim <crim.austin@principal.com>

docs-www/package.json

@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": ".."

examples/astro-nanostores/README.md

@@ -1,40 +0,0 @@
-# Welcome to [Astro](https://astro.build) - [nanostores](https://github.com/nanostores/nanostores)
-
-This is a test of a shared store between components from different frameworks/libs using [nanostores](https://github.com/nanostores/nanostores).
-
-## 🚀 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://astro.build/chat).

examples/blog/package.json

@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/docs-template",
+  "name": "@astrojs/example-docs",
   "version": "0.0.2",
   "private": true,
   "scripts": {
@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/framework-multiple/README.md

@@ -0,0 +1,7 @@
+# Using Preact with Astro
+
+This example showcases Astro's built-in support for multiple frameworks ([React](https://reactjs.org), [Preact](https://preactjs.com), [Svelte](https://svelte.dev), and [Vue (`v3.x`)](https://v3.vuejs.org/)).
+
+No configuration is needed to enable these frameworks—just start writing components in `src/components`.
+
+> **Note**: If used, components _must_ include a JSX factory (ex. `import React from "react"`, `import { h } from "preact"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope.

examples/framework-multiple/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/example-framework-multiple",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.15.1"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}

examples/framework-preact/.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

examples/framework-preact/README.md

@@ -0,0 +1,7 @@
+# Using Preact with Astro
+
+This example showcases Astro's built-in support for [Preact](https://preactjs.com/).
+
+No configuration is needed to enable Preact support—just start writing Preact components in `src/components`.
+
+> **Note**: If used, components _must_ include the JSX factory (ex. `import { h } from "preact"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope.

examples/framework-preact/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/with-svelte-example",
+  "name": "@astrojs/example-framework-preact",
   "private": true,
   "version": "0.0.1",
   "scripts": {
@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/framework-react/.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

examples/framework-react/README.md

@@ -0,0 +1,7 @@
+# Using React with Astro
+
+This example showcases Astro's built-in support for [React](https://reactjs.org/).
+
+No configuration is needed to enable React support—just start writing React components in `src/components`.
+
+> **Note**: If used, components _must_ include the JSX factory (ex. `import React from "react"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope.

examples/framework-react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/with-preact-example",
+  "name": "@astrojs/example-framework-react",
   "private": true,
   "version": "0.0.1",
   "scripts": {
@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/framework-svelte/.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

examples/framework-svelte/README.md

@@ -0,0 +1,5 @@
+# Using Svelte with Astro
+
+This example showcases Astro's built-in support for [Svelte](https://svelte.dev/).
+
+No configuration is needed to enable Svelte support—just start writing Svelte components in `src/components`.

examples/framework-svelte/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/example-framework-svelte",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.15.1"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}

examples/framework-vue/.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

examples/framework-vue/README.md

@@ -0,0 +1,5 @@
+# Using Vue with Astro
+
+This example showcases Astro's built-in support for [Vue (`v3.x`)](https://v3.vuejs.org/).
+
+No configuration is needed to enable Vue support—just start writing Vue components in `src/components`.

examples/framework-vue/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@astrojs/markdown-example",
-  "version": "0.0.1",
+  "name": "@astrojs/example-framework-vue",
   "private": true,
+  "version": "0.0.1",
   "scripts": {
     "start": "astro dev",
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/portfolio/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/portfolio-template",
+  "name": "@astrojs/example-portfolio",
   "private": true,
   "version": "0.0.1",
   "scripts": {
@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/snowpack/.gitignore

@@ -1,4 +1,18 @@
-.DS_Store
-build
-node_modules
+# 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

examples/snowpack/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/snowpack",
+  "name": "@astrojs/example-snowpack",
   "private": true,
   "version": "3.0.0",
   "scripts": {

examples/starter/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/starter-kit",
+  "name": "@astrojs/example-starter",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/tailwindcss/.gitignore

@@ -1 +0,0 @@
-dist

examples/tailwindcss/README.md

@@ -1,23 +0,0 @@
-# Astro + Tailwind
-
-## Setup
-
-```
-npm install
-```
-
-## Dev
-
-```
-npm start
-```
-
-Preview at `http://localhost:3000`
-
-## Build
-
-```
-npm build
-```
-
-Will output static site at `./dist`

examples/with-markdown/.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

examples/with-markdown/README.md

@@ -0,0 +1,6 @@
+# Astro with Markdown
+
+This example showcases Astro's [built-in Markdown support](../../docs/markdown.md).
+
+- `src/pages/index.astro` uses Astro's `<Markdown>` component.
+- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`.

examples/with-markdown/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@astrojs/with-react-example",
-  "private": true,
+  "name": "@astrojs/example-with-markdown",
   "version": "0.0.1",
+  "private": true,
   "scripts": {
     "start": "astro dev",
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/with-multiple-frameworks/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@astrojs/with-multiple-frameworks-example",
-  "private": true,
-  "version": "0.0.1",
-  "scripts": {
-    "start": "astro dev",
-    "build": "astro build"
-  },
-  "devDependencies": {
-    "astro": "^0.15.0"
-  },
-  "snowpack": {
-    "workspaceRoot": "../.."
-  }
-}

examples/with-nanostores/.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

examples/with-nanostores/README.md

@@ -0,0 +1,3 @@
+# Astro with [`nanostores`](https://github.com/nanostores/nanostores)
+
+This example showcases using [`nanostores`](https://github.com/nanostores/nanostores) to provide shared state between components from different frameworks.

examples/with-nanostores/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/with-nanostores",
+  "name": "@astrojs/example-with-nanostores",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -7,9 +7,12 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "dependencies": {
     "nanostores": "^0.3.3"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
   }
 }

examples/with-tailwindcss/.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

examples/with-tailwindcss/README.md

@@ -0,0 +1,5 @@
+# Astro with [Tailwind](https://tailwindcss.com)
+
+Astro comes with Tailwind support out of the box. This example showcases how to style your Astro project with [Tailwind](https://tailwindcss.com).
+
+For complete setup instructions, please see our [Styling Guide](https://github.com/snowpackjs/astro/blob/main/docs/styling.md#-tailwind).

examples/with-tailwindcss/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@astrojs/tailwind-example",
+  "name": "@astrojs/example-with-tailwindcss",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "tailwindcss": "^2.1.2",
-    "astro": "^0.15.0"
+    "astro": "^0.15.1"
   },
   "snowpack": {
     "workspaceRoot": "../.."

examples/with-vue/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@astrojs/with-vue-example",
-  "private": true,
-  "version": "0.0.1",
-  "scripts": {
-    "start": "astro dev",
-    "build": "astro build"
-  },
-  "devDependencies": {
-    "astro": "^0.15.0"
-  },
-  "snowpack": {
-    "workspaceRoot": "../.."
-  }
-}

tools/language-server/package.json

@@ -28,7 +28,7 @@
     "vscode-languageserver-textdocument": "^1.0.1"
   },
   "devDependencies": {
-    "astro": "^0.15.0",
+    "astro": "^0.15.1",
     "astro-scripts": "0.0.1"
   }
 }