Icon route added

src/lib/components/Card.svelte

@@ -191,7 +191,7 @@ if(icon_override){
 </style>
 <a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
 {#if icon_override || recipe.season.includes(current_month)}
-	<a class=icon href="/rezepte/season/{current_month}">{recipe.icon}</a>
+	<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
 {/if}
 	<img width=300px height=300px src="/images/{recipe.images[0].mediapath}" alt="{recipe.alt}" />
 	<div class=title>

src/lib/components/IconLayout.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import '$lib/components/nordtheme.css';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import Search from './Search.svelte';
+    export let icons
+</script>
+
+<style>
+	a{
+		font-size: 2rem;
+		text-decoration: none;
+		padding: 0.5em;
+		background-color: var(--nord4);
+		border-radius: 1000px;
+    		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
+	}
+	a:hover{
+		--angle: 15deg;
+		animation: shake 0.5s ease forwards;
+	}
+	.flex{
+		display:flex;
+		flex-wrap:wrap;
+		gap: 1rem;
+		max-width: 1000px;
+		justify-content: center;
+		margin:4rem auto;
+	}
+
+@keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+      	transform: rotate(var(--angle))
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+      	transform: rotate(calc(-1* var(--angle)))
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+  	transform: rotate(var(--angle))
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1.2,1.2);
+      box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+
+    }
+  }
+
+</style>
+<slot name="test"></slot>
+
+<div class=flex>
+{#each icons as icon}
+	<a href="/rezepte/icon/{icon}">{icon}</a>
+{/each}
+</div>
+<section>
+<Search></Search>
+</section>
+<section>
+<slot name=recipes></slot>
+</section>

src/routes/api/items/icon/[icon]/+server.ts

@@ -5,7 +5,7 @@ import type {BriefRecipeType} from '../../../../../types/types';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
-  let recipes = (await Recipe.find({tags: params.icon}, 'name short_name images tags category icon description season').lean()) as BriefRecipeType[];
+  let recipes = (await Recipe.find({icon: params.icon}, 'name short_name images tags category icon description season').lean()) as BriefRecipeType[];
   await dbDisconnect();
 
   recipes = JSON.parse(JSON.stringify(recipes));

src/routes/rezepte/+layout.svelte

@@ -8,7 +8,8 @@ import Header from '$lib/components/Header.svelte'
 	<li><a href="/">Home</a></li>
 	<li><a href="/rezepte">Alle Rezepte</a></li>
 	<li><a href="/rezepte/season">In Saison</a></li>
-	<li><a href="/rezepte/category">Nach Kategorie</a></li>
+	<li><a href="/rezepte/category">Kategorie</a></li>
+	<li><a href="/rezepte/icon">Icon</a></li>
 	<li><a href="/rezepte/tag">Stichwörter</a></li>
 	</ul>
 	<slot></slot>

src/routes/rezepte/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { PageData } from './$types';
     	import MediaScroller from '$lib/components/MediaScroller.svelte';
-    import Recipes from '$lib/components/Recipes.svelte';
     	import AddButton from '$lib/components/AddButton.svelte';
     	import Card from '$lib/components/Card.svelte';
     	import Search from '$lib/components/Search.svelte';
     	export let data: PageData;
     	export let current_month = new Date().getMonth() + 1
+	const all_categories = [ ...new Set (data.all_brief.map(item => item.category))];
 </script>
 <style>
 h1{
@@ -26,9 +26,13 @@ h1{
 </MediaScroller>
 </section>
 <Search></Search>
-<Recipes title="Alle Rezepte:">
-	{#each data.all_brief as recipe}
+
+{#each all_categories as category}
+	<MediaScroller title={category}>
+	{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
 		<Card {recipe} {current_month}></Card>
 	{/each}
-</Recipes>
+	</MediaScroller>
+{/each}
+<p>{data.all_brief.length}</p>
 <AddButton></AddButton>

src/routes/rezepte/[name]/+page.svelte

@@ -4,7 +4,6 @@
 
 	import type { PageData } from './$types';
     	import "$lib/components/nordtheme.css"
-    	import MultiImgWrapper from './MultiImgWrapper.svelte'
 	import EditButton from '$lib/components/EditButton.svelte';
 	import InstructionsPage from '$lib/components/InstructionsPage.svelte';
 	import IngredientsPage from '$lib/components/IngredientsPage.svelte';
@@ -188,7 +187,7 @@ h4{
 
 <TitleImgParallax src=/images/{data.images[0].mediapath}>
 	<div class=title>
-		<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
+		<a class="icon" href='/rezepte/icon/{data.icon}'>{data.icon}</a>
 		<h1>{@html data.name}</h1>
 		{#if data.description && ! data.preamble}
 			<p>{data.description}</p>

src/routes/rezepte/[name]/MultiImgWrapper.svelte

@@ -1,10 +0,0 @@
-<script>
-  export let wrap = false
-</script>
-{#if wrap}
-  <div {...$$restProps}>
-    <slot />
-  </div>
-{:else}
-  <slot />
-{/if}

src/routes/rezepte/icon/+page.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '$lib/components/nordtheme.css';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import MediaScroller from '$lib/components/MediaScroller.svelte';
+    import SeasonLayout from '$lib/components/SeasonLayout.svelte'
+    import Card from '$lib/components/Card.svelte';
+    import Search from '$lib/components/Search.svelte';
+    export let data: PageData;
+</script>
+<style>
+	a{
+		font-size: 3rem;
+		text-decoration: none;
+		padding: 0.5em;
+		background-color: var(--nord4);
+		border-radius: 1000px;
+    		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
+	}
+	a:hover{
+		--angle: 15deg;
+		animation: shake 0.5s ease forwards;
+	}
+	.flex{
+		display:flex;
+		flex-wrap:wrap;
+		gap: 1rem;
+		max-width: 500px;
+		justify-content: center;
+		margin:4rem auto;
+	}
+
+@keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+      	transform: rotate(var(--angle))
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+      	transform: rotate(calc(-1* var(--angle)))
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+  	transform: rotate(var(--angle))
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1.2,1.2);
+      box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+
+    }
+  }
+
+</style>
+<div class=flex>
+{#each data.icons as icon}
+	<a href="/rezepte/icon/{icon}">{icon}</a>
+{/each}
+</div>

src/routes/rezepte/icon/+page.ts

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch }) {
+    let current_month = new Date().getMonth() + 1
+    const res_icons = await fetch(`/api/items/icon`);
+    const item = await res_icons.json();
+    return {
+	    icons: item,
+    };
+};

src/routes/rezepte/icon/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}

src/routes/rezepte/icon/[icon]/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import IconLayout from '$lib/components/IconLayout.svelte';
+    import MediaScroller from '$lib/components/MediaScroller.svelte';
+    import Card from '$lib/components/Card.svelte';
+    import Search from '$lib/components/Search.svelte';
+    export let data: PageData;
+</script>
+<IconLayout icons={data.icons}>
+<h2 slot=test>Rezepte mit {data.icon}</h2>
+<Recipes slot=recipes>
+	{#each data.season as recipe}
+		<Card {recipe} icon_override=true></Card>
+	{/each}
+</Recipes>
+</IconLayout>

src/routes/rezepte/icon/[icon]/+page.ts

@@ -0,0 +1,13 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch, params }) {
+    const res_season = await fetch(`/api/items/icon/` + params.icon);
+    const res_icons = await fetch(`/api/items/icon`);
+    const icons = await res_icons.json();
+    const item_season = await res_season.json();
+    return {
+	    icons: icons,
+	    icon: params.icon,
+	    season: item_season,
+    };
+};