@uniweb/build 0.1.2 → 0.1.4

package/src/site/asset-processor.js

@@ -0,0 +1,281 @@
+/**
+ * Asset Processor
+ *
+ * Processes site assets (images) during build:
+ * - Converts images to WebP for optimization
+ * - Generates content-hashed filenames for cache busting
+ * - Caches processed assets to avoid redundant work
+ *
+ * @module @uniweb/build/site
+ */
+
+import { readFile, writeFile, mkdir, stat, copyFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { join, basename, extname, dirname } from 'node:path'
+import { createHash } from 'node:crypto'
+import sharp from 'sharp'
+
+// Image formats that can be converted to WebP
+const CONVERTIBLE_FORMATS = ['.png', '.jpg', '.jpeg', '.gif']
+
+// Image formats to pass through without conversion
+const PASSTHROUGH_FORMATS = ['.svg', '.webp', '.avif', '.ico']
+
+/**
+ * Generate a content hash for a file
+ */
+async function getFileHash(filePath) {
+  const content = await readFile(filePath)
+  return createHash('md5').update(content).digest('hex').slice(0, 8)
+}
+
+/**
+ * Convert an image to WebP format
+ *
+ * @param {Buffer} input - Input image buffer
+ * @param {Object} options - Conversion options
+ * @returns {Promise<Buffer>} WebP buffer
+ */
+async function convertToWebp(input, options = {}) {
+  const { quality = 80 } = options
+
+  return sharp(input)
+    .webp({ quality })
+    .toBuffer()
+}
+
+/**
+ * Process a single asset
+ *
+ * @param {Object} asset - Asset info from manifest
+ * @param {Object} options - Processing options
+ * @returns {Promise<Object>} Processed asset info
+ */
+export async function processAsset(asset, options = {}) {
+  const {
+    outputDir,
+    assetsSubdir = 'assets',
+    convertToWebp: shouldConvert = true,
+    quality = 80
+  } = options
+
+  const { original, resolved, isImage } = asset
+
+  // Check if source file exists
+  if (!existsSync(resolved)) {
+    console.warn(`[asset-processor] Source not found: ${resolved}`)
+    return {
+      original,
+      output: original, // Keep original path as fallback
+      processed: false,
+      error: 'Source not found'
+    }
+  }
+
+  const ext = extname(resolved).toLowerCase()
+  const name = basename(resolved, ext)
+
+  try {
+    // Generate content hash for cache busting
+    const hash = await getFileHash(resolved)
+
+    let outputBuffer
+    let outputExt = ext
+    let converted = false
+
+    if (isImage && shouldConvert && CONVERTIBLE_FORMATS.includes(ext)) {
+      // Convert to WebP
+      const input = await readFile(resolved)
+      outputBuffer = await convertToWebp(input, { quality })
+      outputExt = '.webp'
+      converted = true
+    } else if (isImage && PASSTHROUGH_FORMATS.includes(ext)) {
+      // Copy as-is for SVG, WebP, etc.
+      outputBuffer = await readFile(resolved)
+    } else {
+      // Non-image or unknown format - copy as-is
+      outputBuffer = await readFile(resolved)
+    }
+
+    // Generate output filename with hash
+    const outputFilename = `${name}-${hash}${outputExt}`
+    const outputPath = join(outputDir, assetsSubdir, outputFilename)
+
+    // Ensure output directory exists
+    await mkdir(dirname(outputPath), { recursive: true })
+
+    // Write processed file
+    await writeFile(outputPath, outputBuffer)
+
+    // Return the URL path (relative to site root)
+    const outputUrl = `/${assetsSubdir}/${outputFilename}`
+
+    return {
+      original,
+      output: outputUrl,
+      resolved,
+      outputPath,
+      processed: true,
+      converted,
+      size: outputBuffer.length
+    }
+  } catch (error) {
+    console.warn(`[asset-processor] Failed to process ${resolved}:`, error.message)
+    return {
+      original,
+      output: original,
+      processed: false,
+      error: error.message
+    }
+  }
+}
+
+/**
+ * Process all assets in a manifest
+ *
+ * @param {Object} assetManifest - Asset manifest from content collector
+ * @param {Object} options - Processing options
+ * @returns {Promise<Object>} Mapping of original paths to output URLs
+ */
+export async function processAssets(assetManifest, options = {}) {
+  const pathMapping = {}
+  const results = {
+    processed: 0,
+    converted: 0,
+    failed: 0,
+    totalSize: 0
+  }
+
+  const entries = Object.entries(assetManifest)
+
+  for (const [originalPath, asset] of entries) {
+    const result = await processAsset(asset, options)
+    pathMapping[originalPath] = result.output
+
+    if (result.processed) {
+      results.processed++
+      results.totalSize += result.size || 0
+      if (result.converted) {
+        results.converted++
+      }
+    } else {
+      results.failed++
+    }
+  }
+
+  return { pathMapping, results }
+}
+
+/**
+ * Rewrite asset paths in ProseMirror content
+ *
+ * @param {Object} content - ProseMirror document
+ * @param {Object} pathMapping - Map of original paths to new paths
+ * @returns {Object} Content with rewritten paths
+ */
+export function rewriteContentPaths(content, pathMapping) {
+  if (!content) return content
+
+  // Deep clone to avoid mutating original
+  const result = JSON.parse(JSON.stringify(content))
+
+  function walk(node) {
+    // Rewrite image src
+    if (node.type === 'image' && node.attrs?.src) {
+      const newPath = pathMapping[node.attrs.src]
+      if (newPath) {
+        node.attrs.src = newPath
+      }
+    }
+
+    // Recurse into content
+    if (node.content && Array.isArray(node.content)) {
+      node.content.forEach(walk)
+    }
+
+    // Check marks
+    if (node.marks && Array.isArray(node.marks)) {
+      node.marks.forEach(mark => {
+        if (mark.attrs?.src) {
+          const newPath = pathMapping[mark.attrs.src]
+          if (newPath) {
+            mark.attrs.src = newPath
+          }
+        }
+      })
+    }
+  }
+
+  walk(result)
+  return result
+}
+
+/**
+ * Rewrite asset paths in section params (frontmatter)
+ *
+ * @param {Object} params - Section params
+ * @param {Object} pathMapping - Map of original paths to new paths
+ * @returns {Object} Params with rewritten paths
+ */
+export function rewriteParamPaths(params, pathMapping) {
+  if (!params) return params
+
+  const result = { ...params }
+  const imageFields = ['image', 'background', 'backgroundImage', 'thumbnail', 'poster', 'avatar', 'logo', 'icon']
+
+  for (const field of imageFields) {
+    if (result[field] && pathMapping[result[field]]) {
+      result[field] = pathMapping[result[field]]
+    }
+  }
+
+  return result
+}
+
+/**
+ * Rewrite all asset paths in site content
+ *
+ * @param {Object} siteContent - Full site content object
+ * @param {Object} pathMapping - Map of original paths to new paths
+ * @returns {Object} Site content with rewritten paths
+ */
+export function rewriteSiteContentPaths(siteContent, pathMapping) {
+  // Deep clone
+  const result = JSON.parse(JSON.stringify(siteContent))
+
+  function processSection(section) {
+    if (section.content) {
+      section.content = rewriteContentPaths(section.content, pathMapping)
+    }
+    if (section.params) {
+      section.params = rewriteParamPaths(section.params, pathMapping)
+    }
+    if (section.subsections) {
+      section.subsections.forEach(processSection)
+    }
+  }
+
+  function processPage(page) {
+    if (page.sections) {
+      page.sections.forEach(processSection)
+    }
+  }
+
+  // Process all pages
+  if (result.pages) {
+    result.pages.forEach(processPage)
+  }
+
+  // Process header and footer
+  if (result.header) {
+    processPage(result.header)
+  }
+  if (result.footer) {
+    processPage(result.footer)
+  }
+
+  // Remove the assets manifest from output (no longer needed at runtime)
+  delete result.assets
+
+  return result
+}

package/src/site/assets.js

@@ -0,0 +1,247 @@
+/**
+ * Asset Resolution Utilities
+ *
+ * Resolves asset paths in content to file system locations.
+ * Supports both relative paths (./image.png) and absolute paths (/images/hero.png).
+ *
+ * In content-driven sites, markdown is the "code" - local asset references
+ * act as implicit imports and should be processed/optimized during build.
+ */
+
+import { join, dirname, isAbsolute, normalize } from 'node:path'
+import { existsSync } from 'node:fs'
+
+// Image extensions we should process
+const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif']
+
+// Video extensions we can extract posters from
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.avi', '.mkv']
+
+// PDF extension
+const PDF_EXTENSION = '.pdf'
+
+/**
+ * Check if a path is an external URL
+ */
+function isExternalUrl(src) {
+  return /^(https?:)?\/\//.test(src) || src.startsWith('data:')
+}
+
+/**
+ * Check if a path is a processable image
+ */
+function isImagePath(src) {
+  const ext = src.split('.').pop()?.toLowerCase()
+  return IMAGE_EXTENSIONS.some(e => e.slice(1) === ext)
+}
+
+/**
+ * Check if a path is a video file
+ */
+function isVideoPath(src) {
+  const ext = '.' + (src.split('.').pop()?.toLowerCase() || '')
+  return VIDEO_EXTENSIONS.includes(ext)
+}
+
+/**
+ * Check if a path is a PDF file
+ */
+function isPdfPath(src) {
+  return src.toLowerCase().endsWith(PDF_EXTENSION)
+}
+
+/**
+ * Resolve an asset path to absolute file system path
+ *
+ * @param {string} src - Original source path from content
+ * @param {string} contextPath - Path of the file containing the reference
+ * @param {string} siteRoot - Site root directory
+ * @returns {Object} Resolution result
+ */
+export function resolveAssetPath(src, contextPath, siteRoot) {
+  // External URLs - don't process
+  if (isExternalUrl(src)) {
+    return { src, resolved: null, external: true }
+  }
+
+  // Already absolute path on filesystem
+  if (isAbsolute(src)) {
+    return { src, resolved: src, external: false }
+  }
+
+  let resolved
+
+  // Relative paths: ./image.png or ../image.png or just image.png
+  if (src.startsWith('./') || src.startsWith('../') || !src.startsWith('/')) {
+    const contextDir = dirname(contextPath)
+    resolved = normalize(join(contextDir, src))
+  }
+  // Absolute site paths: /images/hero.png
+  else if (src.startsWith('/')) {
+    // Check public folder first, then assets folder
+    const publicPath = join(siteRoot, 'public', src)
+    const assetsPath = join(siteRoot, 'assets', src)
+
+    if (existsSync(publicPath)) {
+      resolved = publicPath
+    } else if (existsSync(assetsPath)) {
+      resolved = assetsPath
+    } else {
+      // Default to public folder path even if it doesn't exist yet
+      resolved = publicPath
+    }
+  }
+
+  return {
+    src,
+    resolved,
+    external: false,
+    isImage: isImagePath(src),
+    isVideo: isVideoPath(src),
+    isPdf: isPdfPath(src)
+  }
+}
+
+/**
+ * Walk a ProseMirror document and collect all asset references
+ *
+ * @param {Object} doc - ProseMirror document
+ * @param {Function} visitor - Callback for each asset: (node, path, attrName) => void
+ *                             attrName is 'src', 'poster', or 'preview'
+ * @param {string} [path=''] - Current path in document (for debugging)
+ */
+export function walkContentAssets(doc, visitor, path = '') {
+  if (!doc) return
+
+  // Check for image nodes
+  if (doc.type === 'image' && doc.attrs?.src) {
+    visitor(doc, path, 'src')
+
+    // Also collect explicit poster/preview attributes as assets
+    if (doc.attrs.poster && !isExternalUrl(doc.attrs.poster)) {
+      visitor({ type: 'image', attrs: { src: doc.attrs.poster } }, path, 'poster')
+    }
+    if (doc.attrs.preview && !isExternalUrl(doc.attrs.preview)) {
+      visitor({ type: 'image', attrs: { src: doc.attrs.preview } }, path, 'preview')
+    }
+  }
+
+  // Recurse into content
+  if (doc.content && Array.isArray(doc.content)) {
+    doc.content.forEach((child, index) => {
+      walkContentAssets(child, visitor, `${path}/content[${index}]`)
+    })
+  }
+
+  // Handle marks (links can have images)
+  if (doc.marks && Array.isArray(doc.marks)) {
+    doc.marks.forEach((mark, index) => {
+      if (mark.attrs?.src) {
+        visitor(mark, `${path}/marks[${index}]`, 'src')
+      }
+    })
+  }
+}
+
+/**
+ * Process all assets in a section's content and frontmatter
+ *
+ * @param {Object} section - Section object with content and params
+ * @param {string} markdownPath - Path to the markdown file
+ * @param {string} siteRoot - Site root directory
+ * @returns {Object} Asset collection result
+ *   - assets: Asset manifest mapping original paths to resolved info
+ *   - hasExplicitPoster: Set of video src paths that have explicit poster attributes
+ *   - hasExplicitPreview: Set of PDF src paths that have explicit preview attributes
+ */
+export function collectSectionAssets(section, markdownPath, siteRoot) {
+  const assets = {}
+  const hasExplicitPoster = new Set()
+  const hasExplicitPreview = new Set()
+
+  // Track current image node's src when we encounter poster/preview
+  let currentImageSrc = null
+
+  // Collect from ProseMirror content
+  if (section.content) {
+    walkContentAssets(section.content, (node, path, attrName) => {
+      const result = resolveAssetPath(node.attrs.src, markdownPath, siteRoot)
+
+      if (attrName === 'src') {
+        // Main src attribute - track it for potential poster/preview
+        currentImageSrc = node.attrs.src
+
+        // Check if this image has explicit poster/preview
+        if (node.attrs.poster) {
+          hasExplicitPoster.add(node.attrs.src)
+        }
+        if (node.attrs.preview) {
+          hasExplicitPreview.add(node.attrs.src)
+        }
+      }
+
+      if (!result.external && result.resolved) {
+        assets[node.attrs.src] = {
+          original: node.attrs.src,
+          resolved: result.resolved,
+          isImage: result.isImage,
+          isVideo: result.isVideo,
+          isPdf: result.isPdf
+        }
+      }
+    })
+  }
+
+  // Collect from frontmatter params (common media fields)
+  const mediaFields = [
+    'image', 'background', 'backgroundImage', 'thumbnail',
+    'poster', 'avatar', 'logo', 'icon',
+    'video', 'videoSrc', 'media', 'file', 'pdf', 'document'
+  ]
+
+  for (const field of mediaFields) {
+    const value = section.params?.[field]
+    if (typeof value === 'string' && value) {
+      const result = resolveAssetPath(value, markdownPath, siteRoot)
+      if (!result.external && result.resolved) {
+        assets[value] = {
+          original: value,
+          resolved: result.resolved,
+          isImage: result.isImage,
+          isVideo: result.isVideo,
+          isPdf: result.isPdf
+        }
+      }
+    }
+  }
+
+  return { assets, hasExplicitPoster, hasExplicitPreview }
+}
+
+/**
+ * Merge multiple asset collection results
+ *
+ * @param {...Object} collections - Asset collection results from collectSectionAssets
+ * @returns {Object} Merged collection with combined assets and sets
+ */
+export function mergeAssetCollections(...collections) {
+  const merged = {
+    assets: {},
+    hasExplicitPoster: new Set(),
+    hasExplicitPreview: new Set()
+  }
+
+  for (const collection of collections) {
+    // Handle both old format (plain object) and new format (with sets)
+    if (collection.assets) {
+      Object.assign(merged.assets, collection.assets)
+      collection.hasExplicitPoster?.forEach(p => merged.hasExplicitPoster.add(p))
+      collection.hasExplicitPreview?.forEach(p => merged.hasExplicitPreview.add(p))
+    } else {
+      // Legacy: plain asset manifest
+      Object.assign(merged.assets, collection)
+    }
+  }
+
+  return merged
+}