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

perf: pre-generate Bible verse data and reduce DOM via conditional rendering
All checks were successful
CI / update (push) Successful in 1m34s
Details

Browse Source 
- Extract Bible lookup logic into shared src/lib/server/bible.ts module
- Add build script to pre-generate all 20 mystery verse lookups as static data,
  eliminating runtime API calls on rosary page load
- Update Prayer.svelte to pass showLatin/urlLang as snippet parameters; all 14
  prayer components now conditionally render only visible language elements
  instead of hiding via CSS
- Extract 4 inline mystery selector SVGs into MysteryIcon.svelte component
- Remove unused CSS selectors from angelus page
This commit is contained in:
Alexander Bocken
2026-02-03 14:27:39 +01:00
parent 3ff3d0dc8a
commit b28154564f
23 changed files with 1251 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/routes/[faithLang=faithLang]/angelus/+page.svelte
View File

@@ -31,15 +31,17 @@
<div class="prayers-content">
<div class="prayer-section">
<Prayer>
{#snippet children(showLatin, urlLang)}
<!-- First Versicle and Response -->
<p>
<v lang="la"><i>℣.</i> Angelus Domini nuntiavit Mariæ.</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>
{#if showLatin}<v lang="la"><i>℣.</i> Angelus Domini nuntiavit Mariæ.</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℣.</i> Der Engel des Herrn brachte Maria die Botschaft</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℣.</i> The Angel of the Lord declared unto Mary.</v>{/if}
{#if showLatin}<v lang="la"><i>℟.</i> Et concepit de Spiritu Sancto.</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℟.</i> und sie empfing vom Heiligen Geist.</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℟.</i> And she conceived of the Holy Spirit.</v>{/if}
</p>
{/snippet}
</Prayer>
</div>
<div class="prayer-section">
@@ -49,15 +51,17 @@
<div class="prayer-section">
<Prayer>
{#snippet children(showLatin, urlLang)}
<!-- 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>
{#if showLatin}<v lang="la"><i>℣.</i> Ecce ancilla Domini,</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℣.</i> Maria sprach: Siehe, ich bin die Magd des Herrn</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℣.</i> Behold the handmaid of the Lord.</v>{/if}
{#if showLatin}<v lang="la"><i>℟.</i> Fiat mihi secundum verbum tuum.</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℟.</i> mir geschehe nach Deinem Wort.</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℟.</i> Be it done unto me according to thy word.</v>{/if}
</p>
{/snippet}
</Prayer>
</div>
@@ -67,15 +71,17 @@
<div class="prayer-section">
<Prayer>
{#snippet children(showLatin, urlLang)}
<!-- 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>
{#if showLatin}<v lang="la"><i>℣.</i> Et Verbum caro factum est,</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℣.</i> Und das Wort ist Fleisch geworden</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℣.</i> And the Word was made flesh.</v>{/if}
{#if showLatin}<v lang="la"><i>℟.</i> Et habitavit in nobis.</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℟.</i> und hat unter uns gewohnt.</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℟.</i> And dwelt among us.</v>{/if}
</p>
{/snippet}
</Prayer>
</div>
@@ -85,64 +91,68 @@
<div class="prayer-section">
<Prayer>
{#snippet children(showLatin, urlLang)}
<!-- 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>
{#if showLatin}<v lang="la"><i>℣.</i> Ora pro nobis, sancta Dei Genetrix,</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℣.</i> Bitte für uns Heilige Gottesmutter</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℣.</i> Pray for us, O holy Mother of God.</v>{/if}
{#if showLatin}<v lang="la"><i>℟.</i> Ut digni efficiamur promissionibus Christi.</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℟.</i> auf dass wir würdig werden der Verheißungen Christi.</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℟.</i> That we may be made worthy of the promises of Christ.</v>{/if}
</p>
{/snippet}
</Prayer>
</div>
<div class="prayer-section">
<Prayer>
{#snippet children(showLatin, urlLang)}
<!-- 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>
{#if showLatin}<v lang="la"><i>℣.</i> Oremus.</v>{/if}
{#if urlLang === 'de'}<v lang="de"><i>℣.</i> Lasset uns beten.</v>{/if}
{#if urlLang === 'en'}<v lang="en"><i>℣.</i> Let us pray:</v>{/if}
</p>
<p>
<v lang="la">
{#if showLatin}<v lang="la">
Gratiam tuam, quaesumus, Domine, mentibus nostris infunde;
</v>
<v lang="de">
</v>{/if}
{#if urlLang === 'de'}<v lang="de">
Allmächtiger Gott, gieße deine Gnade in unsere Herzen ein.
</v>
<v lang="en">
</v>{/if}
{#if urlLang === 'en'}<v lang="en">
Pour forth, we beseech Thee, O Lord, Thy grace into our hearts,
</v>
<v lang="la">
</v>{/if}
{#if showLatin}<v lang="la">
ut qui, Angelo nuntiante, Christi Filii tui incarnationem cognovimus,
</v>
<v lang="de">
</v>{/if}
{#if urlLang === 'de'}<v lang="de">
Durch die Botschaft des Engels haben wir die Menschwerdung Christi, deines Sohnes, erkannt.
</v>
<v lang="en">
</v>{/if}
{#if urlLang === 'en'}<v lang="en">
that we to whom the Incarnation of Christ Thy Son was made known by the message of an angel,
</v>
<v lang="la">
</v>{/if}
{#if showLatin}<v lang="la">
per passionem eius et crucem ad resurrectionis gloriam perducamur.
</v>
<v lang="de">
</v>{/if}
{#if urlLang === 'de'}<v lang="de">
Lass uns durch sein Leiden und Kreuz zur Herrlichkeit der Auferstehung gelangen.
</v>
<v lang="en">
</v>{/if}
{#if urlLang === 'en'}<v lang="en">
may by His Passion and Cross be brought to the glory of His Resurrection.
</v>
<v lang="la">
</v>{/if}
{#if showLatin}<v lang="la">
Per eumdem Christum Dominum nostrum. Amen.
</v>
<v lang="de">
</v>{/if}
{#if urlLang === 'de'}<v lang="de">
Darum bitten wir durch Christus, unseren Herrn. Amen.
</v>
<v lang="en">
</v>{/if}
{#if urlLang === 'en'}<v lang="en">
Through the same Christ Our Lord. Amen.
</v>
</v>{/if}
</p>
{/snippet}
</Prayer>
</div>
@@ -155,15 +165,6 @@
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;
@@ -175,19 +176,6 @@
}
}
.controls {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.header {
flex-direction: column;
align-items: flex-start;
}
}
.prayer-section {
scroll-snap-align: start;
padding: 2rem;