Footer Enhanced

Overview

This update adds a comprehensive footer to the Hugo documentation site featuring:

Social media icons for all Sravz platforms
Expandable/collapsible Disqus comments section
Theme synchronization with the sidebar
Responsive design for mobile devices

Features

The footer displays icons for all Sravz social media platforms:

YouTube: https://www.youtube.com/channel/UCZEu1jWMOuknydEi0bcJLvA
Facebook: https://www.facebook.com/Sravz-Ltd-105045281812833/
Instagram: https://www.instagram.com/sravz_llc/
Twitter: https://twitter.com/Sravz46106283
LinkedIn: https://www.linkedin.com/company/sravz-ltd
Medium: https://medium.com/@sravzllc
GitHub: https://github.com/sravzpublic
Gitter: https://gitter.im/sravzpublic/community

Each icon features:

Circular gradient background with purple theme
Individual hover colors matching each platform’s brand
Smooth hover animations (lift effect)
Icon scaling on hover for interactivity

2. Expandable Disqus Comments

Comments are now hidden by default and can be toggled via a footer button:

Toggle Button Features:

Shows “Comments (0)” with a comment icon
Displays current comment count dynamically
Changes to “Hide Comments” when expanded
Smooth gradient background matching the theme
Responsive to all screen sizes

Expansion Behavior:

Smooth slide-down animation (0.5s)
Scrolls into view when expanded
Shows discussion header with close button
Saves state to localStorage (persists across page loads)

3. Theme Synchronization

The footer automatically matches the selected sidebar theme:

Default (Purple Gradient):

Light gradient background
Purple gradient buttons and icons
Soft purple accents

Light Professional:

Clean white/gray background
Indigo blue accents
Professional appearance

Ocean Blue:

Light blue gradient background
Ocean blue buttons and icons
Water-themed colors

Sunset:

Warm orange/cream background
Orange gradient elements
Sunset color palette

Dark Mode:

Dark gray/black background
Purple gradient on dark
Light text for readability

Minimal Gray:

Subtle gray gradient
Gray-toned buttons
Clean, minimal aesthetic

4. Responsive Design

The footer adapts to different screen sizes:

Desktop (>768px):

Horizontal layout with icons on left
Toggle button on right
Full-width expansion

Mobile (<768px):

Vertical stacked layout
Centered social icons
Full-width toggle button
Optimized padding and spacing

Files Modified

1. `/layouts/partials/docs/inject/footer.html`

Purpose: Main footer template with social media and Disqus toggle

Key Changes:

Added .sravz-footer container
Social media icons section with 8 platforms
Disqus toggle button with comment counter
Expandable Disqus container with header
Maintained existing KaTeX and hideMenu functionality

2. `/static/css/footer-enhanced.css` (NEW - 10.2KB)

Purpose: Complete styling for the enhanced footer

Sections:

.sravz-footer - Main footer container with gradient
.footer-social - Social media icon grid
Individual social media hover colors
.disqus-toggle-btn - Toggle button styling
.disqus-container - Expandable section
Theme variations for all 6 themes
Responsive breakpoints
Animation keyframes

Key CSS Classes:

.footer-content - Flex container for footer elements
.footer-social-label - “Follow Us:” text
.disqus-container.collapsed - Hidden state (max-height: 0)
.disqus-container.expanded - Visible state (max-height: 2000px)
.disqus-header - Header with title and close button

3. `/static/js/footer-disqus.js` (NEW - 6.1KB)

Purpose: Toggle functionality and state management

Key Functions:

expandDisqus() - Shows comments with animation
collapseDisqus() - Hides comments with animation
toggleDisqus() - Switches between states
updateCommentCount() - Fetches comment count from Disqus API
initDisqusCount() - Initializes Disqus count script

Features:

LocalStorage persistence (remembers expanded state)
Smooth scroll to comments when expanded
Keyboard accessibility (Enter/Space keys)
Window resize handling
Comment count auto-update (every 30 seconds)
Global API: window.SravzFooter.openComments() / closeComments()

4. `/layouts/partials/docs/inject/head.html`

Purpose: Include new CSS and JS files

Added:

<link rel="stylesheet" href="{{ "css/footer-enhanced.css" | relURL }}">
<script defer src="{{ "js/footer-disqus.js" | relURL }}">

Usage

Opening/Closing Comments

Click the toggle button in the footer
Use the close button (X) in the comment header

Programmatically:

// Open comments
window.SravzFooter.openComments();

// Close comments
window.SravzFooter.closeComments();

State Persistence

The expanded/collapsed state is saved to localStorage
Key: disqusExpanded
Values: 'true' or 'false'
Automatically restored on page load

Comment Count

The count updates automatically via:

Disqus count API (immediate)
Periodic polling (every 30 seconds)
Manual trigger: updateCommentCount()

Customization

Edit /layouts/partials/docs/inject/footer.html:

<a href="YOUR_URL" target="_blank" rel="noopener" title="PLATFORM">
  <i class="fab fa-ICON"></i>
</a>

Adjust Colors

Edit /static/css/footer-enhanced.css:

Social media colors: Lines 62-69
Button gradient: Line 85
Theme variations: Lines 253-417

Modify Animations

Edit CSS timing:

.disqus-container {
  transition: max-height 0.5s ease, opacity 0.3s ease;
}

Browser Compatibility

Modern Browsers: Full support (Chrome, Firefox, Safari, Edge)
CSS Grid/Flexbox: Required for layout
LocalStorage: Required for state persistence
Font Awesome 6.4.0: Required for icons
Fallback: Graceful degradation without JavaScript

Performance

CSS Size: 10.2KB (footer-enhanced.css)
JS Size: 6.1KB (footer-disqus.js)
Dependencies: Font Awesome 6.4.0 (already loaded)
Load Time: Minimal impact (<50ms)
Animation Performance: GPU-accelerated transforms

Testing Checklist

Social media icons appear correctly
All 8 social links work (open in new tab)
Toggle button expands/collapses comments
Close button in header works
State persists across page reloads
Comment count displays and updates
Footer matches sidebar theme
Theme switching updates footer colors
Responsive layout works on mobile
Smooth animations play correctly
Keyboard navigation works (Tab, Enter)

Known Issues

Comment count may show “0” until Disqus fully loads
Disqus embed may take 2-3 seconds to initialize
Some ad blockers may prevent Disqus from loading

Future Enhancements

Add share buttons for current page
Display recent comment activity
Add “Back to Top” button
Newsletter subscription form
Copyright and legal links

Credits

Font Awesome 6.4.0 for social media icons
Disqus for comment system
Simple Icons CDN for SVG brand icons (fallback)
Bootstrap 5.3.3 for responsive grid (inherited)

Last Updated: November 24, 2025
Author: GitHub Copilot
Version: 1.0

Enhanced Footer with Social Media and Expandable Disqus