kmcom-nuxt-layers 2.2.2 → 2.2.4

package/layers/canvas/app/composables/useRendererCapabilities.ts

@@ -2,7 +2,6 @@ import {
   QUALITY_PRESETS,
   type QualityLevel,
   type QualitySettings,
-  type RendererBackend,
   type RendererCapabilities,
 } from '#layers/canvas/types/renderer'
 

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

@@ -57,7 +57,7 @@
           color="neutral"
           variant="ghost"
           class="absolute top-4 right-4 text-white"
-          @click="() => (open = false)"
+          @click="() => { open = false }"
         />
 
         <!-- Prev -->

package/layers/feeds/server/routes/feed/[collection]/atom/all.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, 'collection')
+  const { items, config } = await buildFeed(event, collection, { unlimited: true })
+  const content = toAtom(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/[collection]/atom.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, 'collection')
+  const { items, config } = await buildFeed(event, collection)
+  const content = toAtom(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/[collection]/json/all.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, 'collection')
+  const { items, config } = await buildFeed(event, collection, { unlimited: true })
+  const content = toJSONFeed(items, config)
+  setFeedCacheHeaders(event, JSON.stringify(content))
+  setHeader(event, 'Content-Type', 'application/feed+json; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/[collection]/json.get.ts

@@ -0,0 +1,9 @@
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, 'collection')
+  const { items, config } = await buildFeed(event, collection)
+  const body = toJSONFeed(items, config)
+  const content = JSON.stringify(body)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'application/feed+json; charset=utf-8')
+  return body
+})

