first working prototype

src/routes/rezepte/+layout.svelte

@@ -0,0 +1,66 @@
+<script>
+import "$lib/components/nordtheme.css"
+</script>
+<style>
+*{
+box-sizing: border-box;
+}
+li{
+	list-style-type:none;
+	transition: 100ms;
+	color: white;
+}
+li>a{
+	text-decoration: none;
+	font-family: sans-serif;
+	font-size: 1.5rem;
+	color: inherit
+}
+li:hover{
+	cursor: pointer;
+	color: var(--red);
+	transform: scale(1.1,1.1);
+}
+
+ul {
+	padding-block: 2rem;
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	justify-content: space-evenly;
+	max-width: 1000px;
+	margin-inline: auto;
+}
+nav{
+	background-color: var(--nord0);
+}
+.wrapper{
+	display:flex;
+	flex-direction: column;
+	min-height: 95vh;
+	justify-content: space-between;
+}
+footer{
+padding-block: 1rem;
+justify-self: end;
+text-align: center;
+}
+</style>
+<div class=wrapper>
+<div>
+<nav>
+<ul>
+	<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/tag">Stichwörter</a></li>
+</ul>
+</nav>
+<slot></slot>
+
+</div>
+<footer>
+Ad maiorem Dei gloriam
+</footer>
+</div>

src/routes/rezepte/+page.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import './card.css';
+    import '$lib/components/card.css';
+    import MediaScroller from '$lib/components/MediaScroller.svelte';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import Card from '$lib/components/Card.svelte';
+    import Search from '$lib/components/Search.svelte';
     export let data: PageData;
-    import Card from './Card.svelte'
     export let current_month = new Date().getMonth() + 1
 </script>
 <style>
@@ -22,15 +25,16 @@
 <h1>Rezepte</h1>
 <h2>In Saison</h2>
 <section>
