use astro collections

astro.config.mjs

@@ -13,7 +13,7 @@ export default defineConfig({
   integrations: [tailwind(), react()],
   output: "hybrid",
   adapter: vercel({
-    // imageService: true,
+    imageService: true,
     webAnalytics: {
       enabled: true,
     },
@@ -22,7 +22,7 @@ export default defineConfig({
     },
     functionPerRoute: true,
   }),
-  image: {
-    service: squooshImageService(),
-  },
+  // image: {
+  //   service: passthroughImageService(),
+  // },
 });

src/components/WorkCard.astro

@@ -1,50 +0,0 @@
----
-import type { MarkdownInstance } from "astro";
-import { Image } from "astro:assets";
-
-interface Props {
-  post: MarkdownInstance<Record<string, any>>;
-}
-
-const { post } = Astro.props;
-const postId = post.url!.split("/")[2];
-const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/img/work/*-thumb.{jpeg,jpg,png,gif}"
-);
-
-if (
-  !images[`/src/assets/img/work/${postId}-thumb.png`] &&
-  post.frontmatter.image
-)
-  throw new Error(
-    `"/src/assets/img/work/${postId}-thumb.png" does not exist in glob: "/src/assets/work/**/*-thumb.{jpeg,jpg,png,gif}"`
-  );
----
-
-<a
-  href={post.url}
-  class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
->
-  <div class="flex justify-between">
-    <div class="flex flex-row space-x-2">
-      {
-        post.frontmatter.image && (
-          <Image
-            src={images[`/src/assets/img/work/${postId}-thumb.png`]()}
-            class="w-40 h-24 object-contain"
-            alt={post.frontmatter.title}
-            inferSize={true}
-          />
-        )
-      }
-
-      <div class="flex flex-col space-y-1 max-w-96">
-        <h2 class="text-2xl font-bold mb-4">
-          {post.frontmatter.title}
-        </h2>
-        <p>{post.frontmatter.description}</p>
-      </div>
-    </div>
-  </div>
-  <h2 class="text-2xl font-bold mb-4">View →</h2>
-</a>

src/content/config.ts

@@ -0,0 +1,15 @@
+import { defineCollection, z } from "astro:content";
+
+const workCollection = defineCollection({
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string(),
+      image: image().optional(),
+      link: z.string().optional(),
+    }),
+});
+
+export const collections = {
+  work: workCollection,
+};

src/content/work/jacknet/index.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../../components/WorkLayout.astro
 title: JackNet
 description: "My various servers and services I host in my dorm room."
 ---

src/content/work/this-website/index.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../../components/WorkLayout.astro
 title: This Website
 description: "The website you're currently on. Built with Astro, Tailwind CSS, and MDX."
 image: "thumb.png"

src/pages/work/[slug]/index.astro

@@ -1,10 +1,29 @@
 ---
 import { Image } from "astro:assets";
-import Layout from "./Layout.astro";
+import Layout from "../../../components/Layout.astro";
+import { getCollection, getEntry } from "astro:content";
 
-const { frontmatter } = Astro.props;
+const { slug } = Astro.params;
 
-const postId = frontmatter.url!.split("/")[2];
+const post = await getEntry("work", slug as string);
+
+if (!post) {
+  return {
+    status: 404,
+  };
+}
+
+const { Content, headings } = await post.render();
+
+export async function getStaticPaths() {
+  const posts = await getCollection("work");
+
+  return posts.map((post) => ({
+    params: {
+      slug: post.slug,
+    },
+  }));
+}
 ---
 
 <Layout>
@@ -40,27 +59,23 @@ const postId = frontmatter.url!.split("/")[2];
   </div>
 
   {
-    frontmatter.image && (
+    post.data.image && (
       <div class="col-span-2 border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8">
-        <Image
-          src={import(`/src/assets/img/work/${postId}-thumb.png`)}
-          alt={frontmatter.title}
-          width={960}
-        />
+        <Image src={post.data.image} alt={post.data.title} width={960} />
       </div>
     )
   }
 
   <div class="flex flex-row justify-between items-center col-span-2">
     <div>
-      <h2 class="text-2xl font-bold">{frontmatter.title}</h2>
-      <p class="text-lg">{frontmatter.description}</p>
+      <h2 class="text-2xl font-bold">{post.data.title}</h2>
+      <p class="text-lg">{post.data.description}</p>
     </div>
 
     {
-      frontmatter.link && (
+      post.data.link && (
         <a
-          href={frontmatter.link}
+          href={post.data.link}
           target="_blank"
           class="text-2xl font-bold cursor-pointer text-white bg-blue-500 rounded-md px-4 py-2 items-center flex flex-row gap-x-2"
         >
@@ -87,6 +102,6 @@ const postId = frontmatter.url!.split("/")[2];
   <article
     class="col-span-2 pb-12 prose max-w-full lg:prose-xl prose-h1:font-bold prose-h2:font-bold prose-invert break-words"
   >
-    <slot />
+    <Content />
   </article>
 </Layout>

src/pages/work/index.astro

@@ -2,8 +2,9 @@
 import { Image } from "astro:assets";
 import Layout from "../../components/Layout.astro";
 import WorkCard from "@components/WorkCard.astro";
+import { getCollection } from "astro:content";
 
-const posts = await Astro.glob("./**/*.md");
+const posts = await getCollection("work");
 ---
 
 <Layout>
@@ -44,6 +45,32 @@ const posts = await Astro.glob("./**/*.md");
   </div>
 
   <div class="col-span-2">
-    {posts.map((post) => <WorkCard post={post} />)}
+    {
+      posts.map((post) => (
+        <a
+          href={`/work/${post.slug}`}
+          class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
+        >
+          <div class="flex justify-between">
+            <div class="flex flex-row space-x-2">
+              {post.data.image && (
+                <Image
+                  src={post.data.image}
+                  class="w-40 h-24 object-contain"
+                  alt={post.data.title}
+                  inferSize={true}
+                />
+              )}
+
+              <div class="flex flex-col space-y-1 max-w-96">
+                <h2 class="text-2xl font-bold mb-4">{post.data.title}</h2>
+                <p>{post.data.description}</p>
+              </div>
+            </div>
+          </div>
+          <h2 class="text-2xl font-bold mb-4">View →</h2>
+        </a>
+      ))
+    }
   </div>
 </Layout>