kmcom-nuxt-layers 2.7.4 → 3.0.0

package/layers/content/app/components/Gallery/AmbientImage.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-  const {
-    src,
-    alt = '',
-    width = undefined,
-    height = undefined,
-    caption = undefined,
-  } = defineProps<{
-    src: string
-    alt?: string
-    width?: number
-    height?: number
-    caption?: string
-  }>()
-</script>
-
-<template>
-  <div>
-    <!-- Full-viewport ambient glow teleported to body to escape stacking contexts -->
-    <ClientOnly>
-      <Teleport to="body">
-        <div class="fixed inset-0 z-0 pointer-events-none overflow-hidden" aria-hidden="true">
-          <img
-            :src
-            alt=""
-            class="absolute inset-0 w-full h-full object-cover blur-[100px] opacity-30 saturate-150 scale-125"
-          />
-          <!-- Gradient fade so it blends into the page bg -->
-          <div
-            class="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-default"
-          />
-        </div>
-      </Teleport>
-    </ClientOnly>
-
-    <!-- Main image in normal flow -->
-    <figure class="my-6">
-      <img :src :alt :width :height class="w-full rounded-lg" />
-      <figcaption v-if="caption" class="mt-3 text-center text-sm text-muted italic">
-        {{ caption }}
-      </figcaption>
-    </figure>
-  </div>
-</template>

package/layers/content/app/components/Gallery/Card.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-  const {
-    title,
-    description = undefined,
-    coverImage = undefined,
-    imageCount = 0,
-    tags = [],
-    to = undefined,
-  } = defineProps<{
-    title: string
-    description?: string
-    coverImage?: { src: string; alt: string }
-    imageCount?: number
-    tags?: string[]
-    to?: string
-  }>()
-
-  const cardProps = computed(() => ({
-    ...(description !== undefined && { description }),
-    ...(to !== undefined && { to }),
-  }))
-</script>
-
-<template>
-  <UPageCard :title v-bind="cardProps" variant="outline" class="@container">
-    <img
-      v-if="coverImage"
-      :src="coverImage.src"
-      :alt="coverImage.alt"
-      class="w-full h-48 object-cover rounded"
-    />
-    <template #footer>
-      <div class="flex flex-wrap items-center gap-2">
-        <span v-if="imageCount" class="text-xs text-muted">
-          {{ imageCount }} image{{ imageCount === 1 ? '' : 's' }}
-        </span>
-        <UBadge v-for="tag in tags" :key="tag" color="neutral" variant="subtle" size="xs">
-          {{ tag }}
-        </UBadge>
-      </div>
-    </template>
-  </UPageCard>
-</template>

package/layers/content/app/components/NuxtContent/Renderer.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-  const { value, loading = false } = defineProps<{
-    value: unknown
-    loading?: boolean
-  }>()
-</script>
-
-<template>
-  <div>
-    <USkeleton v-if="loading" class="h-64 w-full" />
-    <ContentRenderer v-else-if="value" :value />
-    <div v-else class="text-muted text-center py-12">Content not found</div>
-  </div>
-</template>

package/layers/content/app/components/Portfolio/Card.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-  const {
-    title,
-    description = undefined,
-    image = undefined,
-    tags = [],
-    client = undefined,
-    year = undefined,
-    to = undefined,
-  } = defineProps<{
-    title: string
-    description?: string
-    image?: string
-    tags?: string[]
-    client?: string
-    year?: number
-    to?: string
-  }>()
-</script>
-
-<template>
-  <UPageCard
-    :title
-    variant="outline"
-    class="@container"
-    v-bind="{ ...(description !== undefined && { description }), ...(to !== undefined && { to }) }"
-  >
-    <img v-if="image" :src="image" :alt="title" class="w-full h-48 object-cover rounded" />
-    <template #footer>
-      <div class="flex flex-wrap gap-1.5">
-        <UBadge v-if="client" color="primary" variant="subtle" size="xs">
-          {{ client }}
-        </UBadge>
-        <UBadge v-if="year" color="neutral" variant="subtle" size="xs">
-          {{ year }}
-        </UBadge>
-        <UBadge v-for="tag in tags" :key="tag" color="neutral" variant="subtle" size="xs">
-          {{ tag }}
-        </UBadge>
-      </div>
-    </template>
-  </UPageCard>
-</template>

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

