297 lines
13 KiB
Plaintext
297 lines
13 KiB
Plaintext
---
|
|
import MainLayout from '../layouts/MainLayout.astro';
|
|
import { getChurchName, fetchCurrentBulletinJson, fetchBulletinsJson } from '../lib/bindings.js';
|
|
|
|
let churchName = 'Church';
|
|
let currentBulletin = null;
|
|
let bulletins = [];
|
|
|
|
try {
|
|
churchName = getChurchName();
|
|
|
|
// Get all bulletins first
|
|
const bulletinsJson = fetchBulletinsJson();
|
|
bulletins = JSON.parse(bulletinsJson);
|
|
|
|
// Find the most appropriate current bulletin
|
|
// Either today's bulletin or the next upcoming one
|
|
const today = new Date();
|
|
const todayString = today.toISOString().split('T')[0]; // YYYY-MM-DD format
|
|
|
|
// Sort bulletins by date (newest first)
|
|
const sortedBulletins = bulletins.sort((a, b) => new Date(b.date) - new Date(a.date));
|
|
|
|
// Find current bulletin: either today's or the next upcoming one
|
|
currentBulletin = sortedBulletins.find(bulletin => bulletin.date >= todayString);
|
|
|
|
// If no upcoming bulletin found, use the most recent one
|
|
if (!currentBulletin && sortedBulletins.length > 0) {
|
|
currentBulletin = sortedBulletins[0];
|
|
}
|
|
|
|
// Try the API's current bulletin as fallback
|
|
if (!currentBulletin) {
|
|
const currentBulletinJson = fetchCurrentBulletinJson();
|
|
currentBulletin = JSON.parse(currentBulletinJson);
|
|
}
|
|
|
|
console.log('📰 Successfully loaded bulletin data:', {
|
|
currentBulletin: currentBulletin ? `${currentBulletin.title} (${currentBulletin.date})` : 'none',
|
|
bulletinCount: bulletins.length,
|
|
todayDate: todayString
|
|
});
|
|
} catch (e) {
|
|
console.error('Failed to load bulletin data:', e);
|
|
}
|
|
|
|
// Format date from bulletin data
|
|
const formatBulletinDate = (dateString) => {
|
|
if (!dateString) return new Date().toLocaleDateString('en-US', {
|
|
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
|
|
});
|
|
|
|
const date = new Date(dateString + 'T00:00:00');
|
|
return date.toLocaleDateString('en-US', {
|
|
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
|
|
});
|
|
};
|
|
|
|
const displayDate = currentBulletin ? formatBulletinDate(currentBulletin.date) : formatBulletinDate(null);
|
|
const bulletinTitle = currentBulletin?.title || 'Weekly Bulletin';
|
|
|
|
// Parse service information
|
|
const parseSabbathSchool = (text) => {
|
|
if (!text) return null;
|
|
const lines = text.split('\n').filter(line => line.trim());
|
|
const result = {};
|
|
let currentKey = '';
|
|
|
|
lines.forEach(line => {
|
|
if (line.includes(':')) {
|
|
currentKey = line.replace(':', '').trim();
|
|
result[currentKey] = '';
|
|
} else if (currentKey && line.trim()) {
|
|
result[currentKey] = line.trim();
|
|
}
|
|
});
|
|
|
|
return result;
|
|
};
|
|
|
|
const parseDivineWorship = (text) => {
|
|
if (!text) return null;
|
|
const lines = text.split('\n').filter(line => line.trim());
|
|
const result = {};
|
|
let currentKey = '';
|
|
|
|
lines.forEach(line => {
|
|
if (line.includes(':')) {
|
|
currentKey = line.replace(':', '').trim();
|
|
result[currentKey] = '';
|
|
} else if (currentKey && line.trim()) {
|
|
if (result[currentKey]) {
|
|
result[currentKey] += '\n' + line.trim();
|
|
} else {
|
|
result[currentKey] = line.trim();
|
|
}
|
|
}
|
|
});
|
|
|
|
return result;
|
|
};
|
|
|
|
const sabbathSchoolInfo = currentBulletin ? parseSabbathSchool(currentBulletin.sabbath_school) : null;
|
|
const divineWorshipInfo = currentBulletin ? parseDivineWorship(currentBulletin.divine_worship) : null;
|
|
---
|
|
|
|
<MainLayout title={`Bulletin - ${churchName}`} description="Weekly church bulletin with service information, announcements, and upcoming events">
|
|
|
|
<!-- Bulletin Hero -->
|
|
<section class="py-16 bg-heavenly-gradient text-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="newspaper" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h1 class="text-4xl lg:text-6xl font-bold mb-6">{bulletinTitle}</h1>
|
|
<p class="text-xl text-blue-100 max-w-2xl mx-auto">
|
|
Stay informed with our weekly church bulletin featuring service details, announcements, and community updates
|
|
</p>
|
|
<div class="mt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<span class="inline-block bg-white/20 px-4 py-2 rounded-xl text-blue-100 font-medium">
|
|
{displayDate}
|
|
</span>
|
|
{currentBulletin?.pdf_path && (
|
|
<a href={currentBulletin.pdf_path} target="_blank" rel="noopener" class="inline-flex items-center space-x-2 bg-white/20 hover:bg-white/30 px-4 py-2 rounded-xl text-blue-100 font-medium transition-colors">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
<span>Download PDF</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Service Information -->
|
|
<section class="py-16 bg-white dark:bg-gray-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid lg:grid-cols-2 gap-12">
|
|
|
|
<!-- Sabbath Services -->
|
|
<div class="bg-gradient-to-br from-primary-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="sun" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Sabbath Services</h2>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Sabbath School</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-3">
|
|
<i data-lucide="clock" class="w-5 h-5 text-primary-500"></i>
|
|
<span class="text-gray-600 dark:text-gray-300">9:30 AM - 10:45 AM</span>
|
|
</div>
|
|
{sabbathSchoolInfo && Object.entries(sabbathSchoolInfo).map(([key, value]) => (
|
|
<div class="flex items-start space-x-3">
|
|
<i data-lucide="user" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">{key}:</span>
|
|
<span class="text-gray-600 dark:text-gray-300 ml-2">{value}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Divine Service</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-3">
|
|
<i data-lucide="clock" class="w-5 h-5 text-primary-500"></i>
|
|
<span class="text-gray-600 dark:text-gray-300">11:00 AM - 12:15 PM</span>
|
|
</div>
|
|
{divineWorshipInfo && Object.entries(divineWorshipInfo).map(([key, value]) => (
|
|
<div class="flex items-start space-x-3">
|
|
<i data-lucide="mic" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">{key}:</span>
|
|
<div class="text-gray-600 dark:text-gray-300 ml-2 whitespace-pre-line">{value}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- This Week's Focus -->
|
|
<div class="bg-gradient-to-br from-gold-50 to-orange-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-12 h-12 bg-gold-500 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="star" class="w-6 h-6 text-black"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">This Week's Focus</h2>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
{currentBulletin?.scripture_reading && (
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Scripture Reading</h3>
|
|
<div class="text-gray-600 dark:text-gray-300 whitespace-pre-line">
|
|
{currentBulletin.scripture_reading}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{divineWorshipInfo?.Sermon && (
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Sermon</h3>
|
|
<div class="text-gray-600 dark:text-gray-300 whitespace-pre-line">
|
|
{divineWorshipInfo.Sermon}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{currentBulletin?.sunset && (
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Sunset Times</h3>
|
|
<div class="text-gray-600 dark:text-gray-300 whitespace-pre-line">
|
|
{currentBulletin.sunset}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Bulletins -->
|
|
{bulletins && bulletins.length > 1 && (
|
|
<section class="py-16 bg-gray-50 dark:bg-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">Recent Bulletins</h2>
|
|
<p class="text-xl text-gray-600 dark:text-gray-300">View our previous weekly bulletins</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{bulletins.slice(0, 6).map((bulletin) => (
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg">
|
|
<div class="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center mb-4">
|
|
<i data-lucide="calendar" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">{bulletin.title}</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
|
{formatBulletinDate(bulletin.date)}
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<a href={`/bulletin/${bulletin.id}`} class="inline-flex items-center space-x-2 bg-primary-600 text-white px-4 py-2 rounded-xl text-sm font-medium hover:bg-primary-700 transition-colors">
|
|
<i data-lucide="eye" class="w-4 h-4"></i>
|
|
<span>View</span>
|
|
</a>
|
|
{bulletin.pdf_path && (
|
|
<a href={bulletin.pdf_path} target="_blank" rel="noopener" class="inline-flex items-center space-x-2 bg-gray-600 text-white px-4 py-2 rounded-xl text-sm font-medium hover:bg-gray-700 transition-colors">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
<span>PDF</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{bulletins.length > 6 && (
|
|
<div class="text-center mt-12">
|
|
<a href="/bulletin/archive" class="inline-flex items-center space-x-2 bg-primary-600 text-white px-8 py-4 rounded-2xl font-semibold hover:bg-primary-700 transition-colors">
|
|
<i data-lucide="archive" class="w-5 h-5"></i>
|
|
<span>View All Bulletins ({bulletins.length})</span>
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- Prayer Requests & Contact -->
|
|
<section class="py-16 bg-white dark:bg-gray-900">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">Stay Connected</h2>
|
|
<p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
|
|
Have prayer requests or questions? We're here for you.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/contact" class="inline-flex items-center space-x-2 bg-primary-600 text-white px-8 py-4 rounded-2xl font-semibold hover:bg-primary-700 transition-colors">
|
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
|
<span>Contact Us</span>
|
|
</a>
|
|
<a href="/events" class="inline-flex items-center space-x-2 border-2 border-primary-600 text-primary-600 dark:text-primary-400 px-8 py-4 rounded-2xl font-semibold hover:bg-primary-600 hover:text-white transition-colors">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
<span>View Events</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MainLayout> |