Tags; More changes on blog

11 files changed, 71 insertions, 47 deletions

diff --git a/src/content/blog/hello.md b/src/content/blog/hello.md
index d24552d..5a16324 100644
--- a/src/content/blog/hello.md
+++ b/src/content/blog/hello.md
@@ -1,7 +1,7 @@
 ---
 title: Hello world
 description: This is a test post
-date: 2024-01-24
+pubDate: 2024-01-24
 tags: ["tag1", "tag2"]
 slug: hello-world
 ---
diff --git a/src/content/blog/hello2.md b/src/content/blog/hello2.md
index 7aa6146..a25d639 100644
--- a/src/content/blog/hello2.md
+++ b/src/content/blog/hello2.md
@@ -1,7 +1,7 @@
 ---
 title: Lorem ipsum dolor sit amet
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-date: 2024-01-25
+pubDate: 2024-01-25
 tags: ["tag1", "tag2"]
 slug: lorem-ipsum
 ---
@@ -24,4 +24,4 @@ Curabitur vitae nunc sed velit dignissim sodales ut eu. Nascetur ridiculus mus m
 
 Donec ac odio tempor orci dapibus ultrices in. Natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Libero justo laoreet sit amet cursus. Enim facilisis gravida neque convallis a cras semper auctor. Convallis tellus id interdum velit laoreet id donec ultrices. Duis ut diam quam nulla porttitor massa id neque aliquam. Nullam vehicula ipsum a arcu cursus vitae congue. Sed egestas egestas fringilla phasellus. Id volutpat lacus laoreet non curabitur gravida arcu. Ullamcorper sit amet risus nullam. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Nisl tincidunt eget nullam non nisi. Nunc consequat interdum varius sit amet mattis. Pretium quam vulputate dignissim suspendisse in est ante in.
 
-Id leo in vitae turpis massa sed elementum. Urna cursus eget nunc scelerisque viverra mauris in. Metus vulputate eu scelerisque felis. Convallis tellus id interdum velit laoreet id donec ultrices. A cras semper auctor neque vitae tempus quam pellentesque nec. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Netus et malesuada fames ac turpis. Id cursus metus aliquam eleifend mi in. Iaculis eu non diam phasellus vestibulum lorem sed risus. Sed augue lacus viverra vitae congue eu consequat ac felis. Sapien eget mi proin sed libero enim sed. Turpis tincidunt id aliquet risus feugiat in. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac.
\ No newline at end of file
+Id leo in vitae turpis massa sed elementum. Urna cursus eget nunc scelerisque viverra mauris in. Metus vulputate eu scelerisque felis. Convallis tellus id interdum velit laoreet id donec ultrices. A cras semper auctor neque vitae tempus quam pellentesque nec. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Netus et malesuada fames ac turpis. Id cursus metus aliquam eleifend mi in. Iaculis eu non diam phasellus vestibulum lorem sed risus. Sed augue lacus viverra vitae congue eu consequat ac felis. Sapien eget mi proin sed libero enim sed. Turpis tincidunt id aliquet risus feugiat in. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac.
diff --git a/src/content/config.ts b/src/content/config.ts
index 694e87d..8dd2162 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -6,7 +6,7 @@ const blogCollection = defineCollection({
     schema: z.object({
         title: z.string(),
         description: z.string(),
-        date: z.date(),
+        pubDate: z.date(),
         tags: z.array(z.string()),
     }),
 });
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a08dd15..a97dadf 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,12 +1,14 @@
 ---
 import Layout from './Default.astro';
-const { title, description, date } = Astro.props;
+const { title, description, pubDate } = Astro.props;
+import { getCollection } from "astro:content";
+const postTags = (await getCollection('blog'));
 ---
 
 <Layout title=`${title} - Andrew Lee` description={description}>
     <header>
         <h1 class="header-text">{title}</h1>
