build-static.js.bak

const fs = require('fs');
const path = require('path');
const { minify } = require('html-minifier-terser');

const viewsDirectory = './src/views/';
const layoutDirectory = './src/layout/';
const componentsDirectory = './src/components/';
const distDirectory = './dist/';

// Meta tags configuration for each view
const viewMeta = {
    'home': {
        title: 'Home - Dissent.js',
        description: 'Welcome to Dissent.js - A lightweight JavaScript framework for building modern web applications'
    },
    'about': {
        title: 'About - Dissent.js',
        description: 'Learn about Dissent.js - A clean, lightweight JavaScript library for simplified web development'
    },
    '404': {
        title: 'Page Not Found - Dissent.js',
        description: 'The page you are looking for could not be found'
    }
};

function getDefaultMeta() {
    return {
        title: 'Dissent.js',
        description: 'Discover Dissent.js, a lightweight, flexible JavaScript framework for building modern web applications'
    };
}

function injectComponents(content) {
    const componentRegex = /<div class="([\w-]+)"><\/div>/g;
    let processedContent = content;
    let match;

    while ((match = componentRegex.exec(content)) !== null) {
        const componentName = match[1];
        const componentHtmlPath = path.join(componentsDirectory, componentName, `${componentName}.html`);

        if (fs.existsSync(componentHtmlPath)) {
            const componentContent = fs.readFileSync(componentHtmlPath, 'utf8');
            const replacement = `<div class="${componentName}">${componentContent}</div>`;
            processedContent = processedContent.replace(match[0], replacement);
        }
    }

    return processedContent;
}

function generateStaticPages() {
    // Check for existing assets before cleaning
    const existingAssets = {};
    const assets = ['main.min.css', 'main.min.js'];
    assets.forEach(asset => {
        const assetPath = path.join(__dirname, 'dist', asset);
        if (fs.existsSync(assetPath)) {
            existingAssets[asset] = fs.readFileSync(assetPath, 'utf8');
        }
    });

    // Clean and recreate dist directory
    if (fs.existsSync(distDirectory)) {
        fs.rmSync(distDirectory, { recursive: true, force: true });
    }
    fs.mkdirSync(distDirectory, { recursive: true });

    // Read the base template
    const baseTemplatePath = path.join(__dirname, 'src', 'index.html');
    let baseTemplate = fs.readFileSync(baseTemplatePath, 'utf8');

    // Inject header and footer into base template
    const headerPath = path.join(layoutDirectory, 'header', 'header.html');
    const footerPath = path.join(layoutDirectory, 'footer', 'footer.html');

    if (fs.existsSync(headerPath)) {
        const headerContent = fs.readFileSync(headerPath, 'utf8');
        baseTemplate = baseTemplate.replace(/<header class="header">[\s\S]*?<\/header>/, `<header class="header">${headerContent}</header>`);
    }

    if (fs.existsSync(footerPath)) {
        const footerContent = fs.readFileSync(footerPath, 'utf8');
        baseTemplate = baseTemplate.replace(/<footer class="footer">[\s\S]*?<\/footer>/, `<footer class="footer">${footerContent}</footer>`);
    }

    // Get all views
    const views = fs.readdirSync(viewsDirectory).filter(item => {
        const itemPath = path.join(viewsDirectory, item);
        return fs.statSync(itemPath).isDirectory();
    });

    // Generate page for each view
    views.forEach(viewName => {
        const viewHtmlPath = path.join(viewsDirectory, viewName, `${viewName}.html`);

        if (fs.existsSync(viewHtmlPath)) {
            let viewContent = fs.readFileSync(viewHtmlPath, 'utf8');

            // Inject components into view content
            viewContent = injectComponents(viewContent);

            // Create full page HTML
            let pageHtml = baseTemplate.replace(
                /<div id="view-container"><\/div>/,
                `<div id="view-container">${viewContent}</div>`
            );

            // Update meta tags
            const meta = viewMeta[viewName] || getDefaultMeta();
            pageHtml = pageHtml.replace(
                /<title>[^<]*<\/title>/,
                `<title>${meta.title}</title>`
            );
            pageHtml = pageHtml.replace(
                /<meta name="description" content="[^"]*">/,
                `<meta name="description" content="${meta.description}">`
            );

            // Fix image paths in the generated HTML
            pageHtml = pageHtml.replace(/\.\.\/\.\.\/images\//g, './images/');

            // Add component CSS links to the head for all views
            let cssLinks = '';

            // Add content CSS for the home page
            if (viewName === 'home') {
                cssLinks += '<link rel="stylesheet" href="./components/content/content.css">';
            }

            // Always add layout CSS files (header, footer, nav)
            cssLinks += '<link rel="stylesheet" href="./layout/header/header.css">';
            cssLinks += '<link rel="stylesheet" href="./layout/footer/footer.css">';
            cssLinks += '<link rel="stylesheet" href="./layout/nav/nav.css">';

            // Add all CSS links to the head
            pageHtml = pageHtml.replace('</head>', cssLinks + '</head>');

            // Write the static page
            const outputPath = path.join(distDirectory, `${viewName}.html`);
            fs.writeFileSync(outputPath, pageHtml);
            console.log(`Generated static page: ${outputPath}`);
        }
    });

    // Generate index.html that redirects to home.html
    const indexContent = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="0; url=home.html">
    <title>Redirecting...</title>
</head>
<body>
    <p>Redirecting to <a href="home.html">home page</a>...</p>
</body>
</html>`;

    fs.writeFileSync(path.join(distDirectory, 'index.html'), indexContent);
    console.log('Generated index.html redirect');

    return existingAssets;
}

function copyAssets(existingAssets = {}) {
    // Copy images from src
    const imagesSrc = path.join(__dirname, 'src', 'images');
    const imagesDest = path.join(distDirectory, 'images');
    if (fs.existsSync(imagesSrc)) {
        if (!fs.existsSync(imagesDest)) {
            fs.mkdirSync(imagesDest, { recursive: true });
        }
        copyDirectoryRecursive(imagesSrc, imagesDest);
        console.log('Copied images directory');
    }

    // Copy component files (CSS, JS, HTML)
    copyComponentFiles();

    // For CSS and JS, use existing assets if available, otherwise create minimal versions
    const assets = ['main.min.css', 'main.min.js'];
    let assetsFound = 0;

    assets.forEach(asset => {
        const destPath = path.join(distDirectory, asset);

        if (existingAssets[asset]) {
            // Use the asset that was captured before cleaning
            fs.writeFileSync(destPath, existingAssets[asset]);
            console.log(`Used existing asset: ${asset}`);
            assetsFound++;
        } else {
            // Create minimal fallback assets
            if (asset === 'main.min.css') {
                // Create a minimal CSS file
                const minimalCss = `
/* Minimal styles for Dissent.js static build */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header, footer { padding: 1rem; background: #f5f5f5; }
main { padding: 2rem; }
h1, h2, h3 { color: #333; }
a { color: #007acc; text-decoration: none; }
a:hover { text-decoration: underline; }
`;
                fs.writeFileSync(destPath, minimalCss.trim());
                console.log(`Created minimal CSS: ${asset}`);
                assetsFound++;
            } else if (asset === 'main.min.js') {
                // Create a minimal JS file or skip it
                const minimalJs = `
// Minimal JavaScript for Dissent.js static build
console.log('Dissent.js static build loaded');

// Make sure paths to components work in static build
window.addEventListener('DOMContentLoaded', function() {
    // Load content component if present
    const contentElements = document.querySelectorAll('.content');
    if (contentElements.length > 0) {
        // Load the script
        const contentScript = document.createElement('script');
        contentScript.src = './components/content/content.js';
        document.head.appendChild(contentScript);
    }
    
    // Always load layout scripts
    const headerScript = document.createElement('script');
    headerScript.src = './layout/header/header.js';
    document.head.appendChild(headerScript);
    
    const footerScript = document.createElement('script');
    footerScript.src = './layout/footer/footer.js';
    document.head.appendChild(footerScript);
    
    const navScript = document.createElement('script');
    navScript.src = './layout/nav/nav.js';
    document.head.appendChild(navScript);
});
`;
                fs.writeFileSync(destPath, minimalJs.trim());
                console.log(`Created minimal JS: ${asset}`);
                assetsFound++;
            }
        }
    });

    if (assetsFound < assets.length) {
        console.log(`Note: Created ${assetsFound}/${assets.length} assets. For full functionality, run 'yarn build' first.`);
    }
}

// Function to copy component files
function copyComponentFiles() {
    // Copy component files
    const componentsSrc = path.join(__dirname, 'src', 'components');
    const componentsDest = path.join(distDirectory, 'components');

    if (fs.existsSync(componentsSrc)) {
        if (!fs.existsSync(componentsDest)) {
            fs.mkdirSync(componentsDest, { recursive: true });
        }

        // Copy the content component files specifically
        const contentSrc = path.join(componentsSrc, 'content');
        if (fs.existsSync(contentSrc)) {
            const contentDest = path.join(componentsDest, 'content');
            if (!fs.existsSync(contentDest)) {
                fs.mkdirSync(contentDest, { recursive: true });
            }

            // Copy content.html and fix image paths
            const contentHtml = path.join(contentSrc, 'content.html');
            if (fs.existsSync(contentHtml)) {
                let contentHtmlData = fs.readFileSync(contentHtml, 'utf8');
                // Fix image paths from ../../images/ to ./images/
                contentHtmlData = contentHtmlData.replace(/\.\.\/\.\.\/images\//g, './images/');
                fs.writeFileSync(path.join(contentDest, 'content.html'), contentHtmlData);
                console.log('Copied and fixed image paths in content.html');
            }

            // Copy content.js
            const contentJs = path.join(contentSrc, 'content.js');
            if (fs.existsSync(contentJs)) {
                fs.copyFileSync(contentJs, path.join(contentDest, 'content.js'));
            }

            // Copy content.css
            const contentCss = path.join(contentSrc, 'content.css');
            if (fs.existsSync(contentCss)) {
                fs.copyFileSync(contentCss, path.join(contentDest, 'content.css'));
            } else {
                // If CSS doesn't exist, try to copy and rename the SCSS file
                const contentScss = path.join(contentSrc, 'content.scss');
                if (fs.existsSync(contentScss)) {
                    // Basic SCSS conversion - Just copy as CSS for now
                    fs.copyFileSync(contentScss, path.join(contentDest, 'content.css'));
                }
            }

            console.log('Copied content component files');
        }
    }

    // Copy layout files (header and footer)
    copyLayoutFiles();
}

// Function to copy layout files (header and footer)
function copyLayoutFiles() {
    const layoutSrc = path.join(__dirname, 'src', 'layout');
    const layoutDest = path.join(distDirectory, 'layout');

    if (fs.existsSync(layoutSrc)) {
        if (!fs.existsSync(layoutDest)) {
            fs.mkdirSync(layoutDest, { recursive: true });
        }

        // Copy header files
        copyLayoutComponent('header', layoutSrc, layoutDest);

        // Copy footer files
        copyLayoutComponent('footer', layoutSrc, layoutDest);

        // Copy nav files
        copyLayoutComponent('nav', layoutSrc, layoutDest);

        console.log('Copied layout component files');
    }
}

// Helper function to copy a layout component
function copyLayoutComponent(componentName, layoutSrc, layoutDest) {
    const componentSrc = path.join(layoutSrc, componentName);
    if (fs.existsSync(componentSrc)) {
        const componentDest = path.join(layoutDest, componentName);
        if (!fs.existsSync(componentDest)) {
            fs.mkdirSync(componentDest, { recursive: true });
        }

        // Copy HTML
        const htmlFile = path.join(componentSrc, `${componentName}.html`);
        if (fs.existsSync(htmlFile)) {
            fs.copyFileSync(htmlFile, path.join(componentDest, `${componentName}.html`));
        }

        // Copy JS
        const jsFile = path.join(componentSrc, `${componentName}.js`);
        if (fs.existsSync(jsFile)) {
            fs.copyFileSync(jsFile, path.join(componentDest, `${componentName}.js`));
        }

        // Copy CSS or SCSS
        const cssFile = path.join(componentSrc, `${componentName}.css`);
        if (fs.existsSync(cssFile)) {
            fs.copyFileSync(cssFile, path.join(componentDest, `${componentName}.css`));
        } else {
            // If CSS doesn't exist, try to copy and rename the SCSS file
            const scssFile = path.join(componentSrc, `${componentName}.scss`);
            if (fs.existsSync(scssFile)) {
                // Basic SCSS conversion - Just copy as CSS for now
                fs.copyFileSync(scssFile, path.join(componentDest, `${componentName}.css`));
            }
        }
    }
}
}

// Helper function to copy directory recursively
function copyDirectoryRecursive(source, destination) {
    const entries = fs.readdirSync(source, { withFileTypes: true });

    for (const entry of entries) {
        const sourcePath = path.join(source, entry.name);
        const destPath = path.join(destination, entry.name);

        if (entry.isDirectory()) {
            if (!fs.existsSync(destPath)) {
                fs.mkdirSync(destPath, { recursive: true });
            }
            copyDirectoryRecursive(sourcePath, destPath);
        } else {
            fs.copyFileSync(sourcePath, destPath);
        }
    }
}

function minifyHtmlFiles() {
    // Dynamically find all HTML files in the dist directory
    const files = fs.readdirSync(distDirectory);
    const htmlFiles = files.filter(file => file.endsWith('.html'));

    console.log(`Found ${htmlFiles.length} HTML files to minify: ${htmlFiles.join(', ')}`);

    htmlFiles.forEach(fileName => {
        const filePath = path.join(distDirectory, fileName);
        const content = fs.readFileSync(filePath, 'utf8');
        minify(content, {
            collapseWhitespace: true,
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
        })
            .then(minified => {
                fs.writeFileSync(filePath, minified);
                console.log(`Minified: ${fileName}`);
            })
            .catch(err => {
                console.error(`Error minifying ${fileName}:`, err);
            });
    });
}

// Run the static build
console.log('Building static version of Dissent.js...');
const existingAssets = generateStaticPages();
copyAssets(existingAssets);
minifyHtmlFiles();
console.log('Static build complete! SEO-friendly HTML files generated in dist/');