kmcom-nuxt-layers 2.3.0 → 2.3.2

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

@@ -20,7 +20,8 @@ export function createPortfolioComposables(collectionName: keyof Collections) {
   function useItems(options: PortfolioQueryOptions = {}) {
     const { featured, tags, limit } = options
 
-    return useContentData(`${collectionName}-items`, async () => {
+    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)
       )

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

@@ -3,7 +3,8 @@ import type { BlogQueryOptions } from '../types/content'
 export function useBlogPosts(options: BlogQueryOptions = {}) {
   const { excludeDrafts = true, tags, limit } = options
 
-  return useContentData('blog-posts', async () => {
+  const key = `blog-posts:${excludeDrafts}:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
+  return useContentData(key, async () => {
     let posts = (await queryCollection('blog').all()).sort((a, b) =>
       (b.date ?? '').localeCompare(a.date ?? '')
     )

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

@@ -1,15 +1,21 @@
 import type { GalleryQueryOptions } from '../types/content'
-import { useCollectionItems } from './useCollectionItems'
 
 export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const { tags, limit } = options
+  const key = `gallery-items:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
 
-  return useCollectionItems({
-    key: 'gallery-items',
-    collection: 'gallery',
-    sort: (a, b) => (b.date ?? '').localeCompare(a.date ?? ''),
-    options: { limit },
-    filter: (item) =>
-      !tags?.length || Boolean(item.tags?.some((tag: string) => tags.includes(tag))),
+  return useContentData(key, async () => {
+    let items = (await queryCollection('gallery').all())
+      .sort((a, b) => (b.date ?? '').localeCompare(a.date ?? ''))
+
+    if (tags?.length) {
+      items = items.filter((item) => Boolean(item.tags?.some((tag: string) => tags.includes(tag))))
+    }
+
+    if (limit !== undefined) {
+      items = items.slice(0, limit)
+    }
+
+    return items
   })
 }

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

@@ -1,17 +1,25 @@
 import type { PortfolioQueryOptions } from '../types/content'
-import { useCollectionItems } from './useCollectionItems'
 
 export function usePortfolioItems(options: PortfolioQueryOptions = {}) {
   const { featured, tags, limit } = options
+  const key = `portfolio-items:${featured ?? ''}:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
 
-  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)))),
+  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/feeds/server/utils/content-adapter.ts

@@ -26,6 +26,8 @@ type FeedCollectionQuery = {
   all: () => Promise<FeedSourceItem[]>
 }
 
+const COLLECTION_NAME_RE = /^[a-z][a-z0-9_-]*$/i
+
 const getFeedCollection = queryCollection as unknown as (
   event: H3Event,
   collection: string
@@ -36,6 +38,10 @@ export async function getContentFeedItems(
   collection: string = 'blog',
   limit: number = 30
 ): Promise<FeedItem[]> {
+  if (!COLLECTION_NAME_RE.test(collection)) {
+    throw createError({ statusCode: 400, statusMessage: 'Invalid collection name' })
+  }
+
   // queryCollection is keyed by literal collection names, but feed routes accept
   // a runtime collection string; keep the unsafe bridge local here.
   const raw = await getFeedCollection(event, collection).all()

package/layers/forms/app/components/Form/Contact.vue

@@ -1,24 +1,15 @@
 <script setup lang="ts">
   import type { FormSubmitEvent } from '@nuxt/ui'
-  import { z } from 'zod'
 
-  import { fieldConfigs } from '../../config/fields'
+  import { contactSchema, type ContactData } from '../../utils/contact-schema'
 
   const emit = defineEmits<{
-    submit: [data: FormState]
+    submit: [data: ContactData]
   }>()
 
-  const schema = z.object({
-    name: fieldConfigs.name.validation.pipe(
-      z.string().min(3, 'Name must be at least 3 characters')
-    ),
-    email: fieldConfigs.email.validation,
-    message: fieldConfigs.textarea.validation.pipe(
-      z.string().min(8, 'Message must be at least 8 characters')
-    ),
-  })
+  const schema = contactSchema
 
-  type FormState = z.infer<typeof schema>
+  type FormState = ContactData
 
   const state = reactive({ name: '', email: '', message: '' })
 

package/layers/forms/app/utils/contact-schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const contactSchema = z.object({
+  name: z.string().min(3, 'Name must be at least 3 characters'),
+  email: z.string().email('Please enter a valid email'),
+  message: z.string().min(8, 'Message must be at least 8 characters'),
+})
+
+export type ContactData = z.infer<typeof contactSchema>

package/layers/forms/server/api/contact.post.ts

@@ -1,14 +1,31 @@
 import { sendContactEmail } from '#layers/mailer/server/utils/email'
 import { mailerLayerHooks } from '#layers/mailer/server/utils/hooks'
-import { z } from 'zod'
 
-const contactSchema = z.object({
-  name: z.string().min(3, 'Name must be at least 3 characters'),
-  email: z.string().email('Please enter a valid email'),
-  message: z.string().min(8, 'Message must be at least 8 characters'),
-})
+import { contactSchema } from '../../app/utils/contact-schema'
+
+type RateLimitRecord = { count: number; resetAt: number }
+const rateLimitStore = new Map<string, RateLimitRecord>()
+const RATE_LIMIT_MAX = 5
+const RATE_LIMIT_WINDOW_MS = 60_000
+
+function checkRateLimit(ip: string): boolean {
+  const now = Date.now()
+  const record = rateLimitStore.get(ip)
+  if (!record || now > record.resetAt) {
+    rateLimitStore.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS })
+    return true
+  }
+  if (record.count >= RATE_LIMIT_MAX) return false
+  record.count++
+  return true
+}
 
 export default defineEventHandler(async (event) => {
+  const ip = getRequestIP(event, { xForwardedFor: true }) ?? 'unknown'
+  if (!checkRateLimit(ip)) {
+    throw createError({ statusCode: 429, statusMessage: 'Too many requests. Please try again later.' })
+  }
+
   const body = await readBody(event)
   const result = contactSchema.safeParse(body)
 

package/layers/forms/server/api/forms/status.get.ts

@@ -1,11 +1,9 @@
 import { useMailerConfig } from '#layers/mailer/server/utils/config'
 
 export default defineEventHandler(() => {
-  const { resendApiKey, emailFrom, emailTo } = useMailerConfig()
+  const { resendApiKey } = useMailerConfig()
 
   return {
     configured: Boolean(resendApiKey),
-    emailFrom: emailFrom || null,
-    emailTo: emailTo || null,
   }
 })

package/layers/layout/app/utils/gridPlacementStyle.ts

@@ -164,16 +164,17 @@ export function buildGridPlacementStyle(input: GridPlacementInput): PlacementSty
       style['--_re'] = String(rowSpan)
       Object.assign(style, resolveResponsivePlacementVars(input.rowStart, 'rs'))
       Object.assign(style, resolveResponsivePlacementVars(input.rowSpan, 're'))
-    } else {
-      style['--_cs'] = String(colStart ?? 'auto')
-      style['--_ce'] = String(colSpan)
-      style['--_rs'] = String(rowStart ?? 'auto')
-      style['--_re'] = String(rowSpan)
-      Object.assign(style, resolveResponsivePlacementVars(input.colStart, 'cs'))
-      Object.assign(style, resolveResponsivePlacementVars(input.colSpan, 'ce'))
-      Object.assign(style, resolveResponsivePlacementVars(input.rowStart, 'rs'))
-      Object.assign(style, resolveResponsivePlacementVars(input.rowSpan, 're'))
+      return style
     }
+
+    style['--_cs'] = String(colStart ?? 'auto')
+    style['--_ce'] = String(colSpan)
+    style['--_rs'] = String(rowStart ?? 'auto')
+    style['--_re'] = String(rowSpan)
+    Object.assign(style, resolveResponsivePlacementVars(input.colStart, 'cs'))
+    Object.assign(style, resolveResponsivePlacementVars(input.colSpan, 'ce'))
+    Object.assign(style, resolveResponsivePlacementVars(input.rowStart, 'rs'))
+    Object.assign(style, resolveResponsivePlacementVars(input.rowSpan, 're'))
   }
 
   Object.assign(style, resolveAlignmentStyles(input.align, input.justify))

package/layers/routing/server/api/feature-flags.get.ts

@@ -0,0 +1,6 @@
+import type { FeatureValue } from '../../app/types/routing'
+
+export default defineEventHandler(() => {
+  const config = useAppConfig() as { routingLayer?: { features?: Record<string, FeatureValue> } }
+  return config.routingLayer?.features ?? {}
+})

package/layers/scroll/app/plugins/locomotive-scroll.client.ts

@@ -47,7 +47,12 @@ export default defineNuxtPlugin({
 
     if (smoothScroll === true) {
       nuxtApp.hook('app:mounted', () => nextTick(init))
-      nuxtApp.hook('page:finish', () => nextTick(() => ScrollTrigger.refresh()))
+      nuxtApp.hook('page:finish', () =>
+        nextTick(() => {
+          instance.value?.scrollTo(0, { immediate: true })
+          ScrollTrigger.refresh()
+        })
+      )
     } else if (Array.isArray(smoothScroll)) {
       addRouteMiddleware((to, from) => {
         if (smoothScroll.includes(to.path)) {

package/layers/starter/app/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    layers?: Record<string, boolean>
+  }
+  interface AppConfig {
+    layers?: Record<string, boolean>
+  }
+}

package/layers/starter/app/components/StarterHome.vue

@@ -11,36 +11,45 @@ gsap.registerPlugin(ScrollTrigger)
 const heroRef = ref<HTMLElement | null>(null)
 const sectionsRef = ref<HTMLElement | null>(null)
 
+let ctx: ReturnType<typeof gsap.context> | null = null
+
 onMounted(() => {
-  if (heroRef.value) {
-    gsap.from(Array.from(heroRef.value.children), {
-      y: 24,
-      opacity: 0,
-      duration: 0.7,
-      stagger: 0.1,
-      ease: 'power3.out',
-    })
-  }
+  ctx = gsap.context(() => {
+    if (heroRef.value) {
+      gsap.from(Array.from(heroRef.value.children), {
+        y: 24,
+        opacity: 0,
+        duration: 0.7,
+        stagger: 0.1,
+        ease: 'power3.out',
+      })
+    }
+
+    if (sectionsRef.value) {
+      gsap.from(sectionsRef.value.querySelectorAll('.layer-card'), {
+        scrollTrigger: {
+          trigger: sectionsRef.value,
+          start: 'top 85%',
+          toggleActions: 'play none none none',
+        },
+        y: 32,
+        opacity: 0,
+        scale: 0.97,
+        duration: 0.5,
+        stagger: { amount: 0.5 },
+        ease: 'power3.out',
+      })
+    }
+  })
+})
 
-  if (sectionsRef.value) {
-    gsap.from(sectionsRef.value.querySelectorAll('.layer-card'), {
-      scrollTrigger: {
-        trigger: sectionsRef.value,
-        start: 'top 85%',
-        toggleActions: 'play none none none',
-      },
-      y: 32,
-      opacity: 0,
-      scale: 0.97,
-      duration: 0.5,
-      stagger: { amount: 0.5 },
-      ease: 'power3.out',
-    })
-  }
+onUnmounted(() => {
+  ctx?.revert()
+  ctx = null
 })
 
 const appConfig = useAppConfig()
-const activeLayers = appConfig.layers as Record<string, boolean>
+const activeLayers = appConfig.layers ?? {}
 
 type LayerDef = {
   name: string

package/layers/theme/app/components/ThemePicker/Menu.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
   import { useThemePreferenceModels } from '../../composables/useThemePreferenceModels'
 
-  const { contrastOverride, motionOverride, transparencyOverride, contrastModel, motionModel, transparencyModel } =
-    useThemePreferenceModels()
+  const {
+    contrastOverride,
+    motionOverride,
+    transparencyOverride,
+    contrastModel,
+    motionModel,
+    transparencyModel,
+  } = useThemePreferenceModels()
 </script>
 
 <template>

package/layers/theme/nuxt.config.ts

@@ -1,4 +1,11 @@
 // Theme Layer - Color mode, accent colors, accessibility preferences
+
+declare module '@nuxt/schema' {
+  type PublicRuntimeConfig = {
+    themeDefaultAccent: string
+  }
+}
+
 export default defineNuxtConfig({
   $meta: {
     name: 'theme',
@@ -6,6 +13,12 @@ export default defineNuxtConfig({
 
   extends: ['../core'],
 
+  runtimeConfig: {
+    public: {
+      themeDefaultAccent: 'blue',
+    },
+  },
+
   alias: {
     '#layers/theme': import.meta.dirname,
     '#layers/theme/types': `${import.meta.dirname}/app/types`,

package/layers/theme/server/plugins/theme-fouc.ts

@@ -1,63 +1,12 @@
 import { buildAccentCSS } from '../utils/accent-css'
-
-/**
- * Nitro render hook — prevents FOUC for all theme preferences by injecting:
- *
- * 1. A `<style>` tag with CSS rules mapping each `[data-theme-colour='X']` to
- *    the correct `--ui-color-primary-*`, `--ui-color-secondary-*`, and
- *    `--ui-color-info-*` values. Each accent selects a coordinated three-colour
- *    palette so primary, secondary, and accent (info) all change together.
- *
- * 2. A blocking `<script>` that reads localStorage and restores all
- *    `data-theme-*` attributes on `<html>` before first paint:
- *    - `data-theme-colour` from `theme-colour` (defaults to 'blue')
- *    - `data-theme-contrast` from `theme-contrast`
- *    - `data-theme-motion` from `theme-motion`
- *    - `data-theme-transparency` from `theme-transparency`
- *    - `data-theme-mode` from `theme-mode` (raw string, not JSON — set by Nuxt Color Mode)
- *
- * Our script runs before CSS link tags (via head.unshift), so setting data-theme-mode
- * here prevents the dark-mode FOUC that would otherwise occur when Nuxt Color Mode's
- * script runs after stylesheets have downloaded. Nuxt Color Mode's script will then
- * set the same value again — this is idempotent and safe.
- */
+import { buildThemeInitScript } from '../utils/fouc-config'
 
 const accentCSS = buildAccentCSS()
 
-// Blocking init script — restores data-* attributes from localStorage before first paint.
-// Written as a self-invoking function to avoid polluting the global scope.
-// JSON.parse handles the quoted string that useLocalStorage writes.
-// Note: theme-mode is stored as a raw string by Nuxt Color Mode (no JSON.stringify).
-const initScript = `(function(){
-  try{
-    var h=document.documentElement;
-    var c=localStorage.getItem('theme-colour');
-    h.setAttribute('data-theme-colour',c?JSON.parse(c):'blue');
-    var ct=localStorage.getItem('theme-contrast');
-    var ctv=ct?JSON.parse(ct):'system';
-    if(ctv==='on'){h.setAttribute('data-theme-contrast','high')}
-    else if(ctv==='off'){h.setAttribute('data-theme-contrast','standard')}
-    else{h.setAttribute('data-theme-contrast',(window.matchMedia&&window.matchMedia('(prefers-contrast:more)').matches)?'high':'standard')}
-    var m=localStorage.getItem('theme-motion');
-    var mv=m?JSON.parse(m):'system';
-    if(mv==='on'){h.setAttribute('data-theme-motion','reduced')}
-    else if(mv==='off'){h.setAttribute('data-theme-motion','full')}
-    else{h.setAttribute('data-theme-motion',(window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches)?'reduced':'full')}
-    var t=localStorage.getItem('theme-transparency');
-    var tv=t?JSON.parse(t):'system';
-    if(tv==='on'){h.setAttribute('data-theme-transparency','reduced')}
-    else if(tv==='off'){h.setAttribute('data-theme-transparency','full')}
-    else{h.setAttribute('data-theme-transparency',(window.matchMedia&&window.matchMedia('(prefers-reduced-transparency:reduce)').matches)?'reduced':'full')}
-    var dm=localStorage.getItem('theme-mode');
-    var dmv=dm||'system';
-    if(dmv==='dark'){h.setAttribute('data-theme-mode','dark')}
-    else if(dmv==='light'){h.setAttribute('data-theme-mode','light')}
-    else{h.setAttribute('data-theme-mode',(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches)?'dark':'light')}
-  }catch(e){}
-})()`.replace(/\n\s*/g, '')
-
 export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook('render:html', (html) => {
+  nitroApp.hooks.hook('render:html', (html, { event }) => {
+    const config = useRuntimeConfig(event)
+    const initScript = buildThemeInitScript(config.public.themeDefaultAccent || 'blue')
     html.head.unshift(
       `<style id="theme-accent-css">${accentCSS}</style><script>${initScript}</script>`
     )

package/layers/theme/server/utils/fouc-config.ts

@@ -0,0 +1,85 @@
+type TriStatePreference = {
+  varName: string
+  storageKey: string
+  attribute: string
+  jsonParsed: boolean
+  conditionA: string
+  valueA: string
+  conditionB: string
+  valueB: string
+  mediaQuery: string
+  mediaTrue: string
+  mediaFalse: string
+}
+
+// Each entry produces one tri-state block in the FOUC init script.
+// Adding a new theme preference = adding one entry here.
+const THEME_PREFERENCES: TriStatePreference[] = [
+  {
+    varName: 'ct',
+    storageKey: 'theme-contrast',
+    attribute: 'data-theme-contrast',
+    jsonParsed: true,
+    conditionA: 'on', valueA: 'high',
+    conditionB: 'off', valueB: 'standard',
+    mediaQuery: '(prefers-contrast:more)',
+    mediaTrue: 'high', mediaFalse: 'standard',
+  },
+  {
+    varName: 'm',
+    storageKey: 'theme-motion',
+    attribute: 'data-theme-motion',
+    jsonParsed: true,
+    conditionA: 'on', valueA: 'reduced',
+    conditionB: 'off', valueB: 'full',
+    mediaQuery: '(prefers-reduced-motion:reduce)',
+    mediaTrue: 'reduced', mediaFalse: 'full',
+  },
+  {
+    varName: 't',
+    storageKey: 'theme-transparency',
+    attribute: 'data-theme-transparency',
+    jsonParsed: true,
+    conditionA: 'on', valueA: 'reduced',
+    conditionB: 'off', valueB: 'full',
+    mediaQuery: '(prefers-reduced-transparency:reduce)',
+    mediaTrue: 'reduced', mediaFalse: 'full',
+  },
+  {
+    varName: 'dm',
+    storageKey: 'theme-mode',
+    attribute: 'data-theme-mode',
+    jsonParsed: false,
+    conditionA: 'dark', valueA: 'dark',
+    conditionB: 'light', valueB: 'light',
+    mediaQuery: '(prefers-color-scheme:dark)',
+    mediaTrue: 'dark', mediaFalse: 'light',
+  },
+]
+
+function buildPrefFragment(p: TriStatePreference): string {
+  const readValue = p.jsonParsed
+    ? `${p.varName}?JSON.parse(${p.varName}):'system'`
+    : `${p.varName}||'system'`
+  return (
+    `var ${p.varName}=localStorage.getItem('${p.storageKey}');` +
+    `var ${p.varName}v=${readValue};` +
+    `if(${p.varName}v==='${p.conditionA}'){h.setAttribute('${p.attribute}','${p.valueA}')}` +
+    `else if(${p.varName}v==='${p.conditionB}'){h.setAttribute('${p.attribute}','${p.valueB}')}` +
+    `else{h.setAttribute('${p.attribute}',(window.matchMedia&&window.matchMedia('${p.mediaQuery}').matches)?'${p.mediaTrue}':'${p.mediaFalse}')}`
+  )
+}
+
+export function buildThemeInitScript(defaultAccent: string): string {
+  const colourBlock =
+    `var c=localStorage.getItem('theme-colour');` +
+    `h.setAttribute('data-theme-colour',c?JSON.parse(c):'${defaultAccent}');`
+
+  return (
+    '(function(){try{' +
+    'var h=document.documentElement;' +
+    colourBlock +
+    THEME_PREFERENCES.map(buildPrefFragment).join('') +
+    '}catch(e){}})()'
+  )
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",

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

@@ -1,28 +0,0 @@
-import type { Collections } from '@nuxt/content'
-
-type CollectionItem<TCollection extends keyof Collections> = Collections[TCollection]
-
-export function useCollectionItems<TCollection extends keyof Collections>(args: {
-  key: string
-  collection: TCollection
-  sort: (a: CollectionItem<TCollection>, b: CollectionItem<TCollection>) => number
-  options?: { limit?: number | undefined }
-  filter?: (item: CollectionItem<TCollection>) => boolean
-}) {
-  const { key, collection, sort, options = {}, filter } = args
-
-  return useContentData(key, async () => {
-    let items = (await queryCollection(collection).all()) as CollectionItem<TCollection>[]
-    items = items.sort(sort)
-
-    if (filter) {
-      items = items.filter(filter)
-    }
-
-    if (options.limit !== undefined) {
-      items = items.slice(0, options.limit)
-    }
-
-    return items
-  })
-}