Thinking about data pipeline

web/src/pages/index.astro

@@ -1,6 +1,23 @@
 ---
+import { Recipe } from "@tmlmt/cooklang-parser"
 import { authPB } from "@data/pb";
+import RecipeCard from "@component/index/card"
+import Base from "@layout/Base";
 
 const pb = await authPB()
+const records = await pb.collection('recipes').getFullList()
+
+const recipes = records.map(r => new Recipe(r.cooklang))
 ---
 
+<Base>
+	{
+		recipes.map(r => (
+			<RecipeCard
+				title={r.metadata.title ?? "Untitled Recipe"}
+				description={r.metadata.description ?? "No Description"}
+				tags={r.metadata.tags ?? []}
+			/>
+		))
+	}
+</Base>