diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2021-09-14 09:14:39 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-09-14 09:14:39 -0400 |
| commit | b6a75494b1c128503de3eba5363b46528142d8b2 (patch) | |
| tree | 90098b84b352c7e60d8db4b2e18f109b6b7c6482 /examples/blog-multiple-authors/src | |
| parent | 72c916535d29fb92ab10efcf62308041ba2858a7 (diff) | |
| download | astro-b6a75494b1c128503de3eba5363b46528142d8b2.tar.gz astro-b6a75494b1c128503de3eba5363b46528142d8b2.tar.zst astro-b6a75494b1c128503de3eba5363b46528142d8b2.zip | |
Add types to examples and docs (#1347)
* Adds a changeset
* Add types to examples and docs
* Make changes based on review feedback
* Avoid using the variable named props
* Make path a const
Diffstat (limited to 'examples/blog-multiple-authors/src')
3 files changed, 32 insertions, 12 deletions
diff --git a/examples/blog-multiple-authors/src/pages/authors/[author].astro b/examples/blog-multiple-authors/src/pages/authors/[author].astro index 084fb7ff8..13f24c829 100644 --- a/examples/blog-multiple-authors/src/pages/authors/[author].astro +++ b/examples/blog-multiple-authors/src/pages/authors/[author].astro @@ -11,8 +11,16 @@ let canonicalURL = Astro.request.canonicalURL; // collection import authorData from '../../data/authors.json'; + +interface MarkdownFrontmatter { + date: number; + description: string; + title: string; + author: string; +} + export function getStaticPaths() { - const allPosts = Astro.fetchContent('../post/*.md'); + const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); let allAuthorsUnique = [...new Set(allPosts.map(p => p.author))]; return allAuthorsUnique.map(author => ({params: {author}, props: {allPosts}})); } @@ -23,7 +31,7 @@ const { params } = Astro.request; /** filter posts by author, sort by date */ const posts = allPosts .filter((post) => post.author === params.author) - .sort((a, b) => new Date(b.date) - new Date(a.date)); + .sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); const author = authorData[posts[0].author]; --- @@ -34,7 +42,7 @@ const author = authorData[posts[0].author]; title={title} description={description} image={posts[0].image} - canonicalURL={canonicalURL} + canonicalURL={canonicalURL.toString()} /> <style lang="scss"> @@ -76,7 +84,7 @@ const author = authorData[posts[0].author]; <main class="wrapper"> <h2 class="title"> - <div class="avatar"><img class="avatar-img" src={author.image} alt=""}></div> + <div class="avatar"><img class="avatar-img" src={author.image} alt="" /></div> {author.name} </h2> {posts.map((post) => <PostPreview post={post} author={author} />)} diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro index ef099b7c2..da7539394 100644 --- a/examples/blog-multiple-authors/src/pages/index.astro +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -6,6 +6,12 @@ import PostPreview from '../components/PostPreview.astro'; import Pagination from '../components/Pagination.astro'; import authorData from '../data/authors.json'; +interface MarkdownFrontmatter { + date: number; + image: string; + author: string; +} + // Component Script: // You can write any JavaScript/TypeScript that you'd like here. // It will run during the build, but never in the browser. @@ -14,8 +20,8 @@ let title = 'Don’s Blog'; let description = 'An example blog on Astro'; // Data Fetching: List all Markdown posts in the repo. -let allPosts = Astro.fetchContent('./post/*.md'); -allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); +let allPosts = Astro.fetchContent<MarkdownFrontmatter>('./post/*.md'); +allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); let firstPage = allPosts.slice(0, 2); // Full Astro Component Syntax: @@ -33,14 +39,14 @@ let firstPage = allPosts.slice(0, 2); </head> <body> - <Nav /> + <Nav title={title} /> <main class="wrapper"> {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} </main> <footer> - <Pagination nextUrl="/posts/2" /> + <Pagination prevUrl="/posts" nextUrl="/posts/2" /> </footer> </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/posts/[...page].astro b/examples/blog-multiple-authors/src/pages/posts/[...page].astro index 056796deb..65b4067fc 100644 --- a/examples/blog-multiple-authors/src/pages/posts/[...page].astro +++ b/examples/blog-multiple-authors/src/pages/posts/[...page].astro @@ -10,10 +10,16 @@ let description = 'An example blog on Astro'; let canonicalURL = Astro.request.canonicalURL; // collection +interface MarkdownFrontmatter { + date: number; + description: string; + title: string; +} + import authorData from '../../data/authors.json'; export async function getStaticPaths({paginate, rss}) { - const allPosts = Astro.fetchContent('../post/*.md'); - const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); + const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); + const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); // Generate an RSS feed from this collection of posts. // NOTE: This is disabled by default, since it requires `buildOptions.site` to be set in your "astro.config.mjs" file. @@ -28,7 +34,7 @@ export async function getStaticPaths({paginate, rss}) { // pubDate: item.date, // })), // }); - + // Return a paginated collection of paths for all posts return paginate(sortedPosts, {pageSize: 1}); } @@ -43,7 +49,7 @@ const { page } = Astro.props; title={title} description={description} image={page.data[0].image} - canonicalURL={canonicalURL} + canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} /> |