Fix blank white pages by adding Nord theme styling to auth endpoints

- Add Nord theme CSS variables to login and logout pages
- Use --nord1 background and --nord4 text colors to match site theme
- Eliminates jarring white flash during authentication flow
- Maintains professional appearance and brand consistency
- Endpoints now blend seamlessly with site's dark theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.gitea/workflows/upload.yml

@@ -0,0 +1,33 @@
+name: CI
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push to master (including merged PRs)
+  push:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  update:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    - name: Updating website.
+      uses: appleboy/ssh-action@master
+      with:
+        host: bocken.org
+        username: homepage
+        key: ${{ secrets.homepage_ssh }}
+        passphrase: ${{ secrets.homepage_pass }}
+        port: 22
+        script: |
+          cd /usr/share/webapps/homepage
+          git pull --force https://Alexander:${{ secrets.homepage_gitea_token }}@git.bocken.org/Alexander/homepage
+          npm run build
+          sudo systemctl restart homepage.service

README_DEV_AUTH.md

@@ -0,0 +1,88 @@
+# Development Authentication Bypass
+
+This document explains how to safely disable authentication during development.
+
+## 🔐 Security Overview
+
+The authentication bypass is designed with multiple layers of security:
+
+1. **Development Mode Only**: Only works when `vite dev` is running
+2. **Explicit Opt-in**: Requires setting `DEV_DISABLE_AUTH=true` 
+3. **Production Protection**: Build fails if enabled in production mode
+4. **Environment Isolation**: Uses local environment files (gitignored)
+
+## 🚀 Usage
+
+### 1. Create Local Environment File
+
+Create `.env.local` (this file is gitignored):
+
+```bash
+# Copy from example
+cp .env.local.example .env.local
+```
+
+### 2. Enable Development Bypass
+
+Edit `.env.local` and set:
+
+```env
+DEV_DISABLE_AUTH=true
+```
+
+### 3. Start Development Server
+
+```bash
+pnpm run dev
+```
+
+You'll see a warning in the console:
+```
+🚨 AUTH DISABLED: Development mode with DEV_DISABLE_AUTH=true
+```
+
+### 4. Access Protected Routes
+
+Protected routes (`/rezepte/edit/*`, `/rezepte/add`) will now be accessible without authentication.
+
+## 🛡️ Security Guarantees
+
+### Production Safety
+- **Build-time Check**: Production builds fail if `DEV_DISABLE_AUTH=true`
+- **Runtime Check**: Double verification using `dev` flag from `$app/environment`
+- **No Environment Leakage**: Uses `process.env` (server-only) not client environment
+
+### Development Isolation  
+- **Gitignored Files**: `.env.local` is never committed
+- **Example Template**: `.env.local.example` shows safe defaults
+- **Clear Warnings**: Console warns when auth is disabled
+
+## 🧪 Testing the Security
+
+### Test Production Build Safety
+```bash
+# This should FAIL with security error
+DEV_DISABLE_AUTH=true pnpm run build
+```
+
+### Test Normal Production Build
+```bash
+# This should succeed
+pnpm run build
+```
+
+## 🔄 Re-enabling Authentication
+
+Set in `.env.local`:
+```env
+DEV_DISABLE_AUTH=false
+```
+
+Or simply delete/rename the `.env.local` file.
+
+## ⚠️ Important Notes
+
+- **Never** commit `.env.local` to git
+- **Never** set `DEV_DISABLE_AUTH=true` in production environment
+- The bypass provides a mock session with `rezepte_users` group access
+- All other authentication flows (signin pages, etc.) remain unchanged

package.json

@@ -10,22 +10,24 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
+	"packageManager": "pnpm@9.0.0",
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.6",
-		"svelte-preprocess-import-assets": "^1.0.1",
+		"@auth/core": "^0.40.0",
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/kit": "^2.37.0",
+		"@sveltejs/vite-plugin-svelte": "^6.1.3",
+		"@types/node": "^22.12.0",
+		"svelte": "^5.38.6",
+		"svelte-check": "^4.0.0",
 		"tslib": "^2.6.0",
 		"typescript": "^5.1.6",
-		"vite": "^5.0.0"
+		"vite": "^7.1.3"
 	},
 	"dependencies": {
-		"@auth/sveltekit": "^0.12.3",
-		"@sveltejs/adapter-node": "^2.0.0",
+		"@auth/sveltekit": "^1.10.0",
+		"@sveltejs/adapter-node": "^5.0.0",
 		"cheerio": "1.0.0-rc.12",
-		"mongoose": "^7.4.0",
-		"sharp": "^0.32.3"
+		"mongoose": "^8.0.0",
+		"sharp": "^0.33.0"
 	}
 }

src/app.d.ts

@@ -1,12 +1,28 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+import type { Session } from "@auth/sveltekit";
+
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			auth(): Promise<Session | null>;
+		}
 		// interface PageData {}
 		// interface Platform {}
 	}
 }
 
+declare module "@auth/sveltekit" {
+	interface Session {
+		user?: {
+			name?: string | null;
+			email?: string | null;
+			image?: string | null;
+			nickname?: string;
+			groups?: string[];
+		};
+	}
+}
+
 export {};

src/auth.ts

@@ -20,8 +20,8 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
 			return token;
 		},
 		session: async ({session, token}) => {
-			session.user.nickname = token.nickname;
-			session.user.groups = token.groups;
+			session.user.nickname = token.nickname as string;
+			session.user.groups = token.groups as string[];
 			return session;
 		},
 

src/hooks.server.ts

@@ -10,9 +10,11 @@ import * as auth from "./auth"
 async function authorization({ event, resolve }) {
 	// Protect any routes under /authenticated
 	if (event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')) {
-   const session = await event.locals.getSession();
+   const session = await event.locals.auth();
 		if (!session) {
-			redirect(303, '/auth/signin');
+			// Preserve the original URL the user was trying to access
+			const callbackUrl = encodeURIComponent(event.url.pathname + event.url.search);
+			redirect(303, `/login?callbackUrl=${callbackUrl}`);
 		}
 		else if (! session.user.groups.includes('rezepte_users')) {
 			// strip last dir from url

src/lib/components/.jukit/.jukit_info.json

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

src/lib/components/Card.svelte

@@ -7,6 +7,11 @@ import "$lib/css/nordtheme.css";
 import "$lib/css/shake.css";
 import "$lib/css/icon.css";
 export let do_margin_right = false;
+// to manually override lazy loading for top cards
+export let loading_strat : "lazy" | "eager" | undefined;
+if(loading_strat === undefined){
+	loading_strat = "lazy"
+}
 
 if(icon_override){
 	current_month = recipe.season[0]
@@ -45,6 +50,27 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	background-color:  var(--blue);
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
 }
+.icon{
+	font-family: "Noto Color Emoji", emoji, sans-serif;
+	border: none;
+	background: none;
+	cursor: pointer;
+	position: absolute;
+	top: -25px;
+	right: -25px;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: var(--nord0);
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5em;
+	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
+	transition: 100ms;
+	z-index: 10;
+}
 #image{
 	width: 300px;
 	height: 255px;
@@ -127,6 +153,7 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	margin-bottom: 0.5em;
 	transition: 100ms;
 	box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
+	border: none;
 }
 .tag:hover,
 .tag:focus-visible
@@ -151,7 +178,8 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	padding-inline: 1em;
 	border-radius: 1000px;
 	transition: 100ms;
-
+	border: none;
+	cursor: pointer;
 }
 .card_title .category:hover,
 .card_title .category:focus-within
@@ -164,6 +192,18 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	scale: 0.9 0.9;
 }
 
