diff options
author | 2021-08-10 01:24:25 +0100 | |
---|---|---|
committer | 2021-09-06 01:21:39 -0700 | |
commit | d321d8366b597e46ff8e3fc63d17622a9297505c (patch) | |
tree | 339775403be469fdc9c53c4f9484c8ba7c23811a /examples | |
parent | e686c3c50469d18db93da7ce79ddcac8659c3166 (diff) | |
download | astro-d321d8366b597e46ff8e3fc63d17622a9297505c.tar.gz astro-d321d8366b597e46ff8e3fc63d17622a9297505c.tar.zst astro-d321d8366b597e46ff8e3fc63d17622a9297505c.zip |
Adds examples page
Diffstat (limited to 'examples')
-rw-r--r-- | examples/blog-multiple-authors/README.md | 51 | ||||
-rw-r--r-- | examples/blog-multiple-authors/package.json | 8 | ||||
-rw-r--r-- | examples/blog/README.md | 49 | ||||
-rw-r--r-- | examples/blog/package.json | 8 | ||||
-rw-r--r-- | examples/blog/sandbox.config.json | 11 | ||||
-rw-r--r-- | examples/docs/package.json | 8 | ||||
-rw-r--r-- | examples/framework-lit/package.json | 7 | ||||
-rw-r--r-- | examples/framework-multiple/package.json | 8 | ||||
-rw-r--r-- | examples/framework-preact/package.json | 7 | ||||
-rw-r--r-- | examples/framework-react/package.json | 8 | ||||
-rw-r--r-- | examples/framework-solid/package.json | 9 | ||||
-rw-r--r-- | examples/framework-svelte/package.json | 7 | ||||
-rw-r--r-- | examples/framework-vue/package.json | 7 | ||||
-rw-r--r-- | examples/minimal/package.json | 7 | ||||
-rw-r--r-- | examples/portfolio/package.json | 7 | ||||
-rw-r--r-- | examples/snowpack/package.json | 7 | ||||
-rw-r--r-- | examples/starter/package.json | 6 | ||||
-rw-r--r-- | examples/with-markdown-plugins/package.json | 7 | ||||
-rw-r--r-- | examples/with-markdown/package.json | 7 | ||||
-rw-r--r-- | examples/with-nanostores/package.json | 7 | ||||
-rw-r--r-- | examples/with-tailwindcss/package.json | 7 |
21 files changed, 220 insertions, 23 deletions
diff --git a/examples/blog-multiple-authors/README.md b/examples/blog-multiple-authors/README.md index 68f2e536b..39ae19683 100644 --- a/examples/blog-multiple-authors/README.md +++ b/examples/blog-multiple-authors/README.md @@ -1,8 +1,10 @@ # Astro Starter Kit: Blog with Multiple Authors -``` -npm init astro -- --template blog-multiple-authors -``` +Our Blog with Multiple Authors Template, is a working example of our Blog template being adapted to narrate the story of "Sancho Panza" and "Don Quixote". + +Here we display how you can use Astro to provide individual content for both Sancho Panza and Don Quixote. This is a great working example of our Collections API in action. + +We hope you enjoy this with a small Santeria, remember to build responsibly... > 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! @@ -18,23 +20,48 @@ Features: Inside of your Astro project, you'll see the following folders and files: ``` -/ ├── public/ -│ ├── robots.txt +│ ├── assets/ +│ ├── blog.scss +│ ├── global.scss +│ ├── social.png +│ ├── social.jpg │ └── favicon.ico ├── src/ │ ├── components/ -│ │ └── Tour.astro +│ │ └── MainHead.astro +│ │ └── Nav.astro +│ │ └── Pagination.astro +│ │ └── PostPreview.astro +│ └── layouts/ +│ │ └── post.astro │ └── pages/ +│ ├── posts/ +│ │ └── Series of Markdown files +│ └── $author.astro +│ └── $posts.astro +│ └── about.astro │ └── 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. +Files located within the public directory are static assets such as; stylesheets, images, fonts files etc. + +Located within the `src/` directory is the `components/` `layout/` and `pages/` directories. + +The `src/components/` directory is where all you UI components are stored, this includes components from your framework of choice, whether they be: -There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. +- Astro Components +- React +- Preact +- Solid +- Svelte Or Vue. -Any static assets, like images, can be placed in the `public/` directory. + You can visit our [Astro Components](https://docs.astro.build/core-concepts/astro-components) page for more information on creating your own components. + +Astro used [file-based routing](https://docs.astro.build/core-concepts/routing), this is done by having Astro look for `.astro` or `.md` files in the `src/pages/` directory. Each page is then exposed as a route based on its file name. + +To find out more about using [Pages with Astro](https://docs.astro.build/core-concepts/astro-pages) and how our file-based routing works. ## 🧞 Commands @@ -48,4 +75,8 @@ All commands are run from the root of the project, from a terminal: ## 👀 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). +This Template can be used as a solid platform to get your own Blog site up and running with little effort as possible. Or as a educational demonstration. + +Regardless of your intentions, we simply wish for you to truly explore and learn how to get the most from Astro and this template has been created in such a way to allow you to do so. + +Feel free to check [our documentation](https://github.com/snowpackjs/astro) if you get stuck or jump into our [Discord server](https://astro.build/chat) to speak with other Astronauts. diff --git a/examples/blog-multiple-authors/package.json b/examples/blog-multiple-authors/package.json index 899294217..f52dca4af 100644 --- a/examples/blog-multiple-authors/package.json +++ b/examples/blog-multiple-authors/package.json @@ -2,6 +2,14 @@ "name": "@example/blog-multiple-authors", "version": "0.0.1", "private": true, + "description": "Use Case: Multiple Authors Blogging Site built using Astro", + "keywords": ["kitchen-sink","template","astro"], + "repository": { + "directory": "/examples/blog-multiple-authors", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, + "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/blog/README.md b/examples/blog/README.md index 09673cc3d..17657d99e 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -1,10 +1,8 @@ -# Astro Starter Kit: Blog +# Astro's Starter Kit: Blog -``` -npm init astro -- --template blog -``` +Welcome to Astro's Blog's Readme. This template is a straight forward way to launch your own Blogging site using Astro. We highly encourage you to explore the contents of this template and play about with it to make it your own. -> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! +> 🧑🚀 **Seasoned Astronaut?** Delete this file. Have fun! Features: @@ -17,24 +15,47 @@ Features: Inside of your Astro project, you'll see the following folders and files: -``` +```bash / ├── public/ -│ ├── robots.txt +│ ├── assets/ +│ ├── blog.scss +│ ├── global.scss +│ ├── social.png +│ ├── social.jpg │ └── favicon.ico ├── src/ │ ├── components/ -│ │ └── Tour.astro +│ │ └── Author.astro +│ │ └── BaseHead.astro +│ │ └── BlogHeader.astro +│ │ └── BlogPost.astro +│ │ └── BlogPostPreview.astro +│ │ └── Logo.astro +│ └── layouts/ +│ │ └── BlogPost.astro │ └── pages/ +│ ├── posts/ +│ │ └── introducing-astro.astro │ └── 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. +Files located within the public directory are static assets such as; stylesheets, images, fonts files etc. + +Located within the `src/` directory is the `components/` `layout/` and `pages/` directories. -There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. +The `src/components/` directory is where all you UI components are stored, this includes components from your framework of choice, whether they be: -Any static assets, like images, can be placed in the `public/` directory. +- Astro Components +- React +- Preact +- Solid +- Svelte Or Vue. + + You can visit our [Astro Components](https://docs.astro.build/core-concepts/astro-components) page for more information on creating your own components. + +Astro used file-based routing, this is done by having Astro look for `.astro` or `.md` files in the `src/pages/` directory. Each page is then exposed as a route based on its file name. To find out more about using [Pages with Astro](https://docs.astro.build/core-concepts/astro-pages) and how our file-based routing works. ## 🧞 Commands @@ -48,4 +69,8 @@ All commands are run from the root of the project, from a terminal: ## 👀 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). +This Template can be used as a primary launch pad to get your own Blog site up and running with little effort as possible. Or as a educational demonstration. + +Regardless of your intentions, we simply wish for you to truly explore and learn how to get the most from Astro and this template has been created in such a way to allow you to do so. + +Feel free to check [our documentation](https://github.com/snowpackjs/astro) if you get stuck or jump into our [Discord server](https://astro.build/chat) to speak with other Astronauts. diff --git a/examples/blog/package.json b/examples/blog/package.json index e9ab01903..d6adae7a3 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -2,6 +2,13 @@ "name": "@example/blog", "version": "0.0.1", "private": true, + "description": "Blog Site built using Astro. Use this Template to setup your own Blog", + "keywords": ["create-astro","template","astro"], + "repository": { + "directory": "/examples/blog", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", @@ -14,4 +21,5 @@ "snowpack": { "workspaceRoot": "../.." } + } diff --git a/examples/blog/sandbox.config.json b/examples/blog/sandbox.config.json new file mode 100644 index 000000000..1027d5e6c --- /dev/null +++ b/examples/blog/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +}
\ No newline at end of file diff --git a/examples/docs/package.json b/examples/docs/package.json index fbe9a654c..e27eb942f 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -2,6 +2,14 @@ "name": "@example/docs", "version": "0.0.1", "private": true, + "description": "Documentation Site built using Astro. Our own Doc's site is based of this template!", + "keywords": ["create-astro","template","astro"], + "repository": { + "directory": "/examples/docs", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, + "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-lit/package.json b/examples/framework-lit/package.json index 6af44efa6..e7c74b07d 100644 --- a/examples/framework-lit/package.json +++ b/examples/framework-lit/package.json @@ -2,6 +2,13 @@ "name": "@example/framework-lit", "version": "0.0.1", "private": true, + "description": "An example on how to use Lit's Web Components within Astro to build your site", + "keywords": ["framework","template","astro"], + "repository": { + "directory": "/examples/framework-lit", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 1f5702cdb..c1876bf3f 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -2,6 +2,14 @@ "name": "@example/framework-multiple", "version": "0.0.1", "private": true, + "description": "A Demonstration of using Multiple UI Frameworks such as React, Svelte, Preact and Vue altogether with Astro", + "keywords": ["framework","astro","template"], + "repository": { + "directory": "/examples/framework-multiple", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, + "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json index 0fc86c5e2..3bcbe6333 100644 --- a/examples/framework-preact/package.json +++ b/examples/framework-preact/package.json @@ -2,6 +2,13 @@ "name": "@example/framework-preact", "version": "0.0.1", "private": true, + "description": "A Demonstration on using Preact's ulta lightweight UI library to build your site with Astro", + "keywords": ["framework","template","astro"], + "repository": { + "directory": "/examples/framework-preact", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json index e5a04e40e..7efc36238 100644 --- a/examples/framework-react/package.json +++ b/examples/framework-react/package.json @@ -2,6 +2,14 @@ "name": "@example/framework-react", "version": "0.0.1", "private": true, + "description": "Explore how to using the powerful React Library to develop components within Astro", + "keywords": ["framework","template","astro"], + "repository": { + "directory": "/examples/framework-react", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, + "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json index b4c45c7cb..ade13dcf7 100644 --- a/examples/framework-solid/package.json +++ b/examples/framework-solid/package.json @@ -1,7 +1,14 @@ { "name": "@example/framework-solid", - "version": "0.0.1", + "keywords": ["framework","template","astro"], "private": true, + "version": "0.0.1", + "description": "See how to seamlessly use Solid UI to develop Web Components within Astro", + "repository": { + "directory": "/examples/framework-solid", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index 603284e4b..0c8ee1c8b 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -2,6 +2,13 @@ "name": "@example/framework-svelte", "version": "0.0.1", "private": true, + "description": "See how we combined the power of Svelte alongside Astro ", + "keywords": ["framework","template","astro"], + "repository": { + "directory": "/examples/framework-svelte", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json index a95bf238b..a444531c0 100644 --- a/examples/framework-vue/package.json +++ b/examples/framework-vue/package.json @@ -1,7 +1,14 @@ { "name": "@example/framework-vue", "version": "0.0.1", + "keywords": ["framework","template","astro"], "private": true, + "description": "View our demonstration where we use Vue to create UI components for Astro", + "repository": { + "directory": "/examples/framework-vue", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/minimal/package.json b/examples/minimal/package.json index 07aae9a93..3b7d2f0ab 100644 --- a/examples/minimal/package.json +++ b/examples/minimal/package.json @@ -2,6 +2,13 @@ "name": "@example/minimal", "version": "0.0.1", "private": true, + "description": "Minimalistic Astro Starter kit", + "keywords": ["create-astro","template","astro"], + "repository": { + "directory": "/examples/minimal", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index 1920350eb..6e2f03b78 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -2,6 +2,13 @@ "name": "@example/portfolio", "version": "0.0.1", "private": true, + "description": "Astro's official Portfolio Template. For truly impressive portfolios its best built with Astro", + "keywords": ["create-astro","template","astro"], + "repository": { + "directory": "/examples/portfolio", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/snowpack/package.json b/examples/snowpack/package.json index 25e05b64d..817eeda56 100644 --- a/examples/snowpack/package.json +++ b/examples/snowpack/package.json @@ -2,6 +2,13 @@ "name": "@example/snowpack", "version": "0.0.1", "private": true, + "description": "Astro's First Template, everything has a beginning, and this for Astro's templates, was our 'Hello World'", + "keywords": ["kitchen-sink","template","astro"], + "repository": { + "directory": "/examples/snowpack", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "start": "astro dev", "build": "astro build", diff --git a/examples/starter/package.json b/examples/starter/package.json index 52f4d889a..b6b133185 100644 --- a/examples/starter/package.json +++ b/examples/starter/package.json @@ -2,6 +2,12 @@ "name": "@example/starter", "version": "0.0.1", "private": true, + "description": "Astro's default template. This starter template is a perfect launchpad for your Astro project", + "keywords": ["create-astro","template","astro"], + "repository": { + "directory": "/examples/starter", + "type": "github" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/with-markdown-plugins/package.json b/examples/with-markdown-plugins/package.json index 5145f9922..67e65e85b 100644 --- a/examples/with-markdown-plugins/package.json +++ b/examples/with-markdown-plugins/package.json @@ -2,6 +2,13 @@ "name": "@example/with-markdown-plugins", "version": "0.0.2", "private": true, + "description": "Using Markdown along with Rehype and Remark Plugins with Astro", + "keywords": ["kitchen-sink","template","astro"], + "repository": { + "directory": "/examples/with-markdown-plugins", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json index daa03363f..a47797574 100644 --- a/examples/with-markdown/package.json +++ b/examples/with-markdown/package.json @@ -1,7 +1,14 @@ { "name": "@example/with-markdown", + "description": "A demonstration on using Markdown with Astro", "version": "0.0.1", "private": true, + "keywords": ["kitchen-sink","template","astro"], + "repository": { + "directory": "/examples/with-markdown", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index e79b570dc..8e4f2d488 100644 --- a/examples/with-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -2,6 +2,13 @@ "name": "@example/with-nanostores", "version": "0.0.1", "private": true, + "description": "A working example on using the aptly named Nanostores State Management plugin with Astro", + "keywords": ["kitchen-sink","template","astro"], + "repository": { + "directory": "/examples/with-nanostores", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index d0d681b72..1882c5651 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -2,6 +2,13 @@ "name": "@example/with-tailwindcss", "version": "0.0.1", "private": true, + "description": "Astro has native TailwindCSS support out-of-the-box. This template demonstrates how to use Tailwind to style your Astro project", + "keywords": ["kitchen-sink","template","astro"], + "repository": { + "directory": "/examples/with-tailwindcss", + "type": "github", + "url": "https://github.com/snowpackjs/astro/tree/main" + }, "scripts": { "dev": "astro dev", "start": "astro dev", |