package/layers/feeds/server/routes/feed/[collection]/rss/all.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, 'collection')
+  const { items, config } = await buildFeed(event, collection, { unlimited: true })
+  const content = toRSS(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/[collection]/rss.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, 'collection')
+  const { items, config } = await buildFeed(event, collection)
+  const content = toRSS(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/atom/all.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async (event) => {
+  const { items, config } = await buildFeed(event, undefined, { unlimited: true })
+  const content = toAtom(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/atom.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async (event) => {
+  const { items, config } = await buildFeed(event)
+  const content = toAtom(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/demo.get.ts

@@ -0,0 +1,104 @@
+const RSS_ICON = `<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M2.5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3Z"/>
+        <path d="M4 8a6 6 0 0 1 6 6H8.5A4.5 4.5 0 0 0 4 9.5V8Z"/>
+        <path d="M4 5a9 9 0 0 1 9 9h-1.5A7.5 7.5 0 0 0 4 6.5V5Z"/>
+        <circle cx="3.5" cy="13.5" r="1.5"/>
+      </svg>`
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+
+export default defineEventHandler(async (event) => {
+  const appConfig = useAppConfig()
+  const feedConfig =
+    (appConfig as { feedsLayer?: { feed?: { defaultCollection?: string } } }).feedsLayer?.feed ?? {}
+  const defaultCollection = feedConfig.defaultCollection ?? 'blog'
+
+  const requestUrl = getRequestURL(event)
+  const origin = `${requestUrl.protocol}//${requestUrl.host}`
+  const subscribeUrl = `feed:${origin}/feed/${defaultCollection}/rss`
+
+  const { items, config } = await buildFeed(event, defaultCollection)
+
+  const itemsHtml = items
+    .map(
+      (item) => `
+    <li class="feed-item">
+      <article>
+        <h2 class="feed-item-title">
+          <a href="${escapeHtml(config.siteUrl + item.link)}">${escapeHtml(item.title)}</a>
+        </h2>
+        <div class="feed-item-meta">
+          <time>${formatDate(item.date)}</time>
+          ${item.author ? `<span class="feed-item-separator">·</span><span>${escapeHtml(item.author)}</span>` : ''}
+        </div>
+        ${item.description ? `<p class="feed-item-description">${escapeHtml(item.description)}</p>` : ''}
+        ${
+          item.tags?.length
+            ? `
+        <div class="feed-tags">
+          ${item.tags.map((t) => `<span class="feed-tag">${escapeHtml(t)}</span>`).join('')}
+        </div>`
+            : ''
+        }
+      </article>
+    </li>`
+    )
+    .join('')
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(config.title)} · Feed Preview</title>
+  <link rel="stylesheet" href="/feed/style.css">
+</head>
+<body>
+  <div class="feed-container">
+    <header class="feed-header">
+      <span class="feed-eyebrow">
+        ${RSS_ICON}
+        RSS
+      </span>
+      <h1 class="feed-title">
+        <a href="${escapeHtml(config.siteUrl)}">${escapeHtml(config.title)}</a>
+      </h1>
+      ${config.description ? `<p class="feed-description">${escapeHtml(config.description)}</p>` : ''}
+      <div class="feed-header-actions">
+        <div class="feed-meta">
+          <span>${items.length} items</span>
+          <a class="feed-meta-link" href="${escapeHtml(config.siteUrl)}">Visit site &rarr;</a>
+        </div>
+        <a class="feed-subscribe" href="${escapeHtml(subscribeUrl)}">
+          ${RSS_ICON}
+          Subscribe
+        </a>
+      </div>
+    </header>
+    <main>
+      <ul class="feed-items">
+        ${itemsHtml}
+      </ul>
+    </main>
+  </div>
+</body>
+</html>`
+
+  setHeader(event, 'Content-Type', 'text/html; charset=utf-8')
+  setHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')
+  return html
+})

package/layers/feeds/server/routes/feed/discovery.get.ts

@@ -0,0 +1,30 @@
+export default defineEventHandler((event) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const appConfig = useAppConfig() as any
+  const feedConfig = appConfig.feedsLayer?.feed ?? {}
+  const collections: string[] = feedConfig.collections ?? ['blog']
+
+  const requestUrl = getRequestURL(event)
+  // Always use the request origin so discovery URLs are reachable from wherever
+  // the request came from, not the configured canonical site URL.
+  const baseUrl = `${requestUrl.protocol}//${requestUrl.host}`
+
+  setHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')
+
+  const formats = [
+    { format: 'RSS 2.0', ext: 'rss', contentType: 'application/rss+xml' },
+    { format: 'Atom 1.0', ext: 'atom', contentType: 'application/atom+xml' },
+    { format: 'JSON Feed 1.1', ext: 'json', contentType: 'application/feed+json' },
+  ]
+
+  return {
+    feeds: collections.flatMap((collection) =>
+      formats.map(({ format, ext, contentType }) => ({
+        collection,
+        format,
+        url: `${baseUrl}/feed/${collection}/${ext}`,
+        contentType,
+      }))
+    ),
+  }
+})

package/layers/feeds/server/routes/feed/index.get.ts

@@ -0,0 +1,3 @@
+export default defineEventHandler((event) => {
+  return sendRedirect(event, '/feed/rss', 302)
+})

package/layers/feeds/server/routes/feed/json/all.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async (event) => {
+  const { items, config } = await buildFeed(event, undefined, { unlimited: true })
+  const content = toJSONFeed(items, config)
+  setFeedCacheHeaders(event, JSON.stringify(content))
+  setHeader(event, 'Content-Type', 'application/feed+json; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/json.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const { items, config } = await buildFeed(event)
+  const body = toJSONFeed(items, config)
+  const content = JSON.stringify(body)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'application/feed+json; charset=utf-8')
+  return body
+})

package/layers/feeds/server/routes/feed/rss/all.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async (event) => {
+  const { items, config } = await buildFeed(event, undefined, { unlimited: true })
+  const content = toRSS(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/rss.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async (event) => {
+  const { items, config } = await buildFeed(event)
+  const content = toRSS(items, config)
+  setFeedCacheHeaders(event, content)
+  setHeader(event, 'Content-Type', 'text/xml; charset=utf-8')
+  return content
+})

package/layers/feeds/server/routes/feed/style.xsl.get.ts

@@ -0,0 +1,206 @@
+export default defineEventHandler((event) => {
+  setHeader(event, 'Content-Type', 'text/xsl; charset=utf-8')
+  setHeader(event, 'Cache-Control', 'public, max-age=3600')
+
+  // Single stylesheet handles both RSS 2.0 and Atom 1.0.
+  // The root-level <xsl:apply-templates/> dispatches to whichever
+  // format-specific template matches the document's root element.
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:atom="http://www.w3.org/2005/Atom"
+  xmlns:dc="http://purl.org/dc/elements/1.1/">
+
+  <xsl:output method="html" encoding="UTF-8" indent="yes"/>
+
+  <xsl:template match="/">
+    <xsl:apply-templates/>
+  </xsl:template>
+
+  <!-- ─── RSS 2.0 ───────────────────────────────────────────────────────── -->
+
+  <xsl:template match="rss">
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>
+          <xsl:value-of select="channel/title"/>
+          <xsl:text> · RSS Feed</xsl:text>
+        </title>
+        <link rel="stylesheet" type="text/css" href="/feed/style.css"/>
+      </head>
+      <body>
+        <div class="feed-container">
+          <header class="feed-header">
+            <span class="feed-eyebrow">
+              <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path d="M2.5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3Z"/>
+                <path d="M4 8a6 6 0 0 1 6 6H8.5A4.5 4.5 0 0 0 4 9.5V8Z"/>
+                <path d="M4 5a9 9 0 0 1 9 9h-1.5A7.5 7.5 0 0 0 4 6.5V5Z"/>
+                <circle cx="3.5" cy="13.5" r="1.5"/>
+              </svg>
+              RSS
+            </span>
+            <h1 class="feed-title">
+              <a href="{channel/link}">
+                <xsl:value-of select="channel/title"/>
+              </a>
+            </h1>
+            <xsl:if test="channel/description">
+              <p class="feed-description">
+                <xsl:value-of select="channel/description"/>
+              </p>
+            </xsl:if>
+            <div class="feed-header-actions">
+              <div class="feed-meta">
+                <span>
+                  <xsl:value-of select="count(channel/item)"/>
+                  <xsl:text> items</xsl:text>
+                </span>
+                <a class="feed-meta-link" href="{channel/link}">Visit site &#x2192;</a>
+              </div>
+              <a class="feed-subscribe" id="feed-subscribe-btn" href="#">
+                <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path d="M2.5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3Z"/>
+                  <path d="M4 8a6 6 0 0 1 6 6H8.5A4.5 4.5 0 0 0 4 9.5V8Z"/>
+                  <path d="M4 5a9 9 0 0 1 9 9h-1.5A7.5 7.5 0 0 0 4 6.5V5Z"/>
+                  <circle cx="3.5" cy="13.5" r="1.5"/>
+                </svg>
+                Subscribe
+              </a>
+            </div>
+          </header>
+          <main>
+            <ul class="feed-items">
+              <xsl:for-each select="channel/item">
+                <li class="feed-item">
+                  <article>
+                    <h2 class="feed-item-title">
+                      <a href="{link}">
+                        <xsl:value-of select="title"/>
+                      </a>
+                    </h2>
+                    <div class="feed-item-meta">
+                      <xsl:if test="pubDate">
+                        <time><xsl:value-of select="pubDate"/></time>
+                      </xsl:if>
+                      <xsl:if test="dc:creator">
+                        <span class="feed-item-separator">&#xB7;</span>
+                        <span><xsl:value-of select="dc:creator"/></span>
+                      </xsl:if>
+                    </div>
+                    <xsl:if test="description">
+                      <p class="feed-item-description">
+                        <xsl:value-of select="description"/>
+                      </p>
+                    </xsl:if>
+                    <xsl:if test="category">
+                      <div class="feed-tags">
+                        <xsl:for-each select="category">
+                          <span class="feed-tag">
+                            <xsl:value-of select="."/>
+                          </span>
+                        </xsl:for-each>
+                      </div>
+                    </xsl:if>
+                  </article>
+                </li>
+              </xsl:for-each>
+            </ul>
+          </main>
+        </div>
+        <script>
+          <xsl:text>(function(){var a=document.getElementById('feed-subscribe-btn');if(a)a.href='feed:'+window.location.href;})();</xsl:text>
+        </script>
+      </body>
+    </html>
+  </xsl:template>
+
+  <!-- ─── Atom 1.0 ──────────────────────────────────────────────────────── -->
+
+  <xsl:template match="atom:feed">
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>
+          <xsl:value-of select="atom:title"/>
+          <xsl:text> · Atom Feed</xsl:text>
+        </title>
+        <link rel="stylesheet" type="text/css" href="/feed/style.css"/>
+      </head>
+      <body>
+        <div class="feed-container">
+          <header class="feed-header">
+            <span class="feed-eyebrow">
+              <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <circle cx="8" cy="8" r="2"/>
+                <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11z"/>
+                <path d="M8 4.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm0 1.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>
+              </svg>
+              Atom
+            </span>
+            <h1 class="feed-title">
+              <a href="{atom:link[not(@rel)]/@href}">
+                <xsl:value-of select="atom:title"/>
+              </a>
+            </h1>
+            <div class="feed-header-actions">
+              <div class="feed-meta">
+                <span>
+                  <xsl:value-of select="count(atom:entry)"/>
+                  <xsl:text> items</xsl:text>
+                </span>
+                <a class="feed-meta-link" href="{atom:link[not(@rel)]/@href}">Visit site &#x2192;</a>
+              </div>
+              <a class="feed-subscribe" id="feed-subscribe-btn" href="#">
+                <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path d="M2.5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3Z"/>
+                  <path d="M4 8a6 6 0 0 1 6 6H8.5A4.5 4.5 0 0 0 4 9.5V8Z"/>
+                  <path d="M4 5a9 9 0 0 1 9 9h-1.5A7.5 7.5 0 0 0 4 6.5V5Z"/>
+                  <circle cx="3.5" cy="13.5" r="1.5"/>
+                </svg>
+                Subscribe
+              </a>
+            </div>
+          </header>
+          <main>
+            <ul class="feed-items">
+              <xsl:for-each select="atom:entry">
+                <li class="feed-item">
+                  <article>
+                    <h2 class="feed-item-title">
+                      <a href="{atom:link/@href}">
+                        <xsl:value-of select="atom:title"/>
+                      </a>
+                    </h2>
+                    <div class="feed-item-meta">
+                      <xsl:if test="atom:updated">
+                        <time><xsl:value-of select="atom:updated"/></time>
+                      </xsl:if>
+                      <xsl:if test="atom:author/atom:name">
+                        <span class="feed-item-separator">&#xB7;</span>
+                        <span><xsl:value-of select="atom:author/atom:name"/></span>
+                      </xsl:if>
+                    </div>
+                    <xsl:if test="atom:summary">
+                      <p class="feed-item-description">
+                        <xsl:value-of select="atom:summary"/>
+                      </p>
+                    </xsl:if>
+                  </article>
+                </li>
+              </xsl:for-each>
+            </ul>
+          </main>
+        </div>
+        <script>
+          <xsl:text>(function(){var a=document.getElementById('feed-subscribe-btn');if(a)a.href='feed:'+window.location.href;})();</xsl:text>
+        </script>
+      </body>
+    </html>
+  </xsl:template>
+
+</xsl:stylesheet>`
+})

package/layers/feeds/server/utils/cache.ts

@@ -0,0 +1,8 @@
+import { createHash } from 'node:crypto'
+import type { H3Event } from 'h3'
+
+export function setFeedCacheHeaders(event: H3Event, content: string): void {
+  const etag = `"${createHash('md5').update(content).digest('hex')}"`
+  setHeader(event, 'ETag', etag)
+  setHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')
+}

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

@@ -0,0 +1,39 @@
+import { queryCollection } from '@nuxt/content/nitro'
+import type { H3Event } from 'h3'
+
+import type { FeedItem } from './types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyContent = Record<string, any>
+
+export async function getContentFeedItems(
+  event: H3Event,
+  collection: string = 'blog',
+  limit: number = 30
+): Promise<FeedItem[]> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const raw: AnyContent[] = await (queryCollection as any)(event, collection).all()
+
+  return raw
+    .filter((item) => !item.draft)
+    .sort(
+      (a, b) =>
+        new Date(b.date ?? b.createdAt ?? 0).getTime() -
+        new Date(a.date ?? a.createdAt ?? 0).getTime()
+    )
+    .slice(0, limit)
+    .map((item) => {
+      const firstAuthor = Array.isArray(item.authors)
+        ? item.authors[0]?.name
+        : (item.author?.name ?? (typeof item.author === 'string' ? item.author : undefined))
+      return {
+        title: item.title ?? item.stem ?? '',
+        description: item.description,
+        link: item.path ?? item._path ?? '',
+        id: item.path ?? item._path ?? '',
+        date: new Date(item.date ?? item.createdAt ?? Date.now()),
+        author: firstAuthor ?? undefined,
+        tags: Array.isArray(item.tags) ? item.tags : undefined,
+      }
+    })
+}

package/layers/feeds/server/utils/feed-service.ts

@@ -0,0 +1,46 @@
+import type { SiteConfig } from '#layers/core/app/types/site'
+import type { H3Event } from 'h3'
+
+import type { FeedConfig, FeedItem } from './types'
+
+export async function buildFeed(
+  event: H3Event,
+  collection?: string,
+  options?: { unlimited?: boolean }
+): Promise<{ items: FeedItem[]; config: FeedConfig }> {
+  const appConfig = useAppConfig()
+  const site: SiteConfig = (appConfig as { site?: SiteConfig }).site ?? {}
+  const feedConfig =
+    (appConfig as { feedsLayer?: { feed?: { limit?: number; defaultCollection?: string } } })
+      .feedsLayer?.feed ?? {}
+  const limit: number = options?.unlimited ? Infinity : (feedConfig.limit ?? 30)
+  const defaultCollection = feedConfig.defaultCollection ?? 'blog'
+
+  const requestUrl = getRequestURL(event)
+  const origin = `${requestUrl.protocol}//${requestUrl.host}`
+  const siteUrl = (site.url as string | undefined)?.replace(/\/$/, '') || origin
+
+  const authorName = site.author?.name ?? ''
+  const resolvedCollection = collection ?? defaultCollection
+  const collectionLabel = collection
+    ? ` — ${collection.charAt(0).toUpperCase() + collection.slice(1)}`
+    : ''
+
+  const config: FeedConfig = {
+    title: `${site.title ?? 'My Site'}${collectionLabel}`,
+    description: site.description ?? '',
+    siteUrl,
+    author: authorName
+      ? { name: authorName, email: site.author?.email, link: site.author?.link }
+      : undefined,
+    image: site.image || undefined,
+    favicon: site.favicon ?? '/favicon.ico',
+    copyright:
+      site.copyright ||
+      (authorName ? `Copyright ${new Date().getFullYear()} ${authorName}` : undefined),
+  }
+
+  const items = await getContentFeedItems(event, resolvedCollection, limit)
+
+  return { items, config }
+}

package/layers/feeds/server/utils/formats/atom.ts

@@ -0,0 +1,40 @@
+import type { FeedConfig, FeedItem } from '../types'
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
+export function toAtom(items: FeedItem[], config: FeedConfig): string {
+  const updated = (items[0]?.date ?? new Date()).toISOString()
+
+  const entries = items
+    .map(
+      (item) => `
+  <entry>
+    <title>${escapeXml(item.title)}</title>
+    <id>${escapeXml(`${config.siteUrl}${item.id}`)}</id>
+    <link href="${escapeXml(`${config.siteUrl}${item.link}`)}" />
+    <updated>${item.date.toISOString()}</updated>
+    ${item.description ? `<summary>${escapeXml(item.description)}</summary>` : ''}
+    ${item.author ? `<author><name>${escapeXml(item.author)}</name></author>` : ''}
+  </entry>`
+    )
+    .join('')
+
+  return `<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet type="text/xsl" href="/feed/style.xsl"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>${escapeXml(config.title)}</title>
+  <id>${escapeXml(config.siteUrl)}</id>
+  <link href="${escapeXml(config.siteUrl)}" />
+  <link rel="self" href="${escapeXml(`${config.siteUrl}/feed/atom`)}" />
+  <updated>${updated}</updated>
+  ${config.author ? `<author><name>${escapeXml(config.author.name)}</name></author>` : ''}
+${entries}
+</feed>`
+}

package/layers/feeds/server/utils/formats/json.ts

@@ -0,0 +1,21 @@
+import type { FeedConfig, FeedItem } from '../types'
+
+export function toJSONFeed(items: FeedItem[], config: FeedConfig): object {
+  return {
+    version: 'https://jsonfeed.org/version/1.1',
+    title: config.title,
+    description: config.description,
+    home_page_url: config.siteUrl,
+    feed_url: `${config.siteUrl}/feed/json`,
+    authors: config.author ? [{ name: config.author.name, url: config.author.link }] : undefined,
+    items: items.map((item) => ({
+      id: `${config.siteUrl}${item.id}`,
+      url: `${config.siteUrl}${item.link}`,
+      title: item.title,
+      content_text: item.description,
+      date_published: item.date.toISOString(),
+      authors: item.author ? [{ name: item.author }] : undefined,
+      tags: item.tags,
+    })),
+  }
+}

package/layers/feeds/server/utils/formats/rss.ts

@@ -0,0 +1,42 @@
+import { Feed } from 'feed'
+
+import type { FeedConfig, FeedItem } from '../types'
+
+export function toRSS(items: FeedItem[], config: FeedConfig): string {
+  const author = config.author
+    ? {
+        name: config.author.name,
+        ...(config.author.email ? { email: config.author.email } : {}),
+        ...(config.author.link ? { link: config.author.link } : {}),
+      }
+    : undefined
+
+  const feed = new Feed({
+    title: config.title,
+    description: config.description,
+    id: config.siteUrl,
+    link: config.siteUrl,
+    ...(config.image ? { image: config.image } : {}),
+    ...(config.favicon ? { favicon: config.favicon } : {}),
+    copyright: config.copyright ?? '',
+    updated: items[0]?.date ?? new Date(),
+    ...(author ? { author } : {}),
+  })
+
+  for (const item of items) {
+    feed.addItem({
+      title: item.title,
+      id: `${config.siteUrl}${item.id}`,
+      link: `${config.siteUrl}${item.link}`,
+      ...(item.description ? { description: item.description } : {}),
+      date: item.date,
+      ...(item.author ? { author: [{ name: item.author }] } : {}),
+    })
+  }
+
+  const raw = feed.rss2()
+  return raw.replace(
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<?xml version="1.0" encoding="UTF-8"?>\n<?xml-stylesheet type="text/xsl" href="/feed/style.xsl"?>'
+  )
+}

package/layers/feeds/server/utils/types.ts

@@ -0,0 +1,26 @@
+export type FeedItem = {
+  title: string
+  description?: string | undefined
+  link: string
+  id: string
+  date: Date
+  author?: string | undefined
+  tags?: string[] | undefined
+}
+
+export type FeedConfig = {
+  title: string
+  description: string
+  siteUrl: string
+  author?:
+    | {
+        name: string
+        email?: string | undefined
+        link?: string | undefined
+      }
+    | undefined
+  image?: string | undefined
+  favicon?: string | undefined
+  copyright?: string | undefined
+  limit?: number | undefined
+}

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

@@ -0,0 +1,34 @@
+import { z } from 'zod'
+import { sendContactEmail } from '#layers/mailer/server/utils/email'
+import { mailerLayerHooks } from '#layers/mailer/server/utils/hooks'
+
+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 default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const result = contactSchema.safeParse(body)
+
+  if (!result.success) {
+    throw createError({ statusCode: 400, data: result.error.flatten().fieldErrors })
+  }
+
+  const data = result.data
+  await mailerLayerHooks.callHook('contact:submitted', data)
+
+  const emailResult = await sendContactEmail(data)
+
+  if (emailResult.success) {
+    await mailerLayerHooks.callHook('contact:sent', { ...data, messageId: emailResult.messageId })
+    return { success: true }
+  }
+
+  await mailerLayerHooks.callHook('contact:failed', { ...data, error: emailResult.error })
+  throw createError({
+    statusCode: 500,
+    statusMessage: 'Failed to send message. Please try again later.',
+  })
+})

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

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

package/layers/mailer/server/types.d.ts

@@ -0,0 +1,11 @@
+import 'nitropack'
+
+declare module 'nitropack' {
+  interface NitroRuntimeConfig {
+    mailerLayer?: {
+      resendApiKey: string
+      emailFrom: string
+      emailTo: string
+    }
+  }
+}

package/layers/mailer/server/utils/config.ts

@@ -0,0 +1,9 @@
+type MailerLayerConfig = {
+  resendApiKey: string
+  emailFrom: string
+  emailTo: string
+}
+
+export function useMailerConfig(): MailerLayerConfig {
+  return (useRuntimeConfig() as unknown as { mailerLayer: MailerLayerConfig }).mailerLayer
+}

package/layers/mailer/server/utils/email.ts

@@ -0,0 +1,28 @@
+import { Resend } from 'resend'
+
+export type ContactEmailData = {
+  name: string
+  email: string
+  message: string
+}
+
+export async function sendContactEmail(data: ContactEmailData) {
+  const { resendApiKey, emailFrom, emailTo } = useMailerConfig()
+
+  if (!resendApiKey) {
+    console.warn('[mailer] NUXT_MAILER_LAYER_RESEND_API_KEY not set — email skipped')
+    return { success: false as const, error: 'No API key configured' }
+  }
+
+  const resend = new Resend(resendApiKey)
+  const { data: result, error } = await resend.emails.send({
+    from: emailFrom ?? '',
+    to: emailTo ?? '',
+    replyTo: data.email,
+    subject: `Contact form submission from ${data.name}`,
+    text: `Name: ${data.name}\nEmail: ${data.email}\n\nMessage:\n${data.message}`,
+  })
+
+  if (error) return { success: false as const, error }
+  return { success: true as const, messageId: result?.id ?? '' }
+}

package/layers/mailer/server/utils/hooks.ts

@@ -0,0 +1,23 @@
+import { createHooks } from 'hookable'
+
+export type ContactSubmittedPayload = {
+  name: string
+  email: string
+  message: string
+}
+
+export type ContactSentPayload = {
+  messageId: string
+} & ContactSubmittedPayload
+
+export type ContactFailedPayload = {
+  error: unknown
+} & ContactSubmittedPayload
+
+export type MailerLayerHooks = {
+  'contact:submitted': (payload: ContactSubmittedPayload) => void
+  'contact:sent': (payload: ContactSentPayload) => void
+  'contact:failed': (payload: ContactFailedPayload) => void
+}
+
+export const mailerLayerHooks = createHooks<MailerLayerHooks>()

package/layers/routing/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@layers/routing",
+  "name": "kmcom-layer-routing",
   "version": "0.1.0",
   "type": "module",
   "main": "./nuxt.config.ts",

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

@@ -0,0 +1,156 @@
+import twColors from 'tailwindcss/colors'
+
+type DefaultColors = typeof twColors
+
+/**
+ * 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.
+ */
+
+const ACCENTS = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+] as const
+
+type AccentName = (typeof ACCENTS)[number]
+
+const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+/**
+ * Coordinated three-colour palettes. Each accent colour selects a
+ * secondary and info (accent) colour that sit in the same temperature
+ * zone and feel cohesive together.
+ *
+ *   primary  = the user-selected accent
+ *   secondary = a related colour in the same hue family
+ *   info      = a third complementary accent
+ */
+const ACCENT_PALETTES: Record<AccentName, { secondary: AccentName; info: AccentName }> = {
+  red: { secondary: 'rose', info: 'orange' },
+  orange: { secondary: 'amber', info: 'red' },
+  amber: { secondary: 'orange', info: 'yellow' },
+  yellow: { secondary: 'lime', info: 'amber' },
+  lime: { secondary: 'green', info: 'yellow' },
+  green: { secondary: 'teal', info: 'emerald' },
+  emerald: { secondary: 'green', info: 'teal' },
+  teal: { secondary: 'cyan', info: 'emerald' },
+  cyan: { secondary: 'sky', info: 'teal' },
+  sky: { secondary: 'blue', info: 'cyan' },
+  blue: { secondary: 'indigo', info: 'sky' },
+  indigo: { secondary: 'violet', info: 'blue' },
+  violet: { secondary: 'purple', info: 'indigo' },
+  purple: { secondary: 'fuchsia', info: 'violet' },
+  fuchsia: { secondary: 'pink', info: 'purple' },
+  pink: { secondary: 'rose', info: 'fuchsia' },
+  rose: { secondary: 'pink', info: 'red' },
+}
+
+function getShades(name: AccentName): Record<number, string> | null {
+  const p = (twColors as DefaultColors)[name]
+  return !p || typeof p === 'string' ? null : (p as Record<number, string>)
+}
+
+// Pre-compute all CSS rules at startup (once)
+function buildAccentCSS(): string {
+  let css = ''
+  for (const accent of ACCENTS) {
+    const primary = getShades(accent)
+    if (!primary) continue
+
+    const { secondary: secName, info: infoName } = ACCENT_PALETTES[accent]
+    const secondary = getShades(secName)
+    const info = getShades(infoName)
+
+    let vars = ''
+    for (const s of SHADES) {
+      vars += `--ui-color-primary-${s}:${primary[s]};`
+    }
+    if (secondary) {
+      for (const s of SHADES) {
+        vars += `--ui-color-secondary-${s}:${secondary[s]};`
+      }
+    }
+    if (info) {
+      for (const s of SHADES) {
+        vars += `--ui-color-info-${s}:${info[s]};`
+      }
+    }
+
+    css += `html[data-theme-colour="${accent}"]{${vars}}`
+  }
+  return css
+}
+
+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) => {
+    html.head.unshift(
+      `<style id="theme-accent-css">${accentCSS}</style>` + `<script>${initScript}</script>`
+    )
+  })
+})

package/layers/visual/app/types/media.ts

@@ -150,8 +150,8 @@ export type PictureProps = {
   fetchpriority?: 'high' | 'low' | 'auto'
 
   // Nuxt Image specific
-  /** Image provider - defaults to 'ipx' (Nuxt's built-in image optimizer) */
-  provider?: 'ipx'
+  /** Image provider override. Defaults to the app's configured Nuxt Image provider. */
+  provider?: string
   /** Nuxt Image preset name */
   preset?: string
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -23,6 +23,7 @@
     "./layers/forms": "./layers/forms/nuxt.config.ts",
     "./layers/theme": "./layers/theme/nuxt.config.ts",
     "./layers/content": "./layers/content/nuxt.config.ts",
+    "./layers/feeds": "./layers/feeds/nuxt.config.ts",
     "./layers/routing": "./layers/routing/nuxt.config.ts"
   },
   "files": [
@@ -32,6 +33,7 @@
     "layers/*/tsconfig.json",
     "layers/*/tailwind.config.*",
     "layers/*/app/**",
+    "layers/*/server/**",
     "docs/"
   ],
   "repository": {