/**
* Layout Renderer
* Phase 5: Sites Renderer & Publishing
*
* Renders different layout types for sites.
*/
import React from 'react';
import type { SiteDefinition } from '../types';
import { renderTemplate } from './templateEngine';
export type LayoutType =
| 'default'
| 'centered'
| 'sidebar'
| 'grid'
| 'magazine'
| 'minimal'
| 'fullwidth';
/**
* Render site layout based on site definition.
*/
export function renderLayout(siteDefinition: SiteDefinition): React.ReactElement {
const layoutType = siteDefinition.layout as LayoutType;
switch (layoutType) {
case 'centered':
return renderCenteredLayout(siteDefinition);
case 'sidebar':
return renderSidebarLayout(siteDefinition);
case 'grid':
return renderGridLayout(siteDefinition);
case 'magazine':
return renderMagazineLayout(siteDefinition);
case 'minimal':
return renderMinimalLayout(siteDefinition);
case 'fullwidth':
return renderFullwidthLayout(siteDefinition);
case 'default':
default:
return renderDefaultLayout(siteDefinition);
}
}
/**
* Default layout: Standard header, content, footer.
*/
function renderDefaultLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{renderPages(siteDefinition.pages)}
);
}
/**
* Centered layout: Content centered with max-width.
*/
function renderCenteredLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{renderPages(siteDefinition.pages)}
);
}
/**
* Sidebar layout: Sidebar navigation with main content.
*/
function renderSidebarLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{renderPages(siteDefinition.pages)}
);
}
/**
* Grid layout: Grid-based page layout.
*/
function renderGridLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{renderPages(siteDefinition.pages)}
);
}
/**
* Magazine layout: Multi-column magazine style.
*/
function renderMagazineLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{siteDefinition.name}
{renderPages(siteDefinition.pages)}
);
}
/**
* Minimal layout: Clean, minimal design.
*/
function renderMinimalLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{renderPages(siteDefinition.pages)}
);
}
/**
* Fullwidth layout: Full-width content.
*/
function renderFullwidthLayout(siteDefinition: SiteDefinition): React.ReactElement {
return (
{renderPages(siteDefinition.pages)}
);
}
/**
* Render navigation items.
*/
function renderNavigation(navigation: SiteDefinition['navigation']): React.ReactElement {
return (
);
}
/**
* Render pages.
*/
function renderPages(pages: SiteDefinition['pages']): React.ReactElement[] {
return pages
.filter((page) => page.status === 'ready')
.map((page) => (
{page.title}
{page.blocks.map((block, index) => (
{renderTemplate(block)}
))}
));
}