feat: enhance search with goodies, about pages and navigation links

- Add search indexing for goodies and content collections
- Add navigation sections with icons for Blog, Goodies, and About
- Add quick links for Home, Blog, Speaking, Goodies, and About
- Use appropriate icons: file-text for articles, gift for goodies, user for about

Author: TechWatching

app/app.vue

@@ -24,18 +24,66 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('posts'), {
+// Query multiple collections for search (posts, goodies, and about page)
+const { data: postsFiles } = useLazyAsyncData('search-posts', () => queryCollectionSearchSections('posts'), {
   server: false
 })
+const { data: goodiesFiles } = useLazyAsyncData('search-goodies', () => queryCollectionSearchSections('goodies'), {
+  server: false
+})
+const { data: contentFiles } = useLazyAsyncData('search-content', () => queryCollectionSearchSections('content'), {
+  server: false
+})
+
+// Combine all search files
+const files = computed(() => [
+  ...(postsFiles.value || []),
+  ...(goodiesFiles.value || []),
+  ...(contentFiles.value || [])
+])
 
-const { data: navigation } = useLazyAsyncData('navigation', () => queryCollectionNavigation('posts'), {
+// Query navigation for each collection
+const { data: postsNavigation } = useLazyAsyncData('navigation-posts', () => queryCollectionNavigation('posts'), {
   server: false
 })
+const { data: goodiesNavigation } = useLazyAsyncData('navigation-goodies', () => queryCollectionNavigation('goodies'), {
+  server: false
+})
+const { data: contentNavigation } = useLazyAsyncData('navigation-content', () => queryCollectionNavigation('content'), {
+  server: false
+})
+
+// Helper to add icon to navigation items
+const addIconToItems = (items: any[] | undefined, icon: string) => 
+  (items || []).map(item => ({ ...item, icon }))
+
+// Combine navigation with proper section labels and icons on each item
+const navigation = computed(() => [
+  { title: 'Blog', icon: 'i-lucide-file-text', path: '/posts', children: addIconToItems(postsNavigation.value?.find(item => item.path === '/posts')?.children || postsNavigation.value, 'i-lucide-file-text') },
+  { title: 'Goodies', icon: 'i-lucide-gift', path: '/goodies', children: addIconToItems(goodiesNavigation.value, 'i-lucide-gift') },
+  { title: 'About', icon: 'i-lucide-user', path: '/about', children: addIconToItems(contentNavigation.value?.filter(item => item.path === '/about'), 'i-lucide-user') }
+])
 
 const links = [{
+  label: 'Home',
+  icon: 'i-lucide-home',
+  to: '/'
+}, {
   label: 'Blog',
-  icon: 'i-lucide-pencil',
+  icon: 'i-lucide-file-text',
   to: '/posts'
+}, {
+  label: 'Speaking',
+  icon: 'i-lucide-mic',
+  to: '/speaking'
+}, {
+  label: 'Goodies',
+  icon: 'i-lucide-gift',
+  to: '/goodies'
+}, {
+  label: 'About',
+  icon: 'i-lucide-user',
+  to: '/about'
 }]
 
 // Use the content search composable

app/error.vue

@@ -19,17 +19,66 @@ useSeoMeta({
   description: 'We are sorry but this page could not be found.'
 })
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('posts'), {
-  transform: data => data.find(item => item.path === '/posts')?.children || []
+// Query navigation for each collection
+const { data: postsNavigation } = useLazyAsyncData('navigation-posts', () => queryCollectionNavigation('posts'), {
+  server: false
+})
+const { data: goodiesNavigation } = useLazyAsyncData('navigation-goodies', () => queryCollectionNavigation('goodies'), {
+  server: false
 })
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('posts'), {
+const { data: contentNavigation } = useLazyAsyncData('navigation-content', () => queryCollectionNavigation('content'), {
   server: false
 })
 
+// Helper to add icon to navigation items
+const addIconToItems = (items: any[] | undefined, icon: string) => 
+  (items || []).map(item => ({ ...item, icon }))
+
+// Combine navigation with proper section labels and icons on each item
+const navigation = computed(() => [
+  { title: 'Blog', icon: 'i-lucide-file-text', path: '/posts', children: addIconToItems(postsNavigation.value?.find(item => item.path === '/posts')?.children || postsNavigation.value, 'i-lucide-file-text') },
+  { title: 'Goodies', icon: 'i-lucide-gift', path: '/goodies', children: addIconToItems(goodiesNavigation.value, 'i-lucide-gift') },
+  { title: 'About', icon: 'i-lucide-user', path: '/about', children: addIconToItems(contentNavigation.value?.filter(item => item.path === '/about'), 'i-lucide-user') }
+])
+
+// Query multiple collections for search (posts, goodies, and about page)
+const { data: postsFiles } = useLazyAsyncData('search-posts', () => queryCollectionSearchSections('posts'), {
+  server: false
+})
+const { data: goodiesFiles } = useLazyAsyncData('search-goodies', () => queryCollectionSearchSections('goodies'), {
+  server: false
+})
+const { data: contentFiles } = useLazyAsyncData('search-content', () => queryCollectionSearchSections('content'), {
+  server: false
+})
+
+// Combine all search files
+const files = computed(() => [
+  ...(postsFiles.value || []),
+  ...(goodiesFiles.value || []),
+  ...(contentFiles.value || [])
+])
+
 const links = [{
+  label: 'Home',
+  icon: 'i-lucide-home',
+  to: '/'
+}, {
   label: 'Blog',
-  icon: 'i-lucide-pencil',
+  icon: 'i-lucide-file-text',
   to: '/posts'
+}, {
+  label: 'Speaking',
+  icon: 'i-lucide-mic',
+  to: '/speaking'
+}, {
+  label: 'Goodies',
+  icon: 'i-lucide-gift',
+  to: '/goodies'
+}, {
+  label: 'About',
+  icon: 'i-lucide-user',
+  to: '/about'
 }]
 </script>