@rettangoli/sites 0.2.0-rc5 → 0.2.0-rc7

package/README.md

@@ -172,6 +172,36 @@ title: Blog
               - ${post.data.title}
 ```
 
+### Page Variables
+
+Every page has access to a `page.url` variable that contains the page's URL path. All frontmatter variables (like `title`) are available directly:
+
+**pages/about.yaml**
+```yaml
+---
+title: About Us
+---
+- paragraph: Current page URL is ${page.url}
+```
+
+**templates/base.yaml**
+```yaml
+- tag: head
+  children:
+    - tag: title
+      children: ${title}
+    - tag: link
+      rel: canonical
+      href: ${page.url}
+```
+
+The `page.url` variable contains the page's URL path without the `.html` extension, with trailing slashes:
+- `/index.html` → `page.url` = `/`
+- `/about.html` → `page.url` = `/about/`
+- `/docs/guide.html` → `page.url` = `/docs/guide/`
+
+This variable is available in both pages and templates, making it useful for navigation, breadcrumbs, and canonical URLs.
+
 ### Static Files
 
 Everything in the `static/` directory is copied directly to the output:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/sites",
-  "version": "0.2.0-rc5",
+  "version": "0.2.0-rc7",
   "description": "Generate static sites using Markdown and YAML. Straightforward, zero-complexity. Complete toolkit for landing pages, blogs, documentation, admin dashboards, and more.git remote add origin git@github.com:yuusoft-org/sitic.git",
   "author": {
     "name": "Luciano Hanyon Wu",
@@ -20,7 +20,9 @@
     "jempl": "^0.3.1-rc1",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
+    "minimatch": "^10.0.3",
     "playwright": "^1.55.0",
+    "sharp": "^0.34.3",
     "ws": "^8.18.0",
     "yahtml": "^0.0.2-rc1"
   },

package/src/cli/build.js

@@ -6,22 +6,22 @@ import { loadSiteConfig } from '../utils/loadSiteConfig.js';
  * Build the static site
  * @param {Object} options - Options for building the site
  * @param {string} options.rootDir - Root directory of the site (defaults to cwd)
- * @param {Object} options.mdRender - Optional markdown renderer
+ * @param {Object} options.md - Optional markdown renderer
  * @param {boolean} options.quiet - Suppress build output logs
  */
 export const buildSite = async (options = {}) => {
-  const { rootDir = process.cwd(), mdRender, functions, quiet = false } = options;
+  const { rootDir = process.cwd(), md, functions, quiet = false } = options;
 
   // Load config file if needed
   let config = {};
-  if (!mdRender || !functions) {
+  if (!md || !functions) {
     config = await loadSiteConfig(rootDir);
   }
 
   const build = createSiteBuilder({
     fs,
     rootDir,
-    mdRender: mdRender || config.mdRender,
+    md: md || config.md,
     functions: functions || config.functions || {},
     quiet
   });

package/src/cli/index.js

@@ -1,6 +1,6 @@
 import { buildSite } from './build.js';
 import watchSite from './watch.js';
-import screenshotCommand from './screenshot-command.js';
+import screenshotCommand from '../screenshotRunner.js';
 
 export {
   buildSite,

package/src/cli/watch.js

@@ -4,7 +4,7 @@ import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { WebSocketServer } from 'ws';
 import { buildSite } from './build.js';
-import ScreenshotCapture from './screenshot.js';
+import { createScreenshotCapture } from '../screenshot.js';
 import { loadSiteConfig } from '../utils/loadSiteConfig.js';
 
 // Client script to inject into HTML pages
@@ -247,7 +247,7 @@ const setupWatcher = (directory, options, server, screenshotCapture) => {
       
       const currentOptions = {
         ...options,
-        mdRender: config.mdRender || options.mdRender,
+        md: config.md || options.md,
         functions: config.functions || options.functions || {}
       };
 
@@ -340,10 +340,10 @@ const watchSite = async (options = {}) => {
   
   if (Object.keys(config).length > 0) {
     console.log('✅ Loaded sites.config.js');
-    if (config.mdRender) {
-      console.log('✅ Custom mdRender function found');
+    if (config.md) {
+      console.log('✅ Custom md function found');
     } else {
-      console.log('ℹ️  No custom mdRender function in config');
+      console.log('ℹ️  No custom md function in config');
     }
     if (config.functions) {
       console.log(`✅ Found ${Object.keys(config.functions).length} custom function(s)`);
@@ -356,7 +356,7 @@ const watchSite = async (options = {}) => {
   console.log('Starting initial build...');
   await buildSite({
     rootDir,
-    mdRender: config.mdRender,
+    md: config.md,
     functions: config.functions || {}
   });
   console.log('Initial build complete');
@@ -369,8 +369,7 @@ const watchSite = async (options = {}) => {
   let screenshotCapture = null;
   if (screenshots) {
     console.log('\n📸 Screenshot capture enabled');
-    screenshotCapture = new ScreenshotCapture(port);
-    await screenshotCapture.init();
+    screenshotCapture = await createScreenshotCapture(port);
   }
 
   // Watch all relevant directories
@@ -382,7 +381,7 @@ const watchSite = async (options = {}) => {
       console.log(`👁️  Watching: ${dir}/`);
       setupWatcher(dirPath, {
         rootDir,
-        mdRender: config.mdRender,
+        md: config.md,
         functions: config.functions || {}
       }, server, screenshotCapture);
     }

package/src/createSiteBuilder.js

@@ -4,11 +4,37 @@ import path from 'path';
 import yaml from 'js-yaml';
 
 import MarkdownIt from 'markdown-it';
+import rtglMarkdown from './rtglMarkdown.js';
+
+// Deep merge utility function
+function deepMerge(target, source) {
+  const output = { ...target };
+  
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key] = deepMerge(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  
+  return output;
+}
 
-export function createSiteBuilder({ fs, rootDir = '.', mdRender, functions = {}, quiet = false }) {
+function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+export function createSiteBuilder({ fs, rootDir = '.', md, functions = {}, quiet = false }) {
   return function build() {
-    // Use provided mdRender or default to standard markdown-it
-    const md = mdRender || MarkdownIt();
+    // Use provided md or default to rtglMarkdown
+    const mdInstance = md || rtglMarkdown(MarkdownIt);
 
     // Read all partials and create a JSON object
     const partialsDir = path.join(rootDir, 'partials');
@@ -124,7 +150,14 @@ export function createSiteBuilder({ fs, rootDir = '.', mdRender, functions = {},
             // Calculate URL
             const outputFileName = item.name.replace(/\.(yaml|md)$/, '.html');
             const outputRelativePath = basePath ? path.join(basePath, outputFileName) : outputFileName;
-            const url = '/' + outputRelativePath.replace(/\\/g, '/');
+            let url = '/' + outputRelativePath.replace(/\\/g, '/').replace(/\.html$/, '');
+            // Special case: /index becomes /
+            if (url === '/index') {
+              url = '/';
+            } else {
+              // Add trailing slash for all non-root URLs
+              url = url + '/';
+            }
 
             // Process tags
             if (frontmatter.tags) {
@@ -193,14 +226,26 @@ export function createSiteBuilder({ fs, rootDir = '.', mdRender, functions = {},
       const contentStart = frontmatterEnd + 1;
       const rawContent = lines.slice(contentStart).join('\n').trim();
 
-      // Merge global data with frontmatter and collections for the page context
-      const pageData = { ...globalData, ...frontmatter, collections };
+      // Calculate URL for current page
+      let url = '/' + outputRelativePath.replace(/\\/g, '/').replace(/\.html$/, '');
+      // Special case: /index becomes /
+      if (url === '/index') {
+        url = '/';
+      } else {
+        // Add trailing slash for all non-root URLs
+        url = url + '/';
+      }
+
+      // Deep merge global data with frontmatter and collections for the page context
+      const pageData = deepMerge(globalData, frontmatter);
+      pageData.collections = collections;
+      pageData.page = { url };
 
       let processedPageContent;
 
       if (isMarkdown) {
         // Process markdown content with MarkdownIt
-        const htmlContent = md.render(rawContent);
+        const htmlContent = mdInstance.render(rawContent);
         // For markdown, store as raw HTML that will be inserted directly
         processedPageContent = { __html: htmlContent };
       } else {

package/src/rtglMarkdown.js

@@ -1,126 +1,49 @@
-import MarkdownIt from 'markdown-it';
-
-// Simple slug generation function
-function generateSlug(text) {
+// Custom slug generation function
+function slugify(text) {
   return text
     .toLowerCase()
     .trim()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/[\s_-]+/g, '-')
-    .replace(/^-+|-+$/g, '');
+    .replace(/[^\w\s-]/g, '') // Remove non-word chars (except spaces and hyphens)
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/--+/g, '-') // Replace multiple hyphens with single hyphen
+    .replace(/^-+/, '') // Remove leading hyphens
+    .replace(/-+$/, '') // Remove trailing hyphens
 }
 
-/**
- * Custom Markdown renderer configuration for Rettangoli
- * Adds rtgl-specific elements and styling
- */
-export const createRtglMarkdown = () => {
-  const md = MarkdownIt({
-    // Additional configuration can be added here
-  });
-
-  // Header configuration
-  md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
-    const token = tokens[idx];
-    const level = token.markup.length;
-    const inlineToken = tokens[idx + 1];
-    const headingText = inlineToken.content;
-    const id = generateSlug(headingText);
-
-    // Map heading levels to size values
-    const sizes = { 1: "h1", 2: "h2", 3: "h3", 4: "h4" };
-    const size = sizes[level] || "md";
-
-    return `<rtgl-text id="${id}" mt="lg" s="${size}" mb="md"> <a href="#${id}" style="display: contents;">`;
-  };
-
-  md.renderer.rules.heading_close = () => "</a></rtgl-text>\n";
-
-  // Paragraph configuration
-  md.renderer.rules.paragraph_open = (tokens, idx, options, env, self) => {
-    // Check if we're inside a list item
-    let isInListItem = false;
-    for (let i = idx - 1; i >= 0; i--) {
-      if (tokens[i].type === 'list_item_open') {
-        isInListItem = true;
-        break;
-      }
-      if (tokens[i].type === 'list_item_close') {
-        break;
-      }
-    }
-    
-    // Don't wrap paragraphs in list items with rtgl-text
-    if (isInListItem) {
-      return '';
-    }
-    return `<rtgl-text s="bl" mb="lg">`;
-  };
-  
-  md.renderer.rules.paragraph_close = (tokens, idx, options, env, self) => {
-    // Check if we're inside a list item
-    let isInListItem = false;
-    for (let i = idx - 1; i >= 0; i--) {
-      if (tokens[i].type === 'list_item_open') {
-        isInListItem = true;
-        break;
-      }
-      if (tokens[i].type === 'list_item_close') {
-        break;
-      }
-    }
-    
-    // Don't wrap paragraphs in list items with rtgl-text
-    if (isInListItem) {
-      return '\n';
-    }
-    return "</rtgl-text>\n";
-  };
-
-  // Table configuration
-  md.renderer.rules.table_open = () => '<rtgl-view w="f">\n<table>';
-  md.renderer.rules.table_close = () => "</table>\n</rtgl-view>";
-
-  // Link configuration - add target="_blank" to all external links
-  md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-    const token = tokens[idx];
-    const targetIndex = token.attrIndex("target");
-    const href =
-      (token.attrs && token.attrs.find((attr) => attr[0] === "href")?.[1]) ||
-      "";
-    const isExternal = href.startsWith("http") || href.startsWith("//");
-
-    // If this is an external link or already has target="_blank"
-    if (isExternal || targetIndex >= 0) {
-      if (targetIndex < 0) {
-        token.attrPush(["target", "_blank"]);
-      }
-      token.attrPush(["rel", "noreferrer"]);
-
-      // Find the next text token to use for the aria-label
-      let nextIdx = idx + 1;
-      let textContent = "";
-      while (nextIdx < tokens.length && tokens[nextIdx].type !== "link_close") {
-        if (tokens[nextIdx].type === "text") {
-          textContent += tokens[nextIdx].content;
-        }
-        nextIdx++;
-      }
-
-      // Add aria-label for external links
-      if (textContent.trim() && token.attrIndex("aria-label") < 0) {
-        token.attrPush([
-          "aria-label",
-          `${textContent.trim()} (opens in new tab)`,
-        ]);
-      }
+export default function configureMarkdown(markdownit) {
+  const md = markdownit({
+    html: true,
+    linkify: true,
+    typographer: false
+  })
+
+  // Override heading renderer to add IDs and wrap with anchor links
+  const defaultHeadingRender = md.renderer.rules.heading_open || function (tokens, idx, options, env, renderer) {
+    return renderer.renderToken(tokens, idx, options)
+  }
+
+  const defaultHeadingCloseRender = md.renderer.rules.heading_close || function (tokens, idx, options, env, renderer) {
+    return renderer.renderToken(tokens, idx, options)
+  }
+
+  md.renderer.rules.heading_open = function (tokens, idx, options, env, renderer) {
+    const token = tokens[idx]
+    const nextToken = tokens[idx + 1]
+    let slug = ''
+
+    if (nextToken && nextToken.type === 'inline') {
+      const headingText = nextToken.content
+      slug = slugify(headingText)
+      token.attrSet('id', slug)
     }
 
-    return self.renderToken(tokens, idx, options);
-  };
+    const headingHtml = defaultHeadingRender(tokens, idx, options, env, renderer)
+    return `<a href="#${slug}" style="display: contents; text-decoration: none; color: inherit;">` + headingHtml
+  }
 
-  return md;
-};
+  md.renderer.rules.heading_close = function (tokens, idx, options, env, renderer) {
+    return defaultHeadingCloseRender(tokens, idx, options, env, renderer) + '</a>'
+  }
 
-// Export a default instance for convenience
-export default createRtglMarkdown();
+  return md
+}

package/src/screenshot.js

@@ -0,0 +1,250 @@
+import { chromium } from 'playwright';
+import path from 'node:path';
+import fs from 'node:fs';
+import sharp from 'sharp';
+import { minimatch } from 'minimatch';
+
+// Module state for browser instance
+let browser = null;
+
+async function initBrowser() {
+  if (browser) return browser;
+  
+  console.log('🎬 Initializing Playwright browser...');
+  browser = await chromium.launch({ 
+    headless: true
+  });
+  console.log('✅ Browser initialized for screenshots');
+  return browser;
+}
+
+async function closeBrowser() {
+  if (browser) {
+    await browser.close();
+    browser = null;
+    console.log('🔚 Browser closed');
+  }
+}
+
+export async function capturePageScreenshot(pagePath, options = {}) {
+  const {
+    port = 3001,
+    outputDir = '_screenshots',
+    context = null
+  } = options;
+  
+  const browserInstance = await initBrowser();
+  
+  try {
+    // Convert file path to URL path
+    // pages/index.md -> /
+    // pages/about.md -> /about
+    // pages/store/index.md -> /store/
+    // pages/store/products.md -> /store/products
+    let urlPath = pagePath
+      .replace(/^pages\//, '')
+      .replace(/\.(md|yaml|yml)$/, '');
+    
+    if (urlPath === 'index') {
+      urlPath = '/';
+    } else if (urlPath.endsWith('/index')) {
+      urlPath = urlPath.replace(/\/index$/, '/');
+    } else if (urlPath) {
+      // Add leading slash if not root
+      urlPath = '/' + urlPath;
+    }
+
+    const url = `http://localhost:${port}${urlPath}?screenshot=true`;
+    
+    // Determine screenshot path
+    // / -> index.webp
+    // /about -> about.webp
+    // /store/ -> store/index.webp
+    // /store/products -> store/products.webp
+    let screenshotPath;
+    if (urlPath === '/') {
+      screenshotPath = 'index.webp';
+    } else if (urlPath.endsWith('/')) {
+      screenshotPath = urlPath.slice(1, -1) + '/index.webp';
+    } else {
+      screenshotPath = urlPath.slice(1) + '.webp';
+    }
+    
+    const fullScreenshotPath = path.join(outputDir, screenshotPath);
+    const tempPngPath = fullScreenshotPath.replace('.webp', '.png');
+    
+    // Ensure directory exists
+    const screenshotDir = path.dirname(fullScreenshotPath);
+    if (!fs.existsSync(screenshotDir)) {
+      fs.mkdirSync(screenshotDir, { recursive: true });
+    }
+
+    console.log(`📸 Capturing screenshot: ${url} -> ${fullScreenshotPath}`);
+    
+    // Create a context if not provided
+    const shouldCloseContext = !context;
+    let contextToUse = context;
+    if (!contextToUse) {
+      contextToUse = await browserInstance.newContext({
+        viewport: { width: 1366, height: 768 },  // Most common laptop viewport
+        deviceScaleFactor: 0.75  // Reduce pixel density for smaller PNG files
+      });
+    }
+    
+    const page = await contextToUse.newPage();
+    
+    try {
+      // Navigate to the page
+      await page.goto(url, { 
+        waitUntil: 'networkidle',
+        timeout: 30000 
+      });
+      
+      // // Wait a bit for content to load
+      // await page.waitForTimeout(2000);
+      
+      // Take screenshot as PNG first (Playwright doesn't support WebP)
+      await page.screenshot({ 
+        path: tempPngPath,
+        fullPage: true,
+        type: 'png'
+      });
+      
+      // Convert PNG to WebP using Sharp
+      await sharp(tempPngPath)
+        .webp({ quality: 100 })
+        .toFile(fullScreenshotPath);
+      
+      // Remove temporary PNG file
+      if (fs.existsSync(tempPngPath)) {
+        fs.unlinkSync(tempPngPath);
+      }
+      
+      console.log(`✅ Screenshot saved: ${fullScreenshotPath}`);
+    } catch (error) {
+      console.error(`❌ Failed to capture ${url}:`, error.message);
+      // Clean up temp PNG file if it exists
+      if (fs.existsSync(tempPngPath)) {
+        fs.unlinkSync(tempPngPath);
+      }
+    } finally {
+      await page.close();
+      // Close context if we created it
+      if (shouldCloseContext && contextToUse) {
+        await contextToUse.close();
+      }
+    }
+  } catch (error) {
+    console.error('❌ Screenshot error:', error);
+  }
+}
+
+export async function captureAllPages(pagesDir, options = {}) {
+  const {
+    port = 3001,
+    outputDir = '_screenshots',
+    ignorePatterns = []
+  } = options;
+  
+  if (!fs.existsSync(pagesDir)) {
+    console.log('Pages directory does not exist:', pagesDir);
+    return;
+  }
+
+  // Helper function to check if a path should be ignored
+  const shouldIgnore = (relativePath) => {
+    // Remove 'pages/' prefix for matching
+    const pathToMatch = relativePath.replace(/^pages\//, '');
+    
+    return ignorePatterns.some(pattern => {
+      // Handle exact matches and glob patterns
+      return minimatch(pathToMatch, pattern, { 
+        matchBase: true,  // Allow patterns to match basename
+        dot: true         // Allow patterns to match files starting with dot
+      });
+    });
+  };
+
+    // First, collect all page paths
+    const pagePaths = [];
+    
+    const collectPaths = (dir, basePath = '') => {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        const relativePath = path.join(basePath, entry.name);
+        
+        if (entry.isDirectory()) {
+          // Check if directory should be ignored
+          const dirPath = path.join('pages', relativePath);
+          if (shouldIgnore(dirPath)) {
+            console.log(`⏭️  Ignoring directory: ${relativePath}`);
+            continue;
+          }
+          // Recurse into subdirectories
+          collectPaths(fullPath, relativePath);
+        } else if (entry.isFile() && (entry.name.endsWith('.md') || entry.name.endsWith('.yaml') || entry.name.endsWith('.yml'))) {
+          // Add page path to the list
+          const pagePath = path.join('pages', relativePath);
+          if (shouldIgnore(pagePath)) {
+            console.log(`⏭️  Ignoring file: ${relativePath}`);
+            continue;
+          }
+          pagePaths.push(pagePath);
+        }
+      }
+    };
+
+    collectPaths(pagesDir);
+    
+    console.log(`📸 Found ${pagePaths.length} pages to capture`);
+    
+  // Process pages in parallel with concurrency limit of 12
+  const concurrency = 12;
+  const results = [];
+  const browserInstance = await initBrowser();
+  
+  // Create contexts for parallel processing
+  const contexts = await Promise.all(
+    Array(Math.min(concurrency, pagePaths.length))
+      .fill(null)
+      .map(() => browserInstance.newContext({
+        viewport: { width: 1366, height: 768 },  // Most common laptop viewport
+        deviceScaleFactor: 0.75  // Reduce pixel density for smaller PNG files
+      }))
+  );
+  
+  try {
+    for (let i = 0; i < pagePaths.length; i += concurrency) {
+      const batch = pagePaths.slice(i, i + concurrency);
+      console.log(`📸 Processing batch ${Math.floor(i / concurrency) + 1}/${Math.ceil(pagePaths.length / concurrency)} (${batch.length} pages)`);
+      
+      const batchPromises = batch.map((pagePath, index) => 
+        capturePageScreenshot(pagePath, { port, outputDir, context: contexts[index] }).catch(error => {
+          console.error(`Failed to capture ${pagePath}:`, error);
+          return null;
+        })
+      );
+      
+      const batchResults = await Promise.all(batchPromises);
+      results.push(...batchResults);
+    }
+  } finally {
+    // Clean up contexts
+    await Promise.all(contexts.map(ctx => ctx.close()));
+  }
+  
+  console.log(`✅ Completed capturing ${pagePaths.length} screenshots`);
+  return results;
+}
+
+export async function createScreenshotCapture(port = 3001, outputDir = '_screenshots') {
+  await initBrowser();
+  
+  return {
+    capturePageScreenshot: (pagePath) => capturePageScreenshot(pagePath, { port, outputDir }),
+    captureAllPages: (pagesDir, options = {}) => captureAllPages(pagesDir, { port, outputDir, ...options }),
+    close: closeBrowser
+  };
+}

