upgrade to astro 2.0

src/components/PostPreview.astro

@@ -0,0 +1,20 @@
+---
+import BlogHeader from "@components/BlogHeader.astro";
+
+interface Props {
+  post: Object;
+}
+
+const { post } = Astro.props;
+const { data, slug } = post;
+
+const preview = post.body.split("\n")[1];
+---
+
+<article class="post-preview">
+  <div>
+    <BlogHeader title={post.data.title} date={post.data.pubDate} />
+    <p>{preview}</p>
+    <a href={`/posts/${slug}`}>Read More</a>
+  </div>
+</article>

src/content/blog/an-update-on-my-ai-dating-profile.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "An Update on my AI Dating Profile"
 pubDate: 2023-01-14
 ---

src/content/blog/ask-the-darn-question.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Ask The Darn Question!"
 pubDate: 2022-11-05
 ---

src/content/blog/building-ghalldev-30.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Building ghall.dev 3.0"
 pubDate: 2022-10-16
 ---

src/content/blog/coding-with-depression.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Coding With Depression"
 pubDate: 2022-11-11
 ---

src/content/blog/creating-a-dating-profile-with-ai.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Creating a Dating Profile With AI"
 pubDate: 2022-12-10
 ---

src/content/blog/getting-out-of-your-comfort-zone.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Getting Out of Your Comfort Zone"
 pubDate: 2022-12-10
 ---

src/content/blog/handheld-gaming.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Handheld Gaming"
 pubDate: 2023-01-07
 ---

src/content/blog/ileopard-a-retrospective.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "iLeopard - A Retrospective"
 pubDate: 2022-12-26
 ---

src/content/blog/my-favorite-little-apps-part-2.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "My Favorite Little Apps, Part 2"
 pubDate: 2023-01-21
 ---

src/content/blog/my-favorite-little-apps.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "My Favorite Little Apps"
 pubDate: 2022-11-28
 ---

src/content/blog/my-gunpla-adventure.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "My Gunpla Adventure"
 pubDate: 2023-01-28
 ---

src/content/blog/my-macos-home-directory-overview.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "My MacOS Home Directory Overview"
 pubDate: 2022-12-23
 ---

src/content/blog/my-top-3-games-of-2022.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "My Top 3 Games of 2022"
 pubDate: 2022-12-09
 ---

src/content/blog/nextjs-13-and-exploring-new-technologies.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "Next.js 13 and Exploring New Technologies"
 pubDate: 2022-10-28
 ---

src/content/blog/on-text-editors.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/BlogPost.astro
 title: "On Text Editors"
 pubDate: 2022-10-22
 ---

src/content/config.ts

@@ -0,0 +1,12 @@
+import { z, defineCollection } from "astro:content";
+
+const blogCollection = defineCollection({
+  schema: z.object({
+    title: z.string(),
+    pubDate: z.date(),
+  }),
+});
+
+export const collections = {
+  blog: blogCollection,
+};

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/About.astro

@@ -1,6 +1,5 @@
 ---
 import Layout from "@layouts/Layout.astro";
