summaryrefslogtreecommitdiff
path: root/examples/blog-multiple-authors/src
diff options
context:
space:
mode:
authorGravatar Fred K. Schott <fkschott@gmail.com> 2021-07-21 07:11:57 -0700
committerGravatar GitHub <noreply@github.com> 2021-07-21 07:11:57 -0700
commitf67e8f5f559ecb37db71fbea1b60b570bc6bfd47 (patch)
tree21678a7af13c256bf8c7fa8b539cbf7c3765ea38 /examples/blog-multiple-authors/src
parent5fcd466d95f9694a758239d254e3d81f4ed289fa (diff)
downloadastro-f67e8f5f559ecb37db71fbea1b60b570bc6bfd47.tar.gz
astro-f67e8f5f559ecb37db71fbea1b60b570bc6bfd47.tar.zst
astro-f67e8f5f559ecb37db71fbea1b60b570bc6bfd47.zip
New Collections API (#703)
* updated createCollection API * Update examples/portfolio/src/pages/projects.astro Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz> * Update docs/reference/api-reference.md Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz> * fix(docs): collection doc typos (#758) * keep cleaning up docs and adding tests Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz> Co-authored-by: Mark Pinero <markspinero@gmail.com>
Diffstat (limited to 'examples/blog-multiple-authors/src')
-rw-r--r--examples/blog-multiple-authors/src/pages/$author.astro55
-rw-r--r--examples/blog-multiple-authors/src/pages/$posts.astro34
-rw-r--r--examples/blog-multiple-authors/src/pages/index.astro4
3 files changed, 45 insertions, 48 deletions
diff --git a/examples/blog-multiple-authors/src/pages/$author.astro b/examples/blog-multiple-authors/src/pages/$author.astro
index e0a6a1919..76b372897 100644
--- a/examples/blog-multiple-authors/src/pages/$author.astro
+++ b/examples/blog-multiple-authors/src/pages/$author.astro
@@ -12,37 +12,32 @@ let canonicalURL = Astro.request.canonicalURL;
// collection
import authorData from '../data/authors.json';
-let { collection } = Astro.props;
-export async function createCollection() {
+export function createCollection() {
/** Load posts */
let allPosts = Astro.fetchContent('./post/*.md');
- let allAuthors = new Set();
-
- /** Loop through all posts, gather all authors */
- let routes = [];
- for (const post of allPosts) {
- if (!allAuthors.has(post.author)) {
- allAuthors.add(post.author);
- routes.push({ author: post.author });
- }
- }
-
return {
- /** Sort posts newest -> oldest, filter by params.author */
- async data({ params }) {
- allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
- return allPosts.filter((post) => post.author === params.author);
+ paginate: true,
+ route: `/author/:author/:page?`,
+ paths() {
+ let allAuthorsUnique = [...new Set(allPosts.map(p => p.author))];
+ return allAuthorsUnique.map(author => ({params: {author}}))
+ },
+ async props({ params, paginate }) {
+ /** filter posts by author, sort by date */
+ const filteredPosts = allPosts
+ .filter((post) => post.author === params.author)
+ .sort((a, b) => new Date(b.date) - new Date(a.date));
+ return {
+ posts: paginate(filteredPosts, {pageSize: 1}),
+ }
},
- /** Set page size */
- pageSize: 3,
- /** Set permalink URL */
- permalink: ({ params }) => `/author/${params.author}`,
- /** Pass back all routes so Astro can generate the static build */
- routes,
};
}
-const author = authorData[collection.params.author];
+
+const { posts } = Astro.props;
+const { params } = Astro.request;
+const author = authorData[posts.data[0].author];
---
<html lang="en">
@@ -51,10 +46,10 @@ const author = authorData[collection.params.author];
<MainHead
title={title}
description={description}
- image={collection.data[0].image}
+ image={posts.data[0].image}
canonicalURL={canonicalURL}
- prev={collection.url.prev}
- next={collection.url.next}
+ prev={posts.url.prev}
+ next={posts.url.next}
/>
<style lang="scss">
@@ -99,12 +94,12 @@ const author = authorData[collection.params.author];
<div class="avatar"><img class="avatar-img" src={author.image} alt=""}></div>
{author.name}
</h2>
- <small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
- {collection.data.map((post) => <PostPreview post={post} author={author} />)}
+ <small class="count">{posts.start + 1}–{posts.end + 1} of {posts.total}</small>
+ {posts.data.map((post) => <PostPreview post={post} author={author} />)}
</main>
<footer>
- <Pagination prevUrl={collection.url.prev} nextUrl={collection.url.next} />
+ <Pagination prevUrl={posts.url.prev} nextUrl={posts.url.next} />
</footer>
</body>
</html>
diff --git a/examples/blog-multiple-authors/src/pages/$posts.astro b/examples/blog-multiple-authors/src/pages/$posts.astro
index a31004c05..13cff23df 100644
--- a/examples/blog-multiple-authors/src/pages/$posts.astro
+++ b/examples/blog-multiple-authors/src/pages/$posts.astro
@@ -11,18 +11,18 @@ let canonicalURL = Astro.request.canonicalURL;
// collection
import authorData from '../data/authors.json';
-let { collection } = Astro.props;
-export async function createCollection() {
+export function createCollection() {
return {
- /** Load posts, sort newest -> oldest */
- async data() {
- let allPosts = Astro.fetchContent('./post/*.md');
- allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
- return allPosts;
+ route: `/posts/:page?`,
+ paginate: true,
+ async props({ paginate }) {
+ /** filter posts by author, sort by date */
+ const allPosts = Astro.fetchContent('./post/*.md');
+ const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+ return {
+ posts: paginate(sortedPosts, {pageSize: 2}),
+ }
},
- /** Set page size */
- pageSize: 2,
- /** Generate RSS feed (only for main /posts/ feed) */
rss: {
title: 'Don’s Blog',
description: 'An example blog on Astro',
@@ -36,6 +36,8 @@ export async function createCollection() {
}
};
}
+
+const { posts } = Astro.props;
---
<html lang="en">
@@ -44,10 +46,10 @@ export async function createCollection() {
<MainHead
title={title}
description={description}
- image={collection.data[0].image}
+ image={posts.data[0].image}
canonicalURL={canonicalURL}
- prev={collection.url.prev}
- next={collection.url.next}
+ prev={posts.url.prev}
+ next={posts.url.next}
/>
<style lang="scss">
@@ -72,12 +74,12 @@ export async function createCollection() {
<main class="wrapper">
<h2 class="title">All Posts</h2>
- <small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
- {collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
+ <small class="count">{posts.start + 1}–{posts.end + 1} of {posts.total}</small>
+ {posts.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
</main>
<footer>
- <Pagination prevUrl={collection.url.prev} nextUrl={collection.url.next} />
+ <Pagination prevUrl={posts.url.prev} nextUrl={posts.url.next} />
</footer>
</body>
</html>
diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro
index e3e86e1da..ef099b7c2 100644
--- a/examples/blog-multiple-authors/src/pages/index.astro
+++ b/examples/blog-multiple-authors/src/pages/index.astro
@@ -27,7 +27,7 @@ let firstPage = allPosts.slice(0, 2);
<MainHead
title={title}
description={description}
- image={firstPage[0].image}
+ image={allPosts[0].image}
canonicalURL={Astro.request.canonicalURL.href}
/>
</head>
@@ -36,7 +36,7 @@ let firstPage = allPosts.slice(0, 2);
<Nav />
<main class="wrapper">
- {firstPage.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
+ {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
</main>
<footer>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-09 09:25:37 +0000