kmcom-nuxt-layers 2.2.12 → 2.2.13

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)
+}

package/layers/core/app/utils/helpers.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+
+import { clamp, groupBy, omit, pick, removeEmpty, safeJsonParse } from './helpers'
+
+describe('core helpers', () => {
+  it('parses JSON with a fallback', () => {
+    expect(safeJsonParse('{"enabled":true}', { enabled: false })).toEqual({ enabled: true })
+    expect(safeJsonParse('not-json', { enabled: false })).toEqual({ enabled: false })
+  })
+
+  it('removes nullish values without stripping other falsy values', () => {
+    expect(
+      removeEmpty({
+        title: 'Nuxt Layers',
+        count: 0,
+        empty: '',
+        missing: undefined,
+        none: null,
+      })
+    ).toEqual({
+      title: 'Nuxt Layers',
+      count: 0,
+      empty: '',
+    })
+  })
+
+  it('groups, picks, omits, and clamps values', () => {
+    const rows = [
+      { kind: 'blog', id: 1 },
+      { kind: 'docs', id: 2 },
+      { kind: 'blog', id: 3 },
+    ]
+
+    expect(groupBy(rows, 'kind')).toEqual({
+      blog: [
+        { kind: 'blog', id: 1 },
+        { kind: 'blog', id: 3 },
+      ],
+      docs: [{ kind: 'docs', id: 2 }],
+    })
+    expect(pick({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['title', 'slug'])).toEqual({
+      title: 'Nuxt',
+      slug: 'nuxt-layers',
+    })
+    expect(omit({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['description'])).toEqual({
+      title: 'Nuxt',
+      slug: 'nuxt-layers',
+    })
+    expect(clamp(12, 0, 10)).toBe(10)
+  })
+})

package/layers/feeds/app/components/Feeds/Index.vue

@@ -26,7 +26,7 @@
         class="absolute -left-20 bottom-0 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
       />
       <div
-        class="absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-orange-400/35 to-transparent"
+        class="absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-orange-400/35 to-transparent"
       />
     </div>
 

package/layers/feeds/app/components/Feeds/RouteCard.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import { computed } from 'vue'
+
   import { type FeedRoute } from '../../utils/feed-catalog'
 
   const { route, compact = false } = defineProps<{
@@ -7,7 +9,7 @@
   }>()
 
   const routeThemes: Record<
-    'index' | 'discovery' | 'rss' | 'atom' | 'json',
+    'index' | 'rss' | 'atom' | 'json',
     {
       strip: string
       dot: string
@@ -17,10 +19,6 @@
       strip: 'bg-slate-400',
       dot: 'bg-slate-500',
     },
-    discovery: {
-      strip: 'bg-sky-400',
-      dot: 'bg-sky-500',
-    },
     rss: {
       strip: 'bg-orange-400',
       dot: 'bg-orange-500',
@@ -44,10 +42,6 @@
       return 'Human landing page for the feed catalog.'
     }
 
-    if (route.kind === 'discovery') {
-      return 'JSON manifest of every exposed collection feed.'
-    }
-
     return route.contentType ?? 'Reader-friendly syndicated feed.'
   }
 </script>

package/layers/feeds/app/utils/feed-catalog.ts

@@ -27,7 +27,7 @@ export type FeedCatalogInput = {
 }
 
 export type FeedRoute = {
-  kind: 'index' | 'discovery' | 'format'
+  kind: 'index' | 'format'
   label: string
   path: string
   format?: FeedFormatKey
@@ -117,7 +117,6 @@ function resolveFeedState(
 function resolveSiteRoutes(): FeedRoute[] {
   return [
     { kind: 'index', label: 'Feed index', path: '/feed' },
-    { kind: 'discovery', label: 'Discovery index', path: '/feed/discovery' },
     ...FEED_FORMATS.map(
       (format) =>
         ({
@@ -133,9 +132,11 @@ function resolveSiteRoutes(): FeedRoute[] {
 
 function resolveCollectionGroups(
   collections: string[],
-  availableCollections: string[]
+  availableCollections: string[],
+  defaultCollection: string
 ): FeedCollectionGroup[] {
   return collections
+    .filter((collection) => collection !== defaultCollection)
     .filter((collection) => availableCollections.includes(collection))
     .map((collection) => ({
       collection,
@@ -174,6 +175,10 @@ export function createFeedCatalog(input: FeedCatalogInput = {}): FeedCatalog {
     },
     feed,
     siteRoutes: resolveSiteRoutes(),
-    collectionGroups: resolveCollectionGroups(feed.collections, availableCollections),
+    collectionGroups: resolveCollectionGroups(
+      feed.collections,
+      availableCollections,
+      feed.defaultCollection
+    ),
   }
 }

package/layers/feeds/nuxt.config.ts

@@ -19,7 +19,6 @@ export default defineNuxtConfig({
       // Collection-specific routes (/feed/blog/rss etc.) must be added to
       // nitro.prerender.routes in the consuming app's nuxt.config.ts.
       routes: [
-        '/feed/discovery',
         '/feed/demo',
         '/feed/rss',
         '/feed/atom',

package/layers/feeds/server/utils/content-adapter.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it, beforeEach, vi } from 'vitest'
+
+import type { H3Event } from 'h3'
+
+const queryCollectionMock = vi.hoisted(() => vi.fn())
+
+vi.mock('@nuxt/content/nitro', () => ({
+  queryCollection: queryCollectionMock,
+}))
+
+import { getContentFeedItems } from './content-adapter'
+
+describe('getContentFeedItems', () => {
+  beforeEach(() => {
+    queryCollectionMock.mockReset()
+  })
+
+  it('filters drafts, sorts by date, and maps feed items', async () => {
+    queryCollectionMock.mockReturnValue({
+      all: vi.fn().mockResolvedValue([
+        {
+          draft: true,
+          title: 'Draft post',
+          path: '/draft',
+          date: '2026-01-04T00:00:00.000Z',
+        },
+        {
+          title: 'Latest post',
+          description: 'Newest content',
+          path: '/latest',
+          date: '2026-01-03T00:00:00.000Z',
+          authors: [{ name: 'Ada Lovelace' }],
+          tags: ['nuxt'],
+        },
+        {
+          stem: 'Older post',
+          _path: '/older',
+          createdAt: '2026-01-01T00:00:00.000Z',
+          author: { name: 'Grace Hopper' },
+        },
+      ]),
+    })
+
+    const items = await getContentFeedItems({} as H3Event, 'articles', 2)
+
+    expect(queryCollectionMock).toHaveBeenCalledWith({}, 'articles')
+    expect(items).toEqual([
+      {
+        title: 'Latest post',
+        description: 'Newest content',
+        link: '/latest',
+        id: '/latest',
+        date: new Date('2026-01-03T00:00:00.000Z'),
+        author: 'Ada Lovelace',
+        tags: ['nuxt'],
+      },
+      {
+        title: 'Older post',
+        description: undefined,
+        link: '/older',
+        id: '/older',
+        date: new Date('2026-01-01T00:00:00.000Z'),
+        author: 'Grace Hopper',
+        tags: undefined,
+      },
+    ])
+  })
+})