package/src/screenshotRunner.js

@@ -0,0 +1,171 @@
+import http from 'node:http';
+import path from 'node:path';
+import fs from 'node:fs';
+import { existsSync } from 'node:fs';
+import { buildSite } from './cli/build.js';
+import { createScreenshotCapture } from './screenshot.js';
+import { loadSiteConfig } from './utils/loadSiteConfig.js';
+
+function getContentType(ext) {
+  const types = {
+    '.html': 'text/html',
+    '.css': 'text/css',
+    '.js': 'application/javascript',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon'
+  };
+  return types[ext] || 'application/octet-stream';
+}
+
+function serveFile(filePath, res, skipWebSocket = false) {
+  const ext = path.extname(filePath);
+  const contentType = getContentType(ext);
+  
+  try {
+    const content = fs.readFileSync(filePath);
+    res.writeHead(200, { 'Content-Type': contentType });
+    res.end(content);
+  } catch (err) {
+    console.error('Error serving file:', err);
+    res.writeHead(500);
+    res.end('Internal Server Error');
+  }
+}
+
+function handleRequest(req, res, siteDir = '_site') {
+  const urlParts = req.url.split('?');
+  let urlPath = urlParts[0];
+  const queryString = urlParts[1] || '';
+  
+  // Check if this is a screenshot request
+  const isScreenshotRequest = queryString.includes('screenshot=true');
+  
+  // Default to index.html for root
+  if (urlPath === '/') {
+    urlPath = '/index.html';
+  }
+  
+  // Handle trailing slash - remove it for processing
+  const hasTrailingSlash = urlPath.endsWith('/') && urlPath !== '/';
+  if (hasTrailingSlash) {
+    urlPath = urlPath.slice(0, -1);
+  }
+  
+  // Handle paths without extensions
+  if (!path.extname(urlPath)) {
+    // First try as .html file
+    const htmlPath = path.join(siteDir, urlPath + '.html');
+    if (existsSync(htmlPath)) {
+      urlPath = urlPath + '.html';
+    } else {
+      // Try as directory with index.html
+      const indexPath = path.join(siteDir, urlPath, 'index.html');
+      if (existsSync(indexPath)) {
+        urlPath = path.join(urlPath, 'index.html');
+      }
+    }
+  }
+  
+  const filePath = path.join(siteDir, urlPath);
+  
+  // Check if file exists
+  if (!existsSync(filePath)) {
+    res.writeHead(404);
+    res.end('404 Not Found');
+    return;
+  }
+  
+  // Check if it's a directory
+  const stats = fs.statSync(filePath);
+  if (stats.isDirectory()) {
+    // Try to serve index.html from the directory
+    const indexPath = path.join(filePath, 'index.html');
+    if (existsSync(indexPath)) {
+      return serveFile(indexPath, res, isScreenshotRequest);
+    } else {
+      res.writeHead(404);
+      res.end('404 Not Found');
+      return;
+    }
+  }
+  
+  // Serve the file
+  serveFile(filePath, res, isScreenshotRequest);
+}
+
+function createTempServer(port = 3001, siteDir = '_site') {
+  const httpServer = http.createServer((req, res) => {
+    handleRequest(req, res, siteDir);
+  });
+
+  const start = () => {
+    return new Promise((resolve, reject) => {
+      httpServer.listen(port, '0.0.0.0', () => {
+        console.log(`📡 Temp server running at http://localhost:${port}/`);
+        resolve();
+      });
+
+      httpServer.on('error', reject);
+    });
+  };
+
+  const close = () => {
+    return new Promise((resolve) => {
+      httpServer.close(() => {
+        console.log('📡 Temp server closed');
+        resolve();
+      });
+    });
+  };
+
+  return { start, close };
+}
+
+const screenshotCommand = async (options = {}) => {
+  const { 
+    port = 3001,
+    rootDir = '.'
+  } = options;
+
+  console.log('📸 Starting screenshot capture for all pages...');
+
+  // Load config to get ignore patterns
+  const config = await loadSiteConfig(rootDir, false);
+  const ignorePatterns = config?.screenshots?.ignore || [];
+  
+  if (ignorePatterns.length > 0) {
+    console.log('📋 Ignore patterns:', ignorePatterns);
+  }
+
+  // Build the site first
+  console.log('Building site...');
+  await buildSite({ rootDir });
+  console.log('Build complete');
+
+  // Start temporary server
+  const server = createTempServer(port);
+  await server.start();
+
+  // Initialize screenshot capture
+  const screenshotCapture = await createScreenshotCapture(port);
+
+  try {
+    // Capture screenshots for all pages
+    const pagesDir = path.join(rootDir, 'pages');
+    await screenshotCapture.captureAllPages(pagesDir, { ignorePatterns });
+    
+    console.log('✅ All screenshots captured successfully!');
+  } catch (error) {
+    console.error('❌ Error capturing screenshots:', error);
+  } finally {
+    // Clean up
+    await screenshotCapture.close();
+    await server.close();
+  }
+};
+
+export default screenshotCommand;

