mirror of
https://github.com/withastro/astro.git
synced 2024-12-30 22:03:56 -05:00
chore: update docs to new defaults (#133)
This commit is contained in:
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
|
### 🚀 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/
|
│ ├── components/
|
||||||
│ └── pages/
|
│ └── pages/
|
||||||
│ └── index.astro
|
│ └── index.astro
|
||||||
|
@ -80,17 +80,17 @@ Even though nearly-everything [is configurable][config], we recommend starting o
|
||||||
└── package.json
|
└── package.json
|
||||||
```
|
```
|
||||||
|
|
||||||
- `astro/components/*`: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized.
|
- `src/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/pages/*`: this is a special folder where your [routing][routing] lives.
|
||||||
|
|
||||||
#### 🚦 Routing
|
#### 🚦 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 |
|
| Local file | Public URL |
|
||||||
| :--------------------------------------- | :------------------------------ |
|
| :--------------------------------------- | :------------------------------ |
|
||||||
| `astro/pages/index.astro` | `/index.html` |
|
| `src/pages/index.astro` | `/index.html` |
|
||||||
| `astro/pages/post/my-blog-post.md.astro` | `/post/my-blog-post/index.html` |
|
| `src/pages/post/my-blog-post.md.astro` | `/post/my-blog-post/index.html` |
|
||||||
|
|
||||||
#### 🗂 Static Assets
|
#### 🗂 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]).
|
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
|
```js
|
||||||
// astro/components/MyComponent.Astro
|
// src/components/MyComponent.Astro
|
||||||
|
|
||||||
---
|
---
|
||||||
// Example 1: fetch remote data from your own API
|
// 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:
|
⚠️ 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`
|
#### `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.
|
See the [dev server](./dev.md) docs for more information on how the dev server works.
|
||||||
|
|
||||||
|
@ -40,4 +40,4 @@ __Flags__
|
||||||
|
|
||||||
##### `--port`
|
##### `--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:
|
Let’s pretend we have some blog posts written already. This is our starting project structure:
|
||||||
|
|
||||||
```
|
```
|
||||||
└── astro/
|
└── src/
|
||||||
└── pages/
|
└── pages/
|
||||||
└── post/
|
└── post/
|
||||||
└── (blog content)
|
└── (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
|
- `/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
|
- `/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
|
```diff
|
||||||
└── astro/
|
└── src/
|
||||||
└── pages/
|
└── pages/
|
||||||
├── post/
|
├── post/
|
||||||
│ └── (blog content)
|
│ └── (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.
|
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
|
```jsx
|
||||||
// /astro/pages/$posts.astro
|
// /src/pages/$posts.astro
|
||||||
---
|
---
|
||||||
export let collection: any;
|
export let collection: any;
|
||||||
|
|
||||||
|
@ -136,10 +136,10 @@ Let’s walk through some of the key parts:
|
||||||
|
|
||||||
#### Example 2: Advanced filtering & pagination
|
#### 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
|
```diff
|
||||||
// /astro/pages/$tag.astro
|
// /src/pages/$tag.astro
|
||||||
---
|
---
|
||||||
import Pagination from '../components/Pagination.astro';
|
import Pagination from '../components/Pagination.astro';
|
||||||
import PostPreview from '../components/PostPreview.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
|
### /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/
|
│ ├── components/
|
||||||
│ └── pages/
|
│ └── pages/
|
||||||
│ └── 400.astro
|
│ └── 400.astro
|
||||||
|
@ -27,10 +27,10 @@ For any URL you visit that doesn't have a corresponding page, the `400.astro` fi
|
||||||
|
|
||||||
### /500
|
### /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
|
||||||
├── astro/
|
├── src/
|
||||||
│ ├── components/
|
│ ├── components/
|
||||||
│ └── pages/
|
│ └── pages/
|
||||||
│ └── 500.astro
|
│ └── 500.astro
|
||||||
|
@ -48,4 +48,4 @@ const error = Astro.request.url.searchParams.get('error');
|
||||||
<strong>{error}</strong>
|
<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]).
|
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
|
```html
|
||||||
<!-- astro/components/MyComponent.astro -->
|
<!-- src/components/MyComponent.astro -->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Scoped class selector within the component */
|
/* Scoped class selector within the component */
|
||||||
|
|
|
@ -40,7 +40,7 @@ const logging: LogOptions = {
|
||||||
dest: defaultLogDestination,
|
dest: defaultLogDestination,
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Return contents of astro/pages */
|
/** Return contents of src/pages */
|
||||||
async function allPages(root: URL) {
|
async function allPages(root: URL) {
|
||||||
const api = new fdir()
|
const api = new fdir()
|
||||||
.filter((p) => /\.(astro|md)$/.test(p))
|
.filter((p) => /\.(astro|md)$/.test(p))
|
||||||
|
|
|
@ -23,8 +23,8 @@ const crawler = new fdir();
|
||||||
function globSearch(spec: string, { filename }: { filename: string }): string[] {
|
function globSearch(spec: string, { filename }: { filename: string }): string[] {
|
||||||
try {
|
try {
|
||||||
// Note: fdir’s glob requires you to do some work finding the closest non-glob folder.
|
// 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") ❌
|
// For example, this fails: .glob("./post/*.md").crawl("/…/src/pages") ❌
|
||||||
// …but this doesn’t: .glob("*.md").crawl("/…/astro/pages/post") ✅
|
// …but this doesn’t: .glob("*.md").crawl("/…/src/pages/post") ✅
|
||||||
let globDir = '';
|
let globDir = '';
|
||||||
let glob = spec;
|
let glob = spec;
|
||||||
for (const part of spec.split('/')) {
|
for (const part of spec.split('/')) {
|
||||||
|
|
Loading…
Reference in a new issue