Merge pull request #5 from RiddleAndCode/eckelj/footer

Eckelj/footer

Author: eckelj

FOOTER_IMPLEMENTATION.md

@@ -0,0 +1,67 @@
+# Footer Implementation
+
+## Overview
+The footer section (starting from line 620) has been extracted into a reusable component that's loaded dynamically via JavaScript.
+
+## Files Created
+
+### 1. `footer-template.html`
+Contains the complete footer HTML including:
+- Footer navigation menu
+- Social media links
+- Legal links
+- Cookie consent banner
+- All footer scripts (jQuery, Webflow, Swiper, Google Tag Manager)
+
+### 2. `scripts/load-footer.js`
+JavaScript module that:
+- Automatically calculates the correct relative path based on page depth
+- Fetches the footer template
+- Injects it into the `#footer-placeholder` div
+- Re-initializes any scripts within the footer
+- Triggers a `footerLoaded` event when complete
+
+## Implementation
+
+All HTML files (52 total) have been updated to replace the footer section with:
+
+```html
+<--read-inspelnings Footer loaded dynamically -->
+<div id="footer-placeholder"></div>
+<script src="scripts/load-footer.js"></script>
+</body>
+</html>
+```
+
+The script automatically handles relative paths:
+- Root level files: `scripts/load-footer.js`
+- One level deep: `../scripts/load-footer.js`  
+- Two levels deep: `../../scripts/load-footer.js`
+
+## Benefits
+
+1. **Single source of truth**: Footer content is maintained in one file
+2. **Easy updates**: Changes to footer affect all pages automatically
+3. **Reduced file size**: Each HTML file is ~245 lines smaller
+4. **Maintainability**: No need to update 52 files when changing footer
+5. **Consistency**: Ensures footer is identical across all pages
+
+## Files Updated
+
+- 52 HTML files across root, /de, /company, /product, /news, /showcase, /energy-community directories
+- 3 presentation files in /slides were skipped (they don't have the standard footer)
+
+## Testing
+
+To test if the footer loads correctly:
+1. Open any page in a browser
+2. Check browser console for any errors
+3. Verify footer content appears at the bottom
+4. Test footer links and functionality
+5. Verify cookie consent banner works
+
+## Rollback
+
+If needed, you can rollback by:
+1. Delete `footer-template.html` and `scripts/load-footer.js`
+2. Use git to restore the original HTML files

company/about-us.html

@@ -0,0 +1,61 @@
+#!/usr/bin/env python3
+import json
+
+# Read the footer template
+with open('footer-template.html', 'r', encoding='utf-8') as f:
+    footer_html = f.read()
+
+# Escape the HTML for JavaScript
+footer_escaped = json.dumps(footer_html)
+
+# Create the new JavaScript file
+js_content = f'''/**
+ * Load footer template into all pages
+ * Footer content is embedded directly to avoid CORS issues with file:// protocol
+ */
+(function() {{
+  'use strict';
+  
+  const footerHTML = {footer_escaped};
+  
+  function loadFooter() {{
+    const footerPlaceholder = document.getElementById('footer-placeholder');
+    if (!footerPlaceholder) {{
+      console.warn('Footer placeholder not found');
+      return;
+    }}
+    
+    // Insert the footer HTML
+    footerPlaceholder.innerHTML = footerHTML;
+    
+    // Re-initialize any scripts that were in the footer
+    const scripts = footerPlaceholder.querySelectorAll('script');
+    scripts.forEach(oldScript => {{
+      const newScript = document.createElement('script');
+      Array.from(oldScript.attributes).forEach(attr => {{
+        newScript.setAttribute(attr.name, attr.value);
+      }});
+      newScript.textContent = oldScript.textContent;
+      oldScript.parentNode.replaceChild(newScript, oldScript);
+    }});
+    
+    // Trigger a custom event when footer is loaded
+    document.dispatchEvent(new CustomEvent('footerLoaded'));
+  }}
+  
+  // Load footer when DOM is ready
+  if (document.readyState === 'loading') {{
+    document.addEventListener('DOMContentLoaded', loadFooter);
+  }} else {{
+    loadFooter();
+  }}
+}})();
+'''
+
+# Write the new JavaScript file
+with open('scripts/load-footer.js', 'w', encoding='utf-8') as f:
+    f.write(js_content)
+
+print('✓ Created scripts/load-footer.js with embedded footer content')
+print(f'  Footer size: {len(footer_html)} characters')
+print(f'  JavaScript size: {len(js_content)} characters')