kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,3 +1,7 @@
+/* eslint-disable complexity */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 /**
  * Core Layer Initialization Plugin
@@ -13,15 +17,14 @@
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useAppConfig()
   // const isDev = import.meta.dev
-  const isDev = process.env.NODE_ENV === 'development' ? true : false
+  const isDev = process.env.NODE_ENV === 'development'
 
   // ============================================================
   // 1. Log initialization (dev only)
   // ============================================================
   if (isDev) {
-    // eslint-disable-next-line no-console
     console.log('🚀 [Core Layer] Initializing...')
-    // eslint-disable-next-line no-console
+
     console.log('[Core Layer] Config:', config.coreLayer)
   }
 
@@ -33,7 +36,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     const device = useDevice()
 
     if (isDev && device) {
-      // eslint-disable-next-line no-console
       console.log('[Core Layer] Device detection:', {
         mobile: device.isMobile,
         desktop: device.isDesktop,
@@ -45,7 +47,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     const isOnline = useOnline()
 
     if (isDev) {
-      // eslint-disable-next-line no-console
       console.log('[Core Layer] VueUse loaded, online status:', isOnline.value)
     }
 
@@ -55,7 +56,6 @@ export default defineNuxtPlugin((nuxtApp) => {
       const { name, version, engine, os } = useBrowser()
 
       if (isDev) {
-        // eslint-disable-next-line no-console
         console.log('[Core Layer] Browser detection:', {
           name: name.value,
           version: version.value,
@@ -68,7 +68,6 @@ export default defineNuxtPlugin((nuxtApp) => {
       const { breakpoint, isRetina, orientation } = useScreen()
 
       if (isDev) {
-        // eslint-disable-next-line no-console
         console.log('[Core Layer] Screen detection:', {
           breakpoint: breakpoint.value,
           retina: isRetina.value,
@@ -80,7 +79,6 @@ export default defineNuxtPlugin((nuxtApp) => {
       const { connectionQuality, effectiveType, saveData } = useNetworkInfo()
 
       if (isDev) {
-        // eslint-disable-next-line no-console
         console.log('[Core Layer] Network detection:', {
           quality: connectionQuality.value,
           type: effectiveType.value,
@@ -92,7 +90,6 @@ export default defineNuxtPlugin((nuxtApp) => {
       const { grid, subgrid, containerQueries, webGL, darkMode } = useFeatures()
 
       if (isDev) {
-        // eslint-disable-next-line no-console
         console.log('[Core Layer] Feature detection:', {
           grid: grid.value,
           subgrid: subgrid.value,
@@ -106,7 +103,6 @@ export default defineNuxtPlugin((nuxtApp) => {
       const { offlineReady, isOnline: cacheOnline } = useCache()
 
       if (isDev) {
-        // eslint-disable-next-line no-console
         console.log('[Core Layer] Cache status:', {
           online: cacheOnline.value,
           offlineReady: offlineReady.value,
@@ -121,7 +117,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     const { mode, isServer, isClient, isHydrated } = useRendering()
 
     if (isDev) {
-      // eslint-disable-next-line no-console
       console.log('[Core Layer] Rendering mode:', {
         mode: mode.value,
         server: isServer.value,
@@ -135,14 +130,13 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     if (isDev) {
       const publicConfig = env.public as Record<string, unknown> | undefined
-      // eslint-disable-next-line no-console
+
       console.log('[Core Layer] Environment config loaded:', {
-        hasPublicConfig: !!publicConfig,
+        hasPublicConfig: Boolean(publicConfig),
         publicKeys: Object.keys(publicConfig ?? {}),
       })
     }
   } catch (error) {
-    // eslint-disable-next-line no-console
     console.error('[Core Layer] Module verification failed:', error)
   }
 
@@ -151,27 +145,22 @@ export default defineNuxtPlugin((nuxtApp) => {
   // ============================================================
   if (isDev) {
     nuxtApp.hook('app:created', () => {
-      // eslint-disable-next-line no-console
       console.log('✅ [Core Layer] App created')
     })
 
     nuxtApp.hook('app:beforeMount', () => {
-      // eslint-disable-next-line no-console
       console.log('⏳ [Core Layer] App mounting...')
     })
 
     nuxtApp.hook('app:mounted', () => {
-      // eslint-disable-next-line no-console
       console.log('✅ [Core Layer] App mounted')
     })
 
     nuxtApp.hook('page:start', () => {
-      // eslint-disable-next-line no-console
       console.log('📄 [Core Layer] Page navigation started')
     })
 
     nuxtApp.hook('page:finish', () => {
-      // eslint-disable-next-line no-console
       console.log('✅ [Core Layer] Page navigation finished')
     })
   }

package/layers/core/app/plugins/loading.client.ts

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable no-restricted-syntax */
 // plugins/loading.client.ts
 
