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

Add enhanced Bible reference fields with version, reference, and text for better sermon display formatting

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-01 22:54:07 -04:00
parent b0ede7dd61
commit 441a7af81b
2 changed files with 87 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
pages/[slug].vue
View File

@@ -22,17 +22,22 @@
<!-- Section 1: Bible References -->
<section class="mb-8">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Bible References</h2>
<div class="bg-blue-50 rounded-lg p-6">
<ul class="space-y-2">
<li
v-for="(ref, index) in bibleReferences"
:key="index"
class="text-gray-800 flex items-start"
>
<span class="text-blue-600 mr-2">•</span>
<span>{{ ref }}</span>
</li>
</ul>
<div class="space-y-6">
<div
v-for="(ref, index) in bibleReferences"
:key="index"
class="bg-blue-50 rounded-lg p-6"
>
<div class="flex items-start justify-between gap-4">
<p class="text-gray-800 text-lg leading-relaxed flex-1">
{{ ref.text }}
</p>
<div class="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>
@@ -92,7 +97,15 @@ const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
const bibleReferences = computed(() => {
if (!sermon.value?.bible_references) return []
return sermon.value.bible_references.split('\n').filter((ref: string) => ref.trim())
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 }))
}
})
function formatDate(dateString: string) {

82
pages/admin.vue
View File

@@ -98,22 +98,60 @@
<!-- Section 1: Bible References -->
<div class="border-t pt-6">
<h2 class="text-xl font-semibold text-gray-900 mb-4">Section 1: Bible References</h2>
<div class="space-y-3">
<div v-for="(ref, index) in bibleReferences" :key="index" class="flex gap-2">
<input
v-model="bibleReferences[index]"
type="text"
placeholder="e.g., John 3:16"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
/>
<button
v-if="bibleReferences.length > 1"
type="button"
@click="removeReference(index)"
class="px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200"
>
−
</button>
<div class="space-y-6">
<div v-for="(ref, index) in bibleReferences" :key="index" class="border border-gray-200 rounded-lg p-4 space-y-3">
<div class="flex gap-3">
<div class="w-64">
<label :for="`version-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
Bible Version
</label>
<select
:id="`version-${index}`"
v-model="ref.version"
class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
>
<option value="ESV">English Standard Version (ESV)</option>
<option value="NKJV">New King James Version (NKJV)</option>
<option value="NIV">New International Version (NIV)</option>
<option value="KJV">King James Version (KJV)</option>
<option value="NLT">New Living Translation (NLT)</option>
<option value="NASB">New American Standard Bible (NASB)</option>
<option value="CSB">Christian Standard Bible (CSB)</option>
</select>
</div>
<div class="flex-1">
<label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
Book & Verses (e.g., Galatians 5:22-23)
</label>
<input
:id="`reference-${index}`"
v-model="ref.reference"
type="text"
placeholder="e.g., John 3:16 or Romans 8:28-30"
class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<button
v-if="bibleReferences.length > 1"
type="button"
@click="removeReference(index)"
class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200"
>
−
</button>
</div>
<div>
<label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
Verse Text
</label>
<textarea
:id="`text-${index}`"
v-model="ref.text"
rows="3"
placeholder="Paste the verse text here..."
class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
></textarea>
</div>
</div>
<button
type="button"
@@ -193,7 +231,7 @@ const deleteSuccess = ref('')
const deleting = ref(false)
// Create sermon form state
const bibleReferences = ref([''])
const bibleReferences = ref([{ version: 'ESV', reference: '', text: '' }])
const formData = ref({
date: '',
title: '',
@@ -205,7 +243,7 @@ const success = ref('')
const loading = ref(false)
function addReference() {
bibleReferences.value.push('')
bibleReferences.value.push({ version: 'ESV', reference: '', text: '' })
}
function removeReference(index: number) {
@@ -225,7 +263,11 @@ async function handleSubmit() {
try {
const slug = formatDateToSlug(formData.value.date)
const bible_references = bibleReferences.value.filter(ref => ref.trim()).join('\n')
// Filter out empty references and serialize as JSON
const validReferences = bibleReferences.value.filter(ref =>
ref.version && ref.reference && ref.text
)
const bible_references = JSON.stringify(validReferences)
await $fetch('/api/sermons', {
method: 'POST',
@@ -248,7 +290,7 @@ async function handleSubmit() {
personal_appliance: '',
pastors_challenge: ''
}
bibleReferences.value = ['']
bibleReferences.value = [{ version: 'ESV', reference: '', text: '' }]
// Redirect after 2 seconds
setTimeout(() => {