From 03c99121b4453e5526be2e9465630f17fb704f5b Mon Sep 17 00:00:00 2001
From: JasterV <49537445+JasterV@users.noreply.github.com>
Date: Mon, 2 Jun 2025 14:12:35 +0200
Subject: [PATCH] [feat] Update codebase to optimize images and use content
 collections

---
 src/components/FormattedDate.astro            |  17 +++++
 src/components/PostCard.astro                 |  44 ------------
 src/content.config.ts                         |  15 ++++
 .../posts => content/blog}/HelloWorld.md      |   5 +-
 .../images => src/content/blog/assets}/me.png | Bin
 src/layouts/PostLayout.astro                  |  26 +++----
 src/pages/blog.astro                          |  27 -------
 src/pages/blog/[...slug].astro                |  25 +++++++
 src/pages/blog/index.astro                    |  66 ++++++++++++++++++
 src/types/BlogPost.ts                         |  14 ----
 10 files changed, 135 insertions(+), 104 deletions(-)
 create mode 100644 src/components/FormattedDate.astro
 delete mode 100644 src/components/PostCard.astro
 create mode 100644 src/content.config.ts
 rename src/{pages/posts => content/blog}/HelloWorld.md (94%)
 rename {public/images => src/content/blog/assets}/me.png (100%)
 delete mode 100644 src/pages/blog.astro
 create mode 100644 src/pages/blog/[...slug].astro
 create mode 100644 src/pages/blog/index.astro
 delete mode 100644 src/types/BlogPost.ts

diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
new file mode 100644
index 0000000..8f59590
--- /dev/null
+++ b/src/components/FormattedDate.astro
@@ -0,0 +1,17 @@
+---
+interface Props {
+  date: Date;
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+  {
+    date.toLocaleDateString("en-us", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    })
+  }
+</time>
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
deleted file mode 100644
index 4be216a..0000000
--- a/src/components/PostCard.astro
+++ /dev/null
@@ -1,44 +0,0 @@
----
-import type { BlogPost } from "../types/BlogPost.ts";
-
-interface Props {
-  post: BlogPost;
-}
-
-const { post } = Astro.props;
----
-
-<article class="post-card">
-  <time datetime={post.frontmatter.pubDate}>
-    {post.frontmatter.pubDate.slice(0, 10)}
-  </time>
-  <h2>
-    <a href={post.url} rel="bookmark">
-      {post.frontmatter.title}
-    </a>
-  </h2>
-</article>
-
-<style>
-  time {
-    color: var(--text-color-light);
-    padding-bottom: 1rem;
-  }
-
-  h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .post-card {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: start;
-    border: 1px solid var(--text-color);
-    padding: 1rem;
-  }
-
-  a {
-    text-decoration: none;
-  }
-</style>
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..0ad9354
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,15 @@
+import { glob } from "astro/loaders";
+import { defineCollection, z } from "astro:content";
+
+const blog = defineCollection({
+  loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
+  // Type-check frontmatter using a schema
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      pubDate: z.coerce.date(),
+      image: image(),
+    }),
+});
+
+export const collections = { blog };
diff --git a/src/pages/posts/HelloWorld.md b/src/content/blog/HelloWorld.md
similarity index 94%
rename from src/pages/posts/HelloWorld.md
rename to src/content/blog/HelloWorld.md
index d36c093..626abed 100644
--- a/src/pages/posts/HelloWorld.md
+++ b/src/content/blog/HelloWorld.md
@@ -1,10 +1,7 @@
 ---
-layout: ../../layouts/PostLayout.astro
 title: "First time posting here"
 pubDate: 2024-01-20
-image:
-  url: "/images/me.png"
-  alt: "Just me hanging out"
+image: "./assets/me.png"
 ---
 
 So this is my first post in here, I'm quite excited :D
diff --git a/public/images/me.png b/src/content/blog/assets/me.png
similarity index 100%
rename from public/images/me.png
rename to src/content/blog/assets/me.png
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index a622e7d..3b949e3 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -1,28 +1,24 @@
 ---
-import type { Frontmatter } from "../types/BlogPost.ts";
+import { type CollectionEntry } from "astro:content";
 import BaseLayout from "./BaseLayout.astro";
 import backgroundImage from "@assets/blog-bg.jpg";
