diff options
Diffstat (limited to 'examples')
9 files changed, 34 insertions, 63 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> diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro index 4841d3a65..f935ff8b2 100644 --- a/examples/blog/src/components/BlogPostPreview.astro +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -8,10 +8,10 @@ const { post } = Astro.props; <article class="post-preview"> <header> - <p class="publish-date">{post.publishDate}</p> - <a href={post.url}><h1 class="title">{post.title}</h1></a> + <p class="publish-date">{post.frontmatter.publishDate}</p> + <a href={post.url}><h1 class="title">{post.frontmatter.title}</h1></a> </header> - <p>{post.description}</p> + <p>{post.frontmatter.description}</p> <a href={post.url}>Read more</a> </article> diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index c7bc3ea32..1e1264533 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -4,10 +4,6 @@ import BaseHead from '../components/BaseHead.astro'; import BlogHeader from '../components/BlogHeader.astro'; import BlogPostPreview from '../components/BlogPostPreview.astro'; -interface MarkdownFrontmatter { - publishDate: number; -} - // Component Script: // You can write any JavaScript/TypeScript that you'd like here. // It will run during the build, but never in the browser. @@ -18,8 +14,8 @@ let permalink = 'https://example.com/'; // Data Fetching: List all Markdown posts in the repo. -let allPosts = await Astro.fetchContent('./posts/*.md'); -allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); +let allPosts = await Astro.glob('./posts/*.md'); +allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()); // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ diff --git a/examples/portfolio/src/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx index 6957e5884..4f1627604 100644 --- a/examples/portfolio/src/components/PortfolioPreview/index.jsx +++ b/examples/portfolio/src/components/PortfolioPreview/index.jsx @@ -2,16 +2,17 @@ import { h } from 'preact'; import Styles from './styles.module.scss'; function PortfolioPreview({ project }) { + const { frontmatter } = project; return ( <div className={Styles.card}> - <div className={Styles.titleCard} style={`background-image:url(${project.img})`}> - <h1 className={Styles.title}>{project.title}</h1> + <div className={Styles.titleCard} style={`background-image:url(${frontmatter.img})`}> + <h1 className={Styles.title}>{frontmatter.title}</h1> </div> <div className="pa3"> - <p className={`${Styles.desc} mt0 mb2`}>{project.description}</p> + <p className={`${Styles.desc} mt0 mb2`}>{frontmatter.description}</p> <div className={Styles.tags}> Tagged: - {project.tags.map((t) => ( + {frontmatter.tags.map((t) => ( <div className={Styles.tag} data-tag={t}> {t} </div> diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index ce11119b5..d8a9efcc2 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -7,7 +7,7 @@ import Footer from '../components/Footer/index.jsx'; import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; // Data Fetching: List all Markdown posts in the repo. -const projects = Astro.fetchContent('./project/**/*.md'); +const projects = await Astro.glob('./project/**/*.md'); const featuredProject = projects[0]; // Full Astro Component Syntax: diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro index 991c254bc..1aa05e07f 100644 --- a/examples/portfolio/src/pages/projects.astro +++ b/examples/portfolio/src/pages/projects.astro @@ -4,13 +4,9 @@ import Footer from '../components/Footer/index.jsx'; import Nav from '../components/Nav/index.jsx'; import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; -interface MarkdownFrontmatter { - publishDate: number; -} - -const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md') - .filter(({ publishDate }) => !!publishDate) - .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); +const projects = (await Astro.glob('./project/**/*.md')) + .filter(({ frontmatter }) => !!frontmatter.publishDate) + .sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()); --- <html lang="en"> |