Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add page titles to recipe and glaube routes
All checks were successful
CI / update (push) Successful in 1m20s
Details

Browse Source 
- Add titles to category, tag, icon, season routes
- Add bilingual support (German/English) for recipe route titles
- Use consistent "Bocken Recipes" / "Bocken Rezepte" branding
- Change English tagline from "Bocken's Recipes" to "Bocken Recipes"
- Add titles to /glaube and /glaube/gebete pages
- Make tips-and-tricks page language-aware
This commit is contained in:
Alexander Bocken
2026-01-20 19:54:09 +01:00
parent e366b44bba
commit ab2a6c9158
12 changed files with 81 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
View File

@@ -98,7 +98,7 @@
season: isEnglish ? 'Season:' : 'Saison:',
keywords: isEnglish ? 'Keywords:' : 'Stichwörter:',
lastModified: isEnglish ? 'Last modified:' : 'Letzte Änderung:',
title: isEnglish ? "Bocken's Recipes" : "Bocken'sche Rezepte"
title: isEnglish ? "Bocken Recipes" : "Bocken'sche Rezepte"
});
</script>
<style>

7
src/routes/[recipeLang=recipeLang]/category/+page.svelte
View File

@@ -7,9 +7,14 @@
const isEnglish = $derived(data.lang === 'en');
const labels = $derived({
title: isEnglish ? 'Categories' : 'Kategorien'
title: isEnglish ? 'Categories' : 'Kategorien',
siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte'
});
</script>
<svelte:head>
<title>{labels.title} - {labels.siteTitle}</title>
</svelte:head>
<style>
h1 {
text-align: center;

6
src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
View File

@@ -9,6 +9,7 @@
const isEnglish = $derived(data.lang === 'en');
const label = $derived(isEnglish ? 'Recipes in Category' : 'Rezepte in Kategorie');
const siteTitle = $derived(isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte');
// Search state
let matchedRecipeIds = $state(new Set());
@@ -34,6 +35,11 @@
font-size: 3em;
}
</style>
<svelte:head>
<title>{data.category} - {siteTitle}</title>
</svelte:head>
<h1>{label} <q>{data.category}</q>:</h1>
<Search category={data.category} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
<section>

10
src/routes/[recipeLang=recipeLang]/icon/+page.svelte
View File

@@ -7,7 +7,17 @@
import Card from '$lib/components/Card.svelte';
import Search from '$lib/components/Search.svelte';
let { data } = $props<{ data: PageData }>();
const isEnglish = $derived(data.lang === 'en');
const labels = $derived({
title: isEnglish ? 'Icons' : 'Icons',
siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte'
});
</script>
<svelte:head>
<title>{labels.title} - {labels.siteTitle}</title>
</svelte:head>
<style>
a{
font-family: "Noto Color Emoji", emoji, sans-serif;

8
src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
View File

@@ -8,6 +8,9 @@
let { data } = $props<{ data: PageData }>();
import { rand_array } from '$lib/js/randomize';
const isEnglish = $derived(data.lang === 'en');
const siteTitle = $derived(isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte');
// Search state
let matchedRecipeIds = $state(new Set());
let hasActiveSearch = $state(false);
@@ -26,6 +29,11 @@
return data.season.filter(r => matchedRecipeIds.has(r._id));
});
</script>
<svelte:head>
<title>{data.icon} - {siteTitle}</title>
</svelte:head>
<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
{#snippet recipesSlot()}
<Recipes>

8
src/routes/[recipeLang=recipeLang]/season/+page.svelte
View File

@@ -14,6 +14,10 @@
const months = $derived(isEnglish
? ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
const labels = $derived({
title: isEnglish ? 'In Season' : 'Saisonal',
siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte'
});
// Search state
let matchedRecipeIds = $state(new Set());
@@ -34,6 +38,10 @@
});
</script>
<svelte:head>
<title>{labels.title} - {labels.siteTitle}</title>
</svelte:head>
<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
{#snippet recipesSlot()}
<Recipes>

7
src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
View File

@@ -11,6 +11,8 @@
const months = $derived(isEnglish
? ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
const siteTitle = $derived(isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte');
const currentMonth = $derived(months[data.month - 1]);
import { rand_array } from '$lib/js/randomize';
@@ -32,6 +34,11 @@
return data.season.filter(r => matchedRecipeIds.has(r._id));
});
</script>
<svelte:head>
<title>{currentMonth} - {siteTitle}</title>
</svelte:head>
<SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
{#snippet recipesSlot()}
<Recipes>

7
src/routes/[recipeLang=recipeLang]/tag/+page.svelte
View File

@@ -7,9 +7,14 @@
const isEnglish = $derived(data.lang === 'en');
const labels = $derived({
title: isEnglish ? 'Keywords' : 'Stichwörter'
title: isEnglish ? 'Keywords' : 'Stichwörter',
siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte'
});
</script>
<svelte:head>
<title>{labels.title} - {labels.siteTitle}</title>
</svelte:head>
<style>
h1 {
font-size: 3rem;

6
src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
View File

@@ -9,6 +9,7 @@
const isEnglish = $derived(data.lang === 'en');
const label = $derived(isEnglish ? 'Recipes with Keyword' : 'Rezepte mit Stichwort');
const siteTitle = $derived(isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte');
// Search state
let matchedRecipeIds = $state(new Set());
@@ -34,6 +35,11 @@
font-size: 2em;
}
</style>
<svelte:head>
<title>{data.tag} - {siteTitle}</title>
</svelte:head>
<h1>{label} <q>{data.tag}</q>:</h1>
<Search tag={data.tag} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
<section>

16
src/routes/[recipeLang=recipeLang]/tips-and-tricks/+page.svelte
View File

@@ -2,6 +2,16 @@
import type { PageData } from './$types';
import AddButton from '$lib/components/AddButton.svelte';
import Converter from './Converter.svelte';
let { data } = $props<{ data: PageData }>();
const isEnglish = $derived(data.lang === 'en');
const labels = $derived({
title: isEnglish ? 'Tips & Tricks' : 'Tipps & Tricks',
siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte',
description: isEnglish
? "A constantly growing collection of recipes from Bocken's kitchen."
: 'Eine stetig wachsende Ansammlung an Rezepten aus der Bockenschen Küche.'
});
</script>
<style>
h1{
@@ -18,15 +28,15 @@ h1{
}
</style>
<svelte:head>
<title>Bocken Rezepte</title>
<meta name="description" content="Eine stetig wachsende Ansammlung an Rezepten aus der Bockenschen Küche." />
<title>{labels.title} - {labels.siteTitle}</title>
<meta name="description" content="{labels.description}" />
<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>
<h1>{labels.title}</h1>
<div class=content>
<h2>Trockenhefe vs. Frischhefe</h2>

5
src/routes/glaube/+page.svelte
View File

@@ -1,6 +1,11 @@
<script>
import LinksGrid from '$lib/components/LinksGrid.svelte';
</script>
<svelte:head>
<title>Glaube - Bocken</title>
<meta name="description" content="Gebete und ein interaktiver Rosenkranz zum katholischen Glauben." />
</svelte:head>
<style>
h1{
text-align: center;

5
src/routes/glaube/gebete/+page.svelte
View File

@@ -19,6 +19,11 @@
// Create language context for prayer components
createLanguageContext();
</script>
<svelte:head>
<title>Gebete - Bocken</title>
<meta name="description" content="Katholische Gebete auf Deutsch und Latein." />
</svelte:head>
<style>
.ccontainer{
margin: auto;