+.icon:hover,
+.icon:focus-visible
+{
+	transform: scale(1.1, 1.1);
+	background-color: var(--nord3);
+	box-shadow: 0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.8);
+}
+
+.icon:focus {
+	transform: scale(0.9, 0.9);
+}
+
 .card:hover .icon,
 .card:focus-visible .icon
 {
@@ -179,23 +219,23 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	<div class=div_div_image >
 		<div class=div_image style="background-image:url(https://bocken.org/static/rezepte/placeholder/{img_name})">
 			<noscript>
-				<img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading=lazy  alt="{recipe.alt}"/>
+				<img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{recipe.alt}"/>
 			</noscript>
-			<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}" on:load={() => isloaded=true}/>
+			<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading={loading_strat} alt="{recipe.alt}" on:load={() => isloaded=true}/>
 		</div>
 	</div>
 	{#if icon_override || recipe.season.includes(current_month)}
-		<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
+		<button class=icon on:click={(e) => {e.stopPropagation(); window.location.href = `/rezepte/icon/${recipe.icon}`}}>{recipe.icon}</button>
 	{/if}
 	<div class="card_title">
-		<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
+		<button class=category on:click={(e) => {e.stopPropagation(); window.location.href = `/rezepte/category/${recipe.category}`}}>{recipe.category}</button>
 		<div>
 			<div class=name>{@html recipe.name}</div>
-			<div class=description>{recipe.description}</div>
+			<div class=description>{@html recipe.description}</div>
 		</div>
 		<div class=tags>
 		{#each recipe.tags as tag}
-			<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
+			<button class=tag on:click={(e) => {e.stopPropagation(); window.location.href = `/rezepte/tag/${tag}`}}>{tag}</button>
 		{/each}
 		</div>
 	</div>

src/lib/components/CreateIngredientList.svelte

@@ -413,7 +413,7 @@ h3{
 }
 </style>
 
-<div class=list_wrapper>
+<div class=list_wrapper >
 <h4>Portionen:</h4>
 <p contenteditable type="text" bind:innerText={portions_local} on:blur={set_portions}></p>
 
@@ -455,9 +455,13 @@ h3{
 			</button>
 		</div>
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}</div>
+		<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >
+			{ingredient.amount} {ingredient.unit}
+		</div>
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class=force_wrap on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.name}</div>
+		<div class=force_wrap on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >
+			{@html ingredient.name}
+		</div>
 		<div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
 			<Pen fill=var(--nord1) height=1em width=1em></Pen></button>
 			<button class="action_button button_subtle" on:click="{() => remove_ingredient(list_index, ingredient_index)}"><Cross fill=var(--nord1) height=1em width=1em></Cross></button></div>

src/lib/components/CreateStepList.svelte

@@ -509,7 +509,9 @@ h3{
 				</button>
 			</div>
 			<div>
-				<div on:click={() => show_modal_edit_step(list_index, step_index)}>{step}</div>
+				<div on:click={() => show_modal_edit_step(list_index, step_index)}>
+					{@html step}
+				</div>
 			<div><button class="action_button button_subtle" on:click={() => show_modal_edit_step(list_index, step_index)}>
 				<Pen fill=var(--nord1)></Pen>
 		</button>

src/lib/components/Header.svelte

@@ -29,6 +29,7 @@ nav{
 	justify-content: space-between !important;
 	align-items: center;
 	box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
+	height: 4rem;
 }
 nav[hidden]{
 	display:block;
@@ -80,16 +81,16 @@ nav[hidden]{
 	padding-inline: 0.5rem;
 }
 :global(svg.symbol){
-	height: 3.5rem;
-	width: 3.5rem;
+	height: 4rem;
+	width: 4rem;
 	border-radius: 10000px;
 }
-:global(a:has(svg.symbol)){
+/*:global(a:has(svg.symbol)){
 	padding: 0 !important;
-	width: 3.5rem;
-	height: 3.5rem;
+	width: 4rem;
+	height: 4rem;
 	margin-left: 1rem;
-}
+}*/
 .wrapper{
 	display:flex;
 	flex-direction: column;
@@ -110,7 +111,7 @@ footer{
 		position: sticky;
 		background-color: var(--nord0);
 		width: 100%;
-		height: 3rem;
+		height: 4rem;
 		top: 0;
 		z-index: 9999;
 	}
@@ -119,8 +120,8 @@ footer{
 		background-color: unset;
 		display: block;
 		fill: white;
-		margin-inline: 1rem;
-		width: 2.5rem;
+		margin-inline: 0.5rem;
+		width: 2rem;
 		aspect-ratio: 1;
 	}
 	.nav_button svg{

src/lib/components/HefeSwapper.svelte

@@ -0,0 +1,34 @@
+<script>
+	// get ingredients_store from IngredientsPage.svelte
+	import ingredients_store from './IngredientsPage.svelte';
+	let ingredients = [];
+	ingredients_store.subscribe(value => {
+		ingredients = value;
+	});
+	function toggleHefe(){
+		if(data.ingredients[i].list[j].name == "Frischhefe"){
+			data.ingredients[i].list[j].name = "Trockenhefe"
+			data.ingredients[i].list[j].amount = item.amount / 3
+		}
+		else{
+			item.name = "Frischhefe"
+			item.amount = item.amount * 3
+		}
+	}
+</script>
+<style>
+	button{
+		background: none;
+		border: none;
+		cursor: pointer;
+	}
+	svg{
+		width: 1.1em;
+		height: 1.1em;
+		fill: var(--blue);
+	}
+</style>
+<button onclick={toggleHefe}>
+	{item.amount} {item.unit} {item.name}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
+</button>

src/lib/components/Icon.svelte

@@ -5,6 +5,7 @@
 </script>
 <style>
 	a{
+		font-family: "Noto Color Emoji", emoji;
 		font-size: 2rem;
 		text-decoration: none;
 		padding: 0.5em;

src/lib/components/IconLayout.svelte

@@ -8,6 +8,7 @@
 
 <style>
 	a{
+		font-family: "Noto Color Emoji", emoji, sans-serif;
 		font-size: 2rem;
 		text-decoration: none;
 		padding: 0.5em;

src/lib/components/IngredientsPage.svelte

@@ -1,7 +1,8 @@
 <script>
 import { onMount } from 'svelte';
+import { onNavigate } from "$app/navigation";
 export let data
-let multiplier = 1
+let multiplier;
 let custom_mul = "…"
 
 onMount(() => {
@@ -9,6 +10,10 @@ onMount(() => {
 	const urlParams = new URLSearchParams(window.location.search);
 	multiplier = urlParams.get('multiplier') || 1;
 })
+onNavigate(() => {
+	const urlParams = new URLSearchParams(window.location.search);
+	multiplier = urlParams.get('multiplier') || 1;
+})
 
 function convertFloatsToFractions(inputString) {
   // Split the input string into individual words
@@ -227,7 +232,7 @@ span
 {/if}
 <div class=ingredients_grid>
 	{#each list.list as item}
-		<div class=amount>{@html adjust_amount(item.amount, multiplier)} {item.unit}</div><div class=name>{@html item.name.replace("{{multiplier}}", multiplier)}</div>
+		<div class=amount>{@html adjust_amount(item.amount, multiplier)} {item.unit}</div><div class=name>{@html item.name.replace("{{multiplier}}", multiplier * item.amount)}</div>
 	{/each}
 </div>
 {/each}

src/lib/components/Symbol.svelte

@@ -7,6 +7,7 @@
 	}
 	svg{
 		transition: 100ms;
+		height: 3em;
 	}
 	svg:hover,
 	svg:focus-visible
@@ -29,14 +30,9 @@
 </style>
 
 <svg
-   width="calc(45.742325px/ 1.3)"
-   height="calc(80.310539px / 1.3)"
    viewBox="0 0 45.742326 80.310541"
    version="1.1"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
+   xmlns="http://www.w3.org/2000/svg">
   <g class=stroke
      id="branches"
      transform="translate(-42.033271,-37.145192)" >

src/lib/components/UserHeader.svelte

@@ -139,10 +139,10 @@ h2 + p{
 			<p>({user.nickname})</p>
 			<ul>
 				<li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li>
-				<li><a href="/auth/signout" >Log Out</a></li>
+				<li><a href="/logout" >Log Out</a></li>
 			</ul>
 		</div>
 	</button>
 {:else}
-	<a class=entry href=/auth/signin>Log In</a>
+	<a class=entry href=/login>Log In</a>
 {/if}

src/lib/db/db.ts

@@ -0,0 +1,44 @@
+import mongoose from 'mongoose';
+
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost:27017/recipes';
+
+if (!MONGODB_URI) {
+  throw new Error('Please define the MONGODB_URI environment variable inside .env.local');
+}
+
+/**
+ * Global is used here to maintain a cached connection across hot reloads
+ * in development. This prevents connections growing exponentially
+ * during API Route usage.
+ */
+let cached = (global as any).mongoose;
+
+if (!cached) {
+  cached = (global as any).mongoose = { conn: null, promise: null };
+}
+
+export async function dbConnect() {
+  if (cached.conn) {
+    return cached.conn;
+  }
+
+  if (!cached.promise) {
+    const opts = {
+      bufferCommands: false,
+    };
+
+    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+      return mongoose;
+    });
+  }
+  cached.conn = await cached.promise;
+  return cached.conn;
+}
+
+export async function dbDisconnect() {
+  if (cached.conn) {
+    await cached.conn.disconnect();
+    cached.conn = null;
+    cached.promise = null;
+  }
+}

src/lib/js/randomize.js

@@ -1,6 +1,4 @@
-const time = new Date()
 const MS_PER_DAY = 86400000
-let seed = Math.floor(time.getTime()/MS_PER_DAY)
 function mulberry32(a) {
 	return function() {
 	  var t = a += 0x6D2B79F5;
@@ -11,6 +9,8 @@ function mulberry32(a) {
 }
 
 export function rand_array(array){
+	let time = new Date()
+	const seed = Math.floor(time.getTime()/MS_PER_DAY)
 	let rand = mulberry32(seed)
 	array.sort((a,b) => 0.5 - rand())
 	return array

src/lib/models/Payment.ts

@@ -0,0 +1,14 @@
+import mongoose from 'mongoose';
+
+const paymentSchema = new mongoose.Schema({
+  paid_by: { type: String, required: true },
+  total_amount: { type: Number, required: true },
+  for_self: { type: Number, default: 0 },
+  for_other: { type: Number, default: 0 },
+  currency: { type: String, default: 'CHF' },
+  description: String,
+  date: { type: Date, default: Date.now },
+  receipt_image: String
+});
+
+export const Payment = mongoose.models.Payment || mongoose.model('Payment', paymentSchema);

src/routes/(main)/+layout.server.ts

@@ -1,8 +1,6 @@
-import { get_username } from '$lib/js/get_username';;
-import type { Actions, PageServerLoad } from "./$types"
-import { error } from "@sveltejs/kit"
+import type { LayoutServerLoad } from "./$types"
 
-export const load = (async ({cookies, locals}) => {
+export const load : LayoutServerLoad = (async ({locals}) => {
 	return {
 		session: await locals.auth(),
 	}

src/routes/(main)/+page.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import "$lib/css/nordtheme.css";
 	import LinksGrid from "$lib/components/LinksGrid.svelte";
 	export let data;
-	import { page } from "$app/stores"
 </script>
 <style>
 .hero{
@@ -68,7 +67,7 @@ section h2{
 	Alles ist selbst gehostet bei mir daheim auf einem kleinen Mini-Server (Arch, btw).
 </p>
 <p>
-	Zu empfeheln ist meine stetig wachsende Rezeptsammlung. Dort findest du viele leckere Rezepte, die ich selbst ausprobiert habe und ständig weiterfeilsche.
+	Zu empfehlen ist meine stetig wachsende Rezeptsammlung. Dort findest du viele leckere Rezepte, die ich selbst ausprobiert habe und ständig weiterfeilsche.
 	Zudem kannst du gerne meine Suchmaschine oder auch Jitsi-instanz für Videokonferenzen nutzen.
 	Einiges ist hinter einem Login versteckt, anderes ist öffentlich zugänglich.
 	Wer sich ein bisschen mit Programmieren auskennt, kann auch gerne in meinen Git-Repositories stöbern.
@@ -132,5 +131,27 @@ section h2{
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
 		<h3>Transmission</h3>
 	</a>
+	<!-- instead of redirect_to_docs(), use a normal link with internal checks for data.session -->
+	{#if !data.session}
+		<a href="/auth/signin">
+			<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m106 512h300c24.814 0 45-20.186 45-45v-317h-105c-24.814 0-45-20.186-45-45v-105h-195c-24.814 0-45 20.186-45 45v422c0 24.814 20.186 45 45 45zm60-301h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h120c8.291 0 15 6.709 15 15s-6.709 15-15 15h-120c-8.291 0-15-6.709-15-15s6.709-15 15-15z"/><path d="m346 120h96.211l-111.211-111.211v96.211c0 8.276 6.724 15 15 15z"/></svg>
+			<h3>Dokumente</h3>
+		</a>
+	{:else if data.session.user.groups.includes("paperless_users")}
+		<a href="https://docs.bocken.org">
+			<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m106 512h300c24.814 0 45-20.186 45-45v-317h-105c-24.814 0-45-20.186-45-45v-105h-195c-24.814 0-45 20.186-45 45v422c0 24.814 20.186 45 45 45zm60-301h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h120c8.291 0 15 6.709 15 15s-6.709 15-15 15h-120c-8.291 0-15-6.709-15-15s6.709-15 15-15z"/><path d="m346 120h96.211l-111.211-111.211v96.211c0 8.276 6.724 15 15 15z"/></svg>
+			<h3>Dokumente</h3>
+		</a>
+	{:else if data.session.user.groups.includes("paperless_eltern_users")}
+		<a href="https://dokumente.bocken.org">
+			<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m106 512h300c24.814 0 45-20.186 45-45v-317h-105c-24.814 0-45-20.186-45-45v-105h-195c-24.814 0-45 20.186-45 45v422c0 24.814 20.186 45 45 45zm60-301h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h120c8.291 0 15 6.709 15 15s-6.709 15-15 15h-120c-8.291 0-15-6.709-15-15s6.709-15 15-15z"/><path d="m346 120h96.211l-111.211-111.211v96.211c0 8.276 6.724 15 15 15z"/></svg>
+			<h3>Dokumente</h3>
+		</a>
+	{/if}
+
+	<a href=https://audio.bocken.org>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48l0 128c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80l0-16 0-48 0-48C0 146.6 114.6 32 256 32s256 114.6 256 256l0 48 0 48 0 16c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48l0-128c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z"/></svg>
+		<h3>Hörbücher & Podcasts</h3>
+	</a>
 </LinksGrid>
 </section>

src/routes/api/cospend/add/+server.ts

@@ -0,0 +1,119 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import fs from 'fs';
+import path from 'path';
+import { mkdir } from 'fs/promises';
+import { Payment } from '$lib/models/Payment'; // adjust path as needed
+import { dbConnect, dbDisconnect } from '$lib/db/db';
+import { error } from '@sveltejs/kit';
+
+const UPLOAD_DIR = './static/cospend';
+const BASE_CURRENCY = 'CHF'; // Default currency
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+   let auth =  await locals.auth();
+   if(!auth){
+   	throw error(401, "Not logged in")
+   }
+
+  const formData = await request.formData();
+
+  try {
+    const name = formData.get('name') as string;
+    const category = formData.get('category') as string;
+    const transaction_date= new Date(formData.get('transaction_date') as string);
+    const description = formData.get('description') as string;
+    const note = formData.get('note') as string;
+    const tags = JSON.parse(formData.get('tags') as string) as string[];
+    const paid_by = formData.get('paid_by') as string
+    const type = formData.get('type') as string
+
+    let currency = formData.get('currency') as string;
+    let original_amount = parseFloat(formData.get('original_amount') as string);
+    let total_amount = NaN;
+
+    let for_self = parseFloat(formData.get('for_self') as string);
+    let for_other = parseFloat(formData.get('for_other') as string);
+    let conversion_rate = 1.0; // Default conversion rate
+
+    // if currency is not BASE_CURRENCY, fetch current conversion rate using frankfurter API and date in YYYY-MM-DD format
+    if (!currency || currency === BASE_CURRENCY) {
+        currency = BASE_CURRENCY;
+    	total_amount = original_amount;
+    } else {
+	console.log(transaction_date);
+        const date_fmt = transaction_date.toISOString().split('T')[0]; // Convert date to YYYY-MM-DD format
+        // Fetch conversion rate logic here (not implemented in this example)
+	console.log(`Fetching conversion rate for ${currency} to ${BASE_CURRENCY} on ${date_fmt}`);
+        const res = await fetch(`https://api.frankfurter.app/${date_fmt}?from=${currency}&to=${BASE_CURRENCY}`)
+	console.log(res);
+	const result = await res.json();
+	console.log(result);
+	if (!result || !result.rates[BASE_CURRENCY]) {
+	    return new Response(JSON.stringify({ message: 'Currency conversion failed.' }), { status: 400 });
+	}
+	// Assuming you want to convert the total amount to BASE_CURRENCY
+	conversion_rate = parseFloat(result.rates[BASE_CURRENCY]);
+	console.log(`Conversion rate from ${currency} to ${BASE_CURRENCY} on ${date_fmt}: ${conversion_rate}`);
+	total_amount = original_amount * conversion_rate;
+	for_self = for_self * conversion_rate;
+	for_other = for_other * conversion_rate;
+    }
+
+    //const personal_amounts = JSON.parse(formData.get('personal_amounts') as string) as { user: string, amount: number }[];
+
+    if (!name || isNaN(total_amount)) {
+      return new Response(JSON.stringify({ message: 'Invalid required fields.' }), { status: 400 });
+    }
+
+    await mkdir(UPLOAD_DIR, { recursive: true });
+
+    const images: { mediapath: string }[] = [];
+    const imageFiles = formData.getAll('images') as File[];
+
+    for (const file of imageFiles) {
+      const arrayBuffer = await file.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
+      const safeName = `${Date.now()}_${file.name.replace(/[^a-zA-Z0-9_.-]/g, '_')}`;
+      const fullPath = path.join(UPLOAD_DIR, safeName);
+      fs.writeFileSync(fullPath, buffer);
+      images.push({ mediapath: `/static/test/${safeName}` });
+    }
+
+    await dbConnect();
+    const payment = new Payment({
+      type,
+      name,
+      category,
+      transaction_date,
+      images,
+      description,
+      note,
+      tags,
+      original_amount,
+      total_amount,
+      paid_by,
+      for_self,
+      for_other,
+      conversion_rate,
+      currency,
+    });
+
+
+
+
+
+
+
+    try{
+    	await Payment.create(payment);
+    } catch(e){
+
+	    return new Response(JSON.stringify({ message: `Error creating payment event. ${e}` }), { status: 500 });
+    }
+    await dbDisconnect();
+    return new Response(JSON.stringify({ message: 'Payment event created successfully.' }), { status: 201 });
+  } catch (err) {
+    console.error(err);
+    return new Response(JSON.stringify({ message: 'Error processing request.' }), { status: 500 });
+  }
+};

src/routes/api/cospend/balance/+server.ts

@@ -0,0 +1,38 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
+import { Payment } from '$lib/models/Payment'; // adjust path as needed
+import { dbConnect, dbDisconnect } from '$lib/db/db';
+
+const UPLOAD_DIR = '/var/lib/www/static/test';
+const BASE_CURRENCY = 'CHF'; // Default currency
+
+export const GET: RequestHandler = async ({ request, locals }) => {
+    await dbConnect();
+
+    const result = await Payment.aggregate([
+  {
+    $group: {
+      _id: "$paid_by",
+      totalPaid: { $sum: "$total_amount" },
+      totalForSelf: { $sum: { $ifNull: ["$for_self", 0] } },
+      totalForOther: { $sum: { $ifNull: ["$for_other", 0] } }
+    }
+  },
+  {
+    $project: {
+      _id: 0,
+      paid_by: "$_id",
+      netTotal: {
+	$multiply: [
+		{ $add: [
+          { $subtract: ["$totalPaid", "$totalForSelf"] },
+	  "$totalForOther"
+        ] },
+	0.5]
+      }
+    }
+  }
+]);
+    await dbDisconnect();
+    return json(result);
+};

src/routes/api/cospend/page/[pageno]/+server.ts

@@ -0,0 +1,20 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { Payment } from '$lib/models/Payment';
+import { dbConnect, dbDisconnect } from '$lib/db/db';
+import { error } from '@sveltejs/kit';
+
+export const GET: RequestHandler = async ({params}) => {
+  await dbConnect();
+  const number_payments = 10;
+  const number_skip = params.pageno ? (parseInt(params.pageno) - 1 ) * number_payments : 0;
+  let payments = await Payment.find()
+  .sort({ transaction_date: -1 })
+  .skip(number_skip)
+  .limit(number_payments);
+  await dbDisconnect();
+
+  if(payments == null){
+	throw error(404, "No more payments found");
+  }
+  return json(payments);
+};

src/routes/api/user/admin/users/+server.ts

@@ -1,23 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import { error } from '@sveltejs/kit';
-
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
-import { User } from '../../../../../models/User';
-import { get_username } from '$lib/js/get_username';
-
-// header: use for bearer token for now
-// recipe json in body
-export const POST: RequestHandler = async ({cookies}) => {
-	const requesting_user = await get_username(cookies)
-	await dbConnect()
-	let res = await User.findOne({username: requesting_user}, 'access').lean()
-	if(!res.access.contains("admin")){
-		await dbDisconnect()
-		throw error(401, {message: "Your user does not have the permissions to do this"})
-	}
-	else{
-		let res = await User.find({}, 'username access').lean()
-		await dbDisconnect()
-		return { res }
-	}
-};

src/routes/api/user/change_pw/+server.ts

@@ -1,36 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import { error } from '@sveltejs/kit';
-import { verify }  from 'argon2';
-import { hashPassword } from '$lib/js/hashPassword'
-import {randomBytes} from 'crypto'
-
-import { PEPPER } from '$env/static/private';
-
-import { User } from '../../../../models/User';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
-
-// header: use for bearer token for now
-// recipe json in body
-export const POST: RequestHandler = async ({request}) => {
-	const {username, old_password, new_password, new_password_rep} = await request.json()
-  if(new_password != new_password_rep){
-    throw error(400, 'new passwords do not match!')
-  }
-	await dbConnect();
-	const user = await User.findOne({username: username});
-  console.log("Found user:", user)
-  const isMatch = await verify(user.pass_hash, old_password + PEPPER, {salt: user.salt})
-  console.log("isMatch:", isMatch)
-  if(isMatch){
-		const salt = randomBytes(32).toString('hex'); // Generate a random salt
-    const pass_hash = await hashPassword(new_password + PEPPER, salt)
-    await User.findOneAndUpdate({username: username}, {pass_hash: pass_hash, salt: salt})
-    await dbDisconnect()
-	  return new Response(JSON.stringify({message: "Password updated successfully"}),
-                        {status: 200})
-  }
-  else{
-	  await dbDisconnect();
-    throw error(401, "Wrong old password")
-	}
-};

src/routes/api/user/login/+server.ts

@@ -1,46 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import { error } from '@sveltejs/kit';
-import pkg from 'jsonwebtoken';
-const { sign } = pkg;
-import { verify} from 'argon2';
-import { COOKIE_SECRET } from '$env/static/private'
-import { PEPPER } from '$env/static/private'
-
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
-import { User } from '../../../../models/User';
-
-// header: use for bearer token for now
-// recipe json in body
-export const POST: RequestHandler = async ({request}) => {
-	const {username, password} = await request.json()
-	await dbConnect()
-	let res = await User.findOne({username: username}, 'pass_hash salt').lean()
-	await dbDisconnect()
-	if(!res){
-		console.log("NOT FOUND")
-		throw error(401, {message: "wrong password or user does not exist"})
-	}
-
-	const stored_pw = res.pass_hash
-	const salt = res.salt
-
-	const isMatch = await verify(stored_pw, password + PEPPER, {salt})
-	if(!isMatch){
-		throw error(401, {message: "wrong password or user does not exist"})
-	}
-
-	res = await createJWT(username)
-	return new Response(JSON.stringify(res))
-};
-
-async function createJWT(username) {
-	const payload = {
-  	  username: username,
-  	};
-
-  	const masterSecret = COOKIE_SECRET;
-  	const secretKey = masterSecret;
-  	const jwt = sign(payload, secretKey);
-	console.log(jwt)
-  	return jwt
-}

src/routes/api/user/register/+server.ts

@@ -1,41 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import { error } from '@sveltejs/kit';
-import { randomBytes } from 'crypto';
-import { ALLOW_REGISTRATION } from '$env/static/private';
-import { PEPPER } from '$env/static/private';
-import {hashPassword} from '$lib/js/hashPassword'
-
-import { User } from '../../../../models/User';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
-
-// header: use for bearer token for now
-// recipe json in body
-export const POST: RequestHandler = async ({request}) => {
-	if(ALLOW_REGISTRATION){
-		const {username, password} = await request.json()
-		const salt = randomBytes(32).toString('hex'); // Generate a random salt
-
-		const pass_hash =  await hashPassword(password + PEPPER, salt)
-		await dbConnect();
-		try{
-			await User.create({
-					username: username,
-					pass_hash: pass_hash,
-					salt: salt,
-					access: [],
-			})
-		}catch(e){
-			await dbDisconnect();
-			throw error(400, e);
-		}
-		await dbDisconnect();
-		return new Response(JSON.stringify({message: "User added successfully"}),
-				    	{status: 200}
-			);
-	}
-	else{
-		throw error(401, "user registration currently closed")
-	}
-
-
-};

src/routes/cospend/+page.ts

@@ -0,0 +1,18 @@
+import { error } from "@sveltejs/kit";
+
+export async function load({ fetch, params}) {
+    let balance_res = await fetch(`/api/cospend/balance`);
+    if (!balance_res.ok) {
+	throw error(balance_res.status, `Failed to fetch balance`);
+    }
+    let balance = await balance_res.json();
+    const items_res = await fetch(`/api/cospend/page/1`);
+    if (!items_res.ok) {
+	throw error(items_res.status, `Failed to fetch items`);
+    }
+    let items = await items_res.json();
+    return {
+	    balance,
+	    items
+    };
+}

src/routes/glaube/+layout.server.ts

@@ -1,7 +1,7 @@
-import { get_username } from '$lib/js/get_username';;
-import type { Actions, PageServerLoad } from "./$types"
-import { error } from "@sveltejs/kit"
+import type { LayoutServerLoad } from "./$types"
 
-export const load = (async ({cookies}) => {
-	return { user: await get_username(cookies) }
+export const load : LayoutServerLoad = (async ({locals}) => {
+	return {
+		session: await locals.auth(),
+	}
 });

src/routes/glaube/+layout.svelte

@@ -2,10 +2,6 @@
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
 export let data
-let username = ""
-if(data.user){
-	username = data.user.username
-}
 </script>
 <Header>
 	<ul class=site_header slot=links>
@@ -13,6 +9,6 @@ if(data.user){
 	<li><a href="/glaube/rosenkranz">Rosenkranz</a></li>
 	<li><a href="/glaube/predigten">Predigten</a></li>
 	</ul>
-	<UserHeader {username} slot=right_side></UserHeader>
+	<UserHeader user={data.session?.user} slot=right_side></UserHeader>
 	<slot></slot>
 </Header>

src/routes/glaube/+page.svelte

@@ -70,6 +70,6 @@
 			<path d="m377.943 50.035v-35.035c0-8.284-6.716-15-15-15h-76.926c-11.523 0-22.046 4.357-30.017 11.505-7.971-7.148-18.494-11.505-30.018-11.505h-76.926c-8.284 0-15 6.716-15 15v35.035z"/>
 			</g>
 		</svg>
-	<h3>Predigten<h3>
+	<h3>Predigten</h3>
 	</a>
 </LinksGrid>

src/routes/glaube/rosenkranz/+page.svelte

@@ -463,19 +463,19 @@ Der unten abgebildete Rosenkranz zeigt die aktuellen Gehmeinisse des Tages nach
 			</g>
 			<g id=lbead5>
 				<circle class=lbead />
-				<circle class=hitbox onclick="" />
+				<circle class=hitbox onclick="{true}" />
 			</g>
 			<g id=lbead4>
 				<circle class=lbead />
-				<circle class=hitbox onclick="" />
+				<circle class=hitbox onclick="{true}" />
 			</g>
 			<g id=lbead3>
 				<circle class=lbead />
-				<circle class=hitbox onclick="" />
+				<circle class=hitbox onclick="{true}" />
 			</g>
 			<g id=lbead6>
 				<circle class=lbead />
-				<circle class=hitbox onclick="" />
+				<circle class=hitbox onclick="{true}" />
 			</g>
 		</g>
 		<g class=beforedecades>
@@ -490,11 +490,11 @@ Der unten abgebildete Rosenkranz zeigt die aktuellen Gehmeinisse des Tages nach
 			</g>
 			<g id=lbead1>
 				<circle class=lbead />
-				<circle class=hitbox onclick="" />
+				<circle class=hitbox onclick="{true}" />
 			</g>
 			<g id=lbead2>
 				<circle class=lbead />
-				<circle class=hitbox onclick="" />
+				<circle class=hitbox onclick="{true}" />
 			</g>
 		</g>
 	</g>
@@ -511,7 +511,7 @@ Dieser Plan ist wie folgt:
 <div class=table >
 <table>
 	<tbody>
-	<thead>
+	<tr>
 		<td>Mo</td>
 		<td>Di</td>
 		<td>Mi</td>
@@ -519,7 +519,7 @@ Dieser Plan ist wie folgt:
 		<td>Fr</td>
 		<td>Sa</td>
 		<td>So</td>
-	</thead>
+	</tr>
 	<tr>
 		<td>freudenreich</td>
 		<td>schmerzhaft</td>
@@ -546,7 +546,7 @@ Der Plan ohne lichtreiche Geheimnisse ist wie folgt:
 <div class=table>
 <table>
 	<tbody>
-	<thead>
+	<tr>
 		<td>Mo</td>
 		<td>Di</td>
 		<td>Mi</td>
@@ -554,7 +554,7 @@ Der Plan ohne lichtreiche Geheimnisse ist wie folgt:
 		<td>Fr</td>
 		<td>Sa</td>
 		<td>So</td>
-	</thead>
+	</tr>
 	<tr>
 		<td>freudenreich</td>
 		<td>schmerzhaft</td>

src/routes/login/+server.ts

@@ -0,0 +1,44 @@
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ url }) => {
+	const callbackUrl = url.searchParams.get('callbackUrl') || '/';
+	
+	// Create a minimal page with site styling that immediately triggers auth
+	const html = `
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Login</title>
+	<style>
+		:root{
+			--nord0: #2E3440;
+			--nord1: #3B4252;
+			--nord4: #D8DEE9;
+		}
+		body {
+			background-color: var(--nord1);
+			color: var(--nord4);
+			font-family: sans-serif;
+			margin: 0;
+			padding: 0;
+			min-height: 100vh;
+		}
+	</style>
+</head>
+<body>
+	<form id="signin-form" method="POST" action="/auth/signin/authentik">
+		<input type="hidden" name="callbackUrl" value="${callbackUrl}" />
+	</form>
+	<script>
+		// Immediately submit the form to trigger auth flow
+		document.getElementById('signin-form').submit();
+	</script>
+</body>
+</html>`;
+
+	return new Response(html, {
+		headers: {
+			'Content-Type': 'text/html'
+		}
+	});
+};

src/routes/logout/+server.ts

@@ -0,0 +1,44 @@
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ url }) => {
+	const callbackUrl = url.searchParams.get('callbackUrl') || '/';
+	
+	// Create a minimal page with site styling that immediately triggers logout
+	const html = `
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Logout</title>
+	<style>
+		:root{
+			--nord0: #2E3440;
+			--nord1: #3B4252;
+			--nord4: #D8DEE9;
+		}
+		body {
+			background-color: var(--nord1);
+			color: var(--nord4);
+			font-family: sans-serif;
+			margin: 0;
+			padding: 0;
+			min-height: 100vh;
+		}
+	</style>
+</head>
+<body>
+	<form id="signout-form" method="POST" action="/auth/signout">
+		<input type="hidden" name="callbackUrl" value="${callbackUrl}" />
+	</form>
+	<script>
+		// Immediately submit the form to trigger logout flow
+		document.getElementById('signout-form').submit();
+	</script>
+</body>
+</html>`;
+
+	return new Response(html, {
+		headers: {
+			'Content-Type': 'text/html'
+		}
+	});
+};

src/routes/rezepte/+layout.server.ts

@@ -1,7 +1,6 @@
-import type { PageServerLoad } from "./$types"
-import { error } from "@sveltejs/kit"
+import type { LayoutServerLoad } from "./$types"
 
-export const load : PageServerLoad = async ({locals}) => {
+export const load : LayoutServerLoad = async ({locals}) => {
 	return {
 		session: await locals.auth()
 	}

src/routes/rezepte/+layout.svelte

@@ -15,6 +15,7 @@ if(data.session){
 	<li><a href="/rezepte/category">Kategorie</a></li>
 	<li><a href="/rezepte/icon">Icon</a></li>
 	<li><a href="/rezepte/tag">Stichwörter</a></li>
+	<li><a href="/rezepte/tips-and-tricks">Tipps</a></li>
 	</ul>
 	<UserHeader slot=right_side {user}></UserHeader>
 	<slot></slot>

src/routes/rezepte/+page.svelte

@@ -6,7 +6,7 @@
     	import Search from '$lib/components/Search.svelte';
     	export let data: PageData;
     	export let current_month = new Date().getMonth() + 1
-	const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Frühstück", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Unterwegs"]
+	const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Frühstück", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Snack"]
 </script>
 <style>
 h1{
@@ -36,7 +36,7 @@ h1{
 
 <MediaScroller title="In Saison">
 {#each data.season as recipe}
-	<Card {recipe} {current_month} do_margin_right={true}></Card>
+	<Card {recipe} {current_month} loading_strat={"eager"} do_margin_right={true}></Card>
 {/each}
 </MediaScroller>
 

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

@@ -185,6 +185,7 @@ h1{
 }
 
 .icon{
+	font-family: "Noto Color Emoji", emoji;
 	position: absolute;
 	top: -1em;
 	right: -0.75em;
@@ -292,7 +293,9 @@ h4{
 			<h4>Saison:</h4>
 			{#each season_iv as season}
 				<a class=tag href="/rezepte/season/{season[0]}">
-					{months[season[0] - 1]}
+					{#if season[0]}
+						{months[season[0] - 1]}
+					{/if}
 					{#if season[1]}
 						- {months[season[1] - 1]}
 					{/if}

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

@@ -1,5 +1,6 @@
 export async function load({locals}) {
+    const session = await locals.auth();
     return {
-	user: locals.user
+	user: session?.user
     };
 };

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

@@ -85,7 +85,7 @@
 		console.log(img_local)
         	const data = {
 			image: img_local,
-			name: short_name,
+			name: short_name.trim(),
 		}
         	await fetch(`/api/rezepte/img/add`, {
         	    method: 'POST',
@@ -108,9 +108,9 @@
 				recipe: {
 					...card_data,
 					...add_info,
-					images: {mediapath: short_name + '.webp', alt: "", caption: ""}, // TODO
+					images: {mediapath: short_name.trim() + '.webp', alt: "", caption: ""}, // TODO
 					season: season_local,
-					short_name,
+					short_name : short_name.trim(),
 					portions: portions_local,
 					datecreated,
 					datemodified,

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

@@ -1,10 +1,11 @@
-import type { PageLoad } from "./$types";
+import type { PageServerLoad } from "./$types";
 
 export async function load({ fetch, params, locals}) {
     let current_month = new Date().getMonth() + 1
     const res = await fetch(`/api/rezepte/items/${params.name}`);
     const recipe = await res.json();
+    const session = await locals.auth();
     return {recipe: recipe,
-	user: locals.user
+	user: session?.user
     };
 };

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

@@ -10,7 +10,7 @@
     	export let data: PageData;
 	let preamble = data.recipe.preamble
 	let addendum = data.recipe.addendum
-	let image_preview_url="https://bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp"
+	let image_preview_url="https://bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp?v=" + data.recipe.dateModified;
 	let note = data.recipe.note
 
 	import { season } from '$lib/js/season_store';
@@ -160,7 +160,7 @@
 			async function upload_img(){
         			const data = {
 					image: img_local,
-					name: short_name,
+					name: short_name.trim(),
 				}
         			const res = await fetch(`/api/rezepte/img/add`, {
         			    method: 'POST',
@@ -191,7 +191,7 @@
         			    },
 				body: JSON.stringify({
 					old_name: old_short_name,
-					new_name: short_name,
+					new_name: short_name.trim(),
 				})
 			})
 			if(!res_img.ok){
@@ -208,7 +208,7 @@
 					...add_info,
 					images, // TODO
 					season: season_local,
-					short_name,
+					short_name: short_name.trim(),
 					datecreated,
 					portions: portions_local,
 					datemodified,
@@ -228,7 +228,7 @@
 		if(res.ok){
 			const url = location.href.split('/');
 			url.splice(url.length -2, 2);
-			url.push(short_name);
+			url.push(short_name.trim());
 			location.assign(url.join('/'))
 		}
 		else{

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

@@ -10,6 +10,7 @@
 </script>
 <style>
 	a{
+		font-family: "Noto Color Emoji", emoji, sans-serif;
 		--padding: 0.5em;
 		font-size: 3rem;
 		text-decoration: none;

src/routes/rezepte/tips-and-tricks/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+    	import AddButton from '$lib/components/AddButton.svelte';
+	import Converter from './Converter.svelte';
+</script>
+<style>
+h1{
+	text-align: center;
+	margin-bottom: 0;
+	font-size: 4rem;
+}
+.subheading{
+	text-align: center;
+	margin-top: 0;
+	font-size: 1.5rem;
+}
+.content{
+	max-width: 800px;
+	margin: 0 auto;
+	background-color: var(--nord0);
+	padding: 1rem;
+	margin-block: 1rem;
+}
+</style>
+<svelte:head>
+	<title>Bocken Rezepte</title>
+	<meta name="description" content="Eine stetig wachsende Ansammlung an Rezepten aus der Bockenschen Küche." />
+	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/ragu_aus_rindsrippen.webp" />
+	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/ragu_aus_rindsrippen.webp" />
+	<meta property="og:image:type" content="image/webp" />
+	<meta property="og:image:alt" content="Pasta al Ragu mit Linguine" />
+</svelte:head>
+
+<h1>Tipps & Tricks</h1>
+
+<div class=content>
+<h2>Trockenhefe vs. Frischhefe</h2>
+<Converter></Converter>
+<p>
+	Frischhefe ist mit Trockenhefe ersetzbar, jedoch muss man ein paar Kleinigkeiten beachten:
+</p>
+
+<ol>
+	<li>Nur ein Drittel der Menge verwenden.</li>
+	<li>Falls ein kalter Teig zubereitet wird, die Trockenhefe umbedingt zuerst zur Gärprobe in warmer Flüssigkeit (je nach Rezept z.B. Milch oder Wasser) mit einem TL Zucker für ~10 Minuten <q>aufwachen</q> lassen.</li>
+	<li>Generell ist die Meinung das Trockenhefe etwas <q>energischer</q> ist am Anfang der Gärung und etwas langsamer am Ende der Gare. Dementsprechend eventuell die Stock- und Stückgare verkürzen bzw. verlängern.</li>
+</ol>
+</div>
+
+<div class=content>
+<h2>Fensterprobe</h2>
+
+<p>
+	Die Fensterprobe ist eine Methode um den optimalen Knetzustand eines Teiges zu bestimmen.
+	Dazu wird ein kleines, ca. Walnussgrosses Stück Teig zwischen den Fingern auseinandergezogen. Ist der Teig elastisch und reißt nicht bis der Teig so dünn ist, dass man leicht licht durchsehen kann, so ist der Teig optimal verknetet.
+</p>
+<p>
+	Teig lässt sich leichter verkneten wenn er noch trockener ist. Daher lohnt es sich zunächst etwa 10% der Flüssigkeit zurückzuhalten und erst nach und nach zuzugeben nachdem der Teig bereits für einige Minuten geknetet wurde.
+</p>
+</div>
+
+<AddButton></AddButton>

src/routes/rezepte/tips-and-tricks/Converter.svelte

@@ -0,0 +1,68 @@
+<script>
+	class HefeConverter {
+		constructor(trockenhefe = 1) {
+			this._trockenhefe = trockenhefe;
+			this._frischhefe = this._trockenhefe * 3;
+		}
+
+		get trockenhefe() {
+			return Math.round(this._trockenhefe * 100) / 100 + "g";
+		}
+
+		set trockenhefe(value) {
+			this._trockenhefe = value.replace(/\D/g, '');
+			this._frischhefe = this._trockenhefe * 3;
+		}
+
+		get frischhefe() {
+			return this._frischhefe+"g";
+		}
+
+		set frischhefe(value) {
+			this._frischhefe = value.replace(/\D/g, '');
+			this._trockenhefe = this._frischhefe / 3;
+		}
+	}
+
+	const hefeConverter = new HefeConverter();
+
+</script>
+<style>
+	.converter_container {
+		width: fit-content;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		gap: 2rem;
+		background-color: var(--blue);
+		padding: 2rem;
+		margin-inline: auto;
+		align-items: center;
+	}
+	input {
+		width: 5rem;
+		height: 2rem;
+		font-size: 1rem;
+		text-align: center;
+	}
+	.flex_column {
+		display: flex;
+		flex-direction: column;
+	}
+	label {
+		margin-bottom: 0.25rem;
+	}
+</style>
+<div class=converter_container>
+	<div class="flex_column">
+		<label for="trockenhefe">Trockenhefe</label>
+		<input type="text" bind:value={hefeConverter.trockenhefe} min="0" />
+	</div>
+	<div>
+		=
+	</div>
+	<div class="flex_column">
+		<label for="frischhefe">Frischhefe</label>
+		<input type="text" bind:value={hefeConverter.frischhefe} min="0"/>
+	</div>
+</div>

static/other/.jukit/.jukit_info.json

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

static/other/jellyfin.css

@@ -3,12 +3,6 @@ This file styles jellyfin and can be imported by adding:
 @import url("https://bocken.org/other/jellyfin.css");
 under Server -> General -> Custom CSS Code
 */
-/* jellyscrub default: width: 15vw, annoying for smaller screen sizes */
-.chapterThumbContainer{
-     width: min(80vw, 500px, 50vh);
-}
-/* Attempt to change accent color */
-
 :root{
 --nord0: #2E3440;
 --blue: #5E81AC;
@@ -86,8 +80,10 @@ border-color: var(--blue);
 .defaultCardBackground3,
 .defaultCardBackground4,
 .defaultCardBackground5,
-.emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground,
-.taskProgressInner
+.emby-checkbox:checked + span + .checkboxOutline,
+.itemProgressBarForeground,
+.taskProgressInner,
+.sliderMarker.watched
 {
     background-color: var(--blue) !important;
 }
@@ -131,6 +127,9 @@ scale: 1.05;
     font-size: initial !important;
 }
 }
-.emby-scroller{
-   overflow: visible !important;
+.backgroundContainer{
+    background-color:  #21201b;
+}
+.pageTitleWithDefaultLogo {
+    background-image: url(https://bocken.org/static/css/logos/logo_text_light.png);
 }

static/other/jellyfin.js

@@ -0,0 +1,2 @@
+
+document.addEventListener('load', function() { alert(1);document.querySelector('.detailImageContainer').addEventListener('click',function(){document.querySelector(".btnPlay[title='Play'],.btnPlay[title='Resume']").click()});});

static/robots.txt

@@ -0,0 +1,5 @@
+User-agent: GPTBot
+Disallow: /
+
+User-agent: *
+Disallow: /static/