Merge branch 'optimizations'

frontend/components/header.vue

@@ -15,10 +15,8 @@ const props = defineProps({
   }
 })
 
-// Get the site name from the global entry
-const siteName = computed(() => {
-  return useRuntimeConfig().public.SITE_NAME || 'Site Name'
-})
+const { public: { SITE_NAME } } = useRuntimeConfig()
+const siteName = computed(() => SITE_NAME || 'Site Name')
 </script>
 
 <template>

frontend/components/image.vue

@@ -1,25 +1,17 @@
 <script setup>
 const props = defineProps({
   image: {
-    type: String,
+    type: Object,
     required: true
   }
 })
-}
-
-const getPhotoUrl = (photo, width) => {
-  return `${photo.url}?width=${width}`
-}
 </script>
 
 <template>
-  <picture>
-    <source data-sizes="100vw" />
-    <img 
-      :src="image.url"
-      :srcset="image.srcset"
-      :alt="image.alt"
-      sizes="100vw"
-    />
-  </picture>
+  <nuxt-img
+    :src="image.url"
+    :alt="image.alt"
+    sizes="sm:100vw md:50vw lg:400px"
+    loading="lazy"
+  />
 </template>

frontend/components/navigation.vue

@@ -1,10 +1,14 @@
 <script setup>
+const route = useRoute()
+
 defineProps({
   pages: {
     type: Array,
     default: () => []
   }
 })
+
+const isCurrentPage = (path) => route.path === path
 </script>
 
 <template>
@@ -15,7 +19,7 @@ defineProps({
           to="/blog" 
           class="block p-2 hover:underline text-red-600 hover:text-red-600"
           active-class="text-red-600"
-          :aria-current="$route.path === '/blog' ? 'page' : null"
+          :aria-current="isCurrentPage('/blog') ? 'page' : null"
         >
           Blog
         </NuxtLink>
@@ -25,7 +29,7 @@ defineProps({
           to="/guestbook" 
           class="block p-2 hover:underline text-red-600 hover:text-red-600"
           active-class="text-red-600"
-          :aria-current="$route.path === '/guestbook' ? 'page' : null"
+          :aria-current="isCurrentPage('/guestbook') ? 'page' : null"
         >
           Guestbook
         </NuxtLink>
@@ -35,7 +39,7 @@ defineProps({
           :to="`/${page.uri}`" 
           class="block p-2 hover:underline text-red-600 hover:text-red-600"
           active-class="text-red-600"
-          :aria-current="$route.path === `/${page.uri}` ? 'page' : null"
+          :aria-current="isCurrentPage(`/${page.uri}`) ? 'page' : null"
         >
           {{ page.title }}
         </NuxtLink>

frontend/composables/useFlashes.js

@@ -7,7 +7,6 @@ export function useFlashes() {
     const id = Date.now()
     flashes.value.push({ id, message, level })
 
-    // Auto-remove after 5 seconds
     setTimeout(() => {
       removeFlash(id)
     }, 5000)

frontend/pages/[...slug].vue

@@ -52,7 +52,6 @@ const { data: pageData, refresh } = await useAsyncData(
   }
 )
 
-// Watch for preview changes and refresh data
 watch([isPreview, previewToken], () => {
   if (isPreview.value && previewToken.value) {
     refresh()

frontend/pages/blog/[slug].vue

@@ -43,7 +43,7 @@ const { data, error, refresh } = await useAsyncData(
     }
   },
   {
-    watch: [previewToken] // Watch preview token for changes
+    watch: [previewToken]
   }
 )
 
@@ -54,7 +54,6 @@ watch([isPreview, previewToken], () => {
   }
 })
 
-// Computed property for cleaner template
 const currentPost = computed(() => data.value?.blogPostsEntries?.[0] || null)
 const hasPost = computed(() => !!currentPost.value)
 const hasNextPrev = computed(() => hasPost.value && (currentPost.value?.prev || currentPost.value?.next))

frontend/pages/guestbook.vue

@@ -16,7 +16,7 @@ if (isPreview.value) {
   definePageMeta({ ssr: false })
 }
 
-// Data fetching using useAsyncData
+// Data fetching
 const { 
   data: content, 
   error, 
@@ -51,7 +51,6 @@ const handleNewPost = async () => {
   }
 }
 
-// Watch for preview changes
 watch([isPreview, previewToken], () => {
   if (isPreview.value && previewToken.value) {
     refreshContent()

frontend/pages/index.vue

@@ -30,7 +30,7 @@ const { data, refresh } = await useAsyncData(
     }
   },
   {
-    watch: [previewToken] // Automatically watch preview token
+    watch: [previewToken]
   }
 )