Skip to content

Commit cb7a957

Browse files
FredKSchottFredKSchott
authored
update examples for stackblitz (withastro#1379)
1 parent c4634e5 commit cb7a957

File tree

222 files changed

+170
-8175
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

222 files changed

+170
-8175
lines changed

‎examples/blog-multiple-authors/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/blog-multiple-authors/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
npm init astro -- --template blog-multiple-authors
55
```
66

7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/blog-multiple-authors)
8+
79
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
810
911
Features:

‎examples/blog/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/blog/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
npm init astro -- --template blog
55
```
66

7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/blog)
8+
79
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
810
911
Features:

‎examples/docs/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/docs/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
npm init astro -- --template docs
55
```
66

7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/docs)
8+
79
## Features
810

911
- ✅ **Full Markdown support**

‎examples/framework-lit/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-lit/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Astro + Lit Example
2+
3+
```
4+
npm init astro -- --template framework-lit
5+
```
6+
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-lit)
8+
9+
This example showcases Astro working with [Lit](https://lit.dev/).

‎examples/framework-multiple/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-multiple/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
npm init astro -- --template framework-multiple
55
```
66

7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-multiple)
8+
79
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/)).
810

911
No configuration is needed to enable these frameworks—just start writing components in `src/components`.

‎examples/framework-preact/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-preact/README.md

+4-31
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,11 @@
1-
# Using Preact with Astro
1+
# Astro + Preact Example
22

3-
This example showcases Astro's built-in support for [Preact](https://www.preactjs.com/).
4-
5-
## Installation
6-
7-
### Automatic
8-
9-
Bootstrap your Astro project with this template!
10-
11-
```shell
3+
```
124
npm init astro -- --template framework-preact
135
```
146

15-
### Manual
16-
17-
To use Preact components in your Astro project:
18-
19-
1. Install `@astrojs/renderer-preact`
20-
21-
```shell
22-
npm i @astrojs/renderer-preact
23-
```
24-
25-
2. Add `"@astrojs/renderer-preact"` to your `renderers` in `astro.config.mjs`.
26-
27-
```js
28-
export default {
29-
renderers: [
30-
"@astrojs/renderer-preact",
31-
// optionally, others...
32-
]
33-
}
34-
```
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-preact)
358

36-
## Usage
9+
This example showcases Astro working with [Preact](https://preactjs.com).
3710

3811
Write your Preact components as `.jsx` or `.tsx` files in your project.

‎examples/framework-react/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-react/README.md

+4-31
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,11 @@
1-
# Using React with Astro
1+
# Astro + React Example
22

3-
This example showcases Astro's built-in support for [React](https://reactjs.org/).
4-
5-
## Installation
6-
7-
### Automatic
8-
9-
Bootstrap your Astro project with this template!
10-
11-
```shell
3+
```
124
npm init astro -- --template framework-react
135
```
146

15-
### Manual
16-
17-
To use React components in your Astro project:
18-
19-
1. Install `@astrojs/renderer-react`
20-
21-
```shell
22-
npm i @astrojs/renderer-react
23-
```
24-
25-
2. Add `"@astrojs/renderer-react"` to your `renderers` in `astro.config.mjs`.
26-
27-
```js
28-
export default {
29-
renderers: [
30-
"@astrojs/renderer-react",
31-
// optionally, others...
32-
]
33-
}
34-
```
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-react)
358

