kmcom-nuxt-layers 2.2.11 → 2.2.12

package/layers/feeds/app/components/Feeds/Index.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+  import contentManifest from '#content/manifest'
+
+  import { createFeedCatalog } from '../../utils/feed-catalog'
+
+  const appConfig = useAppConfig()
+
+  const catalog = computed(() =>
+    createFeedCatalog({
+      site: appConfig.site,
+      feed: appConfig.feedsLayer?.feed,
+      manifest: contentManifest,
+    })
+  )
+</script>
+
+<template>
+  <div
+    class="relative overflow-hidden rounded-4xl border border-amber-200/70 bg-[linear-gradient(180deg,rgba(255,251,244,0.96),rgba(243,236,223,0.95))] px-5 py-5 shadow-[0_30px_100px_rgba(15,23,42,0.12)] dark:border-slate-800/80 dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.96),rgba(3,7,18,0.98))] sm:px-6 sm:py-6"
+  >
+    <div class="pointer-events-none absolute inset-0">
+      <div
+        class="absolute -right-20 top-0 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
+      />
+      <div
+        class="absolute -left-20 bottom-0 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
+      />
+      <div
+        class="absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-orange-400/35 to-transparent"
+      />
+    </div>
+
+    <div class="relative space-y-8">
+      <div class="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(18rem,0.85fr)]">
+        <div class="space-y-6">
+          <div
+            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-amber-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
+          >
+            <UIcon name="i-lucide-rss" class="text-sm" />
+            Feeds layer
+          </div>
+
+          <div class="space-y-3">
+            <h1
+              class="max-w-3xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl md:text-6xl dark:text-slate-50"
+            >
+              Feed catalog for {{ catalog.site.title }}
+            </h1>
+            <p class="max-w-2xl text-base leading-7 text-slate-700 sm:text-lg dark:text-slate-300">
+              Configured in <code class="font-mono text-[0.9em]">app.config.ts</code>, validated
+              against <code class="font-mono text-[0.9em]">content.config.ts</code>, and rendered as
+              a human-readable index for readers and site owners.
+            </p>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-3">
+            <div
+              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+            >
+              <p
+                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              >
+                Default
+              </p>
+              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+                {{ catalog.feed.defaultCollection }}
+              </p>
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                Shorthand routes point here.
+              </p>
+            </div>
+
+            <div
+              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+            >
+              <p
+                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              >
+                Exposed
+              </p>
+              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+                {{ catalog.collectionGroups.length }} collections
+              </p>
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                Published in the feed catalog.
+              </p>
+            </div>
+
+            <div
+              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+            >
+              <p
+                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              >
+                Limit
+              </p>
+              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+                {{ catalog.feed.limit }} items
+              </p>
+              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                Applied to each feed response.
+              </p>
+            </div>
+          </div>
+
+          <div
+            v-if="catalog.site.url || catalog.site.description"
+            class="flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+          >
+            <span
+              class="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+            >
+              Site
+            </span>
+            <span v-if="catalog.site.description" class="text-slate-700 dark:text-slate-300">
+              {{ catalog.site.description }}
+            </span>
+            <code
+              v-if="catalog.site.url"
+              class="rounded-full bg-slate-100 px-2 py-1 font-mono text-[0.72rem] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+            >
+              {{ catalog.site.url }}
+            </code>
+          </div>
+        </div>
+
+        <aside
+          class="rounded-[1.5rem] border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <p
+              class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+            >
+              Global routes
+            </p>
+            <UBadge color="neutral" variant="subtle" size="xs">
+              {{ catalog.siteRoutes.length }} links
+            </UBadge>
+          </div>
+
+          <div class="mt-4 space-y-3">
+            <FeedsRouteCard v-for="route in catalog.siteRoutes" :key="route.path" :route />
+          </div>
+        </aside>
+      </div>
+
+      <UAlert
+        v-if="catalog.feed.missingCollections.length"
+        color="warning"
+        variant="soft"
+        icon="i-lucide-triangle-alert"
+        title="Feed config references collections that content.config.ts does not define"
+        :description="`Missing collections: ${catalog.feed.missingCollections.join(', ')}. Add them to content.config.ts or remove them from feedsLayer.feed.collections.`"
+      />
+
+      <div class="space-y-4">
+        <div class="flex flex-wrap items-end justify-between gap-4">
+          <div>
+            <p
+              class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+            >
+              Collection routes
+            </p>
+            <h2
+              class="mt-2 text-2xl font-semibold tracking-tight text-slate-950 dark:text-slate-100"
+            >
+              Each exposed collection gets RSS, Atom, and JSON.
+            </h2>
+          </div>
+          <p class="max-w-lg text-sm text-slate-600 dark:text-slate-400">
+            Add or remove collections in <code class="font-mono text-[0.9em]">app.config.ts</code>
+            and the catalog updates automatically.
+          </p>
+        </div>
+
+        <div v-if="catalog.collectionGroups.length" class="space-y-4">
+          <UCard
+            v-for="group in catalog.collectionGroups"
+            :key="group.collection"
+            :ui="{ body: 'p-0' }"
+            class="overflow-hidden border-slate-200/80 bg-white/80 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-950/45"
+          >
+            <div
+              class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-200/80 px-5 py-4 dark:border-slate-800"
+            >
+              <div>
+                <p
+                  class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+                >
+                  Collection
+                </p>
+                <h3 class="mt-2 text-xl font-semibold text-slate-950 dark:text-slate-100">
+                  {{ group.label }}
+                </h3>
+                <p class="mt-1 font-mono text-sm text-slate-500 dark:text-slate-400">
+                  {{ group.collection }}
+                </p>
+              </div>
+              <UBadge color="neutral" variant="subtle" size="sm">
+                {{ group.routes.length }} formats
+              </UBadge>
+            </div>
+
+            <div class="grid gap-3 p-5 sm:grid-cols-3">
+              <FeedsRouteCard v-for="route in group.routes" :key="route.path" :route compact />
+            </div>
+          </UCard>
+        </div>
+
+        <UCard
+          v-else
+          :ui="{ body: 'p-0' }"
+          class="border-dashed border-slate-300 bg-white/70 shadow-none dark:border-slate-700 dark:bg-slate-950/40"
+        >
+          <div class="space-y-2 p-5">
+            <p class="text-sm font-medium text-slate-950 dark:text-slate-100">
+              No collection feeds are currently exposed.
+            </p>
+            <p class="text-sm text-slate-600 dark:text-slate-400">
+              Add page collections to
+              <code class="font-mono text-[0.9em]">feedsLayer.feed.collections</code>
+              in <code class="font-mono text-[0.9em]">app.config.ts</code>.
+            </p>
+          </div>
+        </UCard>
+      </div>
+    </div>
+  </div>
+</template>