@@ -1,50 +0,0 @@
-import type { Collections } from '@nuxt/content'
-
-import type { PortfolioQueryOptions } from '../types/content'
-
-type CollectionItem = Collections[keyof Collections]
-
-function itemYear(item: CollectionItem): number {
-  return 'year' in item ? (item.year ?? 0) : 0
-}
-
-function itemFeatured(item: CollectionItem): boolean {
-  return 'featured' in item ? (item.featured ?? false) : false
-}
-
-function itemTags(item: CollectionItem): string[] {
-  return 'tags' in item ? (item.tags ?? []) : []
-}
-
-export function createPortfolioComposables(collectionName: keyof Collections) {
-  function useItems(options: PortfolioQueryOptions = {}) {
-    const { featured, tags, limit } = options
-
-    const key = `${collectionName}-items:${featured ?? ''}:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
-    return useContentData(key, async () => {
-      let items: CollectionItem[] = (await queryCollection(collectionName).all()).sort(
-        (a, b) => itemYear(b) - itemYear(a)
-      )
-
-      if (featured !== undefined) {
-        items = items.filter((item) => itemFeatured(item) === featured)
-      }
-
-      if (tags?.length) {
-        items = items.filter((item) => itemTags(item).some((tag) => tags.includes(tag)))
-      }
-
-      if (limit) {
-        items = items.slice(0, limit)
-      }
-
-      return items
-    })
-  }
-
-  function useItem(slug: string) {
-    return useCollectionItem(collectionName, slug)
-  }
-
-  return { useItems, useItem }
-}

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

@@ -1,3 +0,0 @@
-export function useBlogPost(slug: string) {
-  return useCollectionItem('blog', slug)
-}

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

@@ -1,3 +0,0 @@
-export function useGalleryItem(slug: string) {
-  return useCollectionItem('gallery', slug)
-}

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

@@ -1,3 +0,0 @@
-export function usePortfolioItem(slug: string) {
-  return useCollectionItem('portfolio', slug)
-}

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

@@ -1,26 +0,0 @@
-import type { PortfolioQueryOptions } from '../types/content'
-
-export function usePortfolioItems(options: PortfolioQueryOptions = {}) {
-  const { featured, tags, limit } = options
-  const key = `portfolio-items:${featured ?? ''}:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
-
-  return useContentData(key, 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) => Boolean(item.tags?.some((tag: string) => tags.includes(tag))))
-    }
-
-    if (limit) {
-      items = items.slice(0, limit)
-    }
-
-    return items
-  })
-}

package/layers/content/app/types/app-config.d.ts

@@ -1,14 +0,0 @@
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    contentLayer?: {
-      name?: string
-      sections?: {
-        blog?: boolean
-        portfolio?: boolean
-        gallery?: boolean
-      }
-    }
-  }
-}
-
-export {}

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

@@ -1,23 +0,0 @@
-// composables/useEnv.ts
-
-/**
- * Type-safe environment variable access
- *
- * Provides typed access to Nuxt runtime config with proper
- * separation between public (client-accessible) and private
- * (server-only) values.
- *
- * @returns Runtime configuration object
- *
- * @example
- * ```typescript
- * const env = useEnv()
- * const apiUrl = env.public.apiUrl // Client-accessible
- * const secretKey = env.secretKey // Server-only
- * ```
- */
-export function useEnv() {
-  const config = useRuntimeConfig()
-
-  return config
-}

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

