feat: content collections

src/content/config.ts

@@ -0,0 +1,29 @@
+import { z, defineCollection } from "astro:content";
+
+const projectsCollection = defineCollection({
+    type: 'content',
+    schema: z.object({
+      title: z.string(),
+      description: z.string(),
+      image: z.object({
+        url: z.string(),
+        alt: z.string()
+      }),
+      worksImage1: z.object({
+        url: z.string(),
+        alt: z.string()
+      }),
+      worksImage2: z.object({
+        url: z.string(),
+        alt: z.string()
+      }),
+      platform: z.string(),
+      stack: z.string(),
+      website: z.string(),
+      github: z.string(),
+    })
+});
+
+export const collections = {
+  projects: projectsCollection,
+};

src/pages/projects/project-1.md → src/content/projects/project-1.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownWorksLayout.astro
 title: 'Project 1'
 description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci'
 image:

src/pages/projects/project-2.md → src/content/projects/project-2.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownWorksLayout.astro
 title: 'Project 2'
 description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci'
 image:

src/pages/projects/project-3.md → src/content/projects/project-3.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownWorksLayout.astro
 title: 'Project 3'
 description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci'
 image:

src/pages/projects/project-4.md → src/content/projects/project-4.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownWorksLayout.astro
 title: 'Project 4'
 description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci'
 image:

src/env.d.ts

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

src/layouts/MarkdownWorksLayout.astro

@@ -49,6 +49,7 @@ const { frontmatter } = Astro.props;
 
     @media only screen and (max-width: 600px) {
         img {
+            height: auto;
             width: 300px;
         }
     }

src/pages/projects/[...slug].astro

@@ -0,0 +1,18 @@
+---
+import { getCollection } from 'astro:content';
+import MarkdownWorksLayout from '../../layouts/MarkdownWorksLayout.astro';
+
+export async function getStaticPaths() {
+    const projectEntries = await getCollection('projects');
+    return projectEntries.map(entry => ({
+        params: { slug: entry.slug }, props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<MarkdownWorksLayout frontmatter={entry.data}>
+    <Content />
+</MarkdownWorksLayout>

src/pages/works.astro

@@ -1,30 +1,21 @@
 ---
+import { getCollection } from "astro:content";
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
-const allProjects = await Astro.glob('../pages/projects/*.md');
-const allContributions = await Astro.glob('../pages/contributions/*.md');
+const allProjects = await getCollection("projects");
 const pageTitle = "Works";
 ---
 <Layout pageTitle={pageTitle}>
     <div class="gif">
         <img width="300" height="259" alt="RaccoonLaptopGif" src="/laptop.webp"/>
     </div>
-    <h2>Contributions</h2>
-    <ul role="list" class="link-card-grid">
-        {allContributions.map((card) => <Card 
-            url={card.url} 
-            image={card.frontmatter.image.url} 
-            title={card.frontmatter.title} 
-            body={card.frontmatter.description}
-        />)}
-    </ul>
     <h2>Projects</h2>
     <ul role="list" class="link-card-grid">
         {allProjects.map((card) => <Card 
-            url={card.url} 
-            image={card.frontmatter.image.url} 
-            title={card.frontmatter.title} 
-            body={card.frontmatter.description}
+            url={`/projects/${card.slug}/`} 
+            image={card.data.image.url} 
+            title={card.data.title} 
+            body={card.data.description}
         />)}
     </ul>
 </Layout>

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "allowJs": true
+  }
+}