Fix logo size, improve CSS styling with universal selector, and add error handling

server/api/sermons/[slug].get.ts

@@ -1,28 +1,37 @@
 import { getDatabase } from '~/server/utils/database'
+import { getRouterParam, createError } from 'h3'
 
 export default defineEventHandler(async (event) => {
-  const db = await getDatabase()
-  const slug = getRouterParam(event, 'slug')
+  try {
+    const db = await getDatabase()
+    const slug = getRouterParam(event, 'slug')
 
-  if (!slug) {
+    if (!slug) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Sermon slug is required'
+      })
+    }
+
+    const sermon = db.prepare('SELECT * FROM sermons WHERE slug = ?').get(slug) as any
+
+    if (!sermon) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Sermon not found'
+      })
+    }
+
+    // Parse JSON fields
+    return {
+      ...sermon,
+      bibleReferences: sermon.bible_references ? JSON.parse(sermon.bible_references) : []
+    }
+  } catch (error) {
+    console.error('Error loading sermon:', error)
     throw createError({
-      statusCode: 400,
-      statusMessage: 'Sermon slug is required'
+      statusCode: 500,
+      statusMessage: 'Failed to load sermon'
     })
   }
-
-  const sermon = db.prepare('SELECT * FROM sermons WHERE slug = ?').get(slug) as any
-
-  if (!sermon) {
-    throw createError({
-      statusCode: 404,
-      statusMessage: 'Sermon not found'
-    })
-  }
-
-  // Parse JSON fields
-  return {
-    ...sermon,
-    bibleReferences: sermon.bible_references ? JSON.parse(sermon.bible_references) : []
-  }
 })