What's New? 🚀
Centralized Components
All common HTML elements (header, footer, theme switcher, etc.) are now stored in reusable components in the components/ directory.
No More Duplication
Instead of copying the same HTML across multiple files, we now include components using data attributes or JavaScript loading.
Easy Maintenance
Update a component once, and the change applies to all pages using that component. Perfect for fixing bugs or adding new features!
How It Works 🛠️
1. Include Component Loader
2. Use Data Attributes
3. Components Load Automatically
The component loader finds all elements with data-component attributes and loads the corresponding HTML from the components directory.
✨ Benefits
- Consistency: All pages use the same components
- Maintainability: Update once, deploy everywhere
- Speed: Faster development with reusable templates
- Reliability: Components are cached and work offline
Available Components 📦
🎨 Theme Switcher
Interactive theme switcher with multiple color options (you're using it right now!)
🔗 Back Navigation
Customizable back navigation with hover effects (see above)
👤 Footer
Complete footer with social links and credits (see below)
🧠 Head Common
Common HTML head section with all CSS variables and base styles
⚡ Scripts Common
Common JavaScript functionality including theme switching and animations
Creating New Pages 📝
Use the Template
Copy components/page-template.html and customize it for your new page.