kmcom-nuxt-layers 2.2.11 → 2.2.13

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

@@ -1,25 +1,17 @@
 import type { PortfolioQueryOptions } from '../types/content'
+import { useCollectionItems } from './useCollectionItems'
 
 export function usePortfolioItems(options: PortfolioQueryOptions = {}) {
   const { featured, tags, limit } = options
 
-  return useContentData('portfolio-items', async () => {
-    let items = (await queryCollection('portfolio').all()).sort(
-      (a, b) => (b.year ?? 0) - (a.year ?? 0)
-    )
-
-    if (featured !== undefined) {
-      items = items.filter((item) => item.featured === featured)
-    }
-
-    if (tags?.length) {
-      items = items.filter((item) => item.tags?.some((tag: string) => tags.includes(tag)))
-    }
-
-    if (limit) {
-      items = items.slice(0, limit)
-    }
-
-    return items
+  return useCollectionItems({
+    key: 'portfolio-items',
+    collection: 'portfolio',
+    sort: (a, b) => (b.year ?? 0) - (a.year ?? 0),
+    options: { limit },
+    // fallow-ignore-next-line complexity
+    filter: (item) =>
+      (featured === undefined || item.featured === featured) &&
+      (!tags?.length || Boolean(item.tags?.some((tag: string) => tags.includes(tag)))),
   })
 }

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

@@ -1,63 +1,9 @@
-// composables/useBrowser.ts
-
-type BrowserInfo = {
-  name: string
-  version: string
-  engine: string
-  os: string
-}
-
-/**
- * Parse user agent to detect browser information
- */
-function parseBrowserInfo(): BrowserInfo {
-  if (!import.meta.client) {
-    return {
-      name: 'unknown',
-      version: '0',
-      engine: 'unknown',
-      os: 'unknown',
-    }
-  }
-
-  const ua = navigator.userAgent
-  let name = 'unknown'
-  let version = '0'
-  let engine = 'unknown'
-  let os = 'unknown'
-
-  // Detect OS
-  if (ua.includes('Win')) os = 'windows'
-  else if (ua.includes('Mac')) os = 'macos'
-  else if (ua.includes('Linux')) os = 'linux'
-  else if (ua.includes('Android')) os = 'android'
-  else if (ua.includes('iOS') || ua.includes('iPhone') || ua.includes('iPad')) os = 'ios'
-
-  // Detect browser (order matters - check most specific first)
-  if (ua.includes('Edg/')) {
-    name = 'edge'
-    engine = 'blink'
-    version = ua.match(/Edg\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Chrome/') && !ua.includes('Edg')) {
-    name = 'chrome'
-    engine = 'blink'
-    version = ua.match(/Chrome\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
-    name = 'safari'
-    engine = 'webkit'
-    version = ua.match(/Version\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Firefox/')) {
-    name = 'firefox'
-    engine = 'gecko'
-    version = ua.match(/Firefox\/([\d.]+)/)?.[1] || '0'
-  } else if (ua.includes('Opera/') || ua.includes('OPR/')) {
-    name = 'opera'
-    engine = 'blink'
-    version = ua.match(/(?:Opera|OPR)\/([\d.]+)/)?.[1] || '0'
-  }
-
-  return { name, version, engine, os }
-}
+import {
+  getBrowserVersionParts,
+  isBrowserAtLeast,
+  parseBrowserInfo,
+  type BrowserInfo,
+} from '#layers/core/app/utils/browserInfo'
 
 /**
  * Browser detection composable
@@ -93,15 +39,11 @@ export function useBrowser() {
 
   // Version helpers
   const majorVersion = computed(() => {
-    const parts = info.value.version.split('.')
-    const major = parts[0]
-    return major ? parseInt(major, 10) : 0
+    return getBrowserVersionParts(info.value.version).major
   })
 
   const minorVersion = computed(() => {
-    const parts = info.value.version.split('.')
-    const minor = parts[1] || '0'
-    return parseInt(minor, 10)
+    return getBrowserVersionParts(info.value.version).minor
   })
 
   /**
@@ -109,22 +51,7 @@ export function useBrowser() {
    * @param minVersion - Minimum version string (e.g., "100" or "100.0")
    */
   const isAtLeast = (minVersion: string): boolean => {
-    const parts = minVersion.split('.')
-    const minMajor = parts[0]
-    const minMinor = parts[1] || '0'
-
-    if (!minMajor) return false
-
-    const major = majorVersion.value
-    const minor = minorVersion.value
-
-    const minMajorNum = parseInt(minMajor, 10)
-    const minMinorNum = parseInt(minMinor, 10)
-
-    if (major > minMajorNum) return true
-    if (major === minMajorNum && minor >= minMinorNum) return true
-
-    return false
+    return isBrowserAtLeast(info.value.version, minVersion)
   }
 
   return {

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

@@ -1,5 +1,6 @@
 // composables/useFeatures.ts
 import type { FeatureDetection } from '#layers/core/app/types/detection'
+import { getFeatureClassNames, removeFeatureClasses } from '#layers/core/app/utils/featureClasses'
 import {
   usePreferredContrast,
   usePreferredDark,
@@ -139,34 +140,9 @@ async function checkImageFormat(format: 'webp' | 'avif'): Promise<boolean> {
 function applyFeatureClasses(features: FeatureDetection) {
   if (!import.meta.client || !document.documentElement) return
 
-  // Remove old classes first
   const htmlClasses = document.documentElement.classList
-  const classesToRemove = Array.from(htmlClasses).filter(
-    (cls) => cls.startsWith('supports-') || cls.startsWith('no-') || cls.startsWith('has-')
-  )
-  htmlClasses.remove(...classesToRemove)
-
-  const classes: string[] = []
-
-  // CSS features
-  classes.push(features.grid ? 'supports-grid' : 'no-grid')
-  classes.push(features.subgrid ? 'supports-subgrid' : 'no-subgrid')
-  classes.push(features.containerQueries ? 'supports-container-queries' : 'no-container-queries')
-  classes.push(features.has ? 'supports-has' : 'no-has')
-  classes.push(features.aspectRatio ? 'supports-aspect-ratio' : 'no-aspect-ratio')
-  classes.push(features.backdropFilter ? 'supports-backdrop-filter' : 'no-backdrop-filter')
-
-  // JS APIs
-  if (features.intersectionObserver) classes.push('has-intersection-observer')
-  if (features.resizeObserver) classes.push('has-resize-observer')
-  if (features.serviceWorker) classes.push('has-service-worker')
-  if (features.webGL) classes.push('has-webgl')
-
-  // Image formats
-  if (features.webp) classes.push('supports-webp')
-  if (features.avif) classes.push('supports-avif')
-
-  htmlClasses.add(...classes)
+  removeFeatureClasses(htmlClasses)
+  htmlClasses.add(...getFeatureClassNames(features))
 }
 
 /**

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

@@ -9,155 +9,177 @@
  *
  * This runs before other plugins and ensures the app is ready.
  */
+
+function logCoreDeviceState(isDev: boolean) {
+  const device = useDevice()
+  if (isDev && device) {
+    console.log('[Core Layer] Device detection:', {
+      mobile: device.isMobile,
+      desktop: device.isDesktop,
+      tablet: device.isTablet,
+    })
+  }
+}
+
+function logCoreOnlineState(isDev: boolean) {
+  const isOnline = useOnline()
+  if (isDev) {
+    console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
+  }
+}
+
+function logCoreBrowserState(isDev: boolean) {
+  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,
+    })
+  }
+}
+
+function logCoreScreenState(isDev: boolean) {
+  const { breakpoint, isRetina, orientation } = useScreen()
+
+  if (isDev) {
+    console.log('[Core Layer] Screen detection:', {
+      breakpoint: breakpoint.value,
+      retina: isRetina.value,
+      orientation: orientation.value,
+    })
+  }
+}
+
+function logCoreNetworkState(isDev: boolean) {
+  const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
+
+  if (isDev) {
+    console.log('[Core Layer] Network detection:', {
+      quality: connectionQuality.value,
+      type: effectiveType.value,
+      dataSaver: saveData.value,
+    })
+  }
+}
+
+function logCoreFeatureState(isDev: boolean) {
+  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,
+    })
+  }
+}
+
+function logCoreCacheState(isDev: boolean) {
+  const { offlineReady, isOnline: cacheOnline } = useCache()
+
+  if (isDev) {
+    console.log('[Core Layer] Cache status:', {
+      online: cacheOnline.value,
+      offlineReady: offlineReady.value,
+    })
+  }
+}
+
+function logCoreClientDiagnostics(isDev: boolean) {
+  if (!import.meta.client) return
+
+  logCoreBrowserState(isDev)
+  logCoreScreenState(isDev)
+  logCoreNetworkState(isDev)
+  logCoreFeatureState(isDev)
+  logCoreCacheState(isDev)
+}
+
+function logCoreRenderingState(isDev: boolean) {
+  const { mode, isServer, isClient, isHydrated } = useRendering()
+
+  if (isDev) {
+    console.log('[Core Layer] Rendering mode:', {
+      mode: mode.value,
+      server: isServer.value,
+      client: isClient.value,
+      hydrated: isHydrated.value,
+    })
+  }
+}
+
+function logCoreEnvironmentState(isDev: boolean) {
+  const env = useEnv() as unknown as Record<string, unknown>
+
+  if (isDev) {
+    const publicConfig = env.public as Record<string, unknown> | undefined
+
+    console.log('[Core Layer] Environment config loaded:', {
+      hasPublicConfig: Boolean(publicConfig),
+      publicKeys: Object.keys(publicConfig ?? {}),
+    })
+  }
+}
+
+function verifyCoreLayerModules(isDev: boolean) {
+  try {
+    logCoreDeviceState(isDev)
+    logCoreOnlineState(isDev)
+    logCoreClientDiagnostics(isDev)
+    logCoreRenderingState(isDev)
+    logCoreEnvironmentState(isDev)
+  } catch (error) {
+    console.error('[Core Layer] Module verification failed:', error)
+  }
+}
+
+type HookableNuxtApp = Pick<ReturnType<typeof useNuxtApp>, 'hook'>
+
+function registerCoreLayerHooks(nuxtApp: HookableNuxtApp, isDev: boolean) {
+  if (!isDev) return
+
+  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')
+  })
+}
+
 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()