+import FormattedDate from "@components/FormattedDate.astro";
+import { Image } from "astro:assets";
 
-interface Props {
-  frontmatter: Frontmatter;
-}
+type Props = CollectionEntry<"blog">["data"];
 
-const { frontmatter } = Astro.props;
+const { title, pubDate, image } = Astro.props;
 ---
 
 <BaseLayout backgroundImage={backgroundImage}>
   <article>
     <header>
-      <img
-        src={frontmatter.image?.url}
-        width="90"
-        alt={frontmatter.image?.alt}
-      />
+      <Image src={image} width="90" alt="Header pic" />
       <div>
-        <h1 class="post-title">{frontmatter.title}</h1>
-        <time datetime={frontmatter.pubDate}
-          >{frontmatter.pubDate.slice(0, 10)}</time
-        >
+        <h1 class="post-title">{title}</h1>
+        <div class="date">
+          <FormattedDate date={pubDate} />
+        </div>
       </div>
     </header>
     <main class="post-content">
@@ -46,7 +42,7 @@ const { frontmatter } = Astro.props;
     padding-bottom: 0.5rem;
   }
 
-  time {
+  .date {
     color: var(--text-color-light);
   }
 
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
deleted file mode 100644
index 0572949..0000000
--- a/src/pages/blog.astro
+++ /dev/null
@@ -1,27 +0,0 @@
----
-import type { BlogPost } from "../types/BlogPost.ts";
-import PostCard from "@components/PostCard.astro";
-import Layout from "@layouts/BaseLayout.astro";
-import backgroundImage from "@assets/blog-bg.jpg";
-
-const posts = Object.values(
-  import.meta.glob<BlogPost>("../pages/posts/*.md", { eager: true }),
-);
----
-
-<Layout title="Blog" , backgroundImage={backgroundImage}>
-  <div class="post-cards">
-    {posts.map((post) => <PostCard post={post} />)}
-  </div>
-</Layout>
-
-<style>
-  .post-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin: 1rem 0rem;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
new file mode 100644
index 0000000..b61d002
--- /dev/null
+++ b/src/pages/blog/[...slug].astro
@@ -0,0 +1,25 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import PostLayout from "../../layouts/PostLayout.astro";
+import { render } from "astro:content";
+
+type Props = CollectionEntry<"Blog">;
+type Post = CollectionEntry<"Blog">;
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+
+  return posts.map((post: Post) => ({
+    params: { slug: post.id },
+    props: post,
+  }));
+}
+
+const post = Astro.props;
+
+const { Content } = await render(post);
+---
+
+<PostLayout {...post.data}>
+  <Content />
+</PostLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..414c113
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,66 @@
+---
+import Layout from "@layouts/BaseLayout.astro";
+import backgroundImage from "@assets/blog-bg.jpg";
+import { type CollectionEntry, getCollection } from "astro:content";
+import FormattedDate from "@components/FormattedDate.astro";
+
+type PostEntry = CollectionEntry<"Blog">;
+
+const posts: PostEntry[] = await getCollection("blog");
+
+const sortedPosts = posts.sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Layout title="Blog" , backgroundImage={backgroundImage}>
+  <div class="post-cards">
+    {
+      sortedPosts.map((post) => (
+        <article class="post-card">
+          <div class="date">
+            <FormattedDate date={post.data.pubDate} />
+          </div>
+          <h2>
+            <a href={`/blog/${post.id}`} rel="bookmark">
+              {post.data.title}
+            </a>
+          </h2>
+        </article>
+      ))
+    }
+  </div>
+</Layout>
+
+<style>
+  .post-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 1rem 0rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .post-card {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: start;
+    border: 1px solid var(--text-color);
+    padding: 1rem;
+  }
+
+  .date {
+    color: var(--text-color-light);
+    padding-bottom: 1rem;
+  }
+
+  h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/types/BlogPost.ts b/src/types/BlogPost.ts
deleted file mode 100644
index 15d3c34..0000000
--- a/src/types/BlogPost.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { MarkdownInstance } from "astro";
-
-export interface Image {
-  url: string;
-  alt?: string;
-}
-
-export interface Frontmatter {
-  title: string;
-  pubDate: string;
-  image?: Image;
-}
-
-export type BlogPost = MarkdownInstance<Frontmatter>;