@@ -1,243 +0,0 @@
-// composables/useScrollGuard.ts
-
-import type { ScrollGuardConfig } from '#layers/core/app/types/scroll-guard'
-import { debounce } from '#layers/core/app/utils/helpers'
-
-/**
- * Original inline styles stored per element so we can restore them on disable
- */
-type SavedStyles = {
-  transition: string
-  maxWidth: string
-  boxSizing: string
-  overflowX: string
-}
-
-// ---------------------------------------------------------------------------
-// Singleton DOM tracking state (non-reactive, intentionally module-scope)
-// ---------------------------------------------------------------------------
-
-const clampedElements = new WeakMap<HTMLElement, SavedStyles>()
-/** Live set so we can iterate and restore on disable */
-const clampedSet = new Set<HTMLElement>()
-
-// Singleton DOM tracking (non-reactive, client-only)
-const _s = {
-  observer: null as MutationObserver | null,
-  debouncedGuard: null as (() => void) | null,
-  resizeHandler: null as (() => void) | null,
-  savedHtmlOverflowX: '',
-  savedBodyOverflowX: '',
-  savedBodyMaxWidth: '',
-  savedBodyTransition: '',
-  opts: null as ScrollGuardConfig | null,
-}
-
-// ---------------------------------------------------------------------------
-// Composable
-// ---------------------------------------------------------------------------
-
-/**
- * Horizontal scroll guard composable
- *
- * Prevents unintended horizontal overflow by clamping overflowing elements
- * and hiding horizontal scroll on html/body. Fully togglable at runtime.
- *
- * @example
- * ```ts
- * const { isEnabled, clampedCount, enable, disable, toggle, scan } = useScrollGuard()
- *
- * // Disable temporarily for a modal with intentional overflow
- * disable()
- * // Re-enable when done
- * enable()
- * ```
- */
-export function useScrollGuard() {
-  const isEnabled = useState('core:scroll-guard:enabled', () => false)
-  const clampedCount = useState('core:scroll-guard:clamped', () => 0)
-
-  function shouldExclude(el: HTMLElement): boolean {
-    if (!_s.opts) return true
-    return _s.opts.excludeSelectors.some((sel) => {
-      try {
-        return el.matches(sel)
-      } catch {
-        return false
-      }
-    })
-  }
-
-  function clampElement(el: HTMLElement) {
-    if (!_s.opts || clampedElements.has(el) || shouldExclude(el)) return
-    if (el.scrollWidth <= window.innerWidth) return
-
-    clampedElements.set(el, {
-      transition: el.style.transition,
-      maxWidth: el.style.maxWidth,
-      boxSizing: el.style.boxSizing,
-      overflowX: el.style.overflowX,
-    })
-    clampedSet.add(el)
-
-    el.style.transition = `max-width ${_s.opts.transitionDuration}ms ease`
-    el.style.maxWidth = '100%'
-    el.style.boxSizing = 'border-box'
-
-    if (_s.opts.debug) {
-      el.style.outline = '2px dashed red'
-      setTimeout(() => {
-        el.style.outline = ''
-      }, 1000)
-    }
-
-    clampedCount.value++
-  }
-
-  function guard() {
-    if (!isEnabled.value || !_s.opts) return
-
-    const html = document.documentElement
-    const body = document.body
-
-    html.style.overflowX = 'clip'
-    body.style.overflowX = 'clip'
-    body.style.maxWidth = '100vw'
-
-    if (!_s.opts.strict) return
-
-    const elements = document.body.querySelectorAll<HTMLElement>('*')
-    for (const el of elements) {
-      if (el.offsetParent !== null) {
-        clampElement(el)
-      }
-    }
-  }
-
-  function startObservers() {
-    if (!_s.opts) return
-
-    _s.observer = new MutationObserver((mutations) => {
-      if (!isEnabled.value || !_s.opts?.strict) return
-      for (const m of mutations) {
-        for (const node of m.addedNodes) {
-          if (node instanceof HTMLElement) {
-            clampElement(node)
-            for (const child of node.querySelectorAll<HTMLElement>('*')) {
-              clampElement(child)
-            }
-          }
-        }
-      }
-    })
-    _s.observer.observe(document.body, { childList: true, subtree: true })
-
-    _s.debouncedGuard = debounce(guard, _s.opts.resizeDebounce)
-    _s.resizeHandler = _s.debouncedGuard
-    window.addEventListener('resize', _s.resizeHandler)
-  }
-
-  function stopObservers() {
-    if (_s.observer) {
-      _s.observer.disconnect()
-      _s.observer = null
-    }
-    if (_s.resizeHandler) {
-      window.removeEventListener('resize', _s.resizeHandler)
-      _s.resizeHandler = null
-      _s.debouncedGuard = null
-    }
-  }
-
-  function restoreAll() {
-    for (const el of clampedSet) {
-      const saved = clampedElements.get(el)
-      if (saved) {
-        el.style.transition = saved.transition
-        el.style.maxWidth = saved.maxWidth
-        el.style.boxSizing = saved.boxSizing
-        el.style.overflowX = saved.overflowX
-        clampedElements.delete(el)
-      }
-    }
-    clampedSet.clear()
-    clampedCount.value = 0
-
-    const html = document.documentElement
-    const body = document.body
-    html.style.overflowX = _s.savedHtmlOverflowX
-    body.style.overflowX = _s.savedBodyOverflowX
-    body.style.maxWidth = _s.savedBodyMaxWidth
-    body.style.transition = _s.savedBodyTransition
-  }
-
-  function enable(config?: Partial<ScrollGuardConfig>) {
-    if (!import.meta.client) return
-    if (isEnabled.value) return
-
-    const appConfig = useAppConfig()
-    const configFromApp = (
-      appConfig.coreLayer as { scrollGuard?: Partial<ScrollGuardConfig> } | undefined
-    )?.scrollGuard
-
-    _s.opts = {
-      enabled: true,
-      excludeSelectors: ['.carousel', '.overflow-intent'],
-      strict: true,
-      transitionDuration: 200,
-      resizeDebounce: 150,
-      debug: false,
-      ...configFromApp,
-      ...config,
-    }
-
-    const html = document.documentElement
-    const body = document.body
-    _s.savedHtmlOverflowX = html.style.overflowX
-    _s.savedBodyOverflowX = body.style.overflowX
-    _s.savedBodyMaxWidth = body.style.maxWidth
-    _s.savedBodyTransition = body.style.transition
-
-    isEnabled.value = true
-    guard()
-    startObservers()
-  }
-
-  function disable() {
-    if (!import.meta.client) return
-    if (!isEnabled.value) return
-
-    isEnabled.value = false
-    stopObservers()
-    restoreAll()
-    _s.opts = null
-  }
-
-  function toggle() {
-    if (isEnabled.value) {
-      disable()
-      return
-    }
-    enable()
-  }
-
-  function scan() {
-    if (!import.meta.client || !isEnabled.value) return
-    guard()
-  }
-
-  return {
-    /** Whether the guard is currently active */
-    isEnabled: readonly(isEnabled),
-    /** Number of elements currently being clamped */
-    clampedCount: readonly(clampedCount),
-    /** Activate the guard and start observing */
-    enable,
-    /** Deactivate the guard and restore all styles */
-    disable,
-    /** Toggle the guard on/off */
-    toggle,
-    /** Manually re-scan the DOM for overflowing elements */
-    scan,
-  }
-}

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

@@ -1,34 +0,0 @@
-// plugins/feature-detection.client.ts
-
-/**
- * Feature Detection Plugin (Client-only)
- *
- * Runs on app startup to:
- * - Detect CSS features, JS APIs, user preferences, image formats
- * - Apply feature classes to <html> element
- * - Store results in sessionStorage
- *
- * This ensures feature detection happens automatically on every page load,
- * making feature flags available immediately to all components.
- */
-export default defineNuxtPlugin({
-  name: 'core:feature-detection',
-  setup() {
-    // 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,
-      })
-    }
-  },
-})