RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix hydration mismatch by wrapping sermon sections in ClientOnly

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-02 00:28:47 -04:00
parent 2bd8afe785
commit 2d64213411
1 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/index.vue
View File

@@ -46,26 +46,34 @@
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
<!-- Today's Sermon -->
<div v-if="todaysSermon">
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<SermonCard :sermon="todaysSermon" />
<ClientOnly>
<!-- Today's Sermon -->
<div v-if="todaysSermon">
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<SermonCard :sermon="todaysSermon" />
</div>
</div>
</div>
<!-- Upcoming Sermons -->
<div v-if="upcomingSermons.length > 0">
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Upcoming Sermons</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<SermonCard v-for="sermon in upcomingSermons" :key="sermon.id" :sermon="sermon" />
<!-- Upcoming Sermons -->
<div v-if="upcomingSermons.length > 0">
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Upcoming Sermons</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<SermonCard v-for="sermon in upcomingSermons" :key="sermon.id" :sermon="sermon" />
</div>
</div>
</div>
<!-- Empty State (if no current or upcoming sermons) -->
<div v-if="!hasCurrentSermons" class="text-center py-12">
<p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
</div>
<!-- Empty State (if no current or upcoming sermons) -->
<div v-if="!hasCurrentSermons" class="text-center py-12">
<p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
</div>
<template #fallback>
<div class="text-center py-12">
<p class="text-gray-500 text-lg">Loading sermons...</p>
</div>
</template>
</ClientOnly>
<!-- Previous Sermons Dropdown -->
<div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">