Enfuse.io Marketing Website - Quick Reference

Essential Files

  • index.html - Homepage
  • styles.css - Main stylesheet
  • script.js - Main JavaScript
  • shell-navigation.js - SPA navigation system
  • avatar-widget.js - Chat widget + scroll-to-top
  • blog.html - Blog listing page
  • 404.html - Custom 404 page

Header: Home • Services • Product • Blog • About
Footer: Home • Services • Blog • About

Key URLs

  • Home: /index.html or /
  • Services: /services.html
  • Blog: /blog.html
  • About: /about.html
  • Contact: /contact.html

Blog Post URLs

  • Format: /blog/post-name.html
  • Examples:
    • /blog/welcome-to-our-blog.html
    • /blog/agentic-ai-in-the-wild.html
    • /blog/smart-cities-2024-barcelona.html
  • SPA Navigation: Blog post links use absolute paths for avatar persistence

Google Analytics

  • Tracking ID: G-PBF8VKTTEF
  • Required on: ALL pages
  • Location: In <head> section

Common Tasks

Add New Page

  1. Create HTML file in root directory
  2. Include required scripts: 
    <script src="script.js"></script>
<script src="shell-navigation.js"></script>
<script src="avatar-widget.js"></script>
  3. Add Google Analytics code
  4. Update navigation in header/footer
  5. Test SPA navigation

Add Blog Post

  1. Create HTML file in /blog/ directory
  2. Update blog.html with new post
  3. Add to shell-navigation.js blog mappings
  4. Test navigation and SPA functionality

Fix Navigation Issues

  1. Check shell-navigation.js is loaded
  2. Verify all links use absolute paths (/page.html)
  3. Check blog post mappings in shell-navigation.js
  4. Test SPA navigation functionality

Fix Styling Issues

  1. Check CSS specificity conflicts
  2. Avoid global class overrides
  3. Use specific selectors for targeted styling
  4. Test responsive design

CSS Variables

:root {
    --primary-color: #cc431f;
    --secondary-color: #1A0804;
    --accent-color: #E6E6E6;
    --text-dark: #212529;
    --text-light: #6c757d;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
}

Bootstrap Classes

  • container - Responsive container
  • row - Bootstrap grid row
  • col-lg-* - Large screen columns
  • btn btn-primary - Primary button
  • text-center - Center text alignment
  • mb-4 - Margin bottom
  • py-5 - Padding top/bottom

JavaScript Functions

  • initSmoothScrolling() - Smooth scroll for anchor links
  • initFormHandling() - Form submission handling
  • toggleAvatarWidget() - Chat widget toggle
  • scrollToTop() - Scroll to top functionality

File Paths

  • Images: /images/filename.ext
  • CSS: /styles.css
  • JS: /script.js, /shell-navigation.js, /avatar-widget.js
  • Blog posts: /blog/post-name.html

Testing Checklist

  • All navigation links work
  • SPA navigation functions correctly
  • Blog posts load properly
  • Google Analytics tracking works
  • Responsive design on mobile/desktop
  • Avatar widget persists across navigation
  • Scroll-to-top button appears and works

Common Issues

“Page not found” errors

  • Check file paths use absolute paths (/page.html)
  • Verify blog posts use blog/ prefix
  • Test on GitHub Pages, not just locally
  • 404 page uses absolute paths for all assets (/images/logo.png)

Avatar widget reloading

  • Ensure blog post links use absolute paths (/blog/post.html)
  • Check shell-navigation.js is loaded and working
  • Verify SPA navigation is handling blog post clicks
  • Check shell-navigation.js is loaded
  • Verify updateActiveNavLink() function
  • Test hard refresh (Ctrl+F5)

Avatar widget reloading

  • Ensure avatar-widget.js is loaded
  • Check SPA navigation is working
  • Verify no full page reloads

Styling conflicts

  • Check CSS specificity
  • Avoid global class overrides
  • Use specific selectors
  • Test in different browsers

Deployment

  • Automatic: GitHub Pages deploys from main branch
  • Domain: enfuse.io
  • SSL: Automatically enabled
  • Cache: May take a few minutes to update

Emergency Rollback

git log --oneline -10  # Find working commit
git reset --hard <commit-hash>  # Revert to working state
git push --force  # Force push to GitHub Pages

Contact Info