src/components/Header.astro

@@ -7,8 +7,9 @@
     </a>
 
     <div class="ml-auto space-x-5">
-        <a class="hover:underline underline-offset-4 "  href="/recipe/new">new</a>
+        <a class="hover:underline underline-offset-4" href="/recipe/new">new</a>
-        <a class="hover:underline underline-offset-4 " >tags</a>
+        <a class="hover:underline underline-offset-4" href="/recipe/import">add</a>
-        <a class="hover:underline underline-offset-4 " >search</a>
+        <!-- <a class="hover:underline underline-offset-4" href="/tags">tags</a> -->
+        <a class="hover:underline underline-offset-4" >search</a>
     </div>
 </div>

src/data/pocketbase.ts

@@ -44,6 +44,10 @@ class APIClient {
         return urls
     }
 
+    async getAllTags() {
+        return await this.client.collection<Tag>(Collection.TAGS).getFullList()
+    }
+
     async getTag(name: string) {
         return await this.client.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` })
     }

src/pages/index.astro

@@ -9,7 +9,7 @@ const recipes = await client.getAllRecipes()
 <PageLayout>	
 	<!-- <p class="pb-2">What would you like today?</p> -->
 
-	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+	<div class="grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
 		{
 			recipes.map(r => (
 				<OverviewCard recipe={r} />

src/pages/tags/[name].astro

@@ -9,7 +9,7 @@ const recipes = await client.getRecipesOfTag(name) // todo redir to 404 if not f
 
 <SiteLayout>
     <p class="text-xl pb-2">
-        {recipes.length} { recipes.length == 1 ? "Recipe" : "Recipes" } with: <code class="bg-white/10 px-1 rounded-lg" >{name}</code>
+        {recipes.length} { recipes.length == 1 ? "Recipe" : "Recipes" } with: <code class="bg-white/10 p-1 text-sm rounded-lg" >{name}</code>
     </p>
 
     <div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">

src/pages/tags/index.astro

@@ -0,0 +1,24 @@
+---
+import client from "@/data/pocketbase";
+import SiteLayout from "@/layouts/base";
+
+const tags = await client.getAllTags()
+
+const countsPerTag = await Promise.all(
+    tags.map(async t => (await client.getRecipesOfTag(t.name)).length)
+)
+---
+
+<SiteLayout>
+    <p class="title pb-2">
+        {tags.length} Tags
+    </p>
+    {
+        (tags ?? []).map((t, i) => (
+            // <p>{t.name} -&gt; {countsPerTag[i]} {countsPerTag[i] == 1 ? "Recipe" : "Recipes" } </p>
+            <a class="hover:underline" href={`/tags/${t.name}`}>
+                {t.name} ({countsPerTag[i]})
+            </a><br/>
+        ))
+    }
+</SiteLayout>

src/styles/global.css

@@ -8,3 +8,7 @@ html {
     @apply font-sans;
     /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
 }
+
+.title {
+    @apply text-2xl;
+}