From 67ef02534febe03d7a0a5aea82b0087e2165f772 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Thu, 1 Jul 2021 05:43:25 -0700 Subject: [PATCH] update example readmes (#591) * update example readmes * Update README.md --- examples/blog-multiple-authors/README.md | 6 ++++- examples/blog/README.md | 6 ++++- examples/docs/README.md | 28 ++++++++++++++++++++++++ examples/framework-multiple/README.md | 6 ++++- examples/framework-preact/README.md | 4 ++++ examples/framework-react/README.md | 4 ++++ examples/framework-svelte/README.md | 4 ++++ examples/framework-vue/README.md | 4 ++++ examples/portfolio/README.md | 21 +++++++++++++++--- examples/with-markdown/README.md | 6 ++++- examples/with-nanostores/README.md | 6 ++++- examples/with-tailwindcss/README.md | 10 ++++++--- 12 files changed, 94 insertions(+), 11 deletions(-) create mode 100644 examples/docs/README.md diff --git a/examples/blog-multiple-authors/README.md b/examples/blog-multiple-authors/README.md index 59df007d1e..2041dd1a21 100644 --- a/examples/blog-multiple-authors/README.md +++ b/examples/blog-multiple-authors/README.md @@ -1,4 +1,8 @@ -# Astro Blog Example +# Astro Starter Kit: Blog with Multiple Authors + +``` +npm init astro --template blog-multiple-authors +``` > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! diff --git a/examples/blog/README.md b/examples/blog/README.md index 59df007d1e..ae86603df3 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -1,4 +1,8 @@ -# Astro Blog Example +# Astro Starter Kit: Blog + +``` +npm init astro --template blog +``` > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! diff --git a/examples/docs/README.md b/examples/docs/README.md new file mode 100644 index 0000000000..22f4f40a97 --- /dev/null +++ b/examples/docs/README.md @@ -0,0 +1,28 @@ +# Astro Starter Kit: Docs Site + +``` +npm init astro --template docs +``` + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +Features: + +- ✅ CSS Grid Layout +- ✅ Full Markdown support +- ✅ Automatic header navigation sidebar +- ✅ Dark mode enabled by default + +## 🧞 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). diff --git a/examples/framework-multiple/README.md b/examples/framework-multiple/README.md index 42f8e2b1ff..ee5f77622d 100644 --- a/examples/framework-multiple/README.md +++ b/examples/framework-multiple/README.md @@ -1,4 +1,8 @@ -# Using Preact with Astro +# Kitchen Sink: Microfrontends with Astro + +``` +npm init astro --template framework-multiple +``` 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/)). diff --git a/examples/framework-preact/README.md b/examples/framework-preact/README.md index d948d9a4a1..419946cb4e 100644 --- a/examples/framework-preact/README.md +++ b/examples/framework-preact/README.md @@ -1,5 +1,9 @@ # Using Preact with Astro +``` +npm init astro --template framework-preact +``` + 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`. diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md index 016cf0f21b..51eaa7f93f 100644 --- a/examples/framework-react/README.md +++ b/examples/framework-react/README.md @@ -1,5 +1,9 @@ # Using React with Astro +``` +npm init astro --template framework-react +``` + 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`. diff --git a/examples/framework-svelte/README.md b/examples/framework-svelte/README.md index a6c995ac46..91d19e1636 100644 --- a/examples/framework-svelte/README.md +++ b/examples/framework-svelte/README.md @@ -1,5 +1,9 @@ # Using Svelte with Astro +``` +npm init astro --template framework-svelte +``` + 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`. diff --git a/examples/framework-vue/README.md b/examples/framework-vue/README.md index a6c4683bad..b625541384 100644 --- a/examples/framework-vue/README.md +++ b/examples/framework-vue/README.md @@ -1,5 +1,9 @@ # Using Vue with Astro +``` +npm init astro --template framework-vue +``` + 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`. diff --git a/examples/portfolio/README.md b/examples/portfolio/README.md index 9cbff3acf9..083eed318c 100644 --- a/examples/portfolio/README.md +++ b/examples/portfolio/README.md @@ -1,6 +1,21 @@ -## 🎨 Portfolio Example +# Astro Starter Kit: Portfolio ``` -npm i -npm start +npm init astro --template portfolio ``` + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +## 🧞 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). diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md index fa0ac50306..d317547cb2 100644 --- a/examples/with-markdown/README.md +++ b/examples/with-markdown/README.md @@ -1,4 +1,8 @@ -# Astro with Markdown +# Astro Example: Markdown + +``` +npm init astro --template with-markdown +``` This example showcases Astro's [built-in Markdown support](../../docs/markdown.md). diff --git a/examples/with-nanostores/README.md b/examples/with-nanostores/README.md index e74f30fd0f..87025cf346 100644 --- a/examples/with-nanostores/README.md +++ b/examples/with-nanostores/README.md @@ -1,3 +1,7 @@ -# Astro with [`nanostores`](https://github.com/nanostores/nanostores) +# Astro Example: Nanostores + +``` +npm init astro --template with-nanostores +``` This example showcases using [`nanostores`](https://github.com/nanostores/nanostores) to provide shared state between components from different frameworks. diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md index 20979a78f6..8f7ad152e9 100644 --- a/examples/with-tailwindcss/README.md +++ b/examples/with-tailwindcss/README.md @@ -1,5 +1,9 @@ -# Astro with [Tailwind](https://tailwindcss.com) +# Astro with Tailwind -Astro comes with Tailwind support out of the box. This example showcases how to style your Astro project with [Tailwind](https://tailwindcss.com). +``` +npm init astro --template with-tailwind +``` -For complete setup instructions, please see our [Styling Guide](https://github.com/snowpackjs/astro/blob/main/docs/styling.md#-tailwind). +Astro comes with [Tailwind](https://tailwindcss.com) support out of the box. This example showcases how to style your Astro project with Tailwind. + +For complete setup instructions, please see our [Styling Guide](/docs/guides/styling.md#-tailwind).