kmcom-nuxt-layers 2.2.5 → 2.2.8

package/layers/content/app/composables/useBlogPosts.ts

@@ -4,8 +4,8 @@ export function useBlogPosts(options: BlogQueryOptions = {}) {
   const { excludeDrafts = true, tags, limit } = options
 
   return useContentData('blog-posts', async () => {
-    let posts = (await queryCollection('blog').all()).sort(
-      (a, b) => (b.date ?? '').localeCompare(a.date ?? '')
+    let posts = (await queryCollection('blog').all()).sort((a, b) =>
+      (b.date ?? '').localeCompare(a.date ?? '')
     )
 
     if (excludeDrafts) {

package/layers/content/app/composables/useCollectionItem.ts

@@ -2,8 +2,6 @@ import type { Collections } from '@nuxt/content'
 
 export function useCollectionItem(collection: keyof Collections, slug: string) {
   return useContentData(`${collection}-${slug}`, () =>
-    queryCollection(collection)
-      .path(`/${collection}/${slug}`)
-      .first()
+    queryCollection(collection).path(`/${collection}/${slug}`).first()
   )
 }

package/layers/content/app/composables/useGalleryItems.ts

@@ -4,8 +4,8 @@ export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const { tags, limit } = options
 
   return useContentData('gallery-items', async () => {
-    let items = (await queryCollection('gallery').all()).sort(
-      (a, b) => (b.date ?? '').localeCompare(a.date ?? '')
+    let items = (await queryCollection('gallery').all()).sort((a, b) =>
+      (b.date ?? '').localeCompare(a.date ?? '')
     )
 
     if (tags?.length) {

package/layers/content/app/types/index.ts

@@ -0,0 +1 @@
+export type * from './content'

package/layers/content/package.json

@@ -10,7 +10,8 @@
     "dev:prepare": "nuxt prepare .playground",
     "build": "CONTENT_STANDALONE=true nuxi build",
     "generate": "CONTENT_STANDALONE=true nuxi generate",
-    "preview": "nuxt preview .playground"
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
   },
   "devDependencies": {
     "@nuxt/content": "catalog:"

package/layers/core/app/composables/useCache.ts

@@ -1,4 +1,3 @@
-
 // composables/useCache.ts
 import { useOnline } from '@vueuse/core'
 

package/layers/core/app/composables/useErrorLog.ts

@@ -94,9 +94,9 @@ export function useErrorLog() {
     const { externalUrl, externalToken } = config.value
 
     if (!externalUrl) {
-      process.env.NODE_ENV === 'development'
-        ? console.warn('Error logging enabled but no externalUrl configured')
-        : ''
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Error logging enabled but no externalUrl configured')
+      }
       return
     }
 
@@ -118,10 +118,8 @@ export function useErrorLog() {
       })
     } catch (loggingError) {
       // Don't let logging errors crash the app
-      if (import.meta.dev) {
-        process.env.NODE_ENV === 'development'
-          ? console.error('Failed to send error to external service:', loggingError)
-          : ''
+      if (import.meta.dev && process.env.NODE_ENV === 'development') {
+        console.error('Failed to send error to external service:', loggingError)
       }
     }
   }
@@ -130,8 +128,8 @@ export function useErrorLog() {
    * Log a warning (non-critical error)
    */
   const logWarning = (message: string, context?: ErrorContext) => {
-    if (config.value.logToConsole && import.meta.dev) {
-      process.env.NODE_ENV === 'development' ? console.warn('⚠️  Warning:', message, context) : ''
+    if (config.value.logToConsole && import.meta.dev && process.env.NODE_ENV === 'development') {
+      console.warn('⚠️  Warning:', message, context)
     }
   }
 
@@ -139,8 +137,8 @@ export function useErrorLog() {
    * Log info (for debugging)
    */
   const logInfo = (message: string, data?: unknown) => {
-    if (config.value.logToConsole && import.meta.dev) {
-      process.env.NODE_ENV === 'development' ? console.log('ℹ️  Info:', message, data) : ''
+    if (config.value.logToConsole && import.meta.dev && process.env.NODE_ENV === 'development') {
+      console.log('ℹ️  Info:', message, data)
     }
   }
 

package/layers/core/app/plugins/error-handler.ts

@@ -1,49 +1,49 @@
 export default defineNuxtPlugin({
   name: 'core:error-handler',
   setup(nuxtApp) {
-  const { logError } = useErrorLog()
+    const { logError } = useErrorLog()
 
-  // Global Vue error handler
-  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
-    // Get component name for context
-    const componentName =
-      instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
+    // Global Vue error handler
+    nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
+      // Get component name for context
+      const componentName =
+        instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
 
-    // Log error with context
-    logError(error, {
-      component: componentName,
-      info: String(info),
-      type: 'vue-error',
-    })
-  }
+      // Log error with context
+      logError(error, {
+        component: componentName,
+        info: String(info),
+        type: 'vue-error',
+      })
+    }
 
-  // Nuxt-specific error hook (catches errors during SSR, routing, etc.)
-  nuxtApp.hook('vue:error', (error, instance, info) => {
-    // Get component name for context
-    const componentName =
-      instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
+    // Nuxt-specific error hook (catches errors during SSR, routing, etc.)
+    nuxtApp.hook('vue:error', (error, instance, info) => {
+      // Get component name for context
+      const componentName =
+        instance?.$options?.name || instance?.$options?.__name || 'Unknown Component'
 
-    // Log error with context
-    logError(error, {
-      component: componentName,
-      info: String(info),
-      type: 'nuxt-error',
+      // Log error with context
+      logError(error, {
+        component: componentName,
+        info: String(info),
+        type: 'nuxt-error',
+      })
     })
-  })
 
-  // Handle app initialization errors
-  nuxtApp.hook('app:error', (error) => {
-    logError(error, {
-      type: 'app-error',
-      info: 'Application initialization error',
+    // Handle app initialization errors
+    nuxtApp.hook('app:error', (error) => {
+      logError(error, {
+        type: 'app-error',
+        info: 'Application initialization error',
+      })
     })
-  })
 
-  // Handle page errors
-  nuxtApp.hook('app:error:cleared', () => {
-    if (import.meta.dev) {
-      console.log('✅ Error cleared')
-    }
-  })
+    // Handle page errors
+    nuxtApp.hook('app:error:cleared', () => {
+      if (import.meta.dev) {
+        console.log('✅ Error cleared')
+      }
+    })
   },
 })

package/layers/core/app/plugins/feature-detection.client.ts

@@ -14,21 +14,21 @@
 export default defineNuxtPlugin({
   name: 'core:feature-detection',
   setup() {
-  // Initialize feature detection
-  const features = useFeatures()
+    // Initialize feature detection
+    const features = useFeatures()
 
-  if (import.meta.dev && process.env.NODE_ENV === 'development') {
-    console.log('[Feature Detection] Initialized:', {
-      grid: features.grid.value,
-      subgrid: features.subgrid.value,
-      containerQueries: features.containerQueries.value,
-      has: features.has.value,
-      webGL: features.webGL.value,
-      darkMode: features.darkMode.value,
-      reducedMotion: features.reducedMotion.value,
-      webp: features.webp.value,
-      avif: features.avif.value,
-    })
-  }
+    if (import.meta.dev && process.env.NODE_ENV === 'development') {
+      console.log('[Feature Detection] Initialized:', {
+        grid: features.grid.value,
+        subgrid: features.subgrid.value,
+        containerQueries: features.containerQueries.value,
+        has: features.has.value,
+        webGL: features.webGL.value,
+        darkMode: features.darkMode.value,
+        reducedMotion: features.reducedMotion.value,
+        webp: features.webp.value,
+        avif: features.avif.value,
+      })
+    }
   },
 })

package/layers/core/app/plugins/init.ts

@@ -12,167 +12,159 @@
 export default defineNuxtPlugin({
   name: 'core:init',
   setup(nuxtApp) {
-  const config = useAppConfig()
-  // const isDev = import.meta.dev
-  const isDev = process.env.NODE_ENV === 'development'
-
-  // ============================================================
-  // 1. Log initialization (dev only)
-  // ============================================================
-  if (isDev) {
-    console.log('🚀 [Core Layer] Initializing...')
-
-    console.log('[Core Layer] Config:', config.coreLayer)
-  }
-
-  // ============================================================
-  // 2. Verify modules and composables are loaded
-  // ============================================================
-  try {
-    // Test @nuxtjs/device module (SSR-safe: returns undefined before device plugin runs)
-    const device = useDevice()
-
-    if (isDev && device) {
-      console.log('[Core Layer] Device detection:', {
-        mobile: device.isMobile,
-        desktop: device.isDesktop,
-        tablet: device.isTablet,
-      })
-    }
-
-    // Test @vueuse/nuxt module
-    const isOnline = useOnline()
+    const config = useAppConfig()
+    // const isDev = import.meta.dev
+    const isDev = process.env.NODE_ENV === 'development'
 
+    // 1. Log initialization (dev only)
     if (isDev) {
-      console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
+      console.log('🚀 [Core Layer] Initializing...')
+
+      console.log('[Core Layer] Config:', config.coreLayer)
     }
 
-    // Client-only detection (requires browser APIs)
-    if (import.meta.client) {
-      // Test browser detection composable
-      const { name, version, engine, os } = useBrowser()
+    // 2. Verify modules and composables are loaded
+    try {
+      // Test @nuxtjs/device module (SSR-safe: returns undefined before device plugin runs)
+      const device = useDevice()
 
-      if (isDev) {
-        console.log('[Core Layer] Browser detection:', {
-          name: name.value,
-          version: version.value,
-          engine: engine.value,
-          os: os.value,
+      if (isDev && device) {
+        console.log('[Core Layer] Device detection:', {
+          mobile: device.isMobile,
+          desktop: device.isDesktop,
+          tablet: device.isTablet,
         })
       }
 
-      // Test screen/breakpoint composable
-      const { breakpoint, isRetina, orientation } = useScreen()
+      // Test @vueuse/nuxt module
+      const isOnline = useOnline()
 
       if (isDev) {
-        console.log('[Core Layer] Screen detection:', {
-          breakpoint: breakpoint.value,
-          retina: isRetina.value,
-          orientation: orientation.value,
-        })
+        console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
       }
 
-      // Test network info composable
-      const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
-
-      if (isDev) {
-        console.log('[Core Layer] Network detection:', {
-          quality: connectionQuality.value,
-          type: effectiveType.value,
-          dataSaver: saveData.value,
-        })
+      // Client-only detection (requires browser APIs)
+      if (import.meta.client) {
+        // Test browser detection composable
+        const { name, version, engine, os } = useBrowser()
+
+        if (isDev) {
+          console.log('[Core Layer] Browser detection:', {
+            name: name.value,
+            version: version.value,
+            engine: engine.value,
+            os: os.value,
+          })
+        }
+
+        // Test screen/breakpoint composable
+        const { breakpoint, isRetina, orientation } = useScreen()
+
+        if (isDev) {
+          console.log('[Core Layer] Screen detection:', {
+            breakpoint: breakpoint.value,
+            retina: isRetina.value,
+            orientation: orientation.value,
+          })
+        }
+
+        // Test network info composable
+        const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
+
+        if (isDev) {
+          console.log('[Core Layer] Network detection:', {
+            quality: connectionQuality.value,
+            type: effectiveType.value,
+            dataSaver: saveData.value,
+          })
+        }
+
+        // Test feature detection composable
+        const { grid, subgrid, containerQueries, webGL, darkMode } = useFeatures()
+
+        if (isDev) {
+          console.log('[Core Layer] Feature detection:', {
+            grid: grid.value,
+            subgrid: subgrid.value,
+            containerQueries: containerQueries.value,
+            webGL: webGL.value,
+            darkMode: darkMode.value,
+          })
+        }
+
+        // Test cache management composable
+        const { offlineReady, isOnline: cacheOnline } = useCache()
+
+        if (isDev) {
+          console.log('[Core Layer] Cache status:', {
+            online: cacheOnline.value,
+            offlineReady: offlineReady.value,
+          })
+        }
+
+        // PWA composable is only available in production
+        // Use usePWAInfo() from core layer for PWA status
       }
 
-      // Test feature detection composable
-      const { grid, subgrid, containerQueries, webGL, darkMode } = useFeatures()
+      // Test rendering mode detection (works on both server and client)
+      const { mode, isServer, isClient, isHydrated } = useRendering()
 
       if (isDev) {
-        console.log('[Core Layer] Feature detection:', {
-          grid: grid.value,
-          subgrid: subgrid.value,
-          containerQueries: containerQueries.value,
-          webGL: webGL.value,
-          darkMode: darkMode.value,
+        console.log('[Core Layer] Rendering mode:', {
+          mode: mode.value,
+          server: isServer.value,
+          client: isClient.value,
+          hydrated: isHydrated.value,
         })
       }
 
-      // Test cache management composable
-      const { offlineReady, isOnline: cacheOnline } = useCache()
+      // Test environment access (works on both server and client)
+      const env = useEnv() as unknown as Record<string, unknown>
 
       if (isDev) {
-        console.log('[Core Layer] Cache status:', {
-          online: cacheOnline.value,
-          offlineReady: offlineReady.value,
+        const publicConfig = env.public as Record<string, unknown> | undefined
+
+        console.log('[Core Layer] Environment config loaded:', {
+          hasPublicConfig: Boolean(publicConfig),
+          publicKeys: Object.keys(publicConfig ?? {}),
         })
       }
-
-      // PWA composable is only available in production
-      // Use usePWAInfo() from core layer for PWA status
+    } catch (error) {
+      console.error('[Core Layer] Module verification failed:', error)
     }
 
-    // Test rendering mode detection (works on both server and client)
-    const { mode, isServer, isClient, isHydrated } = useRendering()
-
+    // 3. App lifecycle hooks (dev logging)
     if (isDev) {
-      console.log('[Core Layer] Rendering mode:', {
-        mode: mode.value,
-        server: isServer.value,
-        client: isClient.value,
-        hydrated: isHydrated.value,
+      nuxtApp.hook('app:created', () => {
+        console.log('✅ [Core Layer] App created')
       })
-    }
 
-    // Test environment access (works on both server and client)
-    const env = useEnv() as unknown as Record<string, unknown>
+      nuxtApp.hook('app:beforeMount', () => {
+        console.log('⏳ [Core Layer] App mounting...')
+      })
 
-    if (isDev) {
-      const publicConfig = env.public as Record<string, unknown> | undefined
+      nuxtApp.hook('app:mounted', () => {
+        console.log('✅ [Core Layer] App mounted')
+      })
+
+      nuxtApp.hook('page:start', () => {
+        console.log('📄 [Core Layer] Page navigation started')
+      })
 
-      console.log('[Core Layer] Environment config loaded:', {
-        hasPublicConfig: Boolean(publicConfig),
-        publicKeys: Object.keys(publicConfig ?? {}),
+      nuxtApp.hook('page:finish', () => {
+        console.log('✅ [Core Layer] Page navigation finished')
       })
     }
-  } catch (error) {
-    console.error('[Core Layer] Module verification failed:', error)
-  }
-
-  // ============================================================
-  // 3. App lifecycle hooks (dev logging)
-  // ============================================================
-  if (isDev) {
-    nuxtApp.hook('app:created', () => {
-      console.log('✅ [Core Layer] App created')
-    })
-
-    nuxtApp.hook('app:beforeMount', () => {
-      console.log('⏳ [Core Layer] App mounting...')
-    })
-
-    nuxtApp.hook('app:mounted', () => {
-      console.log('✅ [Core Layer] App mounted')
-    })
-
-    nuxtApp.hook('page:start', () => {
-      console.log('📄 [Core Layer] Page navigation started')
-    })
-
-    nuxtApp.hook('page:finish', () => {
-      console.log('✅ [Core Layer] Page navigation finished')
-    })
-  }
-
-  // ============================================================
-  // 4. Provide global helpers (optional)
-  // ============================================================
-  // Make core utilities available throughout the app
-  return {
-    provide: {
-      coreLayer: {
-        version: '1.0.0',
-        initialized: true,
+
+    // 4. Provide global helpers (optional)
+    // Make core utilities available throughout the app
+    return {
+      provide: {
+        coreLayer: {
+          version: '1.0.0',
+          initialized: true,
+        },
       },
-    },
-  }
+    }
   },
 })

package/layers/core/app/plugins/loading.client.ts

@@ -26,32 +26,32 @@ type CoreLayerConfig = {
 export default defineNuxtPlugin({
   name: 'core:loading',
   setup(nuxtApp) {
-  const config = useAppConfig()
-  const coreLayer = config.coreLayer as CoreLayerConfig | undefined
-
-  // console.log('[Loading Plugin] Config:', coreLayer?.loading)
-
-  // Check if loading is enabled
-  if (coreLayer?.loading?.enabled === false) {
-    // console.log('[Loading Plugin] Disabled')
-    return // Disabled, skip initialization
-  }
-
-  const { startLoading, stopLoading } = useLoading()
-
-  // console.log('[Loading Plugin] Starting loading...')
-  // Start loading immediately on plugin load
-  startLoading()
-
-  // Stop loading when app is fully mounted
-  nuxtApp.hook('app:mounted', () => {
-    // console.log('[Loading Plugin] App mounted, will stop in 500ms')
-    // Add a small delay to ensure LoadingScreen component has mounted
-    // and is visible before we stop loading
-    setTimeout(() => {
-      // console.log('[Loading Plugin] Stopping loading now')
-      stopLoading()
-    }, 500) // 500ms delay to ensure component is visible
-  })
+    const config = useAppConfig()
+    const coreLayer = config.coreLayer as CoreLayerConfig | undefined
+
+    // console.log('[Loading Plugin] Config:', coreLayer?.loading)
+
+    // Check if loading is enabled
+    if (coreLayer?.loading?.enabled === false) {
+      // console.log('[Loading Plugin] Disabled')
+      return // Disabled, skip initialization
+    }
+
+    const { startLoading, stopLoading } = useLoading()
+
+    // console.log('[Loading Plugin] Starting loading...')
+    // Start loading immediately on plugin load
+    startLoading()
+
+    // Stop loading when app is fully mounted
+    nuxtApp.hook('app:mounted', () => {
+      // console.log('[Loading Plugin] App mounted, will stop in 500ms')
+      // Add a small delay to ensure LoadingScreen component has mounted
+      // and is visible before we stop loading
+      setTimeout(() => {
+        // console.log('[Loading Plugin] Stopping loading now')
+        stopLoading()
+      }, 500) // 500ms delay to ensure component is visible
+    })
   },
 })

package/layers/core/app/plugins/scroll-guard.client.ts

@@ -23,34 +23,34 @@ type CoreLayerConfig = {
 export default defineNuxtPlugin({
   name: 'core:scroll-guard',
   setup() {
-  const config = useAppConfig()
-  const coreLayer = config.coreLayer as CoreLayerConfig | undefined
+    const config = useAppConfig()
+    const coreLayer = config.coreLayer as CoreLayerConfig | undefined
+
+    if (coreLayer?.scrollGuard?.enabled === false) {
+      if (import.meta.dev) {
+        console.log('[Scroll Guard] Disabled via config')
+      }
+      return
+    }
+
+    const { enable, clampedCount } = useScrollGuard()
+
+    enable()
 
-  if (coreLayer?.scrollGuard?.enabled === false) {
     if (import.meta.dev) {
-      console.log('[Scroll Guard] Disabled via config')
+      console.log('[Scroll Guard] Initialized', {
+        strict: coreLayer?.scrollGuard?.strict ?? true,
+        debug: coreLayer?.scrollGuard?.debug ?? false,
+        excludeSelectors: coreLayer?.scrollGuard?.excludeSelectors ?? [
+          '.carousel',
+          '.overflow-intent',
+        ],
+      })
+
+      // Log clamped count after initial scan settles
+      requestAnimationFrame(() => {
+        console.log(`[Scroll Guard] Clamped ${clampedCount.value} element(s)`)
+      })
     }
-    return
-  }
-
-  const { enable, clampedCount } = useScrollGuard()
-
-  enable()
-
-  if (import.meta.dev) {
-    console.log('[Scroll Guard] Initialized', {
-      strict: coreLayer?.scrollGuard?.strict ?? true,
-      debug: coreLayer?.scrollGuard?.debug ?? false,
-      excludeSelectors: coreLayer?.scrollGuard?.excludeSelectors ?? [
-        '.carousel',
-        '.overflow-intent',
-      ],
-    })
-
-    // Log clamped count after initial scan settles
-    requestAnimationFrame(() => {
-      console.log(`[Scroll Guard] Clamped ${clampedCount.value} element(s)`)
-    })
-  }
   },
 })