refactor: clean up recipe routes and reduce bundle size

- Eliminate duplicate API fetch in recipe page by passing item from
  server load to universal load instead of fetching twice
- Replace cheerio with simple regex in stripHtmlTags, removing ~200KB
  dependency
- Refactor multiplier buttons in IngredientsPage to use loop instead
  of 5 repeated form elements
- Move /rezepte/untranslated to /[recipeLang]/admin/untranslated and
  delete legacy /rezepte/ layout files
This commit is contained in:
2026-01-23 15:04:44 +01:00
parent ab2a6c9158
commit f3b92e8b1a
11 changed files with 58 additions and 252 deletions

View File

@@ -2,18 +2,13 @@ import { redirect, error } from '@sveltejs/kit';
import { stripHtmlTags } from '$lib/js/stripHtmlTags';
export async function load({ params, fetch }) {
// Fetch recipe data to strip HTML tags server-side
// This avoids bundling cheerio in the client bundle
const isEnglish = params.recipeLang === 'recipes';
const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';
const res = await fetch(`${apiBase}/items/${params.name}`);
if (!res.ok) {
// Let the universal load function handle the error
return {
strippedName: '',
strippedDescription: '',
};
const errorData = await res.json().catch(() => ({ message: 'Recipe not found' }));
throw error(res.status, errorData.message);
}
const item = await res.json();
@@ -21,6 +16,7 @@ export async function load({ params, fetch }) {
const strippedDescription = stripHtmlTags(item.description);
return {
item,
strippedName,
strippedDescription,
};

View File

@@ -1,15 +1,10 @@
import { error } from "@sveltejs/kit";
import { generateRecipeJsonLd } from '$lib/js/recipeJsonLd';
export async function load({ fetch, params, url, data }) {
const isEnglish = params.recipeLang === 'recipes';
const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';
const res = await fetch(`${apiBase}/items/${params.name}`);
let item = await res.json();
if(!res.ok){
throw error(res.status, item.message)
}
// Use item from server load - no duplicate fetch needed
let item = { ...data.item };
// Check if this recipe is favorited by the user
let isFavorite = false;
@@ -118,8 +113,11 @@ export async function load({ fetch, params, url, data }) {
const englishShortName = !isEnglish ? (item.translations?.en?.short_name || '') : '';
const germanShortName = isEnglish ? (item.germanShortName || '') : item.short_name;
// Destructure to exclude item (already spread below)
const { item: _, ...serverData } = data;
return {
...data, // Include server load data (strippedName, strippedDescription)
...serverData, // Include server load data (strippedName, strippedDescription)
...item,
isFavorite,
multiplier,

View File

@@ -1,12 +1,13 @@
import type { PageServerLoad } from "./$types";
import { redirect, error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ fetch, locals }) => {
export const load: PageServerLoad = async ({ fetch, locals, url, params }) => {
const session = await locals.auth();
// Redirect to login if not authenticated
if (!session?.user?.nickname) {
throw redirect(302, '/login?callbackUrl=/rezepte/untranslated');
const callbackUrl = encodeURIComponent(url.pathname);
throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
}
// Check user group permission
@@ -21,6 +22,7 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
return {
untranslated: [],
session,
recipeLang: params.recipeLang,
error: 'Fehler beim Laden der unübersetzten Rezepte'
};
}
@@ -29,12 +31,14 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
return {
untranslated,
session
session,
recipeLang: params.recipeLang
};
} catch (e) {
return {
untranslated: [],
session,
recipeLang: params.recipeLang,
error: 'Fehler beim Laden der unübersetzten Rezepte'
};
}

View File

@@ -127,16 +127,16 @@ h1 {
<Card
{recipe}
{current_month}
routePrefix="/rezepte"
routePrefix="/{data.recipeLang}"
translationStatus={recipe.translationStatus}
></Card>
{/each}
</Recipes>
{:else}
<div class="empty-state">
<p>🎉 Alle Rezepte sind übersetzt!</p>
<p>Alle Rezepte sind übersetzt!</p>
<p style="font-size: 1rem; margin-top: 1rem;">
<a href="/rezepte">Zurück zu den Rezepten</a>
<a href="/{data.recipeLang}">Zurück zu den Rezepten</a>
</p>
</div>
{/if}

View File

@@ -16,7 +16,7 @@
description: isEnglish
? 'View and manage recipes that need translation'
: 'Rezepte ansehen und verwalten, die übersetzt werden müssen',
href: '/rezepte/untranslated',
href: `/${data.recipeLang}/admin/untranslated`,
icon: '🌐'
},
{

View File

@@ -1,9 +0,0 @@
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
const session = await locals.auth();
return {
session
};
};

View File

@@ -1,43 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import Header from '$lib/components/Header.svelte';
import UserHeader from '$lib/components/UserHeader.svelte';
import LanguageSelector from '$lib/components/LanguageSelector.svelte';
let { data, children } = $props();
let user = $derived(data.session?.user);
function isActive(path: string) {
const currentPath = $page.url.pathname;
return currentPath.startsWith(path);
}
</script>
<Header>
{#snippet links()}
<ul class="site_header">
<li><a href="/rezepte" class:active={isActive('/rezepte') && $page.url.pathname === '/rezepte'}>Alle Rezepte</a></li>
{#if user}
<li><a href="/rezepte/favorites" class:active={isActive('/rezepte/favorites')}>Favoriten</a></li>
{/if}
<li><a href="/rezepte/season" class:active={isActive('/rezepte/season')}>Saison</a></li>
<li><a href="/rezepte/category" class:active={isActive('/rezepte/category')}>Kategorie</a></li>
<li><a href="/rezepte/icon" class:active={isActive('/rezepte/icon')}>Icon</a></li>
<li><a href="/rezepte/tag" class:active={isActive('/rezepte/tag')}>Tags</a></li>
</ul>
{/snippet}
{#snippet language_selector_mobile()}
<LanguageSelector />
{/snippet}
{#snippet language_selector_desktop()}
<LanguageSelector />
{/snippet}
{#snippet right_side()}
<UserHeader {user} recipeLang="rezepte" lang="de"></UserHeader>
{/snippet}
{@render children()}
</Header>