package/layers/feeds/app/components/Feeds/RouteCard.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+  import { type FeedRoute } from '../../utils/feed-catalog'
+
+  const { route, compact = false } = defineProps<{
+    route: FeedRoute
+    compact?: boolean
+  }>()
+
+  const routeThemes: Record<
+    'index' | 'discovery' | 'rss' | 'atom' | 'json',
+    {
+      strip: string
+      dot: string
+    }
+  > = {
+    index: {
+      strip: 'bg-slate-400',
+      dot: 'bg-slate-500',
+    },
+    discovery: {
+      strip: 'bg-sky-400',
+      dot: 'bg-sky-500',
+    },
+    rss: {
+      strip: 'bg-orange-400',
+      dot: 'bg-orange-500',
+    },
+    atom: {
+      strip: 'bg-violet-400',
+      dot: 'bg-violet-500',
+    },
+    json: {
+      strip: 'bg-amber-400',
+      dot: 'bg-amber-500',
+    },
+  }
+
+  const routeTone = computed(
+    () => routeThemes[route.kind === 'format' ? (route.format ?? 'index') : route.kind]
+  )
+
+  function getRouteDescription() {
+    if (route.kind === 'index') {
+      return 'Human landing page for the feed catalog.'
+    }
+
+    if (route.kind === 'discovery') {
+      return 'JSON manifest of every exposed collection feed.'
+    }
+
+    return route.contentType ?? 'Reader-friendly syndicated feed.'
+  }
+</script>
+
+<template>
+  <UCard
+    :to="route.path"
+    :ui="{ body: 'p-0' }"
+    class="group relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700"
+  >
+    <div class="absolute inset-y-0 left-0 w-1" :class="routeTone.strip" />
+    <div :class="compact ? 'flex items-center gap-3 p-3' : 'flex items-center gap-3 p-4'">
+      <span class="h-2.5 w-2.5 rounded-full" :class="routeTone.dot" />
+      <div class="min-w-0 flex-1">
+        <div class="flex items-start justify-between gap-3">
+          <p class="font-medium text-slate-950 dark:text-slate-100">
+            {{ route.label }}
+          </p>
+          <code
+            class="shrink-0 rounded-full bg-slate-100 px-2 py-1 font-mono text-[0.72rem] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+          >
+            {{ route.path }}
+          </code>
+        </div>
+        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+          {{ getRouteDescription() }}
+        </p>
+      </div>
+    </div>
+  </UCard>
+</template>

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

