diff --git a/README.md b/README.md index ae07926e1..157ae4ad1 100644 --- a/README.md +++ b/README.md @@ -69,10 +69,10 @@ export default { ### πŸš€ Basic Usage -Even though nearly-everything [is configurable][config], we recommend starting out by creating an `astro/` folder in your project with the following structure: +Even though nearly-everything [is configurable][config], we recommend starting out by creating an `src/` folder in your project with the following structure: ``` -β”œβ”€β”€ astro/ +β”œβ”€β”€ src/ β”‚ β”œβ”€β”€ components/ β”‚ └── pages/ β”‚ └── index.astro @@ -80,17 +80,17 @@ Even though nearly-everything [is configurable][config], we recommend starting o └── package.json ``` -- `astro/components/*`: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized. -- `astro/pages/*`: this is a special folder where your [routing][routing] lives. +- `src/components/*`: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized. +- `src/pages/*`: this is a special folder where your [routing][routing] lives. #### 🚦 Routing -Routing happens in `astro/pages/*`. Every `.astro` or `.md.astro` file in this folder corresponds with a public URL. For example: +Routing happens in `src/pages/*`. Every `.astro` or `.md.astro` file in this folder corresponds with a public URL. For example: | Local file | Public URL | | :--------------------------------------- | :------------------------------ | -| `astro/pages/index.astro` | `/index.html` | -| `astro/pages/post/my-blog-post.md.astro` | `/post/my-blog-post/index.html` | +| `src/pages/index.astro` | `/index.html` | +| `src/pages/post/my-blog-post.md.astro` | `/post/my-blog-post/index.html` | #### πŸ—‚ Static Assets @@ -153,7 +153,7 @@ Fetching data is what Astro is all about! Whether your data lives remotely in an For fetching from a remote API, use a native JavaScript `fetch()` ([docs][fetch-js]) as you are used to. For fetching local content, use `Astro.fetchContent()` ([docs][fetch-content]). ```js -// astro/components/MyComponent.Astro +// src/components/MyComponent.Astro --- // Example 1: fetch remote data from your own API diff --git a/docs/api.md b/docs/api.md index d3af1564f..805fb6824 100644 --- a/docs/api.md +++ b/docs/api.md @@ -139,7 +139,7 @@ export async function createCollection() { } ``` -Astro will generate an RSS 2.0 feed at `/feed/[collection].xml` (for example, `/astro/pages/$podcast.xml` would generate `/feed/podcast.xml`). +Astro will generate an RSS 2.0 feed at `/feed/[collection].xml` (for example, `/src/pages/$podcast.xml` would generate `/feed/podcast.xml`). ⚠️ Even though Astro will create the RSS feed for you, you’ll still need to add `` tags manually in your `` HTML: diff --git a/docs/cli.md b/docs/cli.md index 67f0ae631..592cf1635 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -32,7 +32,7 @@ Print the help message and exit. #### `astro dev` -Runs the Astro development server. This starts an HTTP server that responds to requests for pages stored in `astro/pages` (or which folder is specified in your [configuration](../README.md##%EF%B8%8F-configuration)). +Runs the Astro development server. This starts an HTTP server that responds to requests for pages stored in `src/pages` (or which folder is specified in your [configuration](../README.md##%EF%B8%8F-configuration)). See the [dev server](./dev.md) docs for more information on how the dev server works. @@ -40,4 +40,4 @@ __Flags__ ##### `--port` -Specifies should port to run on. Defaults to `3000`. \ No newline at end of file +Specifies should port to run on. Defaults to `3000`. diff --git a/docs/collections.md b/docs/collections.md index 997a0025c..04c33ced2 100644 --- a/docs/collections.md +++ b/docs/collections.md @@ -13,7 +13,7 @@ By default, any Astro component can fetch data from any API or local `*.md` file Let’s pretend we have some blog posts written already. This is our starting project structure: ``` -└── astro/ +└── src/ └── pages/ └── post/ └── (blog content) @@ -25,10 +25,10 @@ The first step in adding some dynamic collections is deciding on a URL schema. F - `/posts/:page`: A list page of all blog posts, paginated, and sorted most recent first - `/tag/:tag`: All blog posts, filtered by a specific tag -Because `/post/:post` references the static files we have already, that doesn’t need to be a collection. But we will need collections for `/posts/:page` and `/tag/:tag` because those will be dynamically generated. For both collections we’ll create a `/astro/pages/$[collection].astro` file. This is our new structure: +Because `/post/:post` references the static files we have already, that doesn’t need to be a collection. But we will need collections for `/posts/:page` and `/tag/:tag` because those will be dynamically generated. For both collections we’ll create a `/src/pages/$[collection].astro` file. This is our new structure: ```diff - └── astro/ + └── src/ └── pages/ β”œβ”€β”€ post/ β”‚ └── (blog content) @@ -76,7 +76,7 @@ published_at: 2021-03-01 09:34:00 There’s nothing special or reserved about any of these names; you’re free to name everything whatever you’d like, or have as much or little frontmatter as you need. ```jsx -// /astro/pages/$posts.astro +// /src/pages/$posts.astro --- export let collection: any; @@ -136,10 +136,10 @@ Let’s walk through some of the key parts: #### Example 2: Advanced filtering & pagination -In our earlier example, we covered simple pagination for `/posts/1`, but we’d still like to make `/tag/:tag/1` and `/year/:year/1`. To do that, we’ll create 2 more collections: `/astro/pages/$tag.astro` and `astro/pages/$year.astro`. Assume that the markup is the same, but we’ve expanded the `createCollection()` function with more data. +In our earlier example, we covered simple pagination for `/posts/1`, but we’d still like to make `/tag/:tag/1` and `/year/:year/1`. To do that, we’ll create 2 more collections: `/src/pages/$tag.astro` and `src/pages/$year.astro`. Assume that the markup is the same, but we’ve expanded the `createCollection()` function with more data. ```diff - // /astro/pages/$tag.astro + // /src/pages/$tag.astro --- import Pagination from '../components/Pagination.astro'; import PostPreview from '../components/PostPreview.astro'; diff --git a/docs/dev.md b/docs/dev.md index 8057ddcd6..15687d1bb 100644 --- a/docs/dev.md +++ b/docs/dev.md @@ -14,10 +14,10 @@ The dev server will serve the following special routes: ### /400 -This is a custom __400__ status code page. You can add this route by adding a page component to your `astro/pages` folder: +This is a custom __400__ status code page. You can add this route by adding a page component to your `src/pages` folder: ``` -β”œβ”€β”€ astro/ +β”œβ”€β”€ src/ β”‚ β”œβ”€β”€ components/ β”‚ └── pages/ β”‚ └── 400.astro @@ -27,10 +27,10 @@ For any URL you visit that doesn't have a corresponding page, the `400.astro` fi ### /500 -This is a custom __500__ status code page. You can add this route by adding a page component to your `astro/pages` folder: +This is a custom __500__ status code page. You can add this route by adding a page component to your `src/pages` folder: ```astro -β”œβ”€β”€ astro/ +β”œβ”€β”€ src/ β”‚ β”œβ”€β”€ components/ β”‚ └── pages/ β”‚ └── 500.astro @@ -48,4 +48,4 @@ const error = Astro.request.url.searchParams.get('error'); {error} ``` -A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page. \ No newline at end of file +A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page. diff --git a/docs/styling.md b/docs/styling.md index 0688d2959..181d1434f 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -18,7 +18,7 @@ Styling in Astro is meant to be as flexible as you’d like it to be! The follow Styling in an Astro component is done by adding a `