36-
## Usage
9+
This example showcases Astro working with [React](https://reactjs.org/).
3710

3811
Write your React components as `.jsx` or `.tsx` files in your project.

‎examples/framework-solid/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-solid/README.md

+5-32
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,11 @@
1-
# Using Solid with Astro
1+
# Astro + Solid.js Example
22

3-
This example showcases Astro's built-in support for [Solid](https://www.solidjs.com/).
4-
5-
## Installation
6-
7-
### Automatic
8-
9-
Bootstrap your Astro project with this template!
10-
11-
```shell
12-
npm init astro --template framework-solid
3+
```
4+
npm init astro -- --template framework-solid
135
```
146

15-
### Manual
16-
17-
To use Solid components in your Astro project:
18-
19-
1. Install `@astrojs/renderer-solid`
20-
21-
```shell
22-
npm i @astrojs/renderer-solid
23-
```
24-
25-
2. Add `"@astrojs/renderer-solid"` to your `renderers` in `astro.config.mjs`.
26-
27-
```js
28-
export default {
29-
renderers: [
30-
"@astrojs/renderer-solid",
31-
// optionally, others...
32-
]
33-
}
34-
```
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-solid)
358

36-
## Usage
9+
This example showcases Astro working with [Solid](https://www.solidjs.com/).
3710

3811
Write your Solid components as `.jsx` or `.tsx` files in your project.

‎examples/framework-svelte/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-svelte/README.md

+4-33
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,9 @@
1-
# Using Svelte with Astro
1+
# Astro + Svelte Example
22

3-
This example showcases Astro's built-in support for [Svelte](https://svelte.dev/).
4-
5-
## Installation
6-
7-
### Automatic
8-
9-
Bootstrap your Astro project with this template!
10-
11-
```shell
3+
```
124
npm init astro -- --template framework-svelte
135
```
146

15-
### Manual
16-
17-
To use Svelte components in your Astro project:
18-
19-
1. Install `@astrojs/renderer-svelte`
20-
21-
```shell
22-
npm i @astrojs/renderer-svelte
23-
```
24-
25-
2. Add `"@astrojs/renderer-svelte"` to your `renderers` in `astro.config.mjs`.
26-
27-
```js
28-
export default {
29-
renderers: [
30-
"@astrojs/renderer-svelte",
31-
// optionally, others...
32-
]
33-
}
34-
```
35-
36-
## Usage
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-svelte)
378

38-
Write your Svelte components as `.svelte` files in your project.
9+
This example showcases Astro working with [Svelte](https://svelte.dev/).

‎examples/framework-vue/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/framework-vue/README.md

+4-32
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,10 @@
1-
# Using Vue with Astro
1+
# Astro + Vue Example
22

3-
This example showcases Astro's built-in support for [Vue](https://v3.vuejs.org/).
4-
5-
## Installation
6-
7-
### Automatic
8-
9-
Bootstrap your Astro project with this template!
10-
11-
```shell
3+
```
124
npm init astro -- --template framework-vue
135
```
146

15-
### Manual
16-
17-
To use Vue components in your Astro project:
18-
19-
1. Install `@astrojs/renderer-vue`
20-
21-
```shell
22-
npm i @astrojs/renderer-vue
23-
```
24-
25-
2. Add `"@astrojs/renderer-vue"` to your `renderers` in `astro.config.mjs`.
26-
27-
```js
28-
export default {
29-
renderers: [
30-
"@astrojs/renderer-vue",
31-
// optionally, others...
32-
]
33-
}
34-
```
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/framework-vue)
358

36-
## Usage
9+
This example showcases Astro working with [Vue](https://v3.vuejs.org/).
3710

38-
Write your Vue components as `.vue` files in your project.

‎examples/minimal/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/minimal/README.md

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
1-
# [Astro](https://astro.build)
1+
# Astro Starter Kit: Minimal
2+
3+
```
4+
npm init astro -- --template minimal
5+
```
6+
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/minimal)
8+
9+
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
10+
11+
## 🚀 Project Structure
212

313
Inside of your Astro project, you'll see the following folders and files:
414

515
```
616
/
717
├── public/
8-
│ ├── robots.txt
9-
│ └── favicon.ico
1018
├── src/
1119
│ └── pages/
1220
│ └── index.astro

‎examples/portfolio/.stackblitzrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"startCommand": "npm start",
3+
"env": {
4+
"ENABLE_CJS_IMPORTS": true
5+
}
6+
}

‎examples/portfolio/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
npm init astro -- --template portfolio
55
```
66

7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/portfolio)
8+
79
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
810
911
## 🧞 Commands

0 commit comments

Comments
 (0)