README.md

@@ -1,38 +1,38 @@
-# Personal Homepage
+# create-svelte
 
-My own homepage, bocken.org (new.bocken.org for now), built with svelte-kit.
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
-## TODO
+## Creating a project
-### General
-- [] Admin user management
-- [] upload/change pfp
-- [] registration only with minimal permissions
-- [] logout without /logout page
-- [] no DB request for every Layout change if session already got the username once
-- [] preferences page
-- [] change password
 
-### Rezepte
+If you're seeing this, you've probably already done this step. Congrats!
-- [] nutrition facts
-- [] verify randomize arrays based on day
-- [] notes for next time
 
-### Abrechnungen
+```bash
-- [] DB setup
+# create a new project in the current directory
-- [] create new entries
+npm create svelte@latest
-- [] delete entries
-- [] edit entries
-- [] upload img
 
-### Flims
+# create a new project in my-app
-- [] Calendar layout
+npm create svelte@latest my-app
-- [] DB setup
+```
-- [] create new entries
-- [] delete entries
-- [] edit entries
 
-### Glaube
+## Developing
-- [] just keep it as MD rendering for now?
+
-- [] DB setup
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-- [] Google Speech to Text API integration?
+
-- [] Gebete
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

src/lib/components/EditRecipeNote.svelte

@@ -1,22 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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,8 +44,6 @@ 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;
@@ -83,8 +81,7 @@ input[type=checkbox]::after
 	flex-wrap: wrap;
 	flex-direction: row;
 	justify-content: center;
-	margin-bottom: 1em;
+	gap: min(1rem, 1dvh);
-
 }
 </style>
 

src/models/Recipe.ts

@@ -14,7 +14,6 @@ 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,7 +10,6 @@
 	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;
 
@@ -91,7 +90,7 @@ h1{
 	border-radius: 10000px;
 	padding: 0.25em 1em;
 	transition: 100ms;
-	box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
+	box-shadow: 0.2em 0.2em 0.4em 0.1em rgba(0,0,0,0.3);
 }
 .tag:hover,
 .tag:focus-visible
@@ -99,7 +98,7 @@ h1{
 	cursor: pointer;
 	transform: scale(1.1,1.1);
 	background-color: var(--orange);
-	box-shadow: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
+	box-shadow: 0.1em 0.1em 0.2em 0.2em rgba(0,0,0,0.3);
 }
 
 .wrapper_wrapper{
@@ -227,9 +226,7 @@ h4{
 				<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
 			{/each}
 		</div>
-		{#if data.note}
+
-			<RecipeNote note={data.note}></RecipeNote>
-		{/if}
 	</div>
 
 <div class=wrapper_wrapper>

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

@@ -4,13 +4,11 @@
 	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';
@@ -214,8 +212,7 @@
 					instructions,
 					ingredients,
 					addendum,
-					preamble,
+					preamble
-					note,
 				},
 				old_short_name,
 			headers: {
@@ -350,7 +347,6 @@ button.action_button{
 <div class=tags>
 <h4>Saison:</h4>
 <SeasonSelect></SeasonSelect>
-<EditRecipeNote><p contenteditable bind:innerText={note}></p></EditRecipeNote>
 </div>
 
 </div>