-import AboutText from "../content/about.md";
 
 const styles = {
   img: {
@@ -15,5 +14,5 @@ const styles = {
 
 <Layout title="About">
   <img src="/portrait.jpg" alt="me" style={styles.img} />
-  <AboutText />
+  <slot />
 </Layout>

src/layouts/BlogPost.astro

@@ -1,20 +0,0 @@
----
-import Layout from "@layouts/Layout.astro";
-import BlogHeader from "@components/BlogHeader.astro";
-
-const { title, pubDate } = Astro.props.frontmatter;
----
-
-<Layout title={title}>
-  <BlogHeader title={title} date={pubDate} />
-  <article>
-    <slot />
-  </article>
-</Layout>
-
-<style is:global>
-  img {
-    display: block;
-    margin: auto;
-  }
-</style>

src/layouts/Layout.astro

@@ -22,7 +22,7 @@ const title = Astro.props.frontmatter
     <meta name="generator" content={Astro.generator} />
     <meta
       name="description"
-      content="A personal blog about life, gaming, tech, and whatever else I feel like writing about."
+      content="My personal blog about life, gaming, tech, and whatever else I feel like writing about."
     />
     <title>{`ghall.blog - ${title}`}</title>
   </head>

src/pages/about.md

@@ -1,3 +1,8 @@
+---
+layout: ../layouts/About.astro
+title: Page Not Found
+---
+
 My name is **Graham**, a web developer from Rhode Island.
 
 When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, music, hiking, photography, art, the list goes on...

src/pages/archive.astro

@@ -1,21 +1,18 @@
 ---
-import { formatInTimeZone } from "date-fns-tz";
+import { getCollection } from "astro:content";
+
 import Layout from "@layouts/Layout.astro";
 import FormattedDate from "@components/FormattedDate.astro";
 
-const posts = await Astro.glob("./posts/*.md");
-posts.sort(
-  (a, b) =>
-    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
-);
+const posts = await getCollection("blog");
 ---
 
 <Layout title="Blog Archive">
   {
-    posts.map((post) => (
+    posts.map(({ slug, data }) => (
       <div>
-        <a href={post.url}>{post.frontmatter.title}</a> -{" "}
-        <FormattedDate date={post.frontmatter.pubDate} />
+        <a href={`/posts/${slug}`}>{data.title}</a> -{" "}
+        <FormattedDate date={data.pubDate} />
       </div>
     ))
   }

src/pages/index.astro

@@ -1,30 +1,18 @@
 ---
-import { Markup } from "astro-remote";
+import { getCollection } from "astro:content";
 
 import Layout from "@layouts/Layout.astro";
-import BlogHeader from "@components/BlogHeader.astro";
+import PostPreview from "@components/PostPreview.astro";
 
-const posts = await Astro.glob("./posts/*.md");
-posts.sort(
-  (a, b) =>
-    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
-);
+const posts = await getCollection("blog");
 ---
 
 <Layout title="Home">
   {
-    posts.slice(0, 5).map((post) => (
-      <article class="post-preview">
-        <div>
-          <BlogHeader
-            title={post.frontmatter.title}
-            date={post.frontmatter.pubDate}
-          />
-          <Markup content={`<p>${post.compiledContent().split("</p>")[0]}`} />
-          <a href={post.url}>Read More</a>
-        </div>
-      </article>
-    ))
+    posts
+      .sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
+      .slice(0, 5)
+      .map((post) => <PostPreview post={post} />)
   }
   {posts.length < 5 ? null : <a href="/archive">All Posts</a>}
 </Layout>

src/pages/posts/[slug].astro

@@ -0,0 +1,34 @@
+---
+import { getCollection, getEntryBySlug } from "astro:content";
+
+import Layout from "@layouts/Layout.astro";
+import BlogHeader from "@components/BlogHeader.astro";
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+
+const { data } = post;
+
+const { Content } = await post.render();
+---
+
+<Layout title={data.title}>
+  <BlogHeader title={data.title} date={data.pubDate} />
+  <article>
+    <Content />
+  </article>
+</Layout>
+
+<style is:global>
+  img {
+    display: block;
+    margin: auto;
+  }
+</style>

src/pages/rss.xml.js

@@ -0,0 +1,23 @@
+import rss from "@astrojs/rss";
+import { getCollection } from "astro:content";
+
+export async function get(context) {
+  const blog = await getCollection("blog");
+  console.log(blog);
+  return rss({
+    title: "ghall.blog",
+    description:
+      "My personal blog about life, gaming, tech, and whatever else I feel like writing about.",
+    site: "https://ghall.blog",
+    items: blog
+      .sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
+      .map((post) => ({
+        title: post.data.title,
+        pubDate: post.data.pubDate,
+        // description: post.body,
+        // Compute RSS link from post `slug`
+        // This example assumes all posts are rendered as `/blog/[slug]` routes
+        link: `/posts/${post.slug}/`,
+      })),
+  });
+}