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:
@@ -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,
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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'
|
||||
};
|
||||
}
|
||||
@@ -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}
|
||||
@@ -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: '🌐'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ locals }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
return {
|
||||
session
|
||||
};
|
||||
};
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user