213 lines
7.4 KiB
Vue
213 lines
7.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<header class="bg-white shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
|
</NuxtLink>
|
|
<div class="flex items-end gap-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label for="font-size" class="text-xs font-medium text-gray-700">Font Size:</label>
|
|
<select
|
|
id="font-size"
|
|
v-model="fontSize"
|
|
class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
>
|
|
<option value="small">Small</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="large">Large</option>
|
|
</select>
|
|
</div>
|
|
<QRCodeButton v-if="sermon" :sermon="sermon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div v-if="sermon" class="bg-white shadow-lg rounded-lg p-8">
|
|
<!-- Header -->
|
|
<div class="border-b pb-6 mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-2">{{ sermon.title }}</h1>
|
|
<p class="text-lg text-gray-600">{{ formatDateRange(sermon) }}</p>
|
|
</div>
|
|
|
|
<!-- Section 1: Bible References -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Bible References</h2>
|
|
<div class="space-y-6">
|
|
<div
|
|
v-for="(ref, index) in bibleReferences"
|
|
:key="index"
|
|
class="bg-blue-50 rounded-lg p-6"
|
|
>
|
|
<!-- Mobile: Stack reference above text -->
|
|
<div class="md:hidden mb-3 text-right text-sm text-gray-600">
|
|
<div class="font-semibold">{{ ref.reference }}</div>
|
|
<div>({{ ref.version }})</div>
|
|
</div>
|
|
|
|
<!-- Desktop: Side by side -->
|
|
<div class="flex items-start justify-between gap-4">
|
|
<p :class="['text-gray-800 leading-relaxed flex-1', fontSizeClasses]">
|
|
{{ ref.text }}
|
|
</p>
|
|
<div class="hidden md:block text-right text-sm text-gray-600 whitespace-nowrap">
|
|
<div class="font-semibold">{{ ref.reference }}</div>
|
|
<div>({{ ref.version }})</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Personal Appliance -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Personal Appliance</h2>
|
|
<div class="bg-green-50 rounded-lg p-6">
|
|
<p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.personal_appliance }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Pastor's Challenge -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Pastor's Challenge</h2>
|
|
<div class="bg-purple-50 rounded-lg p-6">
|
|
<p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.pastors_challenge }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Worship Songs Section -->
|
|
<section v-if="worshipSongs.length > 0" class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Worship Songs</h2>
|
|
<div class="bg-yellow-50 rounded-lg p-6">
|
|
<ul class="space-y-3">
|
|
<li
|
|
v-for="(song, index) in worshipSongs"
|
|
:key="index"
|
|
:class="['text-gray-800', fontSizeClasses]"
|
|
>
|
|
<span class="font-semibold">{{ song.name }}</span>
|
|
<span v-if="song.artist" class="text-gray-600"> - {{ song.artist }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Back Button -->
|
|
<div class="border-t pt-6">
|
|
<NuxtLink
|
|
to="/"
|
|
class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to All Sermons
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else class="bg-white shadow-lg rounded-lg p-8 text-center">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Sermon Not Found</h2>
|
|
<p class="text-gray-600 mb-6">The sermon you're looking for doesn't exist.</p>
|
|
<NuxtLink
|
|
to="/"
|
|
class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to All Sermons
|
|
</NuxtLink>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const slug = route.params.slug as string
|
|
|
|
const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
|
|
|
|
// Font size state
|
|
const fontSize = ref('medium')
|
|
|
|
const bibleReferences = computed(() => {
|
|
if (!sermon.value?.bible_references) return []
|
|
try {
|
|
// Try to parse as JSON first (new format)
|
|
return JSON.parse(sermon.value.bible_references)
|
|
} catch {
|
|
// Fallback to old format (plain text)
|
|
return sermon.value.bible_references.split('\n')
|
|
.filter((ref: string) => ref.trim())
|
|
.map((ref: string) => ({ version: '', reference: ref, text: ref }))
|
|
}
|
|
})
|
|
|
|
const worshipSongs = computed(() => {
|
|
if (!sermon.value?.worship_songs) return []
|
|
try {
|
|
return JSON.parse(sermon.value.worship_songs)
|
|
} catch {
|
|
return []
|
|
}
|
|
})
|
|
|
|
// Font size classes
|
|
const fontSizeClasses = computed(() => {
|
|
switch (fontSize.value) {
|
|
case 'small':
|
|
return 'text-sm'
|
|
case 'large':
|
|
return 'text-xl'
|
|
default:
|
|
return 'text-base'
|
|
}
|
|
})
|
|
|
|
function formatDate(dateString: string) {
|
|
// Add T00:00:00 to ensure the date is interpreted as local time, not UTC
|
|
const date = new Date(dateString + 'T00:00:00')
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
|
|
function formatDateRange(sermon: any) {
|
|
// Helper function to format a single date with day name
|
|
const formatWithDayName = (dateString: string) => {
|
|
const date = new Date(dateString + 'T00:00:00')
|
|
const dayName = date.toLocaleDateString('en-US', { weekday: 'long' })
|
|
const dateStr = date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
})
|
|
return `${dayName}, ${dateStr}`
|
|
}
|
|
|
|
// Start with primary date
|
|
const dates = [sermon.date]
|
|
|
|
// Add additional dates if they exist
|
|
if (sermon.dates) {
|
|
try {
|
|
const additionalDates = JSON.parse(sermon.dates)
|
|
dates.push(...additionalDates)
|
|
} catch {
|
|
// If parsing fails, just use primary date
|
|
}
|
|
}
|
|
|
|
// Format all dates and join with " - "
|
|
return dates.map(formatWithDayName).join(' - ')
|
|
}
|
|
</script>
|