feat: add Latin language notice and German link on catechesis pages

Show language-appropriate notice for non-German users with an
underlined link to the German version of the same page.
This commit is contained in:
2026-04-06 00:01:55 +02:00
parent 8f31cf94a8
commit c5d54acd0d
3 changed files with 17 additions and 7 deletions

View File

@@ -105,7 +105,7 @@
</a> </a>
{/if} {/if}
<a href="/{data.faithLang}/katechese" class="katechese-link"> <a href="/{data.faithLang}/katechese" class="katechese-link">
{#if isEnglish}<span class="lang-badge">DE</span>{/if} {#if isEnglish || isLatin}<span class="lang-badge">DE</span>{/if}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -226 532 506"><path d="M256-107v310l1-1c54-22 113-34 172-34h19v-320h-19c-42 0-84 8-123 25-17 7-34 14-50 20zm-25-79 25 10 25-10c47-20 97-30 148-30h35c27 0 48 22 48 48v352c0 27-21 48-48 48h-35c-51 0-101 10-148 30l-13 5c-8 3-16 3-24 0l-13-5c-47-20-97-30-148-30H48c-26 0-48-21-48-48v-352c0-26 22-48 48-48h35c51 0 101 10 148 30z" fill="currentColor"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -226 532 506"><path d="M256-107v310l1-1c54-22 113-34 172-34h19v-320h-19c-42 0-84 8-123 25-17 7-34 14-50 20zm-25-79 25 10 25-10c47-20 97-30 148-30h35c27 0 48 22 48 48v352c0 27-21 48-48 48h-35c-51 0-101 10-148 30l-13 5c-8 3-16 3-24 0l-13-5c-47-20-97-30-148-30H48c-26 0-48-21-48-48v-352c0-26 22-48 48-48h35c51 0 101 10 148 30z" fill="currentColor"/></svg>
<h3>Katechese</h3> <h3>Katechese</h3>
</a> </a>

View File

@@ -1,7 +1,8 @@
<script> <script>
import LinksGrid from '$lib/components/LinksGrid.svelte'; import LinksGrid from '$lib/components/LinksGrid.svelte';
let { data } = $props(); let { data } = $props();
const isEnglish = $derived(data.lang === 'en'); const isGerman = $derived(data.lang === 'de');
const isLatin = $derived(data.lang === 'la');
</script> </script>
<svelte:head> <svelte:head>
@@ -39,11 +40,15 @@
font-size: var(--text-sm); font-size: var(--text-sm);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
} }
.lang-notice a {
color: var(--nord10);
text-decoration: underline;
}
</style> </style>
<h1>Katechese</h1> <h1>Katechese</h1>
{#if isEnglish} {#if !isGerman}
<p class="lang-notice">This catechesis is only available in German.</p> <p class="lang-notice">{isLatin ? 'Haec catechesis tantum in ' : 'This catechesis is only available in '}<a href="/glaube/katechese">{isLatin ? 'lingua Germanica' : 'German'}</a>{isLatin ? ' praesto est.' : '.'}</p>
{/if} {/if}
<p> <p>
Aufgearbeitete Lehrinhalte aus dem Glaubenskurs von P. Martin Ramm FSSP. Aufgearbeitete Lehrinhalte aus dem Glaubenskurs von P. Martin Ramm FSSP.

View File

@@ -2,7 +2,8 @@
import { ArrowDown, ArrowLeft } from 'lucide-svelte'; import { ArrowDown, ArrowLeft } from 'lucide-svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
let expanded = $state(null); let expanded = $state(null);
const isEnglish = $derived($page.url.pathname.startsWith('/faith')); const isGerman = $derived($page.url.pathname.startsWith('/glaube'));
const isLatin = $derived($page.url.pathname.startsWith('/fides'));
function toggle(id) { function toggle(id) {
expanded = expanded === id ? null : id; expanded = expanded === id ? null : id;
@@ -58,8 +59,8 @@
<p class="subtitle">Glaubenskurs, 3. Hauptteil &mdash; P. Martin Ramm FSSP</p> <p class="subtitle">Glaubenskurs, 3. Hauptteil &mdash; P. Martin Ramm FSSP</p>
</header> </header>
{#if isEnglish} {#if !isGerman}
<p class="lang-notice">This catechesis is only available in German.</p> <p class="lang-notice">{isLatin ? 'Haec catechesis tantum in ' : 'This catechesis is only available in '}<a href="/glaube/katechese/zehn-gebote">{isLatin ? 'lingua Germanica' : 'German'}</a>{isLatin ? ' praesto est.' : '.'}</p>
{/if} {/if}
<section id="ursprung"> <section id="ursprung">
@@ -302,6 +303,10 @@
font-size: 0.85rem; font-size: 0.85rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.lang-notice a {
color: var(--nord10);
text-decoration: underline;
}
.disclaimer { .disclaimer {
text-align: center; text-align: center;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);