faith: progressive enhancement for all faith pages without JS
All checks were successful
CI / update (push) Successful in 1m29s
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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user