@uniweb/build 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -59,7 +59,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.1.8"
+    "@uniweb/core": "0.1.10"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/prerender.js

@@ -118,11 +118,21 @@ export async function prerenderSite(siteDir, options = {}) {
   const pages = uniweb.activeWebsite.pages
 
   for (const page of pages) {
-    const route = page.route
-    onProgress(`Rendering ${route}...`)
+    // Determine which routes to render this page at
+    // Index pages are rendered at both their actual route and their nav route
+    const routesToRender = [page.route]
+    if (page.isIndex) {
+      const navRoute = page.getNavRoute()
+      if (navRoute !== page.route) {
+        routesToRender.push(navRoute)
+      }
+    }
+
+    // Render once, output to multiple paths
+    onProgress(`Rendering ${routesToRender[0]}...`)
 
     // Set this as the active page
-    uniweb.activeWebsite.setActivePage(route)
+    uniweb.activeWebsite.setActivePage(page.route)
 
     // Create the page element
     // Note: We don't need StaticRouter for SSG since we're just rendering
@@ -134,7 +144,7 @@ export async function prerenderSite(siteDir, options = {}) {
     try {
       renderedContent = renderToString(element)
     } catch (err) {
-      console.warn(`Warning: Failed to render ${route}: ${err.message}`)
+      console.warn(`Warning: Failed to render ${page.route}: ${err.message}`)
       if (process.env.DEBUG) {
         console.error(err.stack)
       }
@@ -144,13 +154,15 @@ export async function prerenderSite(siteDir, options = {}) {
     // Inject into shell
     const html = injectContent(htmlShell, renderedContent, page, siteContent)
 
-    // Determine output path
-    const outputPath = getOutputPath(distDir, route)
-    await mkdir(dirname(outputPath), { recursive: true })
-    await writeFile(outputPath, html)
+    // Output to all routes for this page
+    for (const route of routesToRender) {
+      const outputPath = getOutputPath(distDir, route)
+      await mkdir(dirname(outputPath), { recursive: true })
+      await writeFile(outputPath, html)
 
-    renderedFiles.push(outputPath)
-    onProgress(`  → ${outputPath.replace(distDir, 'dist')}`)
+      renderedFiles.push(outputPath)
+      onProgress(`  → ${outputPath.replace(distDir, 'dist')}`)
+    }
   }
 
   onProgress(`Pre-rendered ${renderedFiles.length} pages`)

package/src/site/content-collector.js

@@ -288,11 +288,14 @@ async function processExplicitSections(sectionsConfig, pagePath, siteRoot, paren
  * Process a page directory
  *
  * @param {string} pagePath - Path to page directory
- * @param {string} pageName - Name of the page
+ * @param {string} pageName - Name of the page (folder name, not full path)
  * @param {string} siteRoot - Site root directory for asset resolution
+ * @param {Object} options - Route options
+ * @param {boolean} options.isIndex - Whether this page is the index for its parent route
+ * @param {string} options.parentRoute - The parent route (e.g., '/' or '/docs')
  * @returns {Object} Page data with assets manifest
  */
-async function processPage(pagePath, pageName, siteRoot) {
+async function processPage(pagePath, pageName, siteRoot, { isIndex = false, parentRoute = '/' } = {}) {
   const pageConfig = await readYamlFile(join(pagePath, 'page.yml'))
 
   // Note: We no longer skip hidden pages here - they still exist as valid pages,
@@ -348,11 +351,15 @@ async function processPage(pagePath, pageName, siteRoot) {
   }
 
   // Determine route
-  let route = '/' + pageName
-  if (pageName === 'home' || pageName === 'index') {
-    route = '/'
-  } else if (pageName.startsWith('@')) {
-    route = '/' + pageName
+  // All pages get their actual folder-based route (no special treatment for index)
+  // The isIndex flag marks which page should also be accessible at the parent route
+  let route
+  if (pageName.startsWith('@')) {
+    // Special pages (layout areas) keep their @ prefix
+    route = parentRoute === '/' ? `/@${pageName.slice(1)}` : `${parentRoute}/@${pageName.slice(1)}`
+  } else {
+    // Normal pages get parent + their name
+    route = parentRoute === '/' ? `/${pageName}` : `${parentRoute}/${pageName}`
   }
 
   // Extract configuration
@@ -361,6 +368,7 @@ async function processPage(pagePath, pageName, siteRoot) {
   return {
     page: {
       route,
+      isIndex, // Marks this page as the index for its parent route (accessible at parentRoute)
       title: pageConfig.title || pageName,
       description: pageConfig.description || '',
       label: pageConfig.label || null, // Short label for navigation (defaults to title)
@@ -392,15 +400,50 @@ async function processPage(pagePath, pageName, siteRoot) {
   }
 }
 
+/**
+ * Determine the index page name from ordering config
+ *
+ * @param {Object} orderConfig - { pages: [...], index: 'name' } from parent
+ * @param {Array} availableFolders - Array of { name, order } for folders at this level
+ * @returns {string|null} The folder name that should be the index, or null
+ */
+function determineIndexPage(orderConfig, availableFolders) {
+  const { pages: pagesArray, index: indexName } = orderConfig || {}
+
+  // 1. Explicit pages array - first item is index
+  if (Array.isArray(pagesArray) && pagesArray.length > 0) {
+    return pagesArray[0]
+  }
+
+  // 2. Explicit index property
+  if (indexName) {
+    return indexName
+  }
+
+  // 3. Fallback: lowest order value, or first alphabetically
+  if (availableFolders.length === 0) return null
+
+  const sorted = [...availableFolders].sort((a, b) => {
+    // Sort by order (lower first), then alphabetically
+    const orderA = a.order ?? 999
+    const orderB = b.order ?? 999
+    if (orderA !== orderB) return orderA - orderB
+    return a.name.localeCompare(b.name)
+  })
+
+  return sorted[0].name
+}
+
 /**
  * Recursively collect pages from a directory
  *
  * @param {string} dirPath - Directory to scan
- * @param {string} routePrefix - Route prefix for nested pages
+ * @param {string} parentRoute - Parent route (e.g., '/' or '/docs')
  * @param {string} siteRoot - Site root directory for asset resolution
+ * @param {Object} orderConfig - { pages: [...], index: 'name' } from parent's config
  * @returns {Promise<Object>} { pages, assetCollection, header, footer, left, right }
  */
-async function collectPagesRecursive(dirPath, routePrefix, siteRoot) {
+async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig = {}) {
   const entries = await readdir(dirPath)
   const pages = []
   let assetCollection = {
@@ -413,30 +456,55 @@ async function collectPagesRecursive(dirPath, routePrefix, siteRoot) {
   let left = null
   let right = null
 
+  // First pass: discover all page folders and read their order values
+  const pageFolders = []
   for (const entry of entries) {
     const entryPath = join(dirPath, entry)
     const stats = await stat(entryPath)
-
     if (!stats.isDirectory()) continue
 
-    // Build the page name/route
-    const pageName = routePrefix ? `${routePrefix}/${entry}` : entry
+    // Read page.yml to get order and child page config
+    const pageConfig = await readYamlFile(join(entryPath, 'page.yml'))
+    pageFolders.push({
+      name: entry,
+      path: entryPath,
+      order: pageConfig.order,
+      childOrderConfig: {
+        pages: pageConfig.pages,
+        index: pageConfig.index
+      }
+    })
+  }
+
+  // Determine which page is the index for this level
+  const regularFolders = pageFolders.filter(f => !f.name.startsWith('@'))
+  const indexPageName = determineIndexPage(orderConfig, regularFolders)
+
+  // Second pass: process each page folder
+  for (const folder of pageFolders) {
+    const { name: entry, path: entryPath, childOrderConfig } = folder
+    const isIndex = entry === indexPageName
+    const isSpecial = entry.startsWith('@')
 
     // Process this directory as a page
-    const result = await processPage(entryPath, pageName, siteRoot)
+    const result = await processPage(entryPath, entry, siteRoot, {
+      isIndex: isIndex && !isSpecial,
+      parentRoute
+    })
+
     if (result) {
       const { page, assetCollection: pageAssets } = result
       assetCollection = mergeAssetCollections(assetCollection, pageAssets)
 
       // Handle special pages (layout areas) - only at root level
-      if (!routePrefix) {
-        if (entry === '@header' || page.route === '/@header') {
+      if (parentRoute === '/') {
+        if (entry === '@header') {
           header = page
-        } else if (entry === '@footer' || page.route === '/@footer') {
+        } else if (entry === '@footer') {
           footer = page
-        } else if (entry === '@left' || page.route === '/@left') {
+        } else if (entry === '@left') {
           left = page
-        } else if (entry === '@right' || page.route === '/@right') {
+        } else if (entry === '@right') {
           right = page
         } else {
           pages.push(page)
@@ -444,13 +512,15 @@ async function collectPagesRecursive(dirPath, routePrefix, siteRoot) {
       } else {
         pages.push(page)
       }
-    }
 
-    // Recursively process subdirectories (but not special @ directories)
-    if (!entry.startsWith('@')) {
-      const subResult = await collectPagesRecursive(entryPath, pageName, siteRoot)
-      pages.push(...subResult.pages)
-      assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
+      // Recursively process subdirectories (but not special @ directories)
+      if (!isSpecial) {
+        // The child route depends on whether this page is the index
+        const childParentRoute = isIndex ? parentRoute : page.route
+        const subResult = await collectPagesRecursive(entryPath, childParentRoute, siteRoot, childOrderConfig)
+        pages.push(...subResult.pages)
+        assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
+      }
     }
   }
 
@@ -480,9 +550,15 @@ export async function collectSiteContent(sitePath) {
     }
   }
 
+  // Extract page ordering config from site.yml
+  const siteOrderConfig = {
+    pages: siteConfig.pages,
+    index: siteConfig.index
+  }
+
   // Recursively collect all pages
   const { pages, assetCollection, header, footer, left, right } =
-    await collectPagesRecursive(pagesPath, '', sitePath)
+    await collectPagesRecursive(pagesPath, '/', sitePath, siteOrderConfig)
 
   // Sort pages by order
   pages.sort((a, b) => (a.order ?? 999) - (b.order ?? 999))

package/src/site/plugin.js

@@ -295,7 +295,9 @@ export function siteContentPlugin(options = {}) {
 
       // Watch for content changes in dev mode
       if (shouldWatch) {
-        const watchPath = resolve(resolvedSitePath, pagesDir)
+        const pagesPath = resolve(resolvedSitePath, pagesDir)
+        const siteYmlPath = resolve(resolvedSitePath, 'site.yml')
+        const themeYmlPath = resolve(resolvedSitePath, 'theme.yml')
 
         // Debounce rebuilds
         let rebuildTimeout = null
@@ -315,12 +317,33 @@ export function siteContentPlugin(options = {}) {
           }, 100)
         }
 
+        // Track all watchers for cleanup
+        const watchers = []
+
+        // Watch pages directory
         try {
-          watcher = watch(watchPath, { recursive: true }, scheduleRebuild)
-          console.log(`[site-content] Watching ${watchPath}`)
+          watchers.push(watch(pagesPath, { recursive: true }, scheduleRebuild))
+          console.log(`[site-content] Watching ${pagesPath}`)
         } catch (err) {
           console.warn('[site-content] Could not watch pages directory:', err.message)
         }
+
+        // Watch site.yml
+        try {
+          watchers.push(watch(siteYmlPath, scheduleRebuild))
+        } catch (err) {
+          // site.yml may not exist, that's ok
+        }
+
+        // Watch theme.yml
+        try {
+          watchers.push(watch(themeYmlPath, scheduleRebuild))
+        } catch (err) {
+          // theme.yml may not exist, that's ok
+        }
+
+        // Store watchers for cleanup
+        watcher = { close: () => watchers.forEach(w => w.close()) }
       }
 
       // Serve content and SEO files