Lots of changes, started on working /add

src/routes/rezepte/+layout.svelte

@@ -2,9 +2,13 @@
 import "$lib/components/nordtheme.css"
 </script>
 <style>
-*{
+:global(*){
 box-sizing: border-box;
 }
+:global(body){
+	margin:0;
+	padding:0;
+}
 li{
 	list-style-type:none;
 	transition: 100ms;
@@ -16,7 +20,9 @@ li>a{
 	font-size: 1.5rem;
 	color: inherit
 }
-li:hover{
+li:hover,
+li:focus-within
+{
 	cursor: pointer;
 	color: var(--red);
 	transform: scale(1.1,1.1);
@@ -29,6 +35,7 @@ ul {
 	gap: 1rem;
 	justify-content: space-evenly;
 	max-width: 1000px;
+	margin: 0;
 	margin-inline: auto;
 }
 nav{
@@ -37,16 +44,15 @@ nav{
 .wrapper{
 	display:flex;
 	flex-direction: column;
-	min-height: 95vh;
-	justify-content: space-between;
+	min-height: 100svh;
 }
 footer{
 padding-block: 1rem;
-justify-self: end;
 text-align: center;
+margin-top: auto;
 }
 </style>
-<div class=wrapper>
+<div class=wrapper style="">
 <div>
 <nav>
 <ul>

src/routes/rezepte/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import '$lib/components/card.css';
     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;
@@ -38,3 +38,4 @@
 	<Card {recipe} {current_month}></Card>
 	{/each}
 </Recipes>
+<AddButton></AddButton>

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

@@ -1,13 +1,77 @@
 <script lang="ts">
-    import type { PageData } from './$types';
-    import MultiImgWrapper from './MultiImgWrapper.svelte'
-    export let data: PageData;
-</script>
+	import { writable } from 'svelte/store';
+	export const multiplier = writable(0);
 
+	import type { PageData } from './$types';
+    	import "$lib/components/nordtheme.css"
+    	import MultiImgWrapper from './MultiImgWrapper.svelte'
+	import EditButton from '$lib/components/EditButton.svelte';
+    	export let data: PageData;
+    	export let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
+	function season_intervals() {
+		let interval_arr = []
+		let start = 0
+		for(var i = 0; i < data.season.length - 1; i++)
+      		{
+			if(Math.abs(data.season[i] - data.season[i + 1])%11 > 1){
+	  			interval_arr.push([data.season[start], data.season[i]])
+				start=i+1
+			}
+		}
+		interval_arr.push([data.season[start], data.season[data.season.length -1]])
+		return interval_arr
+	}
+	export let season_iv = season_intervals();
+</script>
+<style>
+*{
+font-family: sans-serif;
+}
+h1{
+	text-align: center;
+	padding: 0.5em 2em;
+	border-radius: 10000px;
+	margin:0;
+	font-size: 3rem;
+}
+.wrapper{
+	margin-inline: auto;
+	max-width: 700px;
+	padding-inline: 2rem;
+}
+.tags{
+	margin-block: 1rem;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 1em;
+}
+.tag{
+	all:unset;
+	color: var(--nord0);
+	font-size: 1.1rem;
+	background-color: var(--nord5);
+	border-radius: 10000px;
+	padding: 0.25em 1em;
+	transition: 100ms;
+	box-shadow: 0.2em 0.2em 0.4em 0.1em rgba(0,0,0,0.3);
+}
+.tag:hover,
+.tag:focus-visible
+{
+	cursor: pointer;
+	transform: scale(1.1,1.1);
+	background-color: var(--orange);
+	box-shadow: 0.1em 0.1em 0.2em 0.2em rgba(0,0,0,0.3);
+}
+</style>
+
+<div class="wrapper">
 <h1>{data.name}</h1>
 
 <MultiImgWrapper wrap={data.images.length>1} class=double>
 {#each data.images as img}
+	<img width=100% src="/images/{img.mediapath}" alt="{img.alt}">
 	<figure>
 	{#if img.caption}
 		<caption>{img.caption}</caption>
@@ -16,6 +80,46 @@
 {/each}
 </MultiImgWrapper>
 
+<div class=tags>
+Saison:
+{#each season_iv as season}
+	<a class=tag href="/rezepte/season/{season[0]}">{months[season[0] - 1]}-{months[season[1] - 1]}</a>
+{/each}
+</div>
+
+
+<div class=tags>
+Stichwörter:
+{#each data.tags as tag}
+	<a href="/rezepte/tag/{tag}" class=tag>{tag}</a>
+{/each}
+</div>
+
+
+{#if data.preparation}
+<div>Vorbereitung: {data.preparation}</div>
+{/if}
+
+
+{#if data.fermentation}
+	{#if data.fermentation.bulk}
+		<div>Stockgare: {data.fermentation.bulk}</div>
+	{/if}
+
+	{#if data.fermentation.final}
+		<div>Stückgare: {data.fermentation.final}</div>
+	{/if}
+{/if}
+
+{#if data.baking}
+<div>Backen: {data.baking.length} bei {data.baking.temperature} °C {data.baking.mode}</div>
+{/if}
+
+{#if data.total_time}
+<div>Gesamtzeit: {data.total_time}</div>
+{/if}
+
+
 {#if data.ingredients}
 <h2>Zutaten</h2>
 {#each data.ingredients as list}
@@ -24,7 +128,7 @@
 {/if}
 <ul>
 	{#each list.list as item}
-		<li>{item.amount} {item.unit} {item.name}</li>
+		<li>{item.amount} {item.unit} {@html item.name}</li>
 	{/each}
 </ul>
 {/each}
@@ -39,8 +143,13 @@
 {/if}
 <ol>
 	{#each list.steps as step}
-		<li>{step}</li>
+		<li>{@html step}</li>
 	{/each}
 </ol>
 {/each}
 {/if}
+{#if data.addendum}
+	{@html data.addendum}
+{/if}
+</div>
+<EditButton href="/rezepte/edit/{data.short_name}"></EditButton>

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

@@ -2,10 +2,13 @@
 import type { PageLoad } from "./$types";
 //import { Recipe } from '../../../models/Recipe';
 //import { dbConnect, dbDisconnect } from '../../../utils/db';
+import { error } from "@sveltejs/kit";
 
 export async function load({ fetch, params }) {
     const res = await fetch(`/api/items/${params.name}`);
     const item = await res.json();
-
+    if(res.status != 200){
+	    throw error(res.status, item.message)
+    }
     return item;
 };

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-    	let name = 'name'
-	let short_name = 'short_name'
-	let category = 'category'
-	let icon = 'icon'
-	let description = 'description'
+    	let name
+	let short_name
+	let category
+	let icon
+	let 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
+    	import type { PageData } from './$types';
+	import CardAdd from '$lib/components/CardAdd.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;
+    	export let current_month = new Date().getMonth() + 1
 	async function doPost () {
 		const res = await fetch('/api/add', {
 			method: 'POST',
@@ -42,23 +42,33 @@
 		result = JSON.stringify(json)
 		console.log(result)
 	}
+
 </script>
 
 <style>
 input{
+	all: unset;
 	display: block;
 	margin: 1rem;
+	padding: 0.2em 1em;
+	border-radius: 1000px;
+	background-color: var(--nord4);
+
 }
 </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}>
+<CardAdd></CardAdd>
 
+<input bind:value={short_name} placeholder="Kurzname"/>
+<input bind:value={name} placeholder="Name des Rezeptes"/>
+<input bind:value={icon} placeholder="Saison-Emoji"/>
+<input bind:value={category} placeholder="Kategorie" />
+<input bind:value={description} placeholder="Kurzbeschreibung"/>
+<input bind:value={tags} placeholder="Stichwort 1, Stichwort 2, ...">
+<h2>Zutaten</h2>
+<input>
+<h2>Zubereitung</h2>
 <button on:click={doPost}>HIT IT</button>
 <h3>Zutaten</h3>
 

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

@@ -1,6 +1,5 @@
 <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;

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

@@ -1,6 +1,5 @@
 <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';

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

@@ -2,7 +2,6 @@
     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';

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

@@ -1,6 +1,5 @@
 <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;