@@ -1,71 +1,49 @@
+import contentManifest from '#content/manifest'
+
+import { createFeedCatalog } from '../utils/feed-catalog'
+
 export default defineNuxtPlugin({
   name: 'feeds:feed-head',
   setup() {
     const appConfig = useAppConfig()
     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 catalog = createFeedCatalog({
+      site: site,
+      feed: appConfig.feedsLayer?.feed,
+      manifest: contentManifest,
+    })
 
     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
+      const currentCollection = catalog.collectionGroups.find(
+        (group) => group.collection === segment
+      )
 
       // Always present: main site feeds via the shorthand routes
-      const mainLinks = [
-        {
-          rel: 'alternate',
-          type: 'application/rss+xml',
-          title: `${siteTitle || 'Site'} (RSS)`,
-          href: '/feed/rss',
-        },
-        {
+      const mainLinks = catalog.siteRoutes
+        .filter((route) => route.kind === 'format')
+        .map((route) => ({
           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',
-        },
-      ]
+          type: route.contentType ?? 'application/octet-stream',
+          title: `${siteTitle || 'Site'} (${route.label})`,
+          href: route.path,
+        }))
 
       // 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`,
-            },
-            {
+      const collectionLinks =
+        currentCollection && currentCollection.collection !== catalog.feed.defaultCollection
+          ? currentCollection.routes.map((route) => ({
               rel: 'alternate',
-              type: 'application/feed+json',
-              title: `${label} (JSON Feed)`,
-              href: `/feed/${currentCollection}/json`,
-            },
-          ]
-        : []
+              type: route.contentType ?? 'application/octet-stream',
+              title: `${currentCollection.label} (${route.label})`,
+              href: route.path,
+            }))
+          : []
 
       return { link: [...mainLinks, ...collectionLinks] }
     })

package/layers/feeds/app/utils/feed-catalog.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+
+import { createFeedCatalog } from './feed-catalog'
+
+describe('createFeedCatalog', () => {
+  it('builds the feed manifest from app config and content collections', () => {
+    const catalog = createFeedCatalog({
+      site: {
+        title: 'Nuxt Layers Playground',
+        description: 'Demo and development playground for nuxt-layers.',
+        url: 'https://nuxtlayers.netlify.app/',
+      },
+      feed: {
+        collections: ['blog', 'portfolio', 'gallery'],
+        defaultCollection: 'blog',
+        limit: 30,
+      },
+      manifest: {
+        content: { type: 'page' },
+        blog: { type: 'page' },
+        portfolio: { type: 'page' },
+        gallery: { type: 'page' },
+        info: { type: 'data' },
+      },
+    })
+
+    expect(catalog.site.title).toBe('Nuxt Layers Playground')
+    expect(catalog.feed.defaultCollection).toBe('blog')
+    expect(catalog.feed.limit).toBe(30)
+    expect(catalog.feed.collections).toEqual(['blog', 'portfolio', 'gallery'])
+    expect(catalog.feed.availableCollections).toEqual(['content', 'blog', 'portfolio', 'gallery'])
+    expect(catalog.feed.missingCollections).toEqual([])
+    expect(catalog.siteRoutes.map((route) => route.path)).toEqual([
+      '/feed',
+      '/feed/discovery',
+      '/feed/rss',
+      '/feed/atom',
+      '/feed/json',
+    ])
+    expect(catalog.collectionGroups).toHaveLength(3)
+    expect(catalog.collectionGroups[1]).toMatchObject({
+      collection: 'portfolio',
+      label: 'Portfolio',
+    })
+    expect(catalog.collectionGroups[1]?.routes.map((route) => route.path)).toEqual([
+      '/feed/portfolio/rss',
+      '/feed/portfolio/atom',
+      '/feed/portfolio/json',
+    ])
+  })
+
+  it('surfaces configured collections that do not exist in content', () => {
+    const catalog = createFeedCatalog({
+      feed: {
+        collections: ['blog', 'missing'],
+        defaultCollection: 'missing',
+      },
+      manifest: {
+        blog: { type: 'page' },
+        gallery: { type: 'page' },
+      },
+    })
+
+    expect(catalog.feed.missingCollections).toEqual(['missing'])
+    expect(catalog.collectionGroups).toHaveLength(1)
+    expect(catalog.collectionGroups[0]).toMatchObject({
+      collection: 'blog',
+      label: 'Blog',
+    })
+  })
+})

package/layers/feeds/app/utils/feed-catalog.ts

