Thinking about data pipeline

web/astro.config.mjs

@@ -7,6 +7,8 @@ import tailwindcss from '@tailwindcss/vite';
 
 // https://astro.build/config
 export default defineConfig({
+  output: 'server',
+
   adapter: node({
     mode: 'standalone'
   }),

web/src/components/index/card.astro

@@ -0,0 +1,13 @@
+---
+
+const { title, description, tags } = Astro.props
+
+---
+
+<div>
+    {title}<br>
+
+    {description}<br>
+
+    {tags.join(", ")}<br>
+</div>

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>