-interface LoadingConfig {
+type LoadingConfig = {
   enabled?: boolean
   minDuration?: number
   maxDuration?: number
@@ -9,7 +11,7 @@ interface LoadingConfig {
   zIndex?: number
 }
 
-interface CoreLayerConfig {
+type CoreLayerConfig = {
   loading?: LoadingConfig
 }
 

package/layers/core/app/plugins/scroll-guard.client.ts

@@ -1,8 +1,11 @@
+/* eslint-disable complexity */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable no-restricted-syntax */
 // plugins/scroll-guard.client.ts
 
 import type { ScrollGuardConfig } from '#layers/core/app/types/scroll-guard'
 
-interface CoreLayerConfig {
+type CoreLayerConfig = {
   scrollGuard?: Partial<ScrollGuardConfig>
 }
 
@@ -26,7 +29,6 @@ export default defineNuxtPlugin(() => {
 
   if (coreLayer?.scrollGuard?.enabled === false) {
     if (import.meta.dev) {
-      // eslint-disable-next-line no-console
       console.log('[Scroll Guard] Disabled via config')
     }
     return
@@ -37,7 +39,6 @@ export default defineNuxtPlugin(() => {
   enable()
 
   if (import.meta.dev) {
-    // eslint-disable-next-line no-console
     console.log('[Scroll Guard] Initialized', {
       strict: coreLayer?.scrollGuard?.strict ?? true,
       debug: coreLayer?.scrollGuard?.debug ?? false,
@@ -49,7 +50,6 @@ export default defineNuxtPlugin(() => {
 
     // Log clamped count after initial scan settles
     requestAnimationFrame(() => {
-      // eslint-disable-next-line no-console
       console.log(`[Scroll Guard] Clamped ${clampedCount.value} element(s)`)
     })
   }

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

@@ -1,5 +1,9 @@
+import type { SiteConfig } from './site'
+
 declare module '@nuxt/schema' {
-  interface AppConfigInput {
+  type AppConfigInput = {
+    /** Shared site metadata — consumed by feeds, SEO, and any layer needing canonical site info. */
+    site?: SiteConfig
     coreLayer?: {
       /** Project name */
       name?: string

package/layers/core/app/types/detection.ts

@@ -5,7 +5,7 @@
  * and image format detection
  */
 
-export interface FeatureDetection {
+export type FeatureDetection = {
   // CSS Features
   grid: boolean
   subgrid: boolean
@@ -34,7 +34,7 @@ export interface FeatureDetection {
 /**
  * Device detection types
  */
-export interface DeviceInfo {
+export type DeviceInfo = {
   isMobile: boolean
   isTablet: boolean
   isDesktop: boolean
@@ -48,7 +48,7 @@ export interface DeviceInfo {
 /**
  * Browser detection types
  */
-export interface BrowserInfo {
+export type BrowserInfo = {
   isChrome: boolean
   isSafari: boolean
   isFirefox: boolean
@@ -61,7 +61,7 @@ export interface BrowserInfo {
 /**
  * Screen detection types
  */
-export interface ScreenInfo {
+export type ScreenInfo = {
   breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
   width: number
   height: number
@@ -73,7 +73,7 @@ export interface ScreenInfo {
 /**
  * Network information types
  */
-export interface NetworkInfo {
+export type NetworkInfo = {
   isOnline: boolean
   connectionType: 'slow-2g' | '2g' | '3g' | '4g' | 'wifi' | 'ethernet' | 'unknown'
   effectiveType: string
@@ -89,7 +89,7 @@ export interface NetworkInfo {
  */
 export type RenderingMode = 'ssr' | 'ssg' | 'csr' | 'hybrid'
 
-export interface RenderingInfo {
+export type RenderingInfo = {
   mode: RenderingMode
   isServer: boolean
   isClient: boolean
@@ -100,7 +100,7 @@ export interface RenderingInfo {
 /**
  * PWA types
  */
-export interface PWAInfo {
+export type PWAInfo = {
   isInstalled: boolean
   canInstall: boolean
   needRefresh: boolean
@@ -109,7 +109,7 @@ export interface PWAInfo {
 /**
  * Cache types
  */
-export interface CacheInfo {
+export type CacheInfo = {
   isOnline: boolean
   offlineReady: boolean
   isCached: boolean

package/layers/core/app/types/index.ts

@@ -4,7 +4,8 @@
  * Central export for all type definitions used across the core layer
  */
 
-export * from './detection'
-export * from './runtime-config'
-export * from './loading'
-export * from './scroll-guard'
+export type * from './detection'
+export type * from './runtime-config'
+export type * from './loading'
+export type * from './scroll-guard'
+export type * from './site'

package/layers/core/app/types/loading.ts

@@ -3,7 +3,7 @@
 /**
  * Loading screen configuration interface
  */
-export interface LoadingConfig {
+export type LoadingConfig = {
   /** Master toggle - set to false to disable completely */
   enabled: boolean
   /** Minimum time to display loading screen (prevents flash) */
@@ -21,7 +21,7 @@ export interface LoadingConfig {
 /**
  * Loading state interface
  */
-export interface LoadingState {
+export type LoadingState = {
   /** Current loading state */
   isLoading: boolean
   /** Progress percentage (0-100) */
@@ -31,7 +31,7 @@ export interface LoadingState {
 /**
  * Loading composable return interface
  */
-export interface UseLoadingReturn {
+export type UseLoadingReturn = {
   /** Current loading state (readonly) */
   isLoading: Readonly<Ref<boolean>>
   /** Progress percentage 0-100 (readonly) */

package/layers/core/app/types/runtime-config.ts

@@ -5,7 +5,7 @@
  * Extends Nuxt's RuntimeConfig with core layer specifics
  */
 
-export interface CoreLayerRuntimeConfig {
+export type CoreLayerRuntimeConfig = {
   // Server-side only (private)
   secretKey?: string
   apiSecretKey?: string
@@ -25,7 +25,7 @@ export interface CoreLayerRuntimeConfig {
  * Augment Nuxt's RuntimeConfig
  */
 declare module 'nuxt/schema' {
-  interface RuntimeConfig extends CoreLayerRuntimeConfig {}
+  type RuntimeConfig = {} & CoreLayerRuntimeConfig
 }
 
 export {}

package/layers/core/app/types/scroll-guard.ts

@@ -2,7 +2,7 @@
  * Horizontal Scroll Guard types
  */
 
-export interface ScrollGuardConfig {
+export type ScrollGuardConfig = {
   /** Master toggle — set to false to disable completely */
   enabled: boolean
   /** CSS selectors for elements allowed to overflow intentionally */
@@ -17,7 +17,7 @@ export interface ScrollGuardConfig {
   debug: boolean
 }
 
-export interface ScrollGuardState {
+export type ScrollGuardState = {
   /** Whether the guard is currently active */
   isEnabled: boolean
   /** Number of elements currently clamped */

package/layers/core/app/types/site.ts

@@ -0,0 +1,43 @@
+export type Author = {
+  name: string
+  email?: string
+  /** URL of the author's profile or homepage */
+  link?: string
+}
+
+/**
+ * Shared site metadata. Set this in your app's `app.config.ts` under the `site` key.
+ * Consumed by the feeds layer for feed channel metadata and available to any other
+ * layer that needs canonical site information.
+ *
+ * @example
+ * ```ts
+ * // app/app.config.ts
+ * export default defineAppConfig({
+ *   site: {
+ *     title: 'Kieran Mansfield',
+ *     description: 'Creative Full-Stack Web Developer based in London, UK.',
+ *     url: 'https://example.com',
+ *     author: { name: 'Kieran Mansfield', email: 'hi@example.com' },
+ *   },
+ * })
+ * ```
+ */
+export type SiteConfig = {
+  /** Display name of the site */
+  title?: string
+  /** Tagline or secondary title */
+  subtitle?: string
+  /** Short description used in feed channels and meta tags */
+  description?: string
+  /** Canonical origin URL — no trailing slash (e.g. "https://example.com") */
+  url?: string
+  /** Default author for feed items and structured data */
+  author?: Author
+  /** Absolute URL of the site's OG/social image */
+  image?: string
+  /** Path to the favicon (default: "/favicon.ico") */
+  favicon?: string
+  /** Copyright string — auto-generated from author.name + year if omitted */
+  copyright?: string
+}

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

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable no-restricted-syntax */
 /**
  * Core utility helpers
  *

package/layers/core/nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
 
   alias: {
     '#layers/core': import.meta.dirname,
+    '#layers/core/types': `${import.meta.dirname}/app/types`,
   },
 
   // Base modules (always loaded)

package/layers/core/package.json

@@ -20,6 +20,6 @@
     "nuxiupgrade": "npx nuxi upgrade"
   },
   "devDependencies": {
-    "@vite-pwa/nuxt": "^1.1.1"
+    "@vite-pwa/nuxt": "catalog:"
   }
 }

package/layers/feeds/app/app.config.ts

@@ -0,0 +1,23 @@
+export default defineAppConfig({
+  feedsLayer: {
+    feed: {
+      limit: 30,
+      collections: ['blog'],
+      defaultCollection: 'blog',
+    },
+  },
+})
+
+declare module '@nuxt/schema' {
+  type AppConfigInput = {
+    feedsLayer?: {
+      feed?: {
+        limit?: number
+        /** Collection names to expose as feeds. Default: ['blog'] */
+        collections?: string[]
+        /** Collection used by the shorthand /feed/rss routes. Default: 'blog' */
+        defaultCollection?: string
+      }
+    }
+  }
+}

package/layers/feeds/app/assets/css/feeds.css

@@ -0,0 +1,66 @@
+/* Feed badge — inline indicator for RSS/Atom/JSON links */
+.feed-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: opacity 0.15s;
+  border-radius: var(--ui-radius, 0.375rem);
+  padding: 0.125rem 0.5rem;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.feed-badge:hover {
+  opacity: 0.8;
+}
+
+.feed-badge-rss {
+  background-color: color-mix(in srgb, var(--color-orange-500, #f97316) 12%, transparent);
+  color: var(--color-orange-600, #ea580c);
+}
+
+.feed-badge-atom {
+  background-color: color-mix(in srgb, var(--color-purple-500, #a855f7) 12%, transparent);
+  color: var(--color-purple-600, #9333ea);
+}
+
+.feed-badge-json {
+  background-color: color-mix(in srgb, var(--color-yellow-500, #eab308) 12%, transparent);
+  color: var(--color-yellow-600, #ca8a04);
+}
+
+@media (prefers-color-scheme: dark) {
+  .feed-badge-rss {
+    color: var(--color-orange-400, #fb923c);
+  }
+  .feed-badge-atom {
+    color: var(--color-purple-400, #c084fc);
+  }
+  .feed-badge-json {
+    color: var(--color-yellow-400, #facc15);
+  }
+}
+
+/* Feed preview code block — used in playground and consuming apps */
+.feed-preview {
+  border-radius: var(--ui-radius, 0.375rem);
+  background-color: var(--color-gray-950, #030712);
+  padding: 1rem;
+  max-height: 24rem;
+  overflow-x: auto;
+  overflow-y: auto;
+  color: var(--color-gray-100, #f3f4f6);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.feed-preview pre {
+  margin: 0;
+  white-space: pre;
+}
+
+/* Feed discovery links — add to <head> via useHead */
+/* Usage: useHead({ link: [{ rel: 'alternate', type: 'application/rss+xml', title: 'RSS', href: '/feed/rss' }] }) */

package/layers/feeds/app/plugins/feed-head.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable no-restricted-syntax */
+export default defineNuxtPlugin(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const appConfig = useAppConfig() as any
+  const site = appConfig.site ?? {}
+  const feedConfig = appConfig.feedsLayer?.feed ?? {}
+  const collections: string[] = feedConfig.collections ?? ['blog']
+  const defaultCollection: string = feedConfig.defaultCollection ?? 'blog'
+  const siteTitle: string = site.title ?? ''
+
+  const route = useRoute()
+
+  useHead(() => {
+    // Derive which collection (if any) the current page belongs to
+    const segment = route.path.split('/').filter(Boolean)[0] ?? ''
+    const currentCollection = collections.includes(segment) ? segment : null
+
+    // Always present: main site feeds via the shorthand routes
+    const mainLinks = [
+      {
+        rel: 'alternate',
+        type: 'application/rss+xml',
+        title: `${siteTitle || 'Site'} (RSS)`,
+        href: '/feed/rss',
+      },
+      {
+        rel: 'alternate',
+        type: 'application/atom+xml',
+        title: `${siteTitle || 'Site'} (Atom)`,
+        href: '/feed/atom',
+      },
+      {
+        rel: 'alternate',
+        type: 'application/feed+json',
+        title: `${siteTitle || 'Site'} (JSON Feed)`,
+        href: '/feed/json',
+      },
+    ]
+
+    // Collection-specific feeds — only when on a non-default collection's pages.
+    // The default collection is already covered by the main shorthand links above.
+    const label =
+      currentCollection && currentCollection !== defaultCollection
+        ? currentCollection.charAt(0).toUpperCase() + currentCollection.slice(1)
+        : null
+
+    const collectionLinks = label
+      ? [
+          {
+            rel: 'alternate',
+            type: 'application/rss+xml',
+            title: `${label} (RSS)`,
+            href: `/feed/${currentCollection}/rss`,
+          },
+          {
+            rel: 'alternate',
+            type: 'application/atom+xml',
+            title: `${label} (Atom)`,
+            href: `/feed/${currentCollection}/atom`,
+          },
+          {
+            rel: 'alternate',
+            type: 'application/feed+json',
+            title: `${label} (JSON Feed)`,
+            href: `/feed/${currentCollection}/json`,
+          },
+        ]
+      : []
+
+    return { link: [...mainLinks, ...collectionLinks] }
+  })
+})

package/layers/feeds/nuxt.config.ts

@@ -0,0 +1,36 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  $meta: {
+    name: 'feeds',
+  },
+
+  extends: process.env.FEEDS_STANDALONE ? ['../core', '../content'] : [],
+
+  alias: {
+    '#layers/feeds': import.meta.dirname,
+  },
+
+  css: ['#layers/feeds/app/assets/css/feeds.css'],
+
+  nitro: {
+    prerender: {
+      // Shorthand routes (/feed/rss etc.) always map to the defaultCollection.
+      // These are owned by the feeds layer so we prerender them here.
+      // 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',
+        '/feed/json',
+        '/feed/rss/all',
+        '/feed/atom/all',
+        '/feed/json/all',
+        '/feed/style.xsl',
+      ],
+    },
+  },
+
+  compatibilityDate: '2025-07-15',
+})

package/layers/feeds/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "kmcom-layer-feeds",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "dev": "nuxi dev .playground",
+    "dev:prepare": "nuxt prepare .playground",
+    "build": "FEEDS_STANDALONE=true nuxi build",
+    "generate": "FEEDS_STANDALONE=true nuxi generate",
+    "preview": "nuxt preview .playground"
+  },
+  "dependencies": {
+    "feed": "catalog:"
+  },
+  "devDependencies": {
+    "nuxt": "catalog:",
+    "vue": "^3.5.35",
+    "vue-router": "catalog:"
+  }
+}

package/layers/feeds/tsconfig.json

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

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
   // @ts-nocheck
   import type { FormSubmitEvent } from '@nuxt/ui'