diff options
Diffstat (limited to 'examples/blog/src/pages/index.astro')
| -rw-r--r-- | examples/blog/src/pages/index.astro | 91 |
1 files changed, 36 insertions, 55 deletions
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index b278c5510..22c095c74 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -1,81 +1,62 @@ --- -// Component Imports import BaseHead from "../components/BaseHead.astro"; -import BlogHeader from "../components/BlogHeader.astro"; +import Header from "../components/Header.astro"; import BlogPostPreview from "../components/BlogPostPreview.astro"; -// Component Script: -// You can write any JavaScript/TypeScript that you'd like here. -// It will run during the build, but never in the browser. -// All variables are available to use in the HTML template below. let title = "Example Blog"; let description = "The perfect starter for your perfect blog."; -let permalink = "https://example.com/"; -// Data Fetching: List all Markdown posts in the repo. - -let allPosts = await Astro.glob("./posts/*.md"); -allPosts = allPosts.sort( - (a, b) => +// Use Astro.glob to fetch all post with associated frontmatter +const unsortedPosts = await Astro.glob("./posts/*.md"); +const posts = unsortedPosts.sort(function (a, b) { + return ( new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf() -); - -// Full Astro Component Syntax: -// https://docs.astro.build/core-concepts/astro-components/ + ); +}); --- <html lang="en"> <head> - <BaseHead {title} {description} {permalink} /> - - <style> - header { - width: 100%; - height: 100%; - background-color: var(--theme-bg-offset); - display: flex; - align-items: center; - justify-content: center; - } - - .content { - margin-top: 4rem; - margin-bottom: 8rem; - } - - .content :global(main > * + *) { - margin-top: 1rem; - } - - .intro { - padding-bottom: 4rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); - } - - .intro > * { - margin: 0; - } - - .latest { - font-size: 2.5rem; - font-weight: 700; - } - </style> + <BaseHead title={title} description={description} /> </head> <body> - <BlogHeader /> + <Header /> <div class="wrapper"> <main class="content"> <section class="intro"> - <h1 class="latest">{title}</h1> + <h1>{title}</h1> <p>{description}</p> </section> <section aria-label="Blog post list"> - {allPosts.map((p) => <BlogPostPreview post={p} />)} + {posts.map(({ url, frontmatter }) => ( + <BlogPostPreview + title={frontmatter.title} + description={frontmatter.description} + publishDate={frontmatter.publishDate} + url={url} + /> + ))} </section> </main> </div> </body> </html> + +<style> + .content { + margin-top: 4rem; + margin-bottom: 8rem; + } + + .intro { + padding-bottom: 4rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } + + h1 { + font-size: 2.5rem; + font-weight: 700; + } +</style> |