From 8c97b6e6b80f265d6ae110a26d7c9b938c594fff Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Fri, 26 Jun 2026 14:59:06 +0200 Subject: [PATCH] feat: add global footer --- .../specs/2026-06-26-global-footer-design.md | 238 ++++++++++++++++++ .../specs/global-footer-powered-by.css | 122 +++++++++ .../specs/global-footer-powered-by.html | 86 +++++++ scss/westgate/_footer.scss | 216 ++++++++++++++++ templates/footer.tpl | 2 + templates/partials/footer/westgate-global.tpl | 63 +++++ tests/global-footer-contract.test.js | 65 +++++ theme.scss | 1 + 8 files changed, 793 insertions(+) create mode 100644 docs/superpowers/specs/2026-06-26-global-footer-design.md create mode 100644 docs/superpowers/specs/global-footer-powered-by.css create mode 100644 docs/superpowers/specs/global-footer-powered-by.html create mode 100644 scss/westgate/_footer.scss create mode 100644 templates/partials/footer/westgate-global.tpl create mode 100644 tests/global-footer-contract.test.js diff --git a/docs/superpowers/specs/2026-06-26-global-footer-design.md b/docs/superpowers/specs/2026-06-26-global-footer-design.md new file mode 100644 index 0000000..5f879f6 --- /dev/null +++ b/docs/superpowers/specs/2026-06-26-global-footer-design.md @@ -0,0 +1,238 @@ +# Global Footer Design + +## Summary + +Add a Westgate-owned global footer to the NodeBB theme. The footer is permanent +theme chrome, not widget or Custom Pages content. It renders on every normal +NodeBB page that uses the theme layout, sits below the main page content, and +includes both Westgate navigation and the platform credit pills for NodeBB and +Tiptap. + +## Decision + +Use a hardcoded theme partial. + +The footer links are intentionally different from the topbar. The topbar remains +broad, task-oriented navigation for moving through the site and forum. The +footer carries more specific, secondary, and contextual links. This matches the +usual website pattern and avoids forcing one navigation model to serve two +different jobs. + +The "Powered by NodeBB" and "Powered by Tiptap" pills should be folded into the +same global footer as the final credit row. They should not remain as a separate +global footer fragment unless an upstream plugin forces them outside theme +control. + +## Source References + +- `custom_pages/Westgate.dc.html`: extracted Claude Design footer layout, + content, palette, and spacing direction. +- `docs/superpowers/specs/global-footer-powered-by.html`: supplied powered-by + markup reference. +- `docs/superpowers/specs/global-footer-powered-by.css`: supplied powered-by + style reference. +- `templates/footer.tpl`: current local footer override and integration point. +- `theme.scss`: imports-only SCSS entry point. + +The deposited powered-by files are reference material. Production markup and +styles should live in the theme partial and focused SCSS file, not in +`docs/superpowers/specs/`. + +## Architecture + +Add: + +- `templates/partials/footer/westgate-global.tpl` +- `scss/westgate/_footer.scss` + +Modify: + +- `templates/footer.tpl` +- `theme.scss` +- a focused contract test, either a new `tests/global-footer-contract.test.js` + or a small extension of the existing global topbar contract test. + +Do not add JavaScript, dependencies, widget areas, admin settings, or root-level +theme styling files. + +## Template Integration + +Mount the footer partial from `templates/footer.tpl` after `` and before +the closing `.layout-container` wrapper: + +```tpl + + + + +``` + +Keep the existing mobile topic navigator, toaster tray, reconnect alert, and +footer JS import in place. Do not reintroduce Harmony's right sidebar import. + +The partial should use semantic footer markup: + +```html + +``` + +## Content + +The footer has three main content areas plus a final low-credit row. + +### Brand Area + +Include: + +- Westgate diamond mark. +- Site name from `{config.siteTitle}` so the footer follows the configured + NodeBB site title. +- Short description: + "A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, + set in the Forgotten Realms port city of Westgate." +- Flavor line: + "Mind the shadows." + +### Explore Links + +Hardcode these as footer-specific links: + +- Home +- News +- Gallery +- Dev Blog +- Join the Team + +Use real anchors. Prefer `{relative_path}` for internal routes. Do not use +Claude Design preview handlers such as `onClick="{{ goHome }}"`. + +Hardcode the final `href` values in the footer partial after confirming the +existing production routes. Do not read these links dynamically from ACP +Navigation. + +### Community Links + +Hardcode these as footer-specific links: + +- Forums +- Wiki +- Register +- How to Join + +Use confirmed internal routes where they exist: + +```html +Forums +Wiki +Register +``` + +If a destination route is not confirmed at implementation time, use the closest +existing route rather than creating new routing behavior as part of this task. + +### Legal And Setting Line + +Include the existing Claude Design bottom text: + +- `© 2026 Shadows Over Westgate · A NWN:EE Persistent World` +- `Forgotten Realms · Westgate · Sea of Fallen Stars` + +This is display content, not a dynamic copyright system. + +### Powered-By Row + +Fold the NodeBB and Tiptap credit pills into the global footer as the final row. +Use the supplied reference files for structure and visual treatment. + +Requirements: + +- Link NodeBB to `https://nodebb.org`. +- Link Tiptap to `https://tiptap.dev`. +- External links use `target="_blank"` and `rel="noopener noreferrer"`. +- Each pill has an accessible name such as `aria-label="Powered by NodeBB"`. +- The row is visually subordinate to the Westgate content. +- The row remains inside `.wg-footer` so the footer is one component. + +If an upstream plugin also renders an unavoidable Tiptap credit elsewhere, do +not hide it blindly in this task. First confirm whether that credit is required +by the plugin license or only redundant UI. + +## Styling + +Add footer styles to `scss/westgate/_footer.scss` and import that file from +`theme.scss`: + +```scss +@import "./scss/westgate/footer"; +``` + +Style scope must be `.wg-footer` and descendants. + +Visual direction: + +- near-black and plum base +- muted gold borders and focus accents +- restrained depth, not bright SaaS treatment +- max-width content container matching the extracted design, roughly `1240px` +- three-column desktop layout +- stacked mobile layout +- powered-by pills centered in the final footer row + +Prefer existing theme tokens and SCSS variables where available. The deposited +powered-by CSS uses custom properties that may not exist in the theme; translate +those values into the theme's existing SCSS/token language rather than copying +non-theme variables verbatim. + +## Accessibility + +The footer must: + +- use semantic `