-<div class=accordion>
+<MediaScroller>
 {#each data.season as recipe}
 	<Card {recipe} {current_month}></Card>
 {/each}
-</div>
+</MediaScroller>
 </section>
+<!--<Search></Search>-->
 <h2>Alle Rezepte</h2>
-<div class=accordion>
-{#each data.all_brief as recipe}
-<Card {recipe} {current_month}></Card>
-{/each}
-</div>
+<Recipes>
+	{#each data.all_brief as recipe}
+	<Card {recipe} {current_month}></Card>
+	{/each}
+</Recipes>

src/routes/rezepte/+page.ts

@@ -1,7 +1,8 @@
 import type { PageLoad } from "./$types";
 
 export async function load({ fetch }) {
-    const res_season = await fetch(`/api/items/in_season`);
+    let current_month = new Date().getMonth() + 1
+    const res_season = await fetch(`/api/items/in_season/` + current_month);
     const res_all_brief = await fetch(`/api/items/all_brief`);
     const item_season = await res_season.json();
     const item_all_brief = await res_all_brief.json();

src/routes/rezepte/Card.svelte

@@ -1,29 +0,0 @@
-<script>
-export let recipe
-export let current_month
-
-import alragu from '$lib/assets/al_ragu.webp'
-export let src
-import './card.css'
-// Winter: ❄️
-// Weihnachten: 🎄
-// Ostern: 🐇
-// Fastenzeit: ✝️
-// Herbst: 🍂
-// Sommer: ☀️
-</script>
-
-<a class=card href="/rezepte/{recipe.short_name}">
-	<img {src} alt="">
-	<div class=title>
-		{#if recipe.season.includes(current_month)}
-			<div class=icon>{recipe.icon}</div>
-		{/if}
-		<div class=name>{recipe.name}</div>
-		<div class=tags>
-		{#each recipe.tags as tag}
-			<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
-		{/each}
-		</div>
-	</div>
-</a>

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+    	let name = 'name'
+	let short_name = 'short_name'
+	let category = 'category'
+	let icon = 'icon'
+	let description = 'description'
+	let datecreated = new Date()
+	let datemodified = datecreated
+	let tags : string[] = []
+
+    import type { PageData } from './$types';
+    import '$lib/components/card.css';
+    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;
+    export let current_month = new Date().getMonth() + 1
+	async function doPost () {
+		const res = await fetch('/api/add', {
+			method: 'POST',
+			body: JSON.stringify({
+				bearer: "password1234",
+				recipe: {
+					short_name,
+					name,
+					category,
+					datecreated,
+					datemodified,
+					tags,
+					description,
+					icon
+
+				},
+			headers: {
+       				'content-type': 'application/json',
+				bearer: "password1234",
+     				}
+			})
+		})
+
+		const json = await res.json()
+		result = JSON.stringify(json)
+		console.log(result)
+	}
+</script>
+
+<style>
+input{
+	display: block;
+	margin: 1rem;
+}
+</style>
+<h1>Rezept hinzufügen</h1>
+
+<input bind:value={short_name} />
+<input bind:value={name} />
+<input bind:value={icon} />
+<input bind:value={category} />
+<input bind:value={description} />
+<input type="text" name="" id="" bind:value={tags}>
+
+<button on:click={doPost}>HIT IT</button>
+<h3>Zutaten</h3>
+
+<!-- already added ingredients
+<input type="number"><select name="" id=""></select><input type="text">
+
+<br>
+<br>
+<input type="text" name="" id=""><button>Neue Unterkategorie hinzufügen</button>
+
+<h3> Schritte </h3>
+<input type="text">
+<button>Neue Unterkategorie hinzufügen</button>
+<br>
+<input type="text"><button>Schritt hinzufügen</button>-->

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

@@ -0,0 +1,13 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch }) {
+    let current_month = new Date().getMonth() + 1
+    const res_season = await fetch(`/api/items/category`);
+    const res_all_brief = await fetch(`/api/items/tag`);
+    const item_season = await res_season.json();
+    const item_all_brief = await res_all_brief.json();
+    return {
+	    season: item_season,
+	    all_brief: item_all_brief,
+    };
+};

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

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

src/routes/rezepte/card.css

@@ -1,110 +0,0 @@
-.card{
-	text-decoration: none;
-	position: relative;
-	box-sizing: border-box;
-	font-family: sans-serif;
-	cursor: pointer;
-	width: 300px;
-	aspect-ratio: 4/7;
-	border-radius: 20px;
-	background-size: contain;
-	display: flex;
-	flex-direction: column;
-	justify-content: end;
-	transition: 200ms;
-}
-.card:hover,
-.card:focus-visible{
-	transform: scale(1.02,1.02)
-}
-
-.card img{
-	height: 50%;
-	object-fit: cover;
-	border-top-left-radius: inherit;
-	border-top-right-radius: inherit;
-	background-color:  #5E81AC;
-}
-.card .title {
-	box-sizing: border-box;
-	padding-top: 0.5em;
-	height: 50%;
-	width: 100% ;
-	padding-inline: 1em;
-	border-bottom-left-radius: inherit;
-	border-bottom-right-radius: inherit;
-	background-color: #5E81AC;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	transition: 100ms;
-}
-.card:hover .title{
-	background-color:#BF616A;
-}
-.card .name{
-	font-size: 2em;
-	color: white;
-	margin-bottom: 0.5em;
-}
-
-.card .tags{
-	display: flex;
-	flex-wrap: wrap;
-	overflow: hidden;
-	column-gap: 0.25em;
-	margin-bottom:0.5em;
-	flex-grow: 0;
-}
-.card .tag{
-	cursor: pointer;
-	text-decoration: unset;
-	background-color: #D8DEE9;
-	color: #2E3440;
-	border-radius: 100px;
-	padding-inline: 1em;
-	line-height: 1.5em;
-	margin-bottom: 0.5em;
-	transition: 100ms;
-}
-.card .tag:hover{
-	transform: scale(1.04, 1.04);
-	background-color: #D08770;
-}
-
-.card .title .icon{
-	position: absolute;
-	font-size: 1.5rem;
-	top:-0.5em;
-	right:-0.5em;
-	padding: 0.25em;
-	background-color: white;
-	border-radius:1000px;
-}
-.card:hover .title .icon{
-	animation:  shake 0.6s
-}
-
-  @keyframes shake{
-    0%{
-      transform: rotate(0)
-		scale(1,1);
-    }
-    25%{
-      transform: rotate(30deg)
-      		scale(1.2,1.2)
-      ;
-    }
-    50%{
-      transform: rotate(-30deg)
-      		scale(1.2,1.2);
-    }
-    74%{
-  transform: rotate(30deg)
-  		scale(1.2, 1.2);
-	}
-	100%{
-      transform: rotate(0)
-      	scale(1,1);
-    }
-  }

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    export let data: PageData;
+    import TagCloud from '$lib/components/TagCloud.svelte';
+    import TagBall from '$lib/components/TagBall.svelte';
+</script>
+<h1>Rezepte</h1>
+<h2>Kategorien</h2>
+<section>
+<TagCloud>
+{#each data.categories as tag}
+	<TagBall {tag} ref="/rezepte/category">
+	</TagBall>
+{/each}
+</TagCloud>
+</section>

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

@@ -0,0 +1,7 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch}) {
+    const res = await fetch(`/api/items/category`);
+    const categories= await res.json();
+    return {categories}
+};

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '$lib/components/card.css';
+    import Recipes from '$lib/components/Recipes.svelte';
+    export let data: PageData;
+    export let current_month = new Date().getMonth() + 1;
+    import Card from '$lib/components/Card.svelte'
+</script>
+<h1>Rezepte</h1>
+<h2>In Kategorie {data.category}</h2>
+<section>
+<Recipes>
+	{#each data.recipes as recipe}
+		<Card {recipe} {current_month}></Card>
+	{/each}
+</Recipes>
+</section>

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

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch, params }) {
+    const res = await fetch(`/api/items/category/${params.category}`);
+    const items = await res.json();
+    return {
+	    category: params.category,
+	    recipes: items
+    }
+};

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '$lib/components/card.css';
+    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;
+    export let current_month = new Date().getMonth() + 1
+</script>
+
+<SeasonLayout>
+
+<h2 slot=test>Rezepte des Monats </h2>
+
+<Recipes slot=recipes>
+	{#each data.season as recipe}
+		<Card {recipe} {current_month}></Card>
+	{/each}
+</Recipes>
+</SeasonLayout>

src/routes/rezepte/season/+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_season = await fetch(`/api/items/in_season/` + current_month);
+    const item_season = await res_season.json();
+    return {
+	    season: item_season,
+    };
+};

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

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

src/routes/rezepte/season/[month]/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import SeasonLayout from '$lib/components/SeasonLayout.svelte';
+    import '$lib/components/card.css';
+    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;
+    let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
+</script>
+<SeasonLayout>
+<h2 slot=test>Rezepte die im {months[data.month-1]} in Saison sind</h2>
+<Recipes slot=recipes>
+	{#each data.season as recipe}
+		<Card {recipe} icon_override=true></Card>
+	{/each}
+</Recipes>
+</SeasonLayout>

src/routes/rezepte/season/[month]/+page.ts

@@ -0,0 +1,12 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch, params }) {
+    const res_season = await fetch(`/api/items/in_season/` + params.month);
+    const res_all_brief = await fetch(`/api/items/all_brief`);
+    const item_season = await res_season.json();
+    const item_all_brief = await res_all_brief.json();
+    return {
+	    month: params.month,
+	    season: item_season,
+    };
+};

src/routes/rezepte/tag/+page.server.ts

@@ -1,9 +0,0 @@
-import type { PageLoad } from "./$types";
-
-export async function load({ fetch }) {
-    const res_tag = await fetch(`/api/tags`);
-    const items_tag = await res_tag.json();
-    return {
-	    tags: item.tags
-    }
-};

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

@@ -1,30 +1,16 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import '../../card.css';
-    import Card from '../../Card.svelte';
     export let data: PageData;
-    export let current_month = new Date().getMonth() + 1;
+    import TagCloud from '$lib/components/TagCloud.svelte';
+    import TagBall from '$lib/components/TagBall.svelte';
 </script>
-<style>
-.accordion{
-	display:flex;
-	background-color: #111111;
-	flex-direction: row;
-	margin-inline: auto;
-	padding-inline: 1rem;
-	padding-block: 3rem;
-	margin-block: 3rem;
-	align-items:center;
-	justify-content: center;
-	gap: 1rem;
-}
-</style>
 <h1>Rezepte</h1>
-<h2>In Tag {data.tag}</h2>
+<h2>Kategorien</h2>
 <section>
-<div class=accordion>
-{#each data.recipes as recipe}
-	<Card {recipe} {current_month}></Card>
+<TagCloud>
+{#each data.tags as tag}
+	<TagBall {tag} ref="/rezepte/tag">
+	</TagBall>
 {/each}
-</div>
+</TagCloud>
 </section>

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

@@ -0,0 +1,7 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch}) {
+    const res = await fetch(`/api/items/tag`);
+    const tags = await res.json();
+    return {tags}
+};

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

@@ -1,30 +1,17 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import '../../card.css';
+    import '$lib/components/card.css';
+    import Recipes from '$lib/components/Recipes.svelte';
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1;
-    import Card from '../../Card.svelte'
+    import Card from '$lib/components/Card.svelte'
 </script>
-<style>
-.accordion{
-	display:flex;
-	background-color: #111111;
-	flex-direction: row;
-	margin-inline: auto;
-	padding-inline: 1rem;
-	padding-block: 3rem;
-	margin-block: 3rem;
-	align-items:center;
-	justify-content: center;
-	gap: 1rem;
-}
-</style>
 <h1>Rezepte</h1>
 <h2>In Tag {data.tag}</h2>
 <section>
-<div class=accordion>
-{#each data.recipes as recipe}
-	<Card {recipe} {current_month}></Card>
-{/each}
-</div>
+<Recipes>
+	{#each data.recipes as recipe}
+		<Card {recipe} {current_month}></Card>
+	{/each}
+	</Recipes>
 </section>