diff options
Diffstat (limited to 'examples/blog-multiple-authors/src')
4 files changed, 20 insertions, 42 deletions
diff --git a/examples/blog-multiple-authors/src/components/PostPreview.astro b/examples/blog-multiple-authors/src/components/PostPreview.astro index 81e80ba6c..5a9808348 100644 --- a/examples/blog-multiple-authors/src/components/PostPreview.astro +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro @@ -4,6 +4,7 @@ export interface Props { author: string; } const { post, author } = Astro.props; +const { frontmatter } = post; function formatDate(date) { return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY @@ -12,12 +13,12 @@ function formatDate(date) { <article class="post"> <div class="data"> - <h2>{post.title}</h2> - <a class="author" href={`/authors/${post.author}`}>{author.name}</a> - <time class="date" datetime={post.date}>{formatDate(post.date)}</time> + <h2>{frontmatter.title}</h2> + <a class="author" href={`/authors/${frontmatter.author}`}>{author.name}</a> + <time class="date" datetime={frontmatter.date}>{formatDate(frontmatter.date)}</time> <p class="description"> - {post.description} - <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> + {frontmatter.description} + <a class="link" href={post.url} aria-label={`Read ${frontmatter.title}`}>Read</a> </p> </div> </article> diff --git a/examples/blog-multiple-authors/src/pages/authors/[author].astro b/examples/blog-multiple-authors/src/pages/authors/[author].astro index 21aab27a5..c2ba49d39 100644 --- a/examples/blog-multiple-authors/src/pages/authors/[author].astro +++ b/examples/blog-multiple-authors/src/pages/authors/[author].astro @@ -2,36 +2,28 @@ import MainHead from '../../components/MainHead.astro'; import Nav from '../../components/Nav.astro'; import PostPreview from '../../components/PostPreview.astro'; -import Pagination from '../../components/Pagination.astro'; import authorData from '../../data/authors.json'; -export function getStaticPaths() { - const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); - let allAuthorsUnique = [...new Set(allPosts.map((p) => p.author))]; +export async function getStaticPaths() { + const allPosts = await Astro.glob('../post/*.md'); + let allAuthorsUnique = [...new Set(allPosts.map((p) => p.frontmatter.author))]; return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } })); } -interface MarkdownFrontmatter { - date: number; - description: string; - title: string; - author: string; -} - const { allPosts } = Astro.props; const { params, canonicalURL } = Astro.request; const title = 'Don’s Blog'; const description = 'An example blog on Astro'; /** filter posts by author, sort by date */ -const posts = allPosts.filter((post) => post.author === params.author).sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); -const author = authorData[posts[0].author]; +const posts = allPosts.filter((post) => post.frontmatter.author === params.author).sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()); +const author = authorData[posts[0].frontmatter.author]; --- <html lang="en"> <head> <title>{title}</title> - <MainHead {title} {description} image={posts[0].image} canonicalURL={canonicalURL.toString()} /> + <MainHead {title} {description} image={posts[0].frontmatter.image} canonicalURL={canonicalURL.toString()} /> <style lang="scss"> .title { diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro index 8ad01c190..518424b99 100644 --- a/examples/blog-multiple-authors/src/pages/index.astro +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -6,12 +6,6 @@ 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. @@ -21,10 +15,9 @@ let description = 'An example blog on Astro'; let canonicalURL = Astro.request.canonicalURL; // Data Fetching: List all Markdown posts in the repo. -let allPosts = Astro.fetchContent<MarkdownFrontmatter>('./post/*.md'); -allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); +let allPosts = await Astro.glob('./post/*.md'); +allPosts.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()); let firstPage = allPosts.slice(0, 2); - // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- @@ -32,14 +25,14 @@ let firstPage = allPosts.slice(0, 2); <html lang="en"> <head> <title>{title}</title> - <MainHead {title} {description} image={allPosts[0].image} {canonicalURL} /> + <MainHead {title} {description} image={allPosts[0].frontmatter.image} {canonicalURL} /> </head> <body> <Nav {title} /> <main class="wrapper"> - {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + {allPosts.map((post) => <PostPreview post={post} author={authorData[post.frontmatter.author]} />)} </main> <footer> diff --git a/examples/blog-multiple-authors/src/pages/posts/[...page].astro b/examples/blog-multiple-authors/src/pages/posts/[...page].astro index d0f95ce5b..da9b06fc5 100644 --- a/examples/blog-multiple-authors/src/pages/posts/[...page].astro +++ b/examples/blog-multiple-authors/src/pages/posts/[...page].astro @@ -6,8 +6,8 @@ import Pagination from '../../components/Pagination.astro'; import authorData from '../../data/authors.json'; export async function getStaticPaths({ paginate, rss }) { - const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); - const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); + const allPosts = await Astro.glob('../post/*.md'); + const sortedPosts = allPosts.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.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. @@ -31,21 +31,13 @@ export async function getStaticPaths({ paginate, rss }) { let title = 'Don’s Blog'; let description = 'An example blog on Astro'; let canonicalURL = Astro.request.canonicalURL; - -// collection -interface MarkdownFrontmatter { - date: number; - description: string; - title: string; -} - const { page } = Astro.props; --- <html lang="en"> <head> <title>{title}</title> - <MainHead {title} {description} image={page.data[0].image} canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} /> + <MainHead {title} {description} image={page.data[0].frontmatter.image} canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} /> <style lang="scss"> .title { @@ -70,7 +62,7 @@ const { page } = Astro.props; <main class="wrapper"> <h2 class="title">All Posts</h2> <small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small> - {page.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + {page.data.map((post) => <PostPreview post={post} author={authorData[post.frontmatter.author]} />)} </main> <footer> |