kmcom-nuxt-layers 2.3.1 → 2.5.0

package/README.md

@@ -29,6 +29,8 @@ export default defineNuxtConfig({
 | **motion** | Animations — GSAP, Locomotive Scroll |
 | **shader** | 3D / WebGPU — Three.js, TresJS |
 | **forms** | Validation — Zod-based form system |
+| **database** | Storage — Drizzle ORM + Neon Postgres |
+| **auth** | Authentication — nuxt-auth-utils + GitHub OAuth |
 | **theme** | Theming — color mode, accent colors |
 | **content** | CMS — @nuxt/content, Nuxt Studio |
 

package/docs/ARCHITECTURE.md

@@ -15,6 +15,8 @@ nuxt-layers/
 │   ├── motion/              # GSAP + Locomotive Scroll animations
 │   ├── shader/              # Three.js / TresJS WebGPU shaders
 │   ├── forms/               # Zod-based form validation
+│   ├── database/            # Drizzle + Neon Postgres connection
+│   ├── auth/                # nuxt-auth-utils + GitHub OAuth
 │   ├── theme/               # Color mode, accent colors, accessibility
 │   └── content/             # @nuxt/content integration, Nuxt Studio
 ├── packages/                # Shared utilities (placeholder)
@@ -192,5 +194,7 @@ Some layers (ui, content) support standalone mode via environment variables (`UI
 | **motion** | Animation layer. GSAP with ScrollTrigger, Locomotive Scroll (Lenis) smooth scrolling, motion composables. Transpiles GSAP for SSR. |
 | **shader** | WebGPU/WebGL layer. Three.js + TresJS integration, TSL shader support, post-processing. Includes custom shader utilities and auto-imported shader modules. |
 | **forms** | Form validation layer. Zod schema-based validation, form composables, typed form components. |
+| **database** | Database infrastructure. Drizzle ORM + Neon Postgres via HTTP driver. Exposes `useSql()` and `useDrizzle(schema)` server utilities. App-owned schema and migrations; env: `NUXT_DATABASE_LAYER_URL`. |
+| **auth** | Authentication layer. nuxt-auth-utils + GitHub OAuth handler, sealed-cookie sessions. Opt-in `auth` route middleware; no user table (app's responsibility). Env: `NUXT_SESSION_PASSWORD`, `NUXT_OAUTH_GITHUB_CLIENT_ID/SECRET`. |
 | **theme** | Theming layer. Color mode switching, accent color palette, theme plugin, CSS custom properties for dynamic theming. |
 | **content** | Content management layer. @nuxt/content integration, better-sqlite3 for local content DB, optional Nuxt Studio support. |

package/layers/auth/app/middleware/auth.ts

@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession()
+  if (!loggedIn.value) return navigateTo('/auth/github')
+})

package/layers/auth/nuxt.config.ts

@@ -0,0 +1,31 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'auth',
+  },
+
+  extends: ['../core'],
+
+  modules: ['nuxt-auth-utils'],
+
+  alias: {
+    '#layers/auth': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-28',
+
+  runtimeConfig: {
+    // nuxt-auth-utils reads these env vars automatically:
+    session: { password: '' }, // env: NUXT_SESSION_PASSWORD
+    oauth: {
+      github: {
+        clientId: '', // env: NUXT_OAUTH_GITHUB_CLIENT_ID
+        clientSecret: '', // env: NUXT_OAUTH_GITHUB_CLIENT_SECRET
+      },
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/auth/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "kmcom-layer-auth",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,auth pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "nuxt-auth-utils": "catalog:"
+  }
+}

package/layers/auth/server/routes/auth/github.get.ts

@@ -0,0 +1,13 @@
+export default defineOAuthGitHubEventHandler({
+  async onSuccess(event, { user }) {
+    await setUserSession(event, {
+      user: {
+        provider: 'github',
+        providerId: user.id,
+        username: user.login,
+        avatarUrl: user.avatar_url,
+      },
+    })
+    return sendRedirect(event, '/')
+  },
+})

package/layers/auth/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/baseline/app/components/BaselineStatus.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'BaselineStatus',
+  props: {
+    featureId: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    if (import.meta.server) return () => null
+    return () => h('baseline-status', { featureId: props.featureId })
+  },
+})
+</script>

package/layers/baseline/app/plugins/baseline-status.client.ts

@@ -0,0 +1,3 @@
+import 'baseline-status'
+
+export default defineNuxtPlugin(() => {})

package/layers/baseline/nuxt.config.ts

@@ -0,0 +1,24 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'baseline',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/baseline': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'baseline-status' || tag === 'baseline-icon',
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/baseline/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "kmcom-layer-baseline",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev:playground": "PLAYGROUND_LAYERS=core,baseline pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "baseline-status": "catalog:"
+  }
+}

package/layers/baseline/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

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/database/nuxt.config.ts

@@ -0,0 +1,30 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'database',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/database': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-28',
+
+  runtimeConfig: {
+    databaseLayer: {
+      url: '', // env: NUXT_DATABASE_LAYER_URL  (Neon connection string)
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    databaseLayer?: { url: string }
+  }
+}

package/layers/database/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "kmcom-layer-database",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,database pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@neondatabase/serverless": "catalog:",
+    "drizzle-orm": "catalog:"
+  }
+}

package/layers/database/server/utils/drizzle.ts

@@ -0,0 +1,5 @@
+import { drizzle } from 'drizzle-orm/neon-http'
+
+export function useDrizzle<TSchema extends Record<string, unknown>>(schema: TSchema) {
+  return drizzle(useSql(), { schema })
+}

package/layers/database/server/utils/sql.ts

@@ -0,0 +1,7 @@
+import { neon } from '@neondatabase/serverless'
+
+export function useSql() {
+  const { databaseLayer } = useRuntimeConfig()
+  if (!databaseLayer?.url) throw createError('Database URL not configured')
+  return neon(databaseLayer.url)
+}

package/layers/database/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

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/metadata/app/composables/useMetadataItem.ts

@@ -0,0 +1,11 @@
+import type { MetadataProviderId, MetadataRecord } from '#layers/metadata/shared/types'
+
+export function useMetadataItem(provider: MetadataProviderId, providerId: string, resourceType?: string) {
+  return useAsyncData(
+    `metadata-item:${provider}:${providerId}`,
+    () =>
+      $fetch('/api/metadata/lookup', {
+        query: { provider, providerId, resourceType },
+      }) as Promise<MetadataRecord>,
+  )
+}

package/layers/metadata/app/composables/useMetadataSearch.ts

@@ -0,0 +1,25 @@
+import type { MetadataMediaType, MetadataProviderId, MetadataSearchResult } from '#layers/metadata/shared/types'
+
+type UseMetadataSearchOptions = {
+  mediaType?: MetadataMediaType
+  providers?: MetadataProviderId[]
+  limit?: number
+}
+
+export function useMetadataSearch(query: MaybeRef<string>, options: UseMetadataSearchOptions = {}) {
+  const q = computed(() => toValue(query).trim())
+
+  return useAsyncData(
+    () => `metadata-search:${q.value}`,
+    () =>
+      $fetch('/api/metadata/search', {
+        query: {
+          q: q.value,
+          mediaType: options.mediaType,
+          providers: options.providers?.join(','),
+          limit: options.limit,
+        },
+      }) as Promise<MetadataSearchResult[]>,
+    { watch: [q], immediate: false },
+  )
+}

package/layers/metadata/nuxt.config.ts

@@ -0,0 +1,27 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'metadata',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/metadata': import.meta.dirname,
+    '#layers/metadata/shared': `${import.meta.dirname}/shared`,
+  },
+
+  compatibilityDate: '2026-06-30',
+
+  nitro: {
+    storage: {
+      metadata: {
+        driver: 'memory',
+      },
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/metadata/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "kmcom-layer-metadata",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,metadata pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  }
+}

package/layers/metadata/server/api/metadata/lookup.get.ts

@@ -0,0 +1,40 @@
+import type { MetadataProviderId } from '#layers/metadata/shared/types'
+
+// fallow-ignore-next-line complexity
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+
+  const providerId = String(query.providerId ?? '').trim()
+  const providerName = String(query.provider ?? '').trim() as MetadataProviderId
+  const resourceType = query.resourceType ? String(query.resourceType) : undefined
+
+  if (!providerName || !providerId) {
+    throw createError({ statusCode: 400, message: 'provider and providerId are required' })
+  }
+
+  const provider = getProvider(providerName)
+  if (!provider) throw createError({ statusCode: 404, message: `Provider '${providerName}' not registered` })
+
+  const cacheKey = makeCacheKey('metadata', providerName, resourceType ?? 'item', providerId)
+  const cached = await getCacheRecord(cacheKey)
+  if (cached) return cached.normalised
+
+  const result = await provider.lookup({ provider: providerName, providerId, resourceType })
+  if (!result) throw createError({ statusCode: 404, message: 'Not found' })
+
+  const now = new Date().toISOString()
+  await setCacheRecord(cacheKey, {
+    id: result.id,
+    provider: providerName,
+    providerId,
+    resourceType: resourceType ?? 'item',
+    mediaType: result.mediaType,
+    normalised: result,
+    raw: result.raw ?? null,
+    createdAt: now,
+    updatedAt: now,
+    lastSyncedAt: now,
+  })
+
+  return result
+})

package/layers/metadata/server/api/metadata/providers.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(() => {
+  return getProviders().map((p) => ({
+    id: p.id,
+    label: p.label,
+    mediaTypes: p.mediaTypes,
+  }))
+})

package/layers/metadata/server/api/metadata/search.get.ts

@@ -0,0 +1,17 @@
+import type { MetadataMediaType, MetadataProviderId } from '#layers/metadata/shared/types'
+
+// fallow-ignore-next-line complexity
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+
+  const q = String(query.q ?? '').trim()
+  if (!q) throw createError({ statusCode: 400, message: 'q is required' })
+
+  const mediaType = query.mediaType as MetadataMediaType | undefined
+  const providers = query.providers
+    ? String(query.providers).split(',').filter(Boolean) as MetadataProviderId[]
+    : undefined
+  const limit = query.limit ? Number(query.limit) : 10
+
+  return searchMetadata({ query: q, mediaType, providers, limit })
+})