From 73793f43a1d613bc53eff82f51dca13692075cec Mon Sep 17 00:00:00 2001 From: Dayowe Date: Mon, 18 Aug 2025 09:05:00 +0200 Subject: [PATCH] Reorganize source structure for better maintainability MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move from 3-file structure to organized 5-file structure - Create css/ and js/ subdirectories for better organization - Split styles into main.css and themes.css for clarity - Extract configuration constants to separate config.js file - Rename template.html to index.html for clarity - Update build.js to handle new organized structure - Replace magic numbers with CALCULATOR_CONFIG constants New structure: src/ ├── index.html (HTML template) ├── css/ │ ├── main.css (Core styles) │ └── themes.css (Theme variations) └── js/ ├── config.js (Configuration constants) └── calculator.js (Main logic) This provides a good balance between organization and simplicity, making the codebase easier to maintain without over-modularization. --- build.js | 80 +++--- iframe.html | 27 +- src/css/main.css | 440 +++++++++++++++++++++++++++++ src/{styles.css => css/themes.css} | 440 ----------------------------- src/{template.html => index.html} | 0 src/{ => js}/calculator.js | 12 +- src/js/config.js | 11 + sundog-dog-food-calculator.js | 26 +- 8 files changed, 545 insertions(+), 491 deletions(-) create mode 100644 src/css/main.css rename src/{styles.css => css/themes.css} (78%) rename src/{template.html => index.html} (100%) rename src/{ => js}/calculator.js (99%) create mode 100644 src/js/config.js diff --git a/build.js b/build.js index 5a25838..06945c3 100644 --- a/build.js +++ b/build.js @@ -1,15 +1,17 @@ #!/usr/bin/env node /** - * Dog Calculator Build System - MODULAR VERSION + * Dog Calculator Build System - ORGANIZED VERSION * * This build script generates iframe.html and sundog-dog-food-calculator.js - * from modular source files in the src/ directory. + * from organized source files in the src/ directory. * - * Source files: - * - src/styles.css - All CSS styles - * - src/template.html - HTML structure - * - src/calculator.js - JavaScript functionality + * Source structure: + * - src/index.html - HTML template + * - src/css/main.css - Main styles + * - src/css/themes.css - Theme-specific styles + * - src/js/config.js - Configuration constants + * - src/js/calculator.js - JavaScript functionality * * Output files: * - iframe.html - Standalone calculator page @@ -21,40 +23,52 @@ const fs = require('fs'); const path = require('path'); -console.log('🎯 Dog Calculator Build System - MODULAR VERSION'); +console.log('🎯 Dog Calculator Build System - ORGANIZED VERSION'); console.log(''); /** - * Read modular components from src directory + * Read organized components from src directory */ 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'); + throw new Error('src directory not found'); } - // Read CSS - const cssPath = path.join(srcDir, 'styles.css'); - if (!fs.existsSync(cssPath)) { - throw new Error('src/styles.css not found'); + // Read CSS files + const mainCssPath = path.join(srcDir, 'css', 'main.css'); + const themesCssPath = path.join(srcDir, 'css', 'themes.css'); + if (!fs.existsSync(mainCssPath)) { + throw new Error('src/css/main.css not found'); } - const css = fs.readFileSync(cssPath, 'utf8').trim(); + if (!fs.existsSync(themesCssPath)) { + throw new Error('src/css/themes.css not found'); + } + const mainCss = fs.readFileSync(mainCssPath, 'utf8').trim(); + const themesCss = fs.readFileSync(themesCssPath, 'utf8').trim(); + const css = mainCss + '\n\n' + themesCss; // Read HTML template - const htmlPath = path.join(srcDir, 'template.html'); + const htmlPath = path.join(srcDir, 'index.html'); if (!fs.existsSync(htmlPath)) { - throw new Error('src/template.html not found'); + throw new Error('src/index.html not found'); } const html = fs.readFileSync(htmlPath, 'utf8').trim(); - // Read JavaScript - const jsPath = path.join(srcDir, 'calculator.js'); - if (!fs.existsSync(jsPath)) { - throw new Error('src/calculator.js not found'); + // Read JavaScript files + const configPath = path.join(srcDir, 'js', 'config.js'); + const calculatorPath = path.join(srcDir, 'js', 'calculator.js'); + if (!fs.existsSync(configPath)) { + throw new Error('src/js/config.js not found'); } - const js = fs.readFileSync(jsPath, 'utf8').trim(); + if (!fs.existsSync(calculatorPath)) { + throw new Error('src/js/calculator.js not found'); + } + const config = fs.readFileSync(configPath, 'utf8').trim(); + const calculator = fs.readFileSync(calculatorPath, 'utf8').trim(); + const js = config + '\n\n' + calculator; return { css, html, js }; } @@ -259,11 +273,11 @@ function createWidgetJS(css, html, js) { */ function build() { try { - console.log('📖 Reading modular components from src/ directory...'); + console.log('📖 Reading organized 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(' ✅ src/index.html (' + html.split('\n').length + ' lines)'); + console.log(' ✅ src/css/main.css + themes.css (' + css.split('\n').length + ' lines)'); + console.log(' ✅ src/js/config.js + calculator.js (' + js.split('\n').length + ' lines)'); console.log(''); console.log('📦 Backing up existing files...'); @@ -286,21 +300,23 @@ function build() { console.log('🎉 Build completed successfully!'); console.log(''); console.log('📋 Summary:'); - 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(' Source structure:'); + console.log(' • src/index.html - HTML structure'); + console.log(' • src/css/main.css - Core styles'); + console.log(' • src/css/themes.css - Theme variations'); + console.log(' • src/js/config.js - Configuration'); + console.log(' • src/js/calculator.js - Main 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 files in src/ directory'); + console.log('🔄 Your workflow:'); + console.log(' 1. Edit organized files in src/'); console.log(' 2. Run: node build.js'); console.log(' 3. Both output files are regenerated!'); console.log(''); - console.log('💡 Now you can easily read and edit each part separately!'); + console.log('💡 Clean, organized structure - easy to maintain!'); } catch (error) { console.error('❌ Build failed:', error.message); diff --git a/iframe.html b/iframe.html index 1c45b9f..2e6f20f 100644 --- a/iframe.html +++ b/iframe.html @@ -448,7 +448,8 @@ } /* Dark theme - manual override */ - .dog-calculator-container.theme-dark { + +.dog-calculator-container.theme-dark { --bg-primary: #24202d; --bg-secondary: #312b3b; --border-color: #433c4f; @@ -2024,6 +2025,18 @@