chore: update docs to new defaults (#133)
This commit is contained in:
Nate Moore
GitHub
parent
41c64b30af
commit
73b7827b40
8 changed files with 26 additions and 26 deletions
16
README.md
16
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
|
||||
|
|
|
|||
|
|
@ -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 `<link>` tags manually in your `<head>` HTML:
|
||||
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
Specifies should port to run on. Defaults to `3000`.
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
10
docs/dev.md
10
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');
|
|||
<strong>{error}</strong>
|
||||
```
|
||||
|
||||
A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page.
|
||||
A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page.
|
||||
|
|
|
|||
|
|
@ -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 `<style>` tag anywhere. By default, all styles are **scoped**, meaning they only apply to the current component. To create global styles, add a `:global()` wrapper around a selector (the same as if you were using [CSS Modules][css-modules]).
|
||||
|
||||
```html
|
||||
<!-- astro/components/MyComponent.astro -->
|
||||
<!-- src/components/MyComponent.astro -->
|
||||
|
||||
<style>
|
||||
/* Scoped class selector within the component */
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const logging: LogOptions = {
|
|||
dest: defaultLogDestination,
|
||||
};
|
||||
|
||||
/** Return contents of astro/pages */
|
||||
/** Return contents of src/pages */
|
||||
async function allPages(root: URL) {
|
||||
const api = new fdir()
|
||||
.filter((p) => /\.(astro|md)$/.test(p))
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ const crawler = new fdir();
|
|||
function globSearch(spec: string, { filename }: { filename: string }): string[] {
|
||||
try {
|
||||
// Note: fdir’s glob requires you to do some work finding the closest non-glob folder.
|
||||
// For example, this fails: .glob("./post/*.md").crawl("/…/astro/pages") ❌
|
||||
// …but this doesn’t: .glob("*.md").crawl("/…/astro/pages/post") ✅
|
||||
// For example, this fails: .glob("./post/*.md").crawl("/…/src/pages") ❌
|
||||
// …but this doesn’t: .glob("*.md").crawl("/…/src/pages/post") ✅
|
||||
let globDir = '';
|
||||
let glob = spec;
|
||||
for (const part of spec.split('/')) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue