@nuasite/cms 0.1.0

package/src/media/contember.ts

@@ -0,0 +1,84 @@
+import type { MediaListResult, MediaStorageAdapter, MediaUploadResult } from './types'
+
+export interface ContemberStorageOptions {
+	/** Base URL of the worker API, e.g. 'https://api.example.com' */
+	apiBaseUrl: string
+	/** Project slug used in the API path */
+	projectSlug: string
+	/** Session token for authentication (NUA_SITE_SESSION_TOKEN cookie value) */
+	sessionToken?: string
+}
+
+/**
+ * Media storage adapter that proxies to the Contember worker's CMS media endpoints.
+ * Uses the existing /cms/:projectSlug/media/* API backed by R2 storage + Contember database.
+ */
+export function createContemberStorageAdapter(options: ContemberStorageOptions): MediaStorageAdapter {
+	const { apiBaseUrl, projectSlug, sessionToken } = options
+	const base = `${apiBaseUrl.replace(/\/$/, '')}/cms/${projectSlug}/media`
+
+	function headers(): Record<string, string> {
+		const h: Record<string, string> = {}
+		if (sessionToken) {
+			h.Cookie = `NUA_SITE_SESSION_TOKEN=${sessionToken}`
+		}
+		return h
+	}
+
+	return {
+		async list(opts) {
+			const params = new URLSearchParams()
+			if (opts?.limit) params.set('limit', String(opts.limit))
+			if (opts?.cursor) params.set('cursor', opts.cursor)
+
+			const url = `${base}/list${params.toString() ? `?${params}` : ''}`
+			const res = await fetch(url, {
+				method: 'GET',
+				headers: headers(),
+				credentials: 'include',
+			})
+
+			if (!res.ok) {
+				throw new Error(`Failed to list media (${res.status}): ${await res.text()}`)
+			}
+
+			return (await res.json()) as MediaListResult
+		},
+
+		async upload(file, filename, contentType) {
+			// Build a FormData with the file buffer
+			const blob = new Blob([new Uint8Array(file)], { type: contentType })
+			const formData = new FormData()
+			formData.append('file', blob, filename)
+
+			const res = await fetch(`${base}/upload`, {
+				method: 'POST',
+				headers: headers(),
+				body: formData,
+				credentials: 'include',
+			})
+
+			if (!res.ok) {
+				const text = await res.text().catch(() => '')
+				return { success: false, error: `Upload failed (${res.status}): ${text}` }
+			}
+
+			return (await res.json()) as MediaUploadResult
+		},
+
+		async delete(id) {
+			const res = await fetch(`${base}/${encodeURIComponent(id)}`, {
+				method: 'DELETE',
+				headers: headers(),
+				credentials: 'include',
+			})
+
+			if (!res.ok) {
+				const text = await res.text().catch(() => '')
+				return { success: false, error: `Delete failed (${res.status}): ${text}` }
+			}
+
+			return { success: true }
+		},
+	}
+}

package/src/media/local.ts

@@ -0,0 +1,114 @@
+import { randomUUID } from 'node:crypto'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import type { MediaListResult, MediaStorageAdapter, MediaUploadResult } from './types'
+
+export interface LocalStorageOptions {
+	/** Directory to store media files (relative to project root or absolute). Default: 'public/uploads' */
+	dir?: string
+	/** URL prefix for serving files. Default: '/uploads' */
+	urlPrefix?: string
+}
+
+export function createLocalStorageAdapter(options: LocalStorageOptions = {}): MediaStorageAdapter {
+	const dir = path.resolve(options.dir ?? 'public/uploads')
+	const urlPrefix = (options.urlPrefix ?? '/uploads').replace(/\/$/, '')
+
+	return {
+		staticFiles: { urlPrefix, dir },
+
+		async list(opts) {
+			const limit = opts?.limit ?? 50
+			const offset = opts?.cursor ? parseInt(opts.cursor, 10) : 0
+
+			await fs.mkdir(dir, { recursive: true })
+
+			const entries = await fs.readdir(dir, { withFileTypes: true })
+			const files = entries.filter((e) => e.isFile() && !e.name.startsWith('.'))
+
+			// Get stats for sorting by mtime desc
+			const withStats = await Promise.all(
+				files.map(async (f) => {
+					const filePath = path.join(dir, f.name)
+					const stat = await fs.stat(filePath)
+					return { name: f.name, stat }
+				}),
+			)
+			withStats.sort((a, b) => b.stat.mtimeMs - a.stat.mtimeMs)
+
+			const slice = withStats.slice(offset, offset + limit)
+			const hasMore = offset + limit < withStats.length
+
+			const items = slice.map((f) => {
+				const ext = path.extname(f.name).toLowerCase()
+				const contentType = mimeFromExt(ext)
+				return {
+					id: f.name,
+					url: `${urlPrefix}/${f.name}`,
+					filename: f.name,
+					contentType,
+					uploadedAt: f.stat.mtime.toISOString(),
+				}
+			})
+
+			return {
+				items,
+				hasMore,
+				cursor: hasMore ? String(offset + limit) : undefined,
+			} satisfies MediaListResult
+		},
+
+		async upload(file, filename, contentType) {
+			await fs.mkdir(dir, { recursive: true })
+
+			const ext = getFileExtension(filename)
+			const uuid = randomUUID()
+			const newFilename = `${uuid}${ext ? `.${ext}` : ''}`
+			const filePath = path.join(dir, newFilename)
+
+			await fs.writeFile(filePath, file)
+
+			return {
+				success: true,
+				url: `${urlPrefix}/${newFilename}`,
+				filename: newFilename,
+				id: newFilename,
+			} satisfies MediaUploadResult
+		},
+
+		async delete(id) {
+			const filePath = path.join(dir, path.basename(id))
+			try {
+				await fs.unlink(filePath)
+				return { success: true }
+			} catch (error) {
+				const message = error instanceof Error ? error.message : String(error)
+				return { success: false, error: message }
+			}
+		},
+	}
+}
+
+function getFileExtension(filename: string): string {
+	const parts = filename.split('.')
+	const ext = parts.length > 1 ? (parts.pop()?.toLowerCase() ?? '') : ''
+	// Only allow alphanumeric extensions to prevent injection
+	return /^[a-z0-9]+$/.test(ext) ? ext : ''
+}
+
+function mimeFromExt(ext: string): string {
+	const map: Record<string, string> = {
+		'.jpg': 'image/jpeg',
+		'.jpeg': 'image/jpeg',
+		'.png': 'image/png',
+		'.gif': 'image/gif',
+		'.webp': 'image/webp',
+		'.avif': 'image/avif',
+		'.svg': 'image/svg+xml',
+		'.ico': 'image/x-icon',
+		'.mp4': 'video/mp4',
+		'.webm': 'video/webm',
+		'.pdf': 'application/pdf',
+	}
+	return map[ext] ?? 'application/octet-stream'
+}

package/src/media/s3.ts