@@ -0,0 +1,179 @@
+export type FeedFormatKey = 'rss' | 'atom' | 'json'
+
+export type FeedManifestEntry = {
+  type: string
+  [key: string]: unknown
+}
+
+export type FeedManifest = Record<string, FeedManifestEntry | undefined>
+
+export type FeedCatalogSiteInput = {
+  title?: string
+  description?: string
+  url?: string
+  author?: {
+    name?: string
+  }
+}
+
+export type FeedCatalogInput = {
+  site?: FeedCatalogSiteInput
+  feed?: {
+    collections?: readonly string[]
+    defaultCollection?: string
+    limit?: number
+  }
+  manifest?: FeedManifest
+}
+
+export type FeedRoute = {
+  kind: 'index' | 'discovery' | 'format'
+  label: string
+  path: string
+  format?: FeedFormatKey
+  contentType?: string
+}
+
+export type FeedCollectionGroup = {
+  collection: string
+  label: string
+  routes: FeedRoute[]
+}
+
+export type FeedCatalog = {
+  site: {
+    title: string
+    description: string
+    url: string
+    author?: {
+      name: string
+    }
+  }
+  feed: {
+    collections: string[]
+    defaultCollection: string
+    limit: number
+    availableCollections: string[]
+    missingCollections: string[]
+  }
+  siteRoutes: FeedRoute[]
+  collectionGroups: FeedCollectionGroup[]
+}
+
+type FeedState = FeedCatalog['feed']
+
+const FEED_FORMATS: Array<{ key: FeedFormatKey; label: string; contentType: string }> = [
+  { key: 'rss', label: 'RSS 2.0', contentType: 'application/rss+xml' },
+  { key: 'atom', label: 'Atom 1.0', contentType: 'application/atom+xml' },
+  { key: 'json', label: 'JSON Feed 1.1', contentType: 'application/feed+json' },
+]
+
+function unique(values: readonly string[]): string[] {
+  return [...new Set(values)]
+}
+
+export function formatFeedCollectionName(collection: string): string {
+  return collection
+    .replace(/[-_]+/g, ' ')
+    .split(' ')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+function normalizeSiteUrl(url?: string): string {
+  return url?.replace(/\/$/, '') ?? ''
+}
+
+function resolveAvailableCollections(manifest: FeedManifest | undefined): string[] {
+  if (!manifest) {
+    return []
+  }
+
+  return Object.entries(manifest)
+    .filter(([, collection]) => collection?.type === 'page')
+    .map(([name]) => name)
+}
+
+function resolveFeedState(
+  feed: FeedCatalogInput['feed'],
+  defaultCollection: string,
+  availableCollections: string[]
+): FeedState {
+  const collections = unique(feed?.collections ?? [defaultCollection])
+  const missingCollections = unique([defaultCollection, ...collections]).filter(
+    (collection) => !availableCollections.includes(collection)
+  )
+
+  return {
+    collections,
+    defaultCollection,
+    limit: feed?.limit ?? 30,
+    availableCollections,
+    missingCollections,
+  }
+}
+
+function resolveSiteRoutes(): FeedRoute[] {
+  return [
+    { kind: 'index', label: 'Feed index', path: '/feed' },
+    { kind: 'discovery', label: 'Discovery index', path: '/feed/discovery' },
+    ...FEED_FORMATS.map(
+      (format) =>
+        ({
+          kind: 'format',
+          label: format.label,
+          path: `/feed/${format.key}`,
+          format: format.key,
+          contentType: format.contentType,
+        }) satisfies FeedRoute
+    ),
+  ]
+}
+
+function resolveCollectionGroups(
+  collections: string[],
+  availableCollections: string[]
+): FeedCollectionGroup[] {
+  return collections
+    .filter((collection) => availableCollections.includes(collection))
+    .map((collection) => ({
+      collection,
+      label: formatFeedCollectionName(collection),
+      routes: FEED_FORMATS.map(
+        (format) =>
+          ({
+            kind: 'format',
+            label: format.label,
+            path: `/feed/${collection}/${format.key}`,
+            format: format.key,
+            contentType: format.contentType,
+          }) satisfies FeedRoute
+      ),
+    }))
+}
+
+export function createFeedCatalog(input: FeedCatalogInput = {}): FeedCatalog {
+  const site = input.site ?? {}
+  const defaultCollection = input.feed?.defaultCollection ?? 'blog'
+  const availableCollections = resolveAvailableCollections(input.manifest)
+  const feed = resolveFeedState(input.feed, defaultCollection, availableCollections)
+
+  return {
+    site: {
+      title: site.title ?? 'Site',
+      description: site.description ?? '',
+      url: normalizeSiteUrl(site.url),
+      ...(site.author?.name
+        ? {
+            author: {
+              name: site.author.name,
+            },
+          }
+        : {}),
+    },
+    feed,
+    siteRoutes: resolveSiteRoutes(),
+    collectionGroups: resolveCollectionGroups(feed.collections, availableCollections),
+  }
+}

package/layers/feeds/package.json

@@ -17,6 +17,7 @@
     "feed": "catalog:"
   },
   "devDependencies": {
+    "@nuxt/content": "catalog:",
     "nuxt": "catalog:",
     "vue": "catalog:conflicts_conflicts_vue_latest_h3_5_35",
     "vue-router": "catalog:"