@@ -378,6 +384,36 @@ function renderContainer(node: any, context: RenderContext): string {
`;
}
+function renderSidebarMainLayout(node: any, context: RenderContext, classes: string): string {
+ const { classPrefix: prefix } = context;
+ const children: any[] = node.children || [];
+
+ const sections: { name: string; nodes: any[] }[] = [];
+ let current: { name: string; nodes: any[] } | null = null;
+
+ for (const child of children) {
+ const childClasses: string[] = child.props?.classes || [];
+ if (child.type === 'heading' && (childClasses.includes('sidebar') || childClasses.includes('main'))) {
+ if (current) sections.push(current);
+ current = { name: childClasses.includes('sidebar') ? 'sidebar' : 'main', nodes: [] };
+ } else if (current) {
+ current.nodes.push(child);
+ }
+ }
+ if (current) sections.push(current);
+
+ const sectionsHTML = sections.map((s) => {
+ const contentHTML = s.nodes.map((child: any) => renderNode(child, context)).join('\n ');
+ return ` /);
+ expect(html).toContain('Fast');
+ expect(html).toContain('Secure');
+ expect(html).toContain('Powerful');
+ });
+
+ it('should render a grid nested inside sidebar-main layout main section', () => {
+ const input = `
+::: layout {.sidebar-main}
+
+## Sidebar {.sidebar}
+Nav
+
+## Main {.main}
+
+## Stats {.grid-3}
+
+### Done
+48
+
+### Active
+12
+
+### Pending
+5
+
+:::
+ `.trim();
+ const ast = parse(input);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ expect(html).toMatch(/
/);
+ expect(html).toContain('Done');
+ expect(html).toContain('Active');
+ expect(html).toContain('Pending');
+ });
+ });
+
+ describe('Sidebar Layout', () => {
+ const sidebarInput = `
+::: layout {.sidebar-main}
+
+## Sidebar {.sidebar}
+- [Home](#)
+- [Settings](#)
+
+## Main {.main}
+### Dashboard
+Content here
+
+:::
+ `.trim();
+
+ it('should render sidebar-main layout with correct wrapper class', () => {
+ const ast = parse(sidebarInput);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ expect(html).toContain('wmd-container-layout');
+ expect(html).toContain('wmd-sidebar-main');
+ });
+
+ it('should render sidebar and main sections as separate divs', () => {
+ const ast = parse(sidebarInput);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ expect(html).toContain('wmd-layout-sidebar');
+ expect(html).toContain('wmd-layout-main');
+ });
+
+ it('should NOT render the section heading labels as visible text', () => {
+ const ast = parse(sidebarInput);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ // Heading text "Sidebar" and "Main" used as structural markers should not appear in output
+ expect(html).not.toMatch(/]*>[^<]*\bSidebar\b/);
+ expect(html).not.toMatch(/]*>[^<]*\bMain\b/);
+ });
+
+ it('should place sidebar content inside layout-sidebar div', () => {
+ const ast = parse(sidebarInput);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ // Extract just the body content (after ) to avoid CSS false positives
+ const bodyStart = html.indexOf('');
+ const body = html.slice(bodyStart);
+ const sidebarDivPos = body.indexOf('class="wmd-layout-sidebar"');
+ const mainDivPos = body.indexOf('class="wmd-layout-main"');
+ const homePos = body.indexOf('>Home<');
+ expect(sidebarDivPos).toBeGreaterThan(-1);
+ expect(homePos).toBeGreaterThan(sidebarDivPos);
+ expect(homePos).toBeLessThan(mainDivPos);
+ });
+
+ it('should place main content inside layout-main div', () => {
+ const ast = parse(sidebarInput);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ const bodyStart = html.indexOf('');
+ const body = html.slice(bodyStart);
+ const mainDivPos = body.indexOf('class="wmd-layout-main"');
+ const dashPos = body.indexOf('Dashboard');
+ expect(dashPos).toBeGreaterThan(mainDivPos);
+ });
+
+ it('should include sidebar-main grid CSS', () => {
+ const ast = parse(sidebarInput);
+ const html = renderToHTML(ast, { style: 'sketch' });
+ expect(html).toMatch(/grid-template-columns:\s*\d+px\s+1fr/);
+ });
+
+ it('should include container-sidebar CSS', () => {
+ const ast = parse('::: sidebar\n- [Home](#)\n:::\n');
+ const html = renderToHTML(ast, { style: 'sketch' });
+ expect(html).toContain('wmd-container-sidebar');
+ expect(html).toMatch(/\.wmd-container-sidebar\s*\{/);
+ });
+ });
+
describe('JSON Renderer', () => {
it('should render to JSON', () => {
const ast = parse('[Button]');