feat(directus): use directus cms

.astro/types.d.ts

@@ -143,6 +143,20 @@ declare module 'astro:content' {
   collection: "blog";
   data: InferEntrySchema<"blog">
 } & { render(): Render[".mdx"] };
+"comparing-mvc-frameworks.mdx": {
+	id: "comparing-mvc-frameworks.mdx";
+  slug: "comparing-mvc-frameworks";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"dockerizing-front-end-development.mdx": {
+	id: "dockerizing-front-end-development.mdx";
+  slug: "dockerizing-front-end-development";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
 "essential-frontend-tools-for-astro-js-developers.mdx": {
 	id: "essential-frontend-tools-for-astro-js-developers.mdx";
   slug: "essential-frontend-tools-for-astro-js-developers";

src/lib/directus.ts

@@ -10,7 +10,7 @@ type Recipe = {
 };
 
 type Schema = {
-	recipes: Recipe[];
+	Recipe: Recipe[];
 };
 
 const directus = createDirectus<Schema>(DIRECTUS_URL).with(rest());

src/pages/recipes.astro

@@ -0,0 +1,32 @@
+---
+import directus from '@/lib/directus.ts';
+import { readItems } from '@directus/sdk';
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
+
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Heading from '@/components/ui/Heading.astro';
+
+const recipes = await directus.request(
+	readItems('Recipe', {
+		fields: ['name', 'description', 'image'],
+		sort: ['name'],
+	})
+);
+---
+
+<BaseLayout title="Recipes">
+	<Heading level={1}>Recipes</Heading>
+	<p>Here are some of my favorite recipes.</p>
+	<ul>
+		{
+			recipes.map((recipe) => (
+				<li>
+					<h2 class="mt-4 text-xl">{recipe.name}</h2>
+					<p>{recipe.description}</p>
+					<img src={`${DIRECTUS_URL}/assets/${recipe.image}?width=250`} alt={recipe.name} />
+				</li>
+			))
+		}
+	</ul>
+</BaseLayout>