src/components/Card/TagRow.astro

@@ -6,7 +6,7 @@ const { tags } = Astro.props
     {
         (tags ?? []).map(tag => (
             <a 
-                href={`/tag/${tag.id}`}
+                href={`/tags/${tag.name}`}
                 class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
             >
                 {tag.name}

src/data/pocketbase.ts

@@ -29,7 +29,7 @@ class APIClient {
 
     // IMAGE
     async getImageURL(imgID: string, relative: boolean = true) {
-        const record = await this.client.collection("images").getOne(imgID)
+        const record = await this.client.collection(Collection.IMAGES).getOne(imgID)
         const res = this.client.files.getURL(record, record.image)
         return relative ? res.substring(21) : res
     }
@@ -44,6 +44,24 @@ class APIClient {
         return urls
     }
 
+    async getTag(name: string) {
+        return await this.client.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` })
+    }
+
+    async getRecipesOfTag(tagName: string) {
+        // get the tag id first
+        const tagResult = await this.getTag(tagName)
+        if (tagResult.items.length === 0) {
+            return []
+        }
+        const tag = tagResult.items[0]
+
+        return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ 
+            filter: `tags ~ '${tag.id}'`,
+            expand: 'ingredients,tags,steps,images,steps.ingredients' 
+        })
+    }
+
 }
 const client = new APIClient()
 export default client;

src/pages/tags/[name].astro

@@ -0,0 +1,18 @@
+---
+import SiteLayout from "@/layouts/base";
+import client from "@/data/pocketbase";
+import OverviewCard from "@/components/Card/OverviewCard";
+
+const { name } = Astro.params
+const recipes = await client.getRecipesOfTag(name) // todo redir to 404 if not found
+---
+
+<SiteLayout>
+    <div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+		{
+			recipes.map(r => (
+				<OverviewCard recipe={r} />
+			))
+		}
+	</div>
+</SiteLayout>