feat: implement base recipe references with customizable ingredients and instructions

Add comprehensive base recipe system allowing recipes to reference other recipes dynamically. References can include custom items before/after the base recipe content and render as unified lists.

Features:
- Mark recipes as base recipes with isBaseRecipe flag
- Insert base recipe references at any position in ingredients/instructions
- Add custom items before/after referenced content (itemsBefore/itemsAfter, stepsBefore/stepsAfter)
- Combined rendering displays all items in single unified lists
- Full edit/remove functionality for additional items with modal reuse
- Empty item validation prevents accidental blank entries
- HTML rendering in section titles for proper <wbr> and &shy; support
- Reference links in section headings with multiplier preservation
- Subtle hover effects (2% scale) on add buttons
- Translation support for all reference fields
- Deletion handling expands references before removing base recipes
This commit is contained in:
2026-01-04 15:21:17 +01:00
parent 2696f09653
commit b67e2434b5
14 changed files with 1499 additions and 114 deletions

View File

@@ -57,6 +57,7 @@
let short_name = ""
let datecreated = new Date()
let datemodified = datecreated
let isBaseRecipe = false
import type { PageData } from './$types';
import CardAdd from '$lib/components/CardAdd.svelte';
@@ -118,6 +119,7 @@
ingredients,
preamble,
addendum,
isBaseRecipe,
};
}
@@ -318,6 +320,13 @@ button.action_button{
<h3>Kurzname (für URL):</h3>
<input bind:value={short_name} placeholder="Kurzname"/>
<div style="text-align: center; margin: 1rem;">
<label style="font-size: 1.1rem; cursor: pointer;">
<input type="checkbox" bind:checked={isBaseRecipe} style="width: auto; display: inline; margin-right: 0.5em;" />
Als Basisrezept markieren (kann von anderen Rezepten referenziert werden)
</label>
</div>
<div class=title_container>
<div class=title>
<h4>Eine etwas längere Beschreibung:</h4>