@uniweb/build 0.1.4 → 0.1.6

package/src/prerender.js

@@ -9,25 +9,44 @@ import { readFile, writeFile, mkdir } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import { join, dirname } from 'node:path'
 import { pathToFileURL } from 'node:url'
+import { createRequire } from 'node:module'
 
 // Lazily loaded dependencies (ESM with React)
 let React, renderToString, createUniweb
 
 /**
- * Load dependencies dynamically
- * These are ESM modules that may not be available at import time
+ * Load dependencies dynamically from the site's context
+ * This ensures we use the same React instance as the foundation
+ *
+ * @param {string} siteDir - Path to the site directory
  */
-async function loadDependencies() {
+async function loadDependencies(siteDir) {
   if (React) return // Already loaded
 
-  const [reactMod, serverMod, coreMod] = await Promise.all([
-    import('react'),
-    import('react-dom/server'),
-    import('@uniweb/core')
-  ])
+  // Create a require function that resolves from the site's perspective
+  // This ensures we get the same React instance that the foundation uses
+  const siteRequire = createRequire(join(siteDir, 'package.json'))
+
+  try {
+    // Try to load React from site's node_modules
+    const reactMod = siteRequire('react')
+    const serverMod = siteRequire('react-dom/server')
+
+    React = reactMod.default || reactMod
+    renderToString = serverMod.renderToString
+  } catch {
+    // Fallback to dynamic import if require fails
+    const [reactMod, serverMod] = await Promise.all([
+      import('react'),
+      import('react-dom/server')
+    ])
+
+    React = reactMod.default || reactMod
+    renderToString = serverMod.renderToString
+  }
 
-  React = reactMod.default || reactMod
-  renderToString = serverMod.renderToString
+  // @uniweb/core can be imported normally
+  const coreMod = await import('@uniweb/core')
   createUniweb = coreMod.createUniweb
 }
 
@@ -53,9 +72,9 @@ export async function prerenderSite(siteDir, options = {}) {
     throw new Error(`Site must be built first. No dist directory found at: ${distDir}`)
   }
 
-  // Load dependencies
+  // Load dependencies from site's context (ensures same React instance as foundation)
   onProgress('Loading dependencies...')
-  await loadDependencies()
+  await loadDependencies(siteDir)
 
   // Load site content
   onProgress('Loading site content...')
@@ -140,22 +159,93 @@ export async function prerenderSite(siteDir, options = {}) {
 }
 
 /**
- * Minimal page renderer for SSG
- * Renders blocks using foundation components
+ * Render an array of blocks
+ */
+function BlocksRenderer({ blocks, foundation }) {
+  if (!blocks || blocks.length === 0) return null
+
+  return blocks.map((block, index) =>
+    React.createElement(BlockRenderer, {
+      key: block.id || index,
+      block,
+      foundation
+    })
+  )
+}
+
+/**
+ * Default layout - renders header, body, footer in sequence
+ */
+function DefaultLayout({ header, body, footer }) {
+  return React.createElement(React.Fragment, null, header, body, footer)
+}
+
+/**
+ * Layout component for SSG
+ * Supports foundation-provided custom Layout via site.Layout
+ */
+function Layout({ page, website, foundation }) {
+  // Check if foundation provides a custom Layout
+  const RemoteLayout = foundation.site?.Layout || null
+
+  // Get block groups from page
+  const headerBlocks = page.getHeaderBlocks()
+  const bodyBlocks = page.getBodyBlocks()
+  const footerBlocks = page.getFooterBlocks()
+  const leftBlocks = page.getLeftBlocks()
+  const rightBlocks = page.getRightBlocks()
+
+  // Pre-render each area
+  const headerElement = headerBlocks
+    ? React.createElement(BlocksRenderer, { blocks: headerBlocks, foundation })
+    : null
+  const bodyElement = bodyBlocks
+    ? React.createElement(BlocksRenderer, { blocks: bodyBlocks, foundation })
+    : null
+  const footerElement = footerBlocks
+    ? React.createElement(BlocksRenderer, { blocks: footerBlocks, foundation })
+    : null
+  const leftElement = leftBlocks
+    ? React.createElement(BlocksRenderer, { blocks: leftBlocks, foundation })
+    : null
+  const rightElement = rightBlocks
+    ? React.createElement(BlocksRenderer, { blocks: rightBlocks, foundation })
+    : null
+
+  // Use foundation's custom Layout if provided
+  if (RemoteLayout) {
+    return React.createElement(RemoteLayout, {
+      page,
+      website,
+      header: headerElement,
+      body: bodyElement,
+      footer: footerElement,
+      left: leftElement,
+      right: rightElement,
+      leftPanel: leftElement,
+      rightPanel: rightElement
+    })
+  }
+
+  // Default layout
+  return React.createElement(DefaultLayout, {
+    header: headerElement,
+    body: bodyElement,
+    footer: footerElement
+  })
+}
+
+/**
+ * Page renderer for SSG
+ * Uses Layout component for proper orchestration of layout areas
  */
 function PageRenderer({ page, foundation }) {
-  const blocks = page.getPageBlocks()
+  const website = globalThis.uniweb?.activeWebsite
 
   return React.createElement(
     'main',
     null,
-    blocks.map((block, index) =>
-      React.createElement(BlockRenderer, {
-        key: block.id || index,
-        block,
-        foundation
-      })
-    )
+    React.createElement(Layout, { page, website, foundation })
   )
 }
 

package/src/site/content-collector.js

@@ -188,6 +188,91 @@ function buildSectionHierarchy(sections) {
   return topLevel
 }
 
+/**
+ * Process explicit sections array from page.yml
+ * Supports nested structure for subsections:
+ *   sections:
+ *     - hero
+ *     - features:
+ *         - logocloud
+ *         - stats
+ *     - pricing
+ *
+ * @param {Array} sectionsConfig - Sections array from page.yml
+ * @param {string} pagePath - Path to page directory
+ * @param {string} siteRoot - Site root for asset resolution
+ * @param {string} parentId - Parent section ID for building hierarchy
+ * @returns {Object} { sections, assetCollection, lastModified }
+ */
+async function processExplicitSections(sectionsConfig, pagePath, siteRoot, parentId = '') {
+  const sections = []
+  let assetCollection = {
+    assets: {},
+    hasExplicitPoster: new Set(),
+    hasExplicitPreview: new Set()
+  }
+  let lastModified = null
+
+  let index = 1
+  for (const item of sectionsConfig) {
+    let sectionName
+    let subsections = null
+
+    if (typeof item === 'string') {
+      // Simple section: "hero"
+      sectionName = item
+    } else if (typeof item === 'object' && item !== null) {
+      // Section with subsections: { features: [logocloud, stats] }
+      const keys = Object.keys(item)
+      if (keys.length === 1) {
+        sectionName = keys[0]
+        subsections = item[sectionName]
+      } else {
+        console.warn(`[content-collector] Invalid section entry:`, item)
+        continue
+      }
+    } else {
+      continue
+    }
+
+    // Build section ID
+    const id = parentId ? `${parentId}.${index}` : String(index)
+
+    // Look for the markdown file
+    const filePath = join(pagePath, `${sectionName}.md`)
+    if (!existsSync(filePath)) {
+      console.warn(`[content-collector] Section file not found: ${sectionName}.md`)
+      index++
+      continue
+    }
+
+    // Process the section
+    const { section, assetCollection: sectionAssets } = await processMarkdownFile(filePath, id, siteRoot)
+    assetCollection = mergeAssetCollections(assetCollection, sectionAssets)
+
+    // Track last modified
+    const fileStat = await stat(filePath)
+    if (!lastModified || fileStat.mtime > lastModified) {
+      lastModified = fileStat.mtime
+    }
+
+    // Process subsections recursively
+    if (Array.isArray(subsections) && subsections.length > 0) {
+      const subResult = await processExplicitSections(subsections, pagePath, siteRoot, id)
+      section.subsections = subResult.sections
+      assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
+      if (subResult.lastModified && (!lastModified || subResult.lastModified > lastModified)) {
+        lastModified = subResult.lastModified
+      }
+    }
+
+    sections.push(section)
+    index++
+  }
+
+  return { sections, assetCollection, lastModified }
+}
+
 /**
  * Process a page directory
  *
@@ -199,14 +284,11 @@ function buildSectionHierarchy(sections) {
 async function processPage(pagePath, pageName, siteRoot) {
   const pageConfig = await readYamlFile(join(pagePath, 'page.yml'))
 
-  if (pageConfig.hidden) return null
+  // Note: We no longer skip hidden pages here - they still exist as valid pages,
+  // they're just filtered from navigation. This allows direct linking to hidden pages.
+  // if (pageConfig.hidden) return null
 
-  // Get markdown files
-  const files = await readdir(pagePath)
-  const mdFiles = files.filter(isMarkdownFile).sort(compareFilenames)
-
-  // Process sections and collect assets
-  const sections = []
+  let hierarchicalSections = []
   let pageAssetCollection = {
     assets: {},
     hasExplicitPoster: new Set(),
@@ -214,24 +296,45 @@ async function processPage(pagePath, pageName, siteRoot) {
   }
   let lastModified = null
 
-  for (const file of mdFiles) {
-    const { name } = parse(file)
-    const { prefix } = parseNumericPrefix(name)
-    const id = prefix || name
+  // Check for explicit sections configuration
+  const { sections: sectionsConfig } = pageConfig
 
-    const { section, assetCollection } = await processMarkdownFile(join(pagePath, file), id, siteRoot)
-    sections.push(section)
-    pageAssetCollection = mergeAssetCollections(pageAssetCollection, assetCollection)
+  if (sectionsConfig === undefined || sectionsConfig === '*') {
+    // Default behavior: discover all .md files, sort by numeric prefix
+    const files = await readdir(pagePath)
+    const mdFiles = files.filter(isMarkdownFile).sort(compareFilenames)
 
-    // Track last modified time for sitemap
-    const fileStat = await stat(join(pagePath, file))
-    if (!lastModified || fileStat.mtime > lastModified) {
-      lastModified = fileStat.mtime
+    const sections = []
+    for (const file of mdFiles) {
+      const { name } = parse(file)
+      const { prefix } = parseNumericPrefix(name)
+      const id = prefix || name
+
+      const { section, assetCollection } = await processMarkdownFile(join(pagePath, file), id, siteRoot)
+      sections.push(section)
+      pageAssetCollection = mergeAssetCollections(pageAssetCollection, assetCollection)
+
+      // Track last modified time for sitemap
+      const fileStat = await stat(join(pagePath, file))
+      if (!lastModified || fileStat.mtime > lastModified) {
+        lastModified = fileStat.mtime
+      }
     }
-  }
 
-  // Build hierarchy
-  const hierarchicalSections = buildSectionHierarchy(sections)
+    // Build hierarchy from dot notation
+    hierarchicalSections = buildSectionHierarchy(sections)
+
+  } else if (Array.isArray(sectionsConfig) && sectionsConfig.length > 0) {
+    // Explicit sections array
+    const result = await processExplicitSections(sectionsConfig, pagePath, siteRoot)
+    hierarchicalSections = result.sections
+    pageAssetCollection = result.assetCollection
+    lastModified = result.lastModified
+
+  } else {
+    // Empty sections (null, empty array, or invalid) = pure route with no content
+    // hierarchicalSections stays empty, lastModified stays null
+  }
 
   // Determine route
   let route = '/' + pageName
@@ -241,16 +344,31 @@ async function processPage(pagePath, pageName, siteRoot) {
     route = '/' + pageName
   }
 
-  // Extract SEO config from page
-  const { seo = {}, ...restConfig } = pageConfig
+  // Extract configuration
+  const { seo = {}, layout = {}, ...restConfig } = pageConfig
 
   return {
     page: {
       route,
       title: pageConfig.title || pageName,
       description: pageConfig.description || '',
+      label: pageConfig.label || null, // Short label for navigation (defaults to title)
       order: pageConfig.order,
       lastModified: lastModified?.toISOString(),
+
+      // Navigation options
+      hidden: pageConfig.hidden || false, // Hide from all navigation
+      hideInHeader: pageConfig.hideInHeader || false, // Hide from header nav
+      hideInFooter: pageConfig.hideInFooter || false, // Hide from footer nav
+
+      // Layout options (per-page overrides)
+      layout: {
+        header: layout.header !== false, // Show header (default true)
+        footer: layout.footer !== false, // Show footer (default true)
+        leftPanel: layout.leftPanel !== false, // Show left panel (default true)
+        rightPanel: layout.rightPanel !== false // Show right panel (default true)
+      },
+
       seo: {
         noindex: seo.noindex || false,
         image: seo.image || null,
@@ -296,6 +414,8 @@ export async function collectSiteContent(sitePath) {
   }
   let header = null
   let footer = null
+  let left = null
+  let right = null
 
   for (const entry of entries) {
     const entryPath = join(pagesPath, entry)
@@ -309,11 +429,15 @@ export async function collectSiteContent(sitePath) {
     const { page, assetCollection } = result
     siteAssetCollection = mergeAssetCollections(siteAssetCollection, assetCollection)
 
-    // Handle special pages
+    // Handle special pages (layout areas)
     if (entry === '@header' || page.route === '/@header') {
       header = page
     } else if (entry === '@footer' || page.route === '/@footer') {
       footer = page
+    } else if (entry === '@left' || page.route === '/@left') {
+      left = page
+    } else if (entry === '@right' || page.route === '/@right') {
+      right = page
     } else {
       pages.push(page)
     }
@@ -335,6 +459,8 @@ export async function collectSiteContent(sitePath) {
     pages,
     header,
     footer,
+    left,
+    right,
     assets: siteAssetCollection.assets,
     hasExplicitPoster: siteAssetCollection.hasExplicitPoster,
     hasExplicitPreview: siteAssetCollection.hasExplicitPreview