@@ -0,0 +1,133 @@
+import { randomUUID } from 'node:crypto'
+import path from 'node:path'
+import type { MediaListResult, MediaStorageAdapter, MediaUploadResult } from './types'
+
+export interface S3StorageOptions {
+	bucket: string
+	region: string
+	accessKeyId?: string
+	secretAccessKey?: string
+	endpoint?: string
+	cdnPrefix?: string
+	prefix?: string
+}
+
+// Dynamic import helper to avoid TS2307 for optional peer dependency
+const s3Module = '@aws-sdk/client-s3'
+async function loadS3(): Promise<any> {
+	return import(/* @vite-ignore */ s3Module)
+}
+
+export function createS3StorageAdapter(options: S3StorageOptions): MediaStorageAdapter {
+	const { bucket, region, accessKeyId, secretAccessKey, endpoint, cdnPrefix, prefix = 'uploads' } = options
+
+	let s3Client: any = null
+
+	async function getClient() {
+		if (s3Client) return s3Client
+		const { S3Client } = await loadS3()
+		s3Client = new S3Client({
+			region,
+			...(endpoint ? { endpoint } : {}),
+			...(accessKeyId && secretAccessKey
+				? { credentials: { accessKeyId, secretAccessKey } }
+				: {}),
+		})
+		return s3Client
+	}
+
+	function getUrl(key: string): string {
+		if (cdnPrefix) {
+			return `${cdnPrefix.replace(/\/$/, '')}/${key}`
+		}
+		if (endpoint) {
+			return `${endpoint.replace(/\/$/, '')}/${bucket}/${key}`
+		}
+		return `https://${bucket}.s3.${region}.amazonaws.com/${key}`
+	}
+
+	return {
+		async list(opts) {
+			const { ListObjectsV2Command } = await loadS3()
+			const client = await getClient()
+
+			const limit = opts?.limit ?? 50
+			const command = new ListObjectsV2Command({
+				Bucket: bucket,
+				Prefix: prefix,
+				MaxKeys: limit + 1,
+				...(opts?.cursor ? { ContinuationToken: opts.cursor } : {}),
+			})
+
+			const result = await client.send(command)
+			const contents = result.Contents ?? []
+			const hasMore = contents.length > limit
+			const items = contents.slice(0, limit).map((obj: any) => {
+				const key = obj.Key as string
+				const filename = key.split('/').pop() ?? key
+				return {
+					id: key,
+					url: getUrl(key),
+					filename,
+					contentType: 'application/octet-stream',
+					uploadedAt: obj.LastModified?.toISOString(),
+				}
+			})
+
+			return {
+				items,
+				hasMore,
+				cursor: hasMore ? result.NextContinuationToken : undefined,
+			} satisfies MediaListResult
+		},
+
+		async upload(file, filename, contentType) {
+			const { PutObjectCommand } = await loadS3()
+			const client = await getClient()
+
+			const ext = getFileExtension(filename)
+			const uuid = randomUUID()
+			const newFilename = `${uuid}${ext ? `.${ext}` : ''}`
+			const key = prefix ? `${prefix}/${newFilename}` : newFilename
+
+			const command = new PutObjectCommand({
+				Bucket: bucket,
+				Key: key,
+				Body: file,
+				ContentType: contentType,
+			})
+
+			await client.send(command)
+
+			return {
+				success: true,
+				url: getUrl(key),
+				filename: newFilename,
+				id: key,
+			} satisfies MediaUploadResult
+		},
+
+		async delete(id) {
+			try {
+				const { DeleteObjectCommand } = await loadS3()
+				const client = await getClient()
+
+				const command = new DeleteObjectCommand({
+					Bucket: bucket,
+					Key: id,
+				})
+
+				await client.send(command)
+				return { success: true }
+			} catch (error) {
+				const message = error instanceof Error ? error.message : String(error)
+				return { success: false, error: message }
+			}
+		},
+	}
+}
+
+function getFileExtension(filename: string): string {
+	const parts = filename.split('.')
+	return parts.length > 1 ? (parts.pop()?.toLowerCase() ?? '') : ''
+}

package/src/media/types.ts

@@ -0,0 +1,33 @@
+export interface MediaItem {
+	id: string
+	url: string
+	filename: string
+	annotation?: string
+	contentType: string
+	width?: number
+	height?: number
+	uploadedAt?: string
+}
+
+export interface MediaListResult {
+	items: MediaItem[]
+	hasMore: boolean
+	cursor?: string
+}
+
+export interface MediaUploadResult {
+	success: boolean
+	url?: string
+	filename?: string
+	annotation?: string
+	id?: string
+	error?: string
+}
+
+export interface MediaStorageAdapter {
+	list(options?: { limit?: number; cursor?: string }): Promise<MediaListResult>
+	upload(file: Buffer, filename: string, contentType: string): Promise<MediaUploadResult>
+	delete(id: string): Promise<{ success: boolean; error?: string }>
+	/** Local filesystem info for direct file serving in dev (bypasses Vite's public dir cache) */
+	staticFiles?: { urlPrefix: string; dir: string }
+}

package/src/preview-generator.ts

