faith: add bilingual routes /glaube ↔ /faith
Add language toggle support for faith pages similar to recipes. Routes now work in both German and English: - /glaube ↔ /faith - /glaube/gebete ↔ /faith/prayers - /glaube/rosenkranz ↔ /faith/rosary - /glaube/angelus ↔ /faith/angelus
This commit is contained in:
182
src/routes/[faithLang=faithLang]/angelus/+page.svelte
Normal file
182
src/routes/[faithLang=faithLang]/angelus/+page.svelte
Normal file
@@ -0,0 +1,182 @@
|
||||
<script>
|
||||
import { createLanguageContext } from "$lib/contexts/languageContext.js";
|
||||
import LanguageToggle from "$lib/components/LanguageToggle.svelte";
|
||||
import Prayer from '$lib/components/prayers/Prayer.svelte';
|
||||
import Angelus from "$lib/components/prayers/Angelus.svelte";
|
||||
import AveMaria from '$lib/components/prayers/AveMaria.svelte';
|
||||
import "$lib/css/christ.css";
|
||||
import "$lib/css/rosenkranz.css";
|
||||
|
||||
// Create language context for prayer components
|
||||
createLanguageContext();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Angelus - The Angel of the Lord</title>
|
||||
<meta name="description" content="Pray the Angelus prayer in Latin, German, and English" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="angelus-page">
|
||||
<div class="header">
|
||||
<h1>Angelus</h1>
|
||||
<div class="controls">
|
||||
<LanguageToggle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prayers-content">
|
||||
<div class="prayer-section">
|
||||
<Prayer>
|
||||
<!-- First Versicle and Response -->
|
||||
<p>
|
||||
<v lang="la"><i>℣.</i> Angelus Domini nuntiavit Mariae.</v>
|
||||
<v lang="de"><i>℣.</i> Der Engel des Herrn brachte Maria die Botschaft</v>
|
||||
<v lang="en"><i>℣.</i> The Angel of the Lord declared unto Mary.</v>
|
||||
<v lang="la"><i>℟.</i> Et concepit de Spiritu Sancto.</v>
|
||||
<v lang="de"><i>℟.</i> und sie empfing vom Heiligen Geist.</v>
|
||||
<v lang="en"><i>℟.</i> And she conceived of the Holy Spirit.</v>
|
||||
</p>
|
||||
</Prayer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prayer-content">
|
||||
<AveMaria />
|
||||
</div>
|
||||
|
||||
<div class="prayer-content">
|
||||
<Prayer>
|
||||
<!-- Second Versicle and Response -->
|
||||
<p>
|
||||
<v lang="la"><i>℣.</i> Ecce ancilla Domini,</v>
|
||||
<v lang="de"><i>℣.</i> Maria sprach: Siehe, ich bin die Magd des Herrn</v>
|
||||
<v lang="en"><i>℣.</i> Behold the handmaid of the Lord.</v>
|
||||
<v lang="la"><i>℟.</i> Fiat mihi secundum verbum tuum.</v>
|
||||
<v lang="de"><i>℟.</i> mir geschehe nach Deinem Wort.</v>
|
||||
<v lang="en"><i>℟.</i> Be it done unto me according to thy word.</v>
|
||||
</p>
|
||||
</Prayer>
|
||||
</div>
|
||||
|
||||
<div class="prayer-content">
|
||||
<AveMaria />
|
||||
</div>
|
||||
|
||||
<div class="prayer-content">
|
||||
<Prayer>
|
||||
<!-- Third Versicle and Response -->
|
||||
<p>
|
||||
<v lang="la"><i>℣.</i> Et Verbum caro factum est,</v>
|
||||
<v lang="de"><i>℣.</i> Und das Wort ist Fleisch geworden</v>
|
||||
<v lang="en"><i>℣.</i> And the Word was made flesh.</v>
|
||||
<v lang="la"><i>℟.</i> Et habitavit in nobis.</v>
|
||||
<v lang="de"><i>℟.</i> und hat unter uns gewohnt.</v>
|
||||
<v lang="en"><i>℟.</i> And dwelt among us.</v>
|
||||
</p>
|
||||
</Prayer>
|
||||
</div>
|
||||
|
||||
<div class="prayer-content">
|
||||
<Prayer>
|
||||
<!-- Fourth Versicle and Response -->
|
||||
<p>
|
||||
<v lang="la"><i>℣.</i> Ora pro nobis, sancta Dei Genetrix,</v>
|
||||
<v lang="de"><i>℣.</i> Bitte für uns Heilige Gottesmutter</v>
|
||||
<v lang="en"><i>℣.</i> Pray for us, O holy Mother of God.</v>
|
||||
<v lang="la"><i>℟.</i> Ut digni efficiamur promissionibus Christi.</v>
|
||||
<v lang="de"><i>℟.</i> auf dass wir würdig werden der Verheißungen Christi.</v>
|
||||
<v lang="en"><i>℟.</i> That we may be made worthy of the promises of Christ.</v>
|
||||
</p>
|
||||
</Prayer>
|
||||
</div>
|
||||
<div class="prayer-content">
|
||||
<Prayer>
|
||||
<!-- Closing Prayer -->
|
||||
<p>
|
||||
<v lang="la"><i>℣.</i> Oremus.</v>
|
||||
<v lang="de"><i>℣.</i> Lasset uns beten.</v>
|
||||
<v lang="en"><i>℣.</i> Let us pray:</v>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v lang="la">
|
||||
Gratiam tuam, quaesumus, Domine, mentibus nostris infunde; ut qui, Angelo nuntiante,
|
||||
Christi Filii tui incarnationem cognovimus, per passionem eius et crucem ad
|
||||
resurrectionis gloriam perducamur. Per eumdem Christum Dominum nostrum. Amen.
|
||||
</v>
|
||||
<v lang="de">
|
||||
Allmächtiger Gott, gieße deine Gnade in unsere Herzen ein. Durch die Botschaft des
|
||||
Engels haben wir die Menschwerdung Christi, deines Sohnes, erkannt. Lass uns durch
|
||||
sein Leiden und Kreuz zur Herrlichkeit der Auferstehung gelangen. Darum bitten wir
|
||||
durch Christus, unseren Herrn. Amen.
|
||||
</v>
|
||||
<v lang="en">
|
||||
Pour forth, we beseech Thee, O Lord, Thy grace into our hearts, that we to whom the
|
||||
Incarnation of Christ Thy Son was made known by the message of an angel, may by His
|
||||
Passion and Cross be brought to the glory of His Resurrection. Through the same Christ
|
||||
Our Lord. Amen.
|
||||
</v>
|
||||
</p>
|
||||
</Prayer>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<style>
|
||||
.angelus-page {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--nord6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
h1 {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.prayer-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
.prayer-section {
|
||||
scroll-snap-align: start;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
background: var(--accent-dark);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prayers-content {
|
||||
scroll-snap-type: y proximity;
|
||||
max-width: 700px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user