add Note field in recipe

src/lib/components/EditRecipeNote.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+</script>
+<style>
+div{
+	background-color: var(--red);
+	color: white;
+	padding: 1em;
+	font-size: 1.1rem;
+	max-width: 400px;
+	margin-inline: auto;
+	box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
+	margin-bottom: 1em;
+}
+h3{
+	margin-block: 0;
+}
+</style>
+
+<div>
+	<h3>Notiz:</h3>
+	<slot></slot>
+</div>

src/lib/components/RecipeNote.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let note : string;
+</script>
+<style>
+div{
+	background-color: var(--red);
+	color: white;
+	padding: 1em;
+	font-size: 1.1rem;
+	max-width: 400px;
+	margin-inline: auto;
+	box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
+	margin-bottom: 1em;
+}
+h3{
+	margin-block: 0;
+}
+</style>
+
+<div {...$$restProps} >
+	<h3>Notiz:</h3>
+	{@html note}
+</div>

src/lib/components/SeasonSelect.svelte

@@ -44,6 +44,8 @@ label{
 	background-color: var(--nord0);
 	color: white;
 	padding: 0.25em 1em;
+	margin-inline: 0.1em;
+	line-height: 2em;
 	border-radius: 1000px;
 	cursor: pointer;
 	position: relative;
@@ -81,7 +83,8 @@ input[type=checkbox]::after
 	flex-wrap: wrap;
 	flex-direction: row;
 	justify-content: center;
-	gap: min(1rem, 1dvh);
+	margin-bottom: 1em;
+
 }
 </style>
 

src/models/Recipe.ts

@@ -14,6 +14,7 @@ const RecipeSchema = new mongoose.Schema(
 	    caption: String,
     }],
     description: {type: String, required: true},
+    note: {type: String},
     tags : [String],
     season : [Number],
     baking: { temperature: {type:String, default: ""},

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

@@ -10,6 +10,7 @@
 	import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
 	import { afterNavigate } from '$app/navigation';
     	import {season} from '$lib/js/season_store';
+	import RecipeNote from '$lib/components/RecipeNote.svelte';
 
     	export let data: PageData;
 
@@ -226,8 +227,10 @@ h4{
 				<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
 			{/each}
 		</div>
-
-	</div>
+		{#if data.note}
+			<RecipeNote note={data.note}></RecipeNote>
+		{/if}
+</div>
 
 <div class=wrapper_wrapper>
 <div class=wrapper>

src/routes/(rezepte)/rezepte/edit/[name]/+page.svelte

@@ -4,11 +4,13 @@
 	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
 	import '$lib/css/action_button.css'
 	import { redirect } from '@sveltejs/kit';
+	import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
 
     	export let data: PageData;
 	let preamble = data.recipe.preamble
 	let addendum = data.recipe.addendum
 	let image_preview_url="https://new.bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp"
+	let note = data.recipe.note
 
 	import { season } from '$lib/js/season_store';
 	import { portions } from '$lib/js/portions_store';
@@ -212,7 +214,8 @@
 					instructions,
 					ingredients,
 					addendum,
-					preamble
+					preamble,
+					note,
 				},
 				old_short_name,
 			headers: {
@@ -347,6 +350,7 @@ button.action_button{
 <div class=tags>
 <h4>Saison:</h4>
 <SeasonSelect></SeasonSelect>
+<EditRecipeNote><p contenteditable bind:innerText={note}></p></EditRecipeNote>
 </div>
 
 </div>