2

sites/src/utils/layoutRenderer.tsx

@@ -27,7 +27,7 @@ export type LayoutType =
   | 'corporate';
 
 /**
- * Render site layout based on site definition1.
+ * Render site layout based on site definition.
  */
 export function renderLayout(siteDefinition: SiteDefinition): React.ReactElement {
   const layoutType = siteDefinition.layout as LayoutType;
@@ -276,4 +276,3 @@ function renderCorporateLayout(siteDefinition: SiteDefinition): React.ReactEleme
 }
 
 // Note: Navigation and page rendering are now handled within each layout component
-

sites/src/utils/layoutRenderer.tsx.backup

@@ -0,0 +1,279 @@
+/**
+ * Layout Renderer
+ * Phase 5: Sites Renderer & Publishing
+ * 
+ * Renders different layout types for sites using shared components.
+ */
+import React from 'react';
+import type { SiteDefinition } from '../types';
+import { renderTemplate } from './templateEngine';
+import {
+  DefaultLayout,
+  MinimalLayout,
+  MagazineLayout,
+  EcommerceLayout,
+  PortfolioLayout,
+  BlogLayout,
+  CorporateLayout,
+} from '@shared/layouts';
+
+export type LayoutType = 
+  | 'default'
+  | 'minimal'
+  | 'magazine'
+  | 'ecommerce'
+  | 'portfolio'
+  | 'blog'
+  | 'corporate';
+
+/**
+ * Render site layout based on site definition.
+ */
+export function renderLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const layoutType = siteDefinition.layout as LayoutType;
+  
+  switch (layoutType) {
+    case 'minimal':
+      return renderMinimalLayout(siteDefinition);
+    case 'magazine':
+      return renderMagazineLayout(siteDefinition);
+    case 'ecommerce':
+      return renderEcommerceLayout(siteDefinition);
+    case 'portfolio':
+      return renderPortfolioLayout(siteDefinition);
+    case 'blog':
+      return renderBlogLayout(siteDefinition);
+    case 'corporate':
+      return renderCorporateLayout(siteDefinition);
+    case 'default':
+    default:
+      return renderDefaultLayout(siteDefinition);
+  }
+}
+
+/**
+ * Default layout: Standard header, content, footer.
+ * Uses shared DefaultLayout component with fully styled modern design.
+ */
+function renderDefaultLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  // Find home page for hero
+  const homePage = siteDefinition.pages.find(p => p.slug === 'home');
+  const heroBlock = homePage?.blocks?.find(b => b.type === 'hero');
+  const hero: React.ReactNode = heroBlock ? (renderTemplate(heroBlock) as React.ReactNode) : undefined;
+
+  // Render all pages as sections (excluding hero from home page if it exists)
+  const sections = siteDefinition.pages
+    .filter((page) => page.status !== 'draft')
+    .map((page) => {
+      // Filter out hero block if it's the home page (already rendered as hero)
+      const blocksToRender = page.slug === 'home' && heroBlock
+        ? page.blocks?.filter(b => b.type !== 'hero') || []
+        : page.blocks || [];
+
+      return (
+        <div key={page.id} className="page" data-page-slug={page.slug}>
+          {page.slug !== 'home' && <h2>{page.title}</h2>}
+          {blocksToRender.length > 0 ? (
+            blocksToRender.map((block, index) => (
+              <div key={index} className="block" data-block-type={block.type}>
+                {renderTemplate(block)}
+              </div>
+            ))
+          ) : page.slug !== 'home' ? (
+            <p>No content available for this page.</p>
+          ) : null}
+        </div>
+      );
+    });
+
+  return (
+    <DefaultLayout
+      hero={hero as any}
+      sections={sections}
+    />
+  );
+}
+
+/**
+ * Minimal layout: Clean, minimal design.
+ * Uses shared MinimalLayout component.
+ */
+function renderMinimalLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const mainContent = (
+    <>
+      {siteDefinition.pages
+        .filter((page) => page.status !== 'draft')
+        .map((page) => (
+          <div key={page.id} className="page" data-page-slug={page.slug}>
+            <h2>{page.title}</h2>
+            {page.blocks && page.blocks.length > 0 ? (
+              page.blocks.map((block, index) => (
+                <div key={index} className="block" data-block-type={block.type}>
+                  {renderTemplate(block)}
+                </div>
+              ))
+            ) : null}
+          </div>
+        ))}
+    </>
+  );
+
+  return (
+    <MinimalLayout>
+      {mainContent}
+    </MinimalLayout>
+  );
+}
+
+/**
+ * Magazine layout: Editorial, content-focused.
+ * Uses shared MagazineLayout component.
+ */
+function renderMagazineLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const mainContent = (
+    <>
+      {siteDefinition.pages
+        .filter((page) => page.status !== 'draft')
+        .map((page) => (
+          <div key={page.id} className="page" data-page-slug={page.slug}>
+            {page.blocks && page.blocks.length > 0 ? (
+              page.blocks.map((block, index) => (
+                <div key={index} className="block" data-block-type={block.type}>
+                  {renderTemplate(block)}
+                </div>
+              ))
+            ) : null}
+          </div>
+        ))}
+    </>
+  );
+
+  return (
+    <MagazineLayout
+      mainContent={mainContent}
+    />
+  );
+}
+
+/**
+ * Ecommerce layout: Product-focused.
+ * Uses shared EcommerceLayout component.
+ */
+function renderEcommerceLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const mainContent = (
+    <>
+      {siteDefinition.pages
+        .filter((page) => page.status !== 'draft')
+        .map((page) => (
+          <div key={page.id} className="page" data-page-slug={page.slug}>
+            {page.blocks && page.blocks.length > 0 ? (
+              page.blocks.map((block, index) => (
+                <div key={index} className="block" data-block-type={block.type}>
+                  {renderTemplate(block)}
+                </div>
+              ))
+            ) : null}
+          </div>
+        ))}
+    </>
+  );
+
+  return (
+    <EcommerceLayout
+      mainContent={mainContent}
+    />
+  );
+}
+
+/**
+ * Portfolio layout: Showcase.
+ * Uses shared PortfolioLayout component.
+ */
+function renderPortfolioLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const mainContent = (
+    <>
+      {siteDefinition.pages
+        .filter((page) => page.status !== 'draft')
+        .map((page) => (
+          <div key={page.id} className="page" data-page-slug={page.slug}>
+            {page.blocks && page.blocks.length > 0 ? (
+              page.blocks.map((block, index) => (
+                <div key={index} className="block" data-block-type={block.type}>
+                  {renderTemplate(block)}
+                </div>
+              ))
+            ) : null}
+          </div>
+        ))}
+    </>
+  );
+
+  return (
+    <PortfolioLayout
+      mainContent={mainContent}
+    />
+  );
+}
+
+/**
+ * Blog layout: Content-first.
+ * Uses shared BlogLayout component.
+ */
+function renderBlogLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const mainContent = (
+    <>
+      {siteDefinition.pages
+        .filter((page) => page.status !== 'draft')
+        .map((page) => (
+          <div key={page.id} className="page" data-page-slug={page.slug}>
+            {page.blocks && page.blocks.length > 0 ? (
+              page.blocks.map((block, index) => (
+                <div key={index} className="block" data-block-type={block.type}>
+                  {renderTemplate(block)}
+                </div>
+              ))
+            ) : null}
+          </div>
+        ))}
+    </>
+  );
+
+  return (
+    <BlogLayout
+      mainContent={mainContent}
+    />
+  );
+}
+
+/**
+ * Corporate layout: Business.
+ * Uses shared CorporateLayout component.
+ */
+function renderCorporateLayout(siteDefinition: SiteDefinition): React.ReactElement {
+  const mainContent = (
+    <>
+      {siteDefinition.pages
+        .filter((page) => page.status !== 'draft')
+        .map((page) => (
+          <div key={page.id} className="page" data-page-slug={page.slug}>
+            {page.blocks && page.blocks.length > 0 ? (
+              page.blocks.map((block, index) => (
+                <div key={index} className="block" data-block-type={block.type}>
+                  {renderTemplate(block)}
+                </div>
+              ))
+            ) : null}
+          </div>
+        ))}
+    </>
+  );
+
+  return (
+    <CorporateLayout
+      mainContent={mainContent}
+    />
+  );
+}
+
+// Note: Navigation and page rendering are now handled within each layout component
+