Tags; More changes on blog

5 files changed, 35 insertions, 41 deletions

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