From 875d33f1d98083bf9ba897238db6ecf19efe03c1 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Thu, 25 Jan 2024 22:36:09 -0500
Subject: Giving blog style

---
 src/layouts/BlogPost.astro |  2 +-
 src/pages/blog/index.astro | 24 ++++++++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

(limited to 'src')

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>
-- 
cgit v1.2.3