diff options
| -rw-r--r-- | src/layouts/BlogPost.astro | 2 | ||||
| -rw-r--r-- | src/pages/blog/index.astro | 24 |
2 files changed, 21 insertions, 5 deletions
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 15b3cfd..d86504e 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -6,8 +6,8 @@ const { title, description, date } = Astro.props; <Layout title=`${title} - Andrew Lee` description={description}> <header> <h1 class="header-text">{title}</h1> - <h2 class="header-text">{description}</h2> <small>{date}</small> + <h2 class="header-text">{description}</h2> </header> <div class="container"> <main> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 1ebc9e9..94687fa 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,19 +1,35 @@ --- import Page from "../../layouts/Page.astro"; import { getCollection } from "astro:content"; +import {formatDate} from "../../util"; -const allBlogPosts = await getCollection('blog'); +const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()); --- <Page title="Blog" description="Where I post can be anything!"> <main> {allBlogPosts.map((post) => ( <article> - <h2>{post.data.title}</h2> - <sm>{post.data.date}</sm> + <h2><a href={`/blog/${post.slug}`}>{post.data.title}</a></h2> + <small>{formatDate(post.data.date)}</small> <p>{post.data.description}</p> <a href={`/blog/${post.slug}`}>Read more</a> </article> - )) + )) + } </main> </Page> +<style> + h2 { + margin-top: 2px; + margin-bottom: 2px; + } + + article { + background-color: #3B513B; + padding: 1.2em; + border-radius: 20px; + gap: 0.5em; + margin: 0.5em; + } +</style> |