Merge pull request #13 from ghall89/astro-2-upgrade

upgrade to astro 2.0

.astro/types.d.ts

@@ -0,0 +1,180 @@
+declare module 'astro:content' {
+	export { z } from 'astro/zod';
+	export type CollectionEntry<C extends keyof typeof entryMap> =
+		(typeof entryMap)[C][keyof (typeof entryMap)[C]] & Render;
+
+	type BaseSchemaWithoutEffects =
+		| import('astro/zod').AnyZodObject
+		| import('astro/zod').ZodUnion<import('astro/zod').AnyZodObject[]>
+		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
+		| import('astro/zod').ZodIntersection<
+				import('astro/zod').AnyZodObject,
+				import('astro/zod').AnyZodObject
+		  >;
+
+	type BaseSchema =
+		| BaseSchemaWithoutEffects
+		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
+
+	type BaseCollectionConfig<S extends BaseSchema> = {
+		schema?: S;
+		slug?: (entry: {
+			id: CollectionEntry<keyof typeof entryMap>['id'];
+			defaultSlug: string;
+			collection: string;
+			body: string;
+			data: import('astro/zod').infer<S>;
+		}) => string | Promise<string>;
+	};
+	export function defineCollection<S extends BaseSchema>(
+		input: BaseCollectionConfig<S>
+	): BaseCollectionConfig<S>;
+
+	type EntryMapKeys = keyof typeof entryMap;
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidEntrySlug<C extends EntryMapKeys> = AllValuesOf<(typeof entryMap)[C]>['slug'];
+
+	export function getEntryBySlug<
+		C extends keyof typeof entryMap,
+		E extends ValidEntrySlug<C> | (string & {})
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E
+	): E extends ValidEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getCollection<C extends keyof typeof entryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E
+	): Promise<E[]>;
+	export function getCollection<C extends keyof typeof entryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown
+	): Promise<CollectionEntry<C>[]>;
+
+	type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer<
+		Required<ContentConfig['collections'][C]>['schema']
+	>;
+
+	type Render = {
+		render(): Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+		}>;
+	};
+
+	const entryMap: {
+		"blog": {
+"an-update-on-my-ai-dating-profile.md": {
+  id: "an-update-on-my-ai-dating-profile.md",
+  slug: "an-update-on-my-ai-dating-profile",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"ask-the-darn-question.md": {
+  id: "ask-the-darn-question.md",
+  slug: "ask-the-darn-question",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"building-ghalldev-30.md": {
+  id: "building-ghalldev-30.md",
+  slug: "building-ghalldev-30",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"coding-with-depression.md": {
+  id: "coding-with-depression.md",
+  slug: "coding-with-depression",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"creating-a-dating-profile-with-ai.md": {
+  id: "creating-a-dating-profile-with-ai.md",
+  slug: "creating-a-dating-profile-with-ai",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"getting-out-of-your-comfort-zone.md": {
+  id: "getting-out-of-your-comfort-zone.md",
+  slug: "getting-out-of-your-comfort-zone",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"handheld-gaming.md": {
+  id: "handheld-gaming.md",
+  slug: "handheld-gaming",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"ileopard-a-retrospective.md": {
+  id: "ileopard-a-retrospective.md",
+  slug: "ileopard-a-retrospective",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"my-favorite-little-apps-part-2.md": {
+  id: "my-favorite-little-apps-part-2.md",
+  slug: "my-favorite-little-apps-part-2",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"my-favorite-little-apps.md": {
+  id: "my-favorite-little-apps.md",
+  slug: "my-favorite-little-apps",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"my-gunpla-adventure.md": {
+  id: "my-gunpla-adventure.md",
+  slug: "my-gunpla-adventure",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"my-macos-home-directory-overview.md": {
+  id: "my-macos-home-directory-overview.md",
+  slug: "my-macos-home-directory-overview",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"my-top-3-games-of-2022.md": {
+  id: "my-top-3-games-of-2022.md",
+  slug: "my-top-3-games-of-2022",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"nextjs-13-and-exploring-new-technologies.md": {
+  id: "nextjs-13-and-exploring-new-technologies.md",
+  slug: "nextjs-13-and-exploring-new-technologies",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"on-text-editors.md": {
+  id: "on-text-editors.md",
+  slug: "on-text-editors",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+},
+
+	};
+
+	type ContentConfig = typeof import("../src/content/config");
+}

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@astrojs/netlify": "^1.2.2",
-    "astro": "^1.6.13",
+    "@astrojs/rss": "^2.1.0",
+    "astro": "^2.0.4",
     "astro-remote": "^0.2.3",
     "date-fns-tz": "^1.3.7"
   },

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}/`,
+      })),
+  });
+}

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
     "baseUrl": ".",
+    "strictNullChecks": true,
     "paths": {
       "@components/*": ["src/components/*"],
       "@layouts/*": ["src/layouts/*"],