Lots of changes, started on working /add

src/routes/+page.svelte

@@ -1,2 +1,3 @@
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<a href="/rezepte"> REZEPTE </a>

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

@@ -2,6 +2,7 @@ import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../models/Recipe';
 import { dbConnect, dbDisconnect } from '../../../../utils/db';
 import type {RecipeModelType} from '../../../../types/types';
+import { error } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
@@ -9,5 +10,8 @@ export const GET: RequestHandler = async ({params}) => {
   await dbDisconnect();
 
   recipe = JSON.parse(JSON.stringify(recipe));
+  if(recipe == null){
+	throw error(404, "Recipe not found")
+  }
   return json(recipe);
 };

src/routes/api/seed/+server.ts

@@ -2,7 +2,114 @@ import { json } from '@sveltejs/kit';
 import { Recipe } from '../../../models/Recipe';
 import { dbConnect, dbDisconnect } from '../../../utils/db';
 
-const test_json = [{
+const test_json = [
+	{
+	short_name: "aelplermagronen",
+	name : "Älplermagronen",
+	category: "Hauptspeise",
+	icon: "🍂",
+	datecreated: 20230619,
+	datemodified: 20230619,
+	images: [{
+		mediapath: "aelplermagronen.webp",
+		alt: "Älplermagronen serviert mit Apfelmuß",
+		caption: "",
+	}],
+	description: "Alles was das Bauernherz erfreuen lässt in einer Mahlzeit.",
+	tags: ["Schweiz", "Käse", "Speck", "Nudeln", "Apfelmuß", "Kartoffeln"],
+	season: [6,7,8,9,10,11,12,1],
+  	portions: "4 Hauptspeisen",
+  	total_time: "30 Minuten",
+  	ingredients: [ {
+	  name: "",
+	  list: [
+  		{	name: "Speckwürfel",
+			unit: "g",
+			amount: "150"
+		},
+		{
+			name: "mittelgroße Zwiebeln",
+			unit: "",
+			amount: "3",
+		},
+		{
+			name: "Kartoffeln, festkochend",
+			unit: "g",
+			amount: "400",
+		},
+		{
+			name: "Milch",
+			unit: "L",
+			amount: "1-2",
+		},
+  		{
+			name: "Maccaroni",
+			unit: "g",
+			amount: "400",
+		},
+  		{
+			name: "Appenzeller",
+			unit: "g",
+			amount: "150",
+		},
+  		{
+			name: "<a href=apfelmuss>Apfelmuß</a>",
+			unit: "",
+			amount: "",
+		},
+
+  		]},
+  ],
+  instructions: [
+	  {name: "",
+	   steps: [
+		"In einem großen Topf oder tiefer Pfanne Speckwürfel anbraten.",
+		"Zwiebel in Halbringe schneiden und im gleichen Topf schwitzen lassen.",
+		"Kartoffeln schälen und in ~1 cm<sup>3</sup> schneiden.",
+		"Wenn Ziwebeln genügend gekocht sind die Kartoffeln hinzufügen und Milch hinzufügen, sodass alles bedeckt ist. Ca. 10 Minuten kochen lassen.",
+		"Ca. 1 L Milch hinzugeben. Für den nächsten Schritt wollen wir die Maccaroni hinzufügen. Damit diese nicht zu breiig werden geben wir erst die Milch zu und lassen sie aufkochen.",
+		"Wenn die der Topf wieder kocht jetzt die Maccaroni hinzugeben.",
+		"Den Käse zerreiben oder in kleine Würfel schneiden.",
+		"Ein bis zwei Minuten bevor die Nudeln durchgekocht sind den Käse hinzugeben und schmelzen lassen.",
+		"Mit Salz und Muskat würzen.",
+		"Den Topf ein bisschen zu früh vom Herd nehmen und ein bisschen auskühlen lassen.",
+		"Mit <a href=apfelkompott>Apfelmuß oder Apfelkompott</a> servieren."
+	   ]
+	  }
+  ],
+   addendum: "<p>Man kann das Gericht noch dekanter machen indem man zu Teilen Rahm an Stelle von Milch verwendet. Zudem kann man das ganze auch noch in eine Auflaufform geben und im Ofen eine Kruste anbacken</p>",
+},
+{
+	short_name: "baerlauchravioli",
+	name : "Bärlauchravioli",
+	category: "Pasta",
+	icon: "🌷",
+	datecreated: 20230619,
+	datemodified: 20230619,
+	images: [{
+		mediapath: "baerlauchravioli.webp",
+		alt: "3 Ravioli mit durchscheinender grüner Bärlauchfüllung auf einem Teller.",
+		caption: "",
+	}],
+	description: "Unwiderstehliche Ravioli mit Bärlauchfüllung.",
+	tags: ["Bärlauch", "Wald", "Frühling", "Ravioli", "Italien", "Käse"],
+	season: [ 2,3,4],
+	baking: {
+		temperature: "220",
+		length: "40 Minuten",
+		mode: "Ober-/Unterhitze",
+	},
+	  preparation: "20 Minuten",
+  fermentation: {
+	  bulk: "2.5 Stunden",
+	  final: "2 Stunden"
+  },
+  portions: "4 Pizzen",
+  total_time: "1 Tag",
+  ingredients: [],
+  instructions: []
+},
+	{
 	short_name: "anisbroetli",
 	name : "Anisbrötli",
 	category: "Guetzli",
@@ -14,8 +121,8 @@ const test_json = [{
 		alt: "Ein ganzes Brot",
 		caption: "",
 	}],
-	description: "Einfach und sehr lecker",
-	tags: ["backen", "advent", "schweiz", "deutschland", "anis", "weihnachtenn", "kekse"],
+	description: "Allemannische Weihnachstkekese bekannt durch seine harte Kruste und weiches Inneres.",
+	tags: ["Backen", "Advent", "schweiz", "Deutschland", "Anis", "Weihnachten", "Kekse"],
 	season: [ 12,1],
 	baking: {
 		temperature: "220",
@@ -44,8 +151,8 @@ const test_json = [{
 		alt: "Ein ganzes Brot",
 		caption: "",
 	}],
-	description: "Einfach und sehr lecker",
-	tags: ["pasta", "fleisch", "rind", "italienisch", "bolognese"],
+	description: "Eine etwas gehobene Version der klassichen Bolognese.",
+	tags: ["Pasta", "Fleisch", "Rind", "Italien", "Bolognese", "Linguine"],
 	season: [ 6,7,8,9],
 	baking: {
 		temperature: "220",
@@ -108,7 +215,7 @@ const test_json = [{
 		caption: "",
 	}],
 	description: "Einfach und sehr lecker",
-	tags: ["brot", "backen", "sauerteig", "hefe"],
+	tags: ["Brot", "Backen", "Sauerteig"],
 	season: [],
 	baking: {
 		temperature: "220",
@@ -171,8 +278,8 @@ const test_json = [{
   		caption: ""
 	    }
 	  ],
-  description: "Saure Marmelade",
-  tags:["marmelade", "sauer", "sommer", "süß"],
+  description: "Die erste Marmelade des Jahres mit säuerlicher Note.",
+  tags:["Marmelade", "sauer", "Sommer", "süß"],
   season: [4,5,6],
   baking: {
 	  temperature: "160",
@@ -236,8 +343,8 @@ const test_json = [{
   		caption: ""
 	    }
 	  ],
-  description: "Saure Marmelade",
-  tags:["schweiz", "ostern", "milchreis", "aprikosen", 'backen', 'süß', "marmelade"],
+  description: "Ein traditioneller Milchreiskuchen mit Aprikosenmarmelade und Rosinen.",
+  tags:["Schweiz", "Ostern", "Milchreis", "Aprikosen", 'Backen', 'süß', "Marmelade"],
   season: [3,4],
   baking: {
 	  temperature: "160",

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;