@@ -0,0 +1,293 @@
+import { parse } from 'node-html-parser'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import type { ComponentDefinition, ComponentInstance, ManifestEntry } from './types'
+import type { CollectionEntry, PageSeoData } from './types'
+
+type PageData = {
+	entries: Record<string, ManifestEntry>
+	components: Record<string, ComponentInstance>
+	collection?: CollectionEntry
+	seo?: PageSeoData
+}
+
+/**
+ * Check if an image element's src or srcset contains the given URL.
+ * Handles CDN-transformed URLs by comparing path suffixes.
+ */
+function imageMatchesSrc(el: ReturnType<typeof parse>, srcValue: string): boolean {
+	// Check src attribute
+	const src = el.getAttribute('src')
+	if (src === srcValue) return true
+
+	// Check if src or srcset URLs contain the original path
+	// (handles CDN transformations like /cdn-cgi/image/.../original-path)
+	let srcPath: string
+	try {
+		srcPath = new URL(srcValue).pathname
+	} catch {
+		srcPath = srcValue.split('?')[0] ?? srcValue
+	}
+	if (srcPath.length <= 5) return false
+
+	if (src) {
+		let elPath: string
+		try {
+			elPath = new URL(src).pathname
+		} catch {
+			elPath = src.split('?')[0] ?? src
+		}
+		if (elPath.endsWith(srcPath) || srcPath.endsWith(elPath)) return true
+	}
+
+	// Check srcset URLs
+	const srcset = el.getAttribute('srcset')
+	if (srcset) {
+		const urls = srcset.split(',').map(entry => entry.trim().split(/\s+/)[0]).filter(Boolean)
+		for (const url of urls) {
+			if (!url) continue
+			let urlPath: string
+			try {
+				urlPath = new URL(url).pathname
+			} catch {
+				urlPath = url.split('?')[0] ?? url
+			}
+			if (urlPath.endsWith(srcPath) || srcPath.endsWith(urlPath)) return true
+		}
+	}
+
+	return false
+}
+
+/**
+ * Annotate elements in the component HTML with `data-cms-preview-prop` attributes.
+ * For each string prop, find the first leaf element whose trimmed text content
+ * matches the prop's rendered value, and tag it.
+ * Also annotates <img> elements whose src/srcset matches image prop values.
+ */
+function annotatePreviewProps(
+	componentHtml: ReturnType<typeof parse>,
+	props: Record<string, any>,
+	propDefs: ComponentDefinition['props'],
+): void {
+	const annotated = new Set<string>()
+
+	for (const def of propDefs) {
+		// Only annotate string-type props
+		if (def.type !== 'string') continue
+		const value = props[def.name]
+		if (typeof value !== 'string' || !value.trim()) continue
+
+		const trimmedValue = value.trim()
+
+		// First, check <img> elements for image props (src/srcset matching)
+		if (!annotated.has(def.name)) {
+			const imgElements = componentHtml.querySelectorAll('img')
+			for (const img of imgElements) {
+				if (img.getAttribute('data-cms-preview-prop')) continue
+				if (imageMatchesSrc(img, trimmedValue)) {
+					img.setAttribute('data-cms-preview-prop', def.name)
+					img.setAttribute('data-cms-preview-type', 'image')
+					annotated.add(def.name)
+					break
+				}
+			}
+		}
+
+		if (annotated.has(def.name)) continue
+
+		// Find leaf text nodes whose content matches
+		const allElements = componentHtml.querySelectorAll('*')
+		for (const el of allElements) {
+			// Skip elements that already have an annotation
+			if (el.getAttribute('data-cms-preview-prop')) continue
+
+			// Check if this is a leaf element (no child elements, only text)
+			if (el.childNodes.length === 0) continue
+			const hasChildElements = el.childNodes.some(
+				(n) => n.nodeType === 1, // ELEMENT_NODE
+			)
+
+			// For leaf elements or elements with only text children
+			if (!hasChildElements) {
+				const textContent = el.textContent.trim()
+				if (textContent === trimmedValue && !annotated.has(def.name)) {
+					el.setAttribute('data-cms-preview-prop', def.name)
+					annotated.add(def.name)
+					break
+				}
+			}
+		}
+	}
+}
+
+/**
+ * Generate a standalone preview HTML page for a component.
+ */
+function generatePreviewHtml(
+	componentOuterHtml: string,
+	headStyles: string,
+): string {
+	return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="robots" content="noindex, nofollow">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+${headStyles}
+<style>
+body { margin: 0; padding: 0; }
+.cms-preview-container { overflow: hidden; }
+</style>
+</head>
+<body>
+<div class="cms-preview-container">${componentOuterHtml}</div>
+<script>
+// Notify parent that preview is ready
+if (window.parent !== window) {
+  window.parent.postMessage({ type: 'cms-preview-ready' }, window.location.origin);
+}
+
+// Listen for prop updates from the CMS editor
+window.addEventListener('message', function(event) {
+  // Only accept messages from same origin for security
+  if (event.origin !== window.location.origin) return;
+  if (!event.data || event.data.type !== 'cms-preview-update') return;
+  var props = event.data.props;
+  if (!props) return;
+
+  var elements = document.querySelectorAll('[data-cms-preview-prop]');
+  for (var i = 0; i < elements.length; i++) {
+    var el = elements[i];
+    var propName = el.getAttribute('data-cms-preview-prop');
+    if (propName && props[propName] !== undefined) {
+      if (el.getAttribute('data-cms-preview-type') === 'image') {
+        el.setAttribute('src', String(props[propName]));
+        el.removeAttribute('srcset');
+      } else {
+        el.textContent = String(props[propName]);
+      }
+    }
+  }
+});
+</script>
+</body>
+</html>`
+}
+
+/**
+ * Extract <link rel="stylesheet"> and <style> tags from a page's <head>.
+ */
+function extractHeadStyles(root: ReturnType<typeof parse>): string {
+	const head = root.querySelector('head')
+	if (!head) return ''
+
+	const parts: string[] = []
+
+	// Extract <link rel="stylesheet"> tags
+	for (const link of head.querySelectorAll('link[rel="stylesheet"]')) {
+		parts.push(link.outerHTML)
+	}
+
+	// Extract <style> tags
+	for (const style of head.querySelectorAll('style')) {
+		parts.push(style.outerHTML)
+	}
+
+	return parts.join('\n')
+}
+
+/**
+ * Generate standalone preview HTML files for each component that has
+ * at least one instance on a built page.
+ *
+ * Reads the built HTML, extracts the component DOM fragment, annotates
+ * text props for live preview updates, and writes a self-contained HTML
+ * page to `outDir/_cms-preview/<ComponentName>/index.html`.
+ */
+export async function generateComponentPreviews(
+	outDir: string,
+	pageManifests: Map<string, PageData>,
+	componentDefinitions: Record<string, ComponentDefinition>,
+): Promise<void> {
+	// Track which component names we've already processed
+	const processed = new Set<string>()
+
+	// Build a list of work: for each page, find components we haven't processed yet
+	for (const [pagePath, pageData] of pageManifests) {
+		const componentsToProcess: Array<{
+			componentName: string
+			instance: ComponentInstance
+		}> = []
+
+		for (const instance of Object.values(pageData.components)) {
+			if (processed.has(instance.componentName)) continue
+			if (!componentDefinitions[instance.componentName]) continue
+			processed.add(instance.componentName)
+			componentsToProcess.push({ componentName: instance.componentName, instance })
+		}
+
+		if (componentsToProcess.length === 0) continue
+
+		// Resolve the HTML file path for this page
+		let htmlFilePath: string
+		if (pagePath === '/' || pagePath === '') {
+			htmlFilePath = path.join(outDir, 'index.html')
+		} else {
+			const cleanPath = pagePath.replace(/^\//, '')
+			// Try directory-style first (e.g., about/index.html)
+			const dirStyle = path.join(outDir, cleanPath, 'index.html')
+			const fileStyle = path.join(outDir, `${cleanPath}.html`)
+			try {
+				await fs.access(dirStyle)
+				htmlFilePath = dirStyle
+			} catch {
+				htmlFilePath = fileStyle
+			}
+		}
+
+		let pageHtml: string
+		try {
+			pageHtml = await fs.readFile(htmlFilePath, 'utf-8')
+		} catch {
+			// Page HTML not found, skip
+			continue
+		}
+
+		const root = parse(pageHtml, { lowerCaseTagName: false, comment: true })
+		const headStyles = extractHeadStyles(root)
+
+		for (const { componentName, instance } of componentsToProcess) {
+			const def = componentDefinitions[componentName]
+			if (!def) continue
+
+			// Find the component element in the DOM
+			const componentEl = root.querySelector(
+				`[data-cms-component-id="${instance.id}"]`,
+			)
+			if (!componentEl) continue
+
+			// Clone the component HTML for annotation
+			const componentFragment = parse(componentEl.outerHTML, {
+				lowerCaseTagName: false,
+				comment: true,
+			})
+
+			// Annotate text props for live preview
+			annotatePreviewProps(componentFragment, instance.props, def.props)
+
+			const previewHtml = generatePreviewHtml(
+				componentFragment.toString(),
+				headStyles,
+			)
+
+			// Write preview file
+			const previewDir = path.join(outDir, '_cms-preview', componentName)
+			await fs.mkdir(previewDir, { recursive: true })
+			await fs.writeFile(path.join(previewDir, 'index.html'), previewHtml, 'utf-8')
+
+			// Set the preview URL on the component definition
+			def.previewUrl = `/_cms-preview/${componentName}/`
+		}
+	}
+}