package/src/utils/loadSiteConfig.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import { pathToFileURL } from 'url';
+import MarkdownIt from 'markdown-it';
 
 /**
  * Load the sites.config.js file from a given directory
@@ -19,7 +20,16 @@ export async function loadSiteConfig(rootDir, throwOnError = true, bustCache = f
     }
     
     const configModule = await import(importUrl);
-    return configModule.default || {};
+    const configExport = configModule.default;
+    
+    // Check if the export is a function
+    if (typeof configExport === 'function') {
+      // Call the function with markdownit constructor
+      return configExport({ markdownit: MarkdownIt }) || {};
+    }
+    
+    // Otherwise return as is (for backward compatibility)
+    return configExport || {};
   } catch (e) {
     // Only ignore file not found errors
     if (e.code === 'ENOENT') {

package/src/cli/screenshot-command.js

@@ -1,167 +0,0 @@
-import http from 'node:http';
-import path from 'node:path';
-import fs from 'node:fs';
-import { existsSync } from 'node:fs';
-import { buildSite } from './build.js';
-import ScreenshotCapture from './screenshot.js';
-
-class TempDevServer {
-  constructor(port = 3001) {
-    this.port = port;
-    this.siteDir = '_site';
-  }
-
-  start() {
-    return new Promise((resolve, reject) => {
-      this.httpServer = http.createServer((req, res) => {
-        this.handleRequest(req, res);
-      });
-
-      this.httpServer.listen(this.port, '0.0.0.0', () => {
-        console.log(`📡 Temp server running at http://localhost:${this.port}/`);
-        resolve();
-      });
-
-      this.httpServer.on('error', reject);
-    });
-  }
-
-  handleRequest(req, res) {
-    const urlParts = req.url.split('?');
-    let urlPath = urlParts[0];
-    const queryString = urlParts[1] || '';
-    
-    // Check if this is a screenshot request
-    const isScreenshotRequest = queryString.includes('screenshot=true');
-    
-    // Default to index.html for root
-    if (urlPath === '/') {
-      urlPath = '/index.html';
-    }
-    
-    // Handle trailing slash - remove it for processing
-    const hasTrailingSlash = urlPath.endsWith('/') && urlPath !== '/';
-    if (hasTrailingSlash) {
-      urlPath = urlPath.slice(0, -1);
-    }
-    
-    // Handle paths without extensions
-    if (!path.extname(urlPath)) {
-      // First try as .html file
-      const htmlPath = path.join(this.siteDir, urlPath + '.html');
-      if (existsSync(htmlPath)) {
-        urlPath = urlPath + '.html';
-      } else {
-        // Try as directory with index.html
-        const indexPath = path.join(this.siteDir, urlPath, 'index.html');
-        if (existsSync(indexPath)) {
-          urlPath = path.join(urlPath, 'index.html');
-        }
-      }
-    }
-    
-    const filePath = path.join(this.siteDir, urlPath);
-    
-    // Check if file exists
-    if (!existsSync(filePath)) {
-      res.writeHead(404);
-      res.end('404 Not Found');
-      return;
-    }
-    
-    // Check if it's a directory
-    const stats = fs.statSync(filePath);
-    if (stats.isDirectory()) {
-      // Try to serve index.html from the directory
-      const indexPath = path.join(filePath, 'index.html');
-      if (existsSync(indexPath)) {
-        return this.serveFile(indexPath, res, isScreenshotRequest);
-      } else {
-        res.writeHead(404);
-        res.end('404 Not Found');
-        return;
-      }
-    }
-    
-    // Serve the file
-    this.serveFile(filePath, res, isScreenshotRequest);
-  }
-  
-  serveFile(filePath, res, skipWebSocket = false) {
-    const ext = path.extname(filePath);
-    const contentType = this.getContentType(ext);
-    
-    try {
-      let content = fs.readFileSync(filePath);
-      
-      res.writeHead(200, { 'Content-Type': contentType });
-      res.end(content);
-    } catch (err) {
-      console.error('Error serving file:', err);
-      res.writeHead(500);
-      res.end('Internal Server Error');
-    }
-  }
-
-  getContentType(ext) {
-    const types = {
-      '.html': 'text/html',
-      '.css': 'text/css',
-      '.js': 'application/javascript',
-      '.json': 'application/json',
-      '.png': 'image/png',
-      '.jpg': 'image/jpeg',
-      '.gif': 'image/gif',
-      '.svg': 'image/svg+xml',
-      '.ico': 'image/x-icon'
-    };
-    return types[ext] || 'application/octet-stream';
-  }
-
-  close() {
-    return new Promise((resolve) => {
-      this.httpServer.close(() => {
-        console.log('📡 Temp server closed');
-        resolve();
-      });
-    });
-  }
-}
-
-const screenshotCommand = async (options = {}) => {
-  const { 
-    port = 3001,
-    rootDir = '.'
-  } = options;
-
-  console.log('📸 Starting screenshot capture for all pages...');
-
-  // Build the site first
-  console.log('Building site...');
-  await buildSite({ rootDir });
-  console.log('Build complete');
-
-  // Start temporary server
-  const server = new TempDevServer(port);
-  await server.start();
-
-  // Initialize screenshot capture
-  const screenshotCapture = new ScreenshotCapture(port);
-  await screenshotCapture.init();
-
-  try {
-    // Capture screenshots for all pages
-    const pagesDir = path.join(rootDir, 'pages');
-    await screenshotCapture.captureAllPages(pagesDir);
-    
-    console.log('✅ All screenshots captured successfully!');
-  } catch (error) {
-    console.error('❌ Error capturing screenshots:', error);
-  } finally {
-    // Clean up
-    await screenshotCapture.close();
-    await server.close();
-  }
-};
-
-export default screenshotCommand;

package/src/cli/screenshot.js

@@ -1,145 +0,0 @@
-import { chromium } from 'playwright';
-import path from 'node:path';
-import fs from 'node:fs';
-
-class ScreenshotCapture {
-  constructor(port = 3001, outputDir = '_screenshots') {
-    this.port = port;
-    this.outputDir = outputDir;
-    this.browser = null;
-    this.context = null;
-    this.isInitialized = false;
-  }
-
-  async init() {
-    if (this.isInitialized) return;
-    
-    console.log('🎬 Initializing Playwright browser...');
-    this.browser = await chromium.launch({ 
-      headless: true
-    });
-    this.context = await this.browser.newContext({
-      viewport: { width: 1366, height: 768 },  // Most common laptop viewport
-      deviceScaleFactor: 0.75  // Reduce pixel density for smaller PNG files
-    });
-    this.isInitialized = true;
-    console.log('✅ Browser initialized for screenshots');
-  }
-
-  async capturePageScreenshot(pagePath) {
-    if (!this.isInitialized) {
-      await this.init();
-    }
-
-    try {
-      // Convert file path to URL path
-      // pages/index.md -> /
-      // pages/about.md -> /about
-      // pages/store/index.md -> /store/
-      // pages/store/products.md -> /store/products
-      let urlPath = pagePath
-        .replace(/^pages\//, '')
-        .replace(/\.(md|yaml|yml)$/, '');
-      
-      if (urlPath === 'index') {
-        urlPath = '/';
-      } else if (urlPath.endsWith('/index')) {
-        urlPath = urlPath.replace(/\/index$/, '/');
-      } else if (urlPath) {
-        // Add leading slash if not root
-        urlPath = '/' + urlPath;
-      }
-
-      const url = `http://localhost:${this.port}${urlPath}?screenshot=true`;
-      
-      // Determine screenshot path
-      // / -> index.png
-      // /about -> about.png
-      // /store/ -> store/index.png
-      // /store/products -> store/products.png
-      let screenshotPath;
-      if (urlPath === '/') {
-        screenshotPath = 'index.png';
-      } else if (urlPath.endsWith('/')) {
-        screenshotPath = urlPath.slice(1, -1) + '/index.png';
-      } else {
-        screenshotPath = urlPath.slice(1) + '.png';
-      }
-      
-      const fullScreenshotPath = path.join(this.outputDir, screenshotPath);
-      
-      // Ensure directory exists
-      const screenshotDir = path.dirname(fullScreenshotPath);
-      if (!fs.existsSync(screenshotDir)) {
-        fs.mkdirSync(screenshotDir, { recursive: true });
-      }
-
-      console.log(`📸 Capturing screenshot: ${url} -> ${fullScreenshotPath}`);
-      
-      const page = await this.context.newPage();
-      
-      try {
-        // Navigate to the page
-        await page.goto(url, { 
-          waitUntil: 'networkidle',
-          timeout: 30000 
-        });
-        
-        // // Wait a bit for content to load
-        // await page.waitForTimeout(2000);
-        
-        // Take screenshot with PNG optimization
-        await page.screenshot({ 
-          path: fullScreenshotPath,
-          fullPage: true,
-          type: 'png'
-        });
-        
-        console.log(`✅ Screenshot saved: ${fullScreenshotPath}`);
-      } catch (error) {
-        console.error(`❌ Failed to capture ${url}:`, error.message);
-      } finally {
-        await page.close();
-      }
-    } catch (error) {
-      console.error('❌ Screenshot error:', error);
-    }
-  }
-
-  async captureAllPages(pagesDir) {
-    if (!fs.existsSync(pagesDir)) {
-      console.log('Pages directory does not exist:', pagesDir);
-      return;
-    }
-
-    const captureRecursive = async (dir, basePath = '') => {
-      const entries = fs.readdirSync(dir, { withFileTypes: true });
-      
-      for (const entry of entries) {
-        const fullPath = path.join(dir, entry.name);
-        const relativePath = path.join(basePath, entry.name);
-        
-        if (entry.isDirectory()) {
-          // Recurse into subdirectories
-          await captureRecursive(fullPath, relativePath);
-        } else if (entry.isFile() && (entry.name.endsWith('.md') || entry.name.endsWith('.yaml') || entry.name.endsWith('.yml'))) {
-          // Capture screenshot for this page
-          const pagePath = path.join('pages', relativePath);
-          await this.capturePageScreenshot(pagePath);
-        }
-      }
-    };
-
-    await captureRecursive(pagesDir);
-  }
-
-  async close() {
-    if (this.browser) {
-      await this.browser.close();
-      this.isInitialized = false;
-      console.log('🔚 Browser closed');
-    }
-  }
-}
-
-export default ScreenshotCapture;