-        <small>{date}</small>
+        <small>{pubDate}</small>
     </header>
     <div class="container">
         <main>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 1eccb0b..e0b07e9 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -16,7 +16,7 @@ if(entry === undefined) {
 
 const { Content } = await entry.render();
 ---
-<Page title={entry.data.title} description={entry.data.description} date={formatDate(entry.data.date)}>
+<Page title={entry.data.title} description={entry.data.description} pubDate={formatDate(entry.data.pubDate)}>
     <main>
         <a href="/blog" class="back-link">← All articles</a>
         <article>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index f782cdc..74f543a 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -2,8 +2,9 @@
 import Page from "../../layouts/Page.astro";
 import { getCollection } from "astro:content";
 import {formatDate} from "../../util";
+import "../../styles/cards.css";
 
-const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 ---
 <Page title="Blog" description="Where I post can be anything!">
    <main>
@@ -11,10 +12,12 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.date.va
       {allBlogPosts.map((post) => (
          <article>
             <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
-            <small>{formatDate(post.data.date)}</small>
+            <small>{formatDate(post.data.pubDate)}</small>
             <p>{post.data.description}</p>
             <div class="tags">
-               <a href={`/blog/${post.slug}`}>tag1</a>
+               {post.data.tags.map((tag) => (
+                  <a href={`/blog/tags/${tag}`}>{tag}</a>
+               ))}
             </div>
          </article>
        ))
@@ -23,34 +26,9 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.date.va
    </main>
 </Page>
 <style>
-   h1 {
-      margin-top: 2px;
-      margin-bottom: 2px;
-   }
-
    .tags {
       display: flex;
       flex-direction: row;
       gap: 1em;
    }
-
-   article {
-      background-color: #3B513B;
-      padding: 1.2em;
-      border-radius: 20px;
-      gap: 0.5em;
-      margin: 0.5em;
-   }
-
-   main {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-   }
-
-   /* Mobile view */
-   @media (max-width: 992px) {
-      main {
-         grid-template-columns: 1fr;
-      }
-   }
 </style>
diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro
index a43f13f..9d4ff86 100644
--- a/src/pages/blog/tags/[tag].astro
+++ b/src/pages/blog/tags/[tag].astro
@@ -1,6 +1,8 @@
 ---
 import Page from '../../../layouts/Page.astro';
-
+import {formatDate} from "../../../util";
+import "../../../styles/cards.css";
+export const prerender = true;
 export async function getStaticPaths() {
     const allPosts = await Astro.glob('../../../content/blog/*.md');
     let uniqueTags = [];
@@ -21,13 +23,16 @@ export async function getStaticPaths() {
 const { tag } = Astro.params;
 const { posts } = Astro.props;
 ---
-<Page title={tag}>
-    {console.log(posts)}
-    {posts && posts.map((post) => {
-        return (
-                <div>
-                    <a href={post.url}>{post.frontmatter.title}</a>
-                </div>
-        )
-    })}
+<Page title=`Posts with ${tag}`>
+    <main>
+        {posts && posts.map((post) => {
+            return (
+                    <article>
+                        <h1><a href=`/blog/${post.frontmatter.slug}`>{post.frontmatter.title}</a></h1>
+                        <small>{formatDate(post.frontmatter.pubDate)}</small>
+                        <p>{post.frontmatter.description}</p>
+                    </article>
+            )
+        })}
+    </main>
 </Page>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0918a74..35ed847 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,8 +2,13 @@
 import Layout from '../layouts/Default.astro';
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets';
+import { getCollection } from "astro:content";
+
 import Profile from '../images/Alee.png';
 import '../styles/index.css';
+import {formatDate} from "../util";
+const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()).slice(0, 10);
+
 ---
 
 <Layout title="Andrew Lee" description="Andrew Lee Website">
@@ -73,7 +78,13 @@ import '../styles/index.css';
 			</div>
 			<div class="box latest-posts">
 				<h1>Latest Posts</h1>
-				<p>Hello world</p>
+				{allBlogPosts.map((post) => (
+					<article>
+						<h1 class="blog-title"><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
+						<small>{formatDate(post.data.pubDate)}</small>
+						<p>{post.data.description}</p>
+					</article>
+				))}
 			</div>
 		</div>
 	</main>
diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js
index df0645d..fe17f91 100644
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@@ -18,7 +18,7 @@ export async function GET(context) {
         // See "Generating items" section for examples using content collections and glob imports
         items: blog.map((post) => ({
             title: post.data.title,
-            pubDate: post.data.date,
+            pubDate: post.data.pubDate,
             description: post.data.description,
             // Compute RSS link from post `slug`
             // This example assumes all posts are rendered as `/blog/[slug]` routes
diff --git a/src/styles/cards.css b/src/styles/cards.css
new file mode 100644
index 0000000..192335d
--- /dev/null
+++ b/src/styles/cards.css
@@ -0,0 +1,24 @@
+h1 {
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+article {
+    background-color: #3B513B;
+    padding: 1.2em;
+    border-radius: 20px;
+    gap: 0.5em;
+    margin: 0.5em;
+}
+
+main {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+/* Mobile view */
+@media (max-width: 992px) {
+    main {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 327b6aa..1b5a8ca 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -57,6 +57,10 @@
     grid-row: 1 / span 2;
 }
 
+.blog-title {
+    margin-bottom: 2px;
+}
+
 /* Mobile view */
 @media (max-width: 992px) {
     .social {