faith: progressive enhancement for all faith pages without JS
All checks were successful
CI / update (push) Successful in 1m29s

- Rosary: mystery selection, luminous toggle, and latin toggle fall back
  to URL params (?mystery=, ?luminous=, ?latin=) for no-JS navigation
- Prayers/Angelus: latin toggle uses URL param fallback
- Search on prayers page hidden without JS (requires DOM queries)
- Toggle component supports href prop for link-based no-JS self-submit
- LanguageSelector uses <a> links with computed paths and :focus-within
  dropdown for no-JS; displays correct language via server-provided prop
- Recipe language links use translated slugs from $page.data
- URL params cleaned via replaceState after hydration to avoid clutter
This commit is contained in:
2026-02-04 14:14:11 +01:00
parent 1c100a4534
commit 7d6a80442a
13 changed files with 347 additions and 90 deletions

View File

@@ -1,4 +1,5 @@
<script>
import { onMount } from 'svelte';
import { createLanguageContext } from "$lib/contexts/languageContext.js";
import LanguageToggle from "$lib/components/LanguageToggle.svelte";
import Prayer from '$lib/components/prayers/Prayer.svelte';
@@ -9,12 +10,22 @@
let { data } = $props();
// Create language context for prayer components
const langContext = createLanguageContext({ urlLang: data.lang });
const langContext = createLanguageContext({ urlLang: data.lang, initialLatin: data.initialLatin });
// Toggle href for no-JS fallback (navigates to opposite latin state)
const latinToggleHref = $derived(data.initialLatin ? '?latin=0' : '?');
// Update lang store when data.lang changes (e.g., after navigation)
$effect(() => {
langContext.lang.set(data.lang);
});
onMount(() => {
// Clean up URL params after hydration (state is now in component state)
if (window.location.search) {
history.replaceState({}, '', window.location.pathname);
}
});
</script>
<svelte:head>
@@ -25,7 +36,11 @@
<div class="angelus-page">
<h1>Angelus</h1>
<div class="toggle-controls">
<LanguageToggle />
<LanguageToggle
initialLatin={data.initialLatin}
hasUrlLatin={data.hasUrlLatin}
href={latinToggleHref}
/>
</div>
<div class="prayers-content">