-
-      if (isDev) {
-        console.log('[Core Layer] VueUse loaded, online status:', isOnline.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 rendering mode detection (works on both server and client)
-      const { mode, isServer, isClient, isHydrated } = useRendering()
-
-      if (isDev) {
-        console.log('[Core Layer] Rendering mode:', {
-          mode: mode.value,
-          server: isServer.value,
-          client: isClient.value,
-          hydrated: isHydrated.value,
-        })
-      }
-
-      // Test environment access (works on both server and client)
-      const env = useEnv() as unknown as Record<string, unknown>
-
-      if (isDev) {
-        const publicConfig = env.public as Record<string, unknown> | undefined
-
-        console.log('[Core Layer] Environment config loaded:', {
-          hasPublicConfig: Boolean(publicConfig),
-          publicKeys: Object.keys(publicConfig ?? {}),
-        })
-      }
-    } 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')
-      })
+    verifyCoreLayerModules(isDev)
 
-      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')
-      })
-    }
+    registerCoreLayerHooks(nuxtApp, isDev)
 
-    // 4. Provide global helpers (optional)
-    // Make core utilities available throughout the app
     return {
       provide: {
         coreLayer: {

package/layers/core/app/utils/browserInfo.ts

@@ -0,0 +1,115 @@
+export type BrowserInfo = {
+  name: string
+  version: string
+  engine: string
+  os: string
+}
+
+type BrowserRule = {
+  match: (ua: string) => boolean
+  name: BrowserInfo['name']
+  engine: BrowserInfo['engine']
+  version: (ua: string) => string
+}
+
+type OsRule = {
+  match: (ua: string) => boolean
+  os: BrowserInfo['os']
+}
+
+const OS_RULES: OsRule[] = [
+  { match: (ua) => ua.includes('Android'), os: 'android' },
+  { match: (ua) => ua.includes('iOS') || ua.includes('iPhone') || ua.includes('iPad'), os: 'ios' },
+  { match: (ua) => ua.includes('Win'), os: 'windows' },
+  { match: (ua) => ua.includes('Mac'), os: 'macos' },
+  { match: (ua) => ua.includes('Linux'), os: 'linux' },
+]
+
+const BROWSER_RULES: BrowserRule[] = [
+  {
+    match: (ua) => ua.includes('Edg/'),
+    name: 'edge',
+    engine: 'blink',
+    version: (ua) => ua.match(/Edg\/([\d.]+)/)?.[1] ?? '0',
+  },
+  {
+    match: (ua) => ua.includes('Chrome/') && !ua.includes('Edg'),
+    name: 'chrome',
+    engine: 'blink',
+    version: (ua) => ua.match(/Chrome\/([\d.]+)/)?.[1] ?? '0',
+  },
+  {
+    match: (ua) => ua.includes('Safari/') && !ua.includes('Chrome'),
+    name: 'safari',
+    engine: 'webkit',
+    version: (ua) => ua.match(/Version\/([\d.]+)/)?.[1] ?? '0',
+  },
+  {
+    match: (ua) => ua.includes('Firefox/'),
+    name: 'firefox',
+    engine: 'gecko',
+    version: (ua) => ua.match(/Firefox\/([\d.]+)/)?.[1] ?? '0',
+  },
+  {
+    match: (ua) => ua.includes('Opera/') || ua.includes('OPR/'),
+    name: 'opera',
+    engine: 'blink',
+    version: (ua) => ua.match(/(?:Opera|OPR)\/([\d.]+)/)?.[1] ?? '0',
+  },
+]
+
+function detectOs(ua: string): BrowserInfo['os'] {
+  return OS_RULES.find((rule) => rule.match(ua))?.os ?? 'unknown'
+}
+
+function detectBrowser(ua: string): Pick<BrowserInfo, 'name' | 'version' | 'engine'> {
+  const rule = BROWSER_RULES.find((candidate) => candidate.match(ua))
+  if (!rule) return { name: 'unknown', version: '0', engine: 'unknown' }
+  return {
+    name: rule.name,
+    version: rule.version(ua),
+    engine: rule.engine,
+  }
+}
+
+export function parseBrowserInfo(userAgent?: string | null): BrowserInfo {
+  if (!import.meta.client) {
+    return {
+      name: 'unknown',
+      version: '0',
+      engine: 'unknown',
+      os: 'unknown',
+    }
+  }
+
+  const ua = userAgent ?? navigator.userAgent
+  return {
+    ...detectBrowser(ua),
+    os: detectOs(ua),
+  }
+}
+
+export function getBrowserVersionParts(version: string) {
+  const [major = '0', minor = '0'] = version.split('.')
+  return {
+    major: Number.parseInt(major, 10) || 0,
+    minor: Number.parseInt(minor, 10) || 0,
+  }
+}
+
+// fallow-ignore-next-line complexity
+export function isBrowserAtLeast(version: string, minVersion: string): boolean {
+  const current = getBrowserVersionParts(version)
+  const [minMajor = '', minMinor = '0'] = minVersion.split('.')
+
+  if (!minMajor) return false
+
+  const required = {
+    major: Number.parseInt(minMajor, 10) || 0,
+    minor: Number.parseInt(minMinor, 10) || 0,
+  }
+
+  if (current.major > required.major) return true
+  if (current.major < required.major) return false
+  return current.minor >= required.minor
+}

package/layers/core/app/utils/featureClasses.ts

@@ -0,0 +1,40 @@
+import type { FeatureDetection } from '#layers/core/app/types/detection'
+
+const PREFIXES = ['supports-', 'no-', 'has-'] as const
+
+const SUPPORT_CLASS_MAP: Array<[keyof FeatureDetection, string, string]> = [
+  ['grid', 'supports-grid', 'no-grid'],
+  ['subgrid', 'supports-subgrid', 'no-subgrid'],
+  ['containerQueries', 'supports-container-queries', 'no-container-queries'],
+  ['has', 'supports-has', 'no-has'],
+  ['aspectRatio', 'supports-aspect-ratio', 'no-aspect-ratio'],
+  ['backdropFilter', 'supports-backdrop-filter', 'no-backdrop-filter'],
+]
+
+const EXTRA_CLASS_MAP: Array<[keyof FeatureDetection, string]> = [
+  ['intersectionObserver', 'has-intersection-observer'],
+  ['resizeObserver', 'has-resize-observer'],
+  ['serviceWorker', 'has-service-worker'],
+  ['webGL', 'has-webgl'],
+  ['webp', 'supports-webp'],
+  ['avif', 'supports-avif'],
+]
+
+export function getFeatureClassNames(features: FeatureDetection): string[] {
+  const classes = SUPPORT_CLASS_MAP.map(([key, supportedClass, unsupportedClass]) =>
+    features[key] ? supportedClass : unsupportedClass
+  )
+
+  classes.push(
+    ...EXTRA_CLASS_MAP.flatMap(([key, className]) => (features[key] ? [className] : []))
+  )
+
+  return classes
+}
+
+export function removeFeatureClasses(classList: DOMTokenList) {
+  const classNames = Array.from(classList).filter((cls) =>
+    PREFIXES.some((prefix) => cls.startsWith(prefix))
+  )
+  classList.remove(...classNames)
+}