michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] yarn format

Browse source
This commit is contained in:
FredKSchott 2021-07-21 14:13:10 +00:00 • committed by GitHub Actions
parent f67e8f5f55
commit b7e579a9cb
2 changed files with 31 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
docs/src/pages/core-concepts/collections.md
View file

@ -34,7 +34,7 @@ Every collection must define and export a `createCollection` function inside the
```astro ```astro
--- ---
export async function createCollection() { export async function createCollection() {
/* fetch collection data here */ /* fetch collection data here */
return { /* see examples below */ }; return { /* see examples below */ };
} }
@ -61,8 +61,8 @@ export async function createCollection() {
const allPokemonResult = await allPokemonResponse.json(); const allPokemonResult = await allPokemonResponse.json();
const allPokemon = allPokemonResult.results; const allPokemon = allPokemonResult.results;
return { return {
// `route` defines the URL structure for your collection. // `route` defines the URL structure for your collection.
// You can use any URL path pattern here, as long as it // You can use any URL path pattern here, as long as it
// matches the filename prefix (`$pokemon.astro` -> `/pokemon/*`). // matches the filename prefix (`$pokemon.astro` -> `/pokemon/*`).
route: `/pokemon/:name`, route: `/pokemon/:name`,
// `paths` tells Astro which pages to generate in your collection. // `paths` tells Astro which pages to generate in your collection.
@ -78,7 +78,7 @@ export async function createCollection() {
}, },
}; };
} }
// The rest of your component script now runs on each individual page. // The rest of your component script now runs on each individual page.
// "item" is one of the props returned in the `props()` function. // "item" is one of the props returned in the `props()` function.
const {item} = Astro.props; const {item} = Astro.props;
--- ---
@ -95,7 +95,7 @@ const {item} = Astro.props;
You can also group items by page. In this example, we'll fetch data from the same Pokemon API. But instead of generating 150 pages, we'll just generate one page for every letter of the alphabet, creating an alphabetical index of Pokemon. You can also group items by page. In this example, we'll fetch data from the same Pokemon API. But instead of generating 150 pages, we'll just generate one page for every letter of the alphabet, creating an alphabetical index of Pokemon.
*Note: Looking for pagination? Collections have built-in support to make pagination easy. Be sure to check out the next example.* _Note: Looking for pagination? Collections have built-in support to make pagination easy. Be sure to check out the next example._
```jsx ```jsx
--- ---
@ -107,8 +107,8 @@ export async function createCollection() {
const allPokemon = allPokemonResult.results; const allPokemon = allPokemonResult.results;
const allLetters = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; const allLetters = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
return { return {
// `route` defines the URL structure for your collection. // `route` defines the URL structure for your collection.
// You can use any URL path pattern here, as long as it // You can use any URL path pattern here, as long as it
// matches the filename prefix (`$pokemon.astro` -> `/pokemon/*`). // matches the filename prefix (`$pokemon.astro` -> `/pokemon/*`).
route: `/pokemon/:letter`, route: `/pokemon/:letter`,
// `paths` tells Astro which pages to generate in your collection. // `paths` tells Astro which pages to generate in your collection.
@ -128,7 +128,7 @@ export async function createCollection() {
}, },
}; };
} }
// The rest of your component script now runs on each individual page. // The rest of your component script now runs on each individual page.
// "item" is one of the props returned in the `props()` function. // "item" is one of the props returned in the `props()` function.
const {letter, items} = Astro.props; const {letter, items} = Astro.props;
--- ---
@ -153,7 +153,7 @@ This example provides a basic implementation of pagination. In the previous exam
export async function createCollection() { export async function createCollection() {
const allPosts = Astro.fetchContent('../posts/*.md') // fetch local posts... const allPosts = Astro.fetchContent('../posts/*.md') // fetch local posts...
.sort((a, b) => a.title.localeCompare(b.title)); // ... and sort by title. .sort((a, b) => a.title.localeCompare(b.title)); // ... and sort by title.
return { return {
// Set "paginate" to true to enable pagination. // Set "paginate" to true to enable pagination.
paginate: true, paginate: true,
@ -169,10 +169,10 @@ export async function createCollection() {
// the props() function when `paginate` is set to true. We can now use // the props() function when `paginate` is set to true. We can now use
// it to enable pagination on a certain prop. In this example, we paginate // it to enable pagination on a certain prop. In this example, we paginate
// "posts" so that multiple pages will be generated based on the given page size. // "posts" so that multiple pages will be generated based on the given page size.
async props({paginate}) { async props({paginate}) {
return { return {
posts: paginate(allPosts, {pageSize: 10}), posts: paginate(allPosts, {pageSize: 10}),
}; };
}, },
}; };
} }
@ -240,7 +240,9 @@ export async function createCollection() {
return { return {
paginate: true, paginate: true,
route: '/posts/:page?', route: '/posts/:page?',
async props({paginate}) { /* Not shown: see examples above */ }, async props({ paginate }) {
/* Not shown: see examples above */
},
rss: { rss: {
title: 'My RSS Feed', title: 'My RSS Feed',
description: 'Description of the feed', description: 'Description of the feed',
@ -257,7 +259,7 @@ export async function createCollection() {
title: item.title, title: item.title,
description: item.description, description: item.description,
// enforce GMT timezone (otherwise it’ll be different based on where it’s built) // enforce GMT timezone (otherwise it’ll be different based on where it’s built)
pubDate: item.pubDate + 'Z', pubDate: item.pubDate + 'Z',
// custom data is supported here as well // custom data is supported here as well
}), }),
}, },
@ -270,8 +272,14 @@ Astro will generate your RSS feed at the URL `/feed/[collection].xml`. For examp
Even though Astro will create the RSS feed for you, you’ll still need to add `<link>` tags manually in your `<head>` HTML for feed readers and browsers to pick up: Even though Astro will create the RSS feed for you, you’ll still need to add `<link>` tags manually in your `<head>` HTML for feed readers and browsers to pick up:
```html ```html
<link rel="alternate" type="application/rss+xml" title="My RSS Feed" href="/feed/podcast.xml" /> <link
rel="alternate"
type="application/rss+xml"
title="My RSS Feed"
href="/feed/podcast.xml"
/>
``` ```
### 📚 Further Reading ### 📚 Further Reading
- [Fetching data in Astro](/guides/data-fetching) - [Fetching data in Astro](/guides/data-fetching)

15
docs/src/pages/reference/api-reference.md
View file

@ -69,6 +69,7 @@ const data = Astro.fetchContent('../pages/post/*.md'); // returns an array of po
A collection is any file in the `src/pages` directory that starts with a dollar sign (`$`) and includes an exported `createCollection` function in the component script. A collection is any file in the `src/pages` directory that starts with a dollar sign (`$`) and includes an exported `createCollection` function in the component script.
Check out our [Astro Collections](/core-concepts/collections) guide for more information and examples. Check out our [Astro Collections](/core-concepts/collections) guide for more information and examples.
### `createCollection()` ### `createCollection()`
```jsx ```jsx
@ -89,7 +90,7 @@ The `createCollection()` function should returns an object of the following shap
| `route` | `string` | **Required.** A route pattern for matching URL requests. This is used to generate the page URL in your final build. It must begin with the file name: for example, `pages/$tags.astro` must return a `route` that starts with `/tags/`. | | `route` | `string` | **Required.** A route pattern for matching URL requests. This is used to generate the page URL in your final build. It must begin with the file name: for example, `pages/$tags.astro` must return a `route` that starts with `/tags/`. |
| `paths` | `{params: Params}[]` | Return an array of all URL to be generated. | | `paths` | `{params: Params}[]` | Return an array of all URL to be generated. |
| `props` | `async ({ params, paginate }) => object` | **Required.** Load data for the page that will get passed to the page component as props. | | `props` | `async ({ params, paginate }) => object` | **Required.** Load data for the page that will get passed to the page component as props. |
| `paginate` | `boolean` | Optional: Enable automatic pagination. See next section. | | `paginate` | `boolean` | Optional: Enable automatic pagination. See next section. |
| `rss` | [RSS](/reference/api-reference#rss-feed) | Optional: generate an RSS 2.0 feed from this collection ([docs](/reference/api-reference#rss-feed)) | | `rss` | [RSS](/reference/api-reference#rss-feed) | Optional: generate an RSS 2.0 feed from this collection ([docs](/reference/api-reference#rss-feed)) |
### Pagination ### Pagination
@ -100,10 +101,13 @@ The `paginate()` function that you use inside of `props()` has the following int
```ts ```ts
/* the "paginate()" passed to props({paginate}) */ /* the "paginate()" passed to props({paginate}) */
type PaginateFunction = (data: any[], args?: { type PaginateFunction = (
/* pageSize: set the number of items to be shown on every page. Defaults to 10. */ data: any[],
pageSize?: number args?: {
}) => PaginatedCollectionResult; /* pageSize: set the number of items to be shown on every page. Defaults to 10. */
pageSize?: number;
}
) => PaginatedCollectionResult;
/* the paginated return value, aka the prop passed to every page in the collection. */ /* the paginated return value, aka the prop passed to every page in the collection. */
interface PaginatedCollectionResult { interface PaginatedCollectionResult {
@ -172,7 +176,6 @@ export interface CollectionRSS<T = any> {
📚 Learn more about RSS feed generation (and see an example) in our [Astro Collections guide.](/core-concepts/collections). 📚 Learn more about RSS feed generation (and see an example) in our [Astro Collections guide.](/core-concepts/collections).
## `import.meta` ## `import.meta`
> In this section we use `[dot]` to mean `.`. This is because of a bug in our build engine that is rewriting `import[dot]meta[dot]env` if we use `.` instead of `[dot]`. > In this section we use `[dot]` to mean `.`. This is because of a bug in our build engine that is rewriting `import[dot]meta[dot]env` if we use `.` instead of `[dot]`.