# Hypercart / 4x4Sys Network Footer
## Syndicated Footer Component - GitHub, React, WordPress
[](LICENSE.md)
[](CHANGELOG.md)
A reusable, themeable footer component for the 4x4Sys network (Hypercart, 4x4Clarity, Love2Hug, GetDashboard). Available in multiple formats for easy integration across different platforms.
**Licensed under [Apache License 2.0](LICENSE.md)** โ Free to use, modify, and distribute for your own projects with attribution.
---
## ๐ฏ Full Syndication (Recommended)
**v1.2.0+** supports **complete syndication** of both styles and content:
โ
**CSS from CDN** โ Automatic style updates across all sites
โ
**Content from CDN** โ Link URLs, labels, tooltips update automatically
โ
**Zero maintenance** โ Update once in GitHub, all sites update
โ
**No rebuilds needed** โ Changes propagate without redeployment
**Supported platforms:**
- **React/Lovable** โ Full syndication (CSS + content via `footer-data.json`)
- **WordPress** โ Full syndication (CSS + HTML from CDN)
- **Static HTML** โ CSS syndication (content is manual copy/paste)
---
## ๐ Quick Start
Choose your implementation method:
| Method | Best For | Syndication Level | Documentation |
|--------|----------|-------------------|---|
| **React/Lovable** โญ | React apps, Lovable AI | **Full** (CSS + Content) | [Lovable Guide](lovable-footer-guide.md) |
| **WordPress Plugin** โญ | WordPress sites | **Full** (CSS + HTML) | [WordPress Guide](wordpress-footer-guide.md) |
| **HTML + CSS** | Static sites | **Partial** (CSS only) | [HTML Setup](#html--css-setup) |
| **CDN Direct** | External integrations | **Full** (CSS + HTML) | [CDN Syndication](#cdn-syndication) |
---
## ๐๏ธ Repository Structure
```
wp-syndicated-footer-poc/
โโโ README.md # This file
โโโ LICENSE.md # Apache 2.0 license
โโโ CHANGELOG.md # Version history & breaking changes
โโโ ROADMAP.md # Future enhancement ideas
โโโ AUDIT.md # Documentation audit report
โโโ footer.html # Plain HTML footer (source markup)
โโโ footer.css # Stylesheet (namespaced .hc-*)
โโโ footer-data.json # Syndicated link data (v1.2.0+)
โโโ footer-config.json # Example config for React/Lovable (v1.1.0+)
โโโ hypercart-network-footer.php # WordPress plugin w/ CDN fallback
โโโ lovable-footer-guide.md # React/Lovable integration prompt
โโโ wordpress-footer-guide.md # WordPress WPCode integration steps
```
### Why Multiple Files?
Each implementation is **a view of the same component**. The core design is:
- **footer.html** โ canonical HTML structure
- **footer.css** โ namespaced styles (`.hc-*` prefix)
- **Platform-specific guides** โ integration instructions for each framework
All implementations render **identical visuals** and use the **same CSS class structure**. This repository emphasizes **consistency across platforms** so you can move the footer between projects without redesigning it.
---
## ๐ HTML + CSS Setup
For static sites or manual integration:
1. **Add to your HTML ``:**
```html
```
2. **Add to your HTML `` (before closing ``):**
```html
```
**Note:** Static HTML requires manual content updates. For automatic content updates, use [React/Lovable](lovable-footer-guide.md) or [WordPress](wordpress-footer-guide.md) implementations.
3. **Verify:**
- Footer appears at bottom of page
- DM Mono and Instrument Serif fonts load
- Lime accent line visible at top
- Links are operational
---
## ๐ CDN Syndication
**โญ RECOMMENDED APPROACH:** Use jsDelivr CDN for full syndication (mirrors GitHub with proper caching).
### Full Syndication URLs (v1.2.0+)
**CSS (All platforms):**
```
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.css
```
**Content Data (React/Lovable):**
```
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer-data.json
```
**HTML (WordPress, Static sites):**
```
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.html
```
### Versioned URLs (Lock to Specific Release)
Use version tags to prevent breaking changes:
```
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@v1.2.0/footer.css
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@v1.2.0/footer-data.json
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@v1.2.0/footer.html
```
### Why Use CDN Syndication?
โ
**Single source of truth** โ Update once in GitHub, all sites update
โ
**Zero maintenance** โ No manual updates across multiple sites
โ
**Automatic propagation** โ Changes appear within 24 hours (CDN cache TTL)
โ
**Version control** โ Lock to specific versions or use `@main` for latest
โ
**Performance** โ Global CDN with edge caching
**Recommendation:**
- **Production sites:** Use versioned URLs (`@v1.2.0`) for stability
- **Development/staging:** Use `@main` for latest features
- **All sites:** Use CDN for CSS (at minimum) to get automatic style updates
---
## ๐จ Component Details
### Styling
- **Namespace:** All classes prefixed with `.hc-` to prevent collisions
- **CSS Framework:** Standalone CSS (no Tailwind, no Bootstrap)
- **Fonts:** DM Mono (body), Instrument Serif italic (network label)
- **Color Scheme:** Dark theme with lime accent (`#e8fc5a`)
- **Responsive:** Mobile stacked layout at `768px` breakpoint
### Class Structure (BEM)
```
hc-footer // Footer container
โโโ hc-footer__inner // Content wrapper
โโโ hc-footer__row1 // Product pills section
โ โโโ hc-footer__network-label
โ โโโ hc-footer__product // Product pill
โ โโโ hc-footer__arrow // External link indicator
โ โโโ hc-tooltip // Hover tooltip
โโโ hc-footer__row2 // Links section
โโโ hc-footer__copyright
โโโ hc-footer__links
โโโ hc-footer__link
โโโ hc-footer__sep // Separator (ยท)
```
### Links
- **External Links:** Open in new tab (`target="_blank" rel="noopener"`)
- **Internal Links:** `/tos/`, `/privacy/`, `/system/`, `/help/` (with trailing slashes)
- **All links are consistent across implementations**
---
## ๐ฑ Responsive Behavior
### Desktop (โฅ769px)
- Horizontal product pill layout
- Row 1: Network label + product pills
- Row 2: Copyright + footer links (flex row)
- Tooltips visible on hover
### Mobile (<768px)
- Tooltips hidden (no hover on touch screens)
- Vertical stacking (links wrap as needed)
- Padding reduced for narrower screens
- Product pills smaller but fully functional
---
## ๐ Verification Checklist
After implementation, verify:
- [ ] Footer appears at bottom of every page
- [ ] Fonts load correctly (DM Mono for body, Instrument Serif italic for "4x4Sys Network")
- [ ] Lime accent line visible at top of footer
- [ ] All external links (4x4Clarity, Love2Hug, GetDashboard, network link) open in new tab
- [ ] Internal links (Terms, Privacy, System, Help) navigate correctly
- [ ] Product pill tooltips appear on desktop hover
- [ ] Mobile layout is responsive (pills and links stack properly on phones)
- [ ] No CSS conflicts with existing theme/styles (`.hc-` namespace ensures isolation)
- [ ] Internal links use client-side routing if applicable (no full page reload)
---
## โ๏ธ Error Handling & Troubleshooting
### CDN Unreachable (JavaScript/WordPress)
- **Status:** Both the React and WordPress implementations include fallback HTML
- **Result:** Footer still renders from hardcoded markup if CDN is offline
- **Testing:** Disable internet or block `cdn.jsdelivr.net` to verify fallback
- **Monitoring:** Check `console.warn()` (React) or WordPress error logs (PHP)
### Font Loading Issues
- **Common cause:** Network privacy settings or CDN blocking
- **Fallback:** `font-family` includes fallback stack (monospace โ system fonts)
- **Check:** Open DevTools โ Network tab โ filter `fonts.googleapis.com`
### Link Routing Issues
- **React:** If using `react-router`, the Lovable guide can convert `` โ `` components
- **WordPress:** Standard `` tags work with client-side routing plugins
- **Testing:** Open NetworkJavaScript console โ click each internal link and watch for full page reload (should not occur if properly routed)
### Duplicate Footers in WordPress
- **Issue:** Theme might have its own footer
- **Fix:** Hide with CSS in WPCode: `.site-footer:not(.hc-footer) { display: none !important; }`
### CSS Not Loading (Static HTML)
- **Verify:** `` points to correct path
- **Check:** DevTools โ Network tab โ CSS file loads with status 200
- **CDN:** Try CDN URL instead of local: `https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.css`
---
## ๐ Implementation Guides
- **[Lovable/React Guide](lovable-footer-guide.md)** โ Step-by-step prompt for AI-assisted React component generation (includes config-based customization)
- **[WordPress Guide](wordpress-footer-guide.md)** โ WPCode snippets for WordPress sites
- **[HTML/CSS Only](#html--css-setup)** โ Manual integration for static sites
---
## โ๏ธ Configuration (React/Lovable v1.2.0+)
**NEW in v1.2.0:** Footer content (URLs, labels, tooltips) is now syndicated from CDN via `footer-data.json`!
The React/Lovable implementation fetches:
1. **Syndicated link data** from CDN (`footer-data.json`) โ URLs, labels, tooltips
2. **Local visibility config** from `public/footer-config.json` (optional) โ which links to show/hide
### Local Configuration (Optional)
Create `public/footer-config.json` to customize which links are shown:
```json
{
"showTooltips": true,
"links": {
"clarity": true,
"love2hug": true,
"getdashboard": true,
"network": true,
"terms": true,
"privacy": true,
"system": false,
"help": false
}
}
```
### Syndicated Content (v1.2.0+)
The footer content is automatically fetched from:
```
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer-data.json
```
This means:
- โ
**Update once, deploy everywhere** โ Change `footer-data.json`, all sites update
- โ
**No rebuilds needed** โ Content updates without redeploying React apps
- โ
**Backward compatible** โ Existing v1.1.0 sites continue working with hardcoded defaults
**Features:**
- **Syndicated content** โ Link URLs, labels, and tooltips fetched from CDN
- **Toggle individual links** โ Hide links not needed on specific sites (local config)
- **Disable tooltips** โ Set `showTooltips: false` to work around z-index conflicts
- **Runtime updates** โ Change config without rebuilding the React app
- **Graceful fallback** โ Component works without config file (all links shown by default)
**Example use cases:**
- Hide "System" and "Help" links on marketing sites
- Disable tooltips if they conflict with existing UI elements
- Show only product pills on landing pages
See [Lovable Guide](lovable-footer-guide.md) for full configuration documentation.
**Future enhancements** (see [ROADMAP.md](ROADMAP.md)):
- Link URL/label overrides
- Custom link additions
- Theme color customization
---
## ๐ Versioning & Updates
This footer follows **semantic versioning**:
- **MAJOR** (v2.0.0) โ Breaking changes (class names, HTML structure, link paths)
- **MINOR** (v1.1.0) โ New features (new product pill, new link), backward compatible
- **PATCH** (v1.0.1) โ Bug fixes (CSS tweaks, font rendering improvements)
### How to Update
- **@main:** Always pulls latest (living edge, may have breaking changes)
- **@v1.0.0:** Locks to specific version (stable, predictable)
- **Local copies:** Manually update or switch to CDN for automatic updates
See [CHANGELOG.md](CHANGELOG.md) for detailed version history.
---
## ๐ค Contributing & Support
### Reporting Issues
Found a bug or design inconsistency? Please open a GitHub issue with:
1. Current implementation method (HTML, React, WordPress)
2. Browser/version
3. Screenshot or error log
4. Steps to reproduce
### Updating the Footer
To modify the footer:
1. Edit `footer.html` (structure) or `footer.css` (styles)
2. Update version in `hypercart-network-footer.php` header
3. Add entry to `CHANGELOG.md`
4. Create a git tag: `git tag v1.0.1`
5. Push to trigger CDN cache clear
### Local Testing
```bash
# Static site testing
open footer.html
# WordPress plugin testing
1. Copy hypercart-network-footer.php into wp-content/plugins/
2. Activate in WordPress admin
3. View site โ footer should appear
# React/Lovable testing
Copy the prompt from lovable-footer-guide.md into Lovable interface
```
---
## ๐ License
**Apache License 2.0**
Copyright 2026 Hypercart / 4x4Sys Network
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
**TL;DR:** Free to use, modify, and distribute in personal or commercial projects. See [LICENSE.md](LICENSE.md) for full terms.
---
## ๐ Links
- **GitHub:** https://github.com/Hypercart-Dev-Tools/wp-syndicated-footer-poc
- **jsDelivr CDN:** https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/
- **Issues:** https://github.com/Hypercart-Dev-Tools/wp-syndicated-footer-poc/issues
- **License:** [Apache 2.0](LICENSE.md)
- **Main Site:** https://hypercart.com