diff --git a/build.js b/build.js index b896b72..5a25838 100644 --- a/build.js +++ b/build.js @@ -1,46 +1,60 @@ #!/usr/bin/env node /** - * Dog Calculator Build System - PRODUCTION VERSION + * Dog Calculator Build System - MODULAR VERSION * - * This FIXED build script generates iframe.html and dog-calculator-widget.js - * with EXACTLY the same functionality from iframe.html as the single source of truth. + * This build script generates iframe.html and sundog-dog-food-calculator.js + * from modular source files in the src/ directory. + * + * Source files: + * - src/styles.css - All CSS styles + * - src/template.html - HTML structure + * - src/calculator.js - JavaScript functionality + * + * Output files: + * - iframe.html - Standalone calculator page + * - sundog-dog-food-calculator.js - Embeddable widget * * Usage: node build.js - * - * ✅ WORKS CORRECTLY - Fixed the previous broken implementation */ const fs = require('fs'); const path = require('path'); -console.log('🎯 Dog Calculator Build System - FIXED & WORKING'); +console.log('🎯 Dog Calculator Build System - MODULAR VERSION'); console.log(''); /** - * Extract and parse components from the master iframe.html + * Read modular components from src directory */ -function parseIframeComponents() { - if (!fs.existsSync('iframe.html')) { - throw new Error('iframe.html not found - this is the master file that should exist'); +function readSourceComponents() { + const srcDir = 'src'; + + // Check if src directory exists + if (!fs.existsSync(srcDir)) { + throw new Error('src directory not found - please ensure modular files exist'); } - const content = fs.readFileSync('iframe.html', 'utf8'); + // Read CSS + const cssPath = path.join(srcDir, 'styles.css'); + if (!fs.existsSync(cssPath)) { + throw new Error('src/styles.css not found'); + } + const css = fs.readFileSync(cssPath, 'utf8').trim(); - // Extract CSS (everything between ) - const cssMatch = content.match(/ @@ -80,30 +100,14 @@ function generateIframe(css, html, js) { `; - // Since iframe.html is our source, we don't overwrite it - // This function is here for consistency and testing return content; } /** - * No transformation needed - keep original class names for consistency - */ -function transformCSSForWidget(css) { - return css; -} - -/** - * No transformation needed - keep original class names for consistency - */ -function transformHTMLForWidget(html) { - return html; -} - -/** - * Create production-ready widget JavaScript that uses the ACTUAL extracted JS from iframe.html + * Create production-ready widget JavaScript */ function createWidgetJS(css, html, js) { - // Transform the extracted JavaScript from iframe.html to work as a widget + // Transform the JavaScript from calculator.js to work as a widget // Replace the iframe's DOMContentLoaded listener with widget initialization let transformedJS = js @@ -175,12 +179,18 @@ function createWidgetJS(css, html, js) { } }$2`); + // Add CSS variables to widget CSS + const widgetCSS = `/* Sundog Dog Food Calorie Calculator Styles */ + + /* CSS Variables for theming */ + ${css}`; + const widgetCode = `/** * Dog Calorie Calculator Widget * Embeddable JavaScript widget for websites * - * THIS CODE IS AUTO-GENERATED FROM iframe.html - DO NOT EDIT MANUALLY - * Edit iframe.html and run 'node build.js' to update this file + * THIS CODE IS AUTO-GENERATED FROM src/ FILES - DO NOT EDIT MANUALLY + * Edit files in src/ directory and run 'node build.js' to update * * Usage: * @@ -197,7 +207,7 @@ function createWidgetJS(css, html, js) { 'use strict'; // Inject widget styles - const CSS_STYLES = \`${css}\`; + const CSS_STYLES = \`${widgetCSS}\`; function injectStyles() { if (document.getElementById('dog-calculator-styles')) return; @@ -208,7 +218,7 @@ function createWidgetJS(css, html, js) { document.head.appendChild(style); } - // ACTUAL JavaScript from iframe.html (transformed for widget use) + // JavaScript from src/calculator.js (transformed for widget use) ${transformedJS} // Auto-initialize widgets on page load @@ -249,37 +259,57 @@ function createWidgetJS(css, html, js) { */ function build() { try { - console.log('📖 Reading components from iframe.html (master source)...'); - const { css, html, js } = parseIframeComponents(); + console.log('📖 Reading modular components from src/ directory...'); + const { css, html, js } = readSourceComponents(); + console.log(' ✅ src/styles.css (' + css.split('\n').length + ' lines)'); + console.log(' ✅ src/template.html (' + html.split('\n').length + ' lines)'); + console.log(' ✅ src/calculator.js (' + js.split('\n').length + ' lines)'); + console.log(''); console.log('📦 Backing up existing files...'); backupFiles(); - console.log('🏗️ Generating sundog-dog-food-calculator.js...'); + console.log(''); + console.log('🏗️ Building output files...'); + + // Generate iframe.html + const iframeContent = generateIframe(css, html, js); + fs.writeFileSync('iframe.html', iframeContent); + console.log(' ✅ Generated iframe.html'); + + // Generate widget const widgetCode = createWidgetJS(css, html, js); fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode); - console.log('✅ Generated sundog-dog-food-calculator.js'); + console.log(' ✅ Generated sundog-dog-food-calculator.js'); console.log(''); console.log('🎉 Build completed successfully!'); console.log(''); console.log('📋 Summary:'); - console.log(' ✅ iframe.html - Master source (no changes needed)'); - console.log(' ✅ sundog-dog-food-calculator.js - Generated with identical functionality'); + console.log(' Source files (easy to edit):'); + console.log(' • src/styles.css - All styles and theming'); + console.log(' • src/template.html - HTML structure'); + console.log(' • src/calculator.js - JavaScript logic'); + console.log(''); + console.log(' Generated files:'); + console.log(' • iframe.html - Standalone calculator'); + console.log(' • sundog-dog-food-calculator.js - Embeddable widget'); console.log(''); console.log('🔄 Your new workflow:'); - console.log(' 1. Edit iframe.html for any changes (calculations, design, layout)'); + console.log(' 1. Edit files in src/ directory'); console.log(' 2. Run: node build.js'); - console.log(' 3. Both files now have the same functionality!'); + console.log(' 3. Both output files are regenerated!'); console.log(''); - console.log('💡 No more maintaining two separate files!'); + console.log('💡 Now you can easily read and edit each part separately!'); } catch (error) { console.error('❌ Build failed:', error.message); + console.error(error.stack); process.exit(1); } } +// Run build if called directly if (require.main === module) { build(); } diff --git a/iframe.html b/iframe.html index 1855437..1c45b9f 100644 --- a/iframe.html +++ b/iframe.html @@ -2022,9 +2022,6 @@ - - - @@ -1855,7 +1855,7 @@ document.head.appendChild(style); } - // ACTUAL JavaScript from iframe.html (transformed for widget use) + // JavaScript from src/calculator.js (transformed for widget use) /** * Dog Calorie Calculator - iframe version * by Canine Nutrition and Wellness