archvillainetteandvickydotbat
985ff0755d
Closes #36. ## What was wrong `/wiki/manage` showed its table in near-black text on the near-black page: the header row, the `tid`, `Posts` and `Created` columns were effectively invisible. ## Root cause The theme repaints Bootstrap's **light** colour mode dark (`$body-color`, `$body-bg`, `$card-bg`, …) but never overrode `$body-emphasis-color`, which Bootstrap defaults to `$black` (`#09080b` here). Everything that chains to `--bs-emphasis-color` inherited that ink: - `--bs-table-color` / `-striped-` / `-hover-` / `-active-` on any plain `.table` - `--bs-tooltip-bg` (dark text on a dark tooltip) - `--bs-nav-tabs-link-active-color`, `--bs-nav-underline-link-active-color` - `--bs-list-group-action-hover-color` / `-active-color` - the `.text-emphasis` / `.link-body-emphasis` utilities `_controls.scss` had already patched this by hand for the two tables anyone had noticed (`notification/table`, `flags/list`) and for post-content tables. Every other table in the forum was still broken. Fixing the variable once is a smaller diff than a third per-table patch, and it covers tables that do not exist yet. ## The change One variable in `scss/overrides.scss` — the file whose stated job is exactly this — plus a contract test so the next dark-repaint variable that goes missing fails a check instead of shipping. ## Verification Booted the `sow-nodebb` dev stack with this working tree mounted (`PLUGIN_PATH=../sow-nodebb-theme`), seeded a wiki namespace with topics, and compared `/wiki/manage` before and after: unreadable → fully legible, gold rules and buttons unchanged. Also eyeballed `/categories`, `/notifications`, `/user/admin`, a topic, `/wiki` and `/flags` for regressions — none. The ACP is unaffected: it builds from `admin/overrides`, not this file. All `tests/*.test.js` pass; the new test fails when the variable is reverted. Co-authored-by: vickydotbat <zoelynne.victoria@gmail.com> Reviewed-on: #37
135 lines
7.1 KiB
Markdown
135 lines
7.1 KiB
Markdown
# AGENTS.md
|
|
|
|
## Project
|
|
|
|
This repository is `nodebb-theme-westgate`, a NodeBB theme for the Shadows Over Westgate forum and website.
|
|
|
|
It is forked from `nodebb-theme-quickstart` and should remain a small, focused NodeBB child theme rather than a full replacement for NodeBB or Harmony.
|
|
|
|
Shadows Over Westgate (SoW) is a Neverwinter Nights persistent-world project.
|
|
Its community forum and wiki run on NodeBB (a Node.js forum platform). This
|
|
theme is the visual layer for that forum. It is consumed by sow-nodebb
|
|
(https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb), which pins this repo
|
|
by exact commit in `plugins.lock` and compiles it into the production forum
|
|
image at image-build time. Switching themes in the Admin Control Panel does
|
|
nothing in production; only the theme pinned and activated in sow-nodebb is
|
|
compiled in.
|
|
|
|
## How It Is Used
|
|
|
|
There is no build step in this repo; NodeBB compiles the SCSS. To see changes
|
|
live, use the `docker-compose.dev.yml` dev loop in sow-nodebb (see How To Test
|
|
below). Release: merge here, re-pin the commit SHA in sow-nodebb's
|
|
`plugins.lock`, rebuild and publish the image there.
|
|
|
|
## How To Test
|
|
|
|
Fast checks, no forum needed:
|
|
|
|
- `node tests/<name>.test.js` — contract tests (topbar, footer, icons, wiki
|
|
tables). There is no `npm test` script; run each file directly.
|
|
- `node scripts/check-emails.js` — when working on email templates.
|
|
|
|
Live visual check against a real forum — **always possible, never skip it**.
|
|
Every change in this repo can be seen in a browser before it ships; there is no
|
|
theme change that can only be checked in production. A unit test cannot tell
|
|
you that a colour is unreadable, so look at the page.
|
|
|
|
Use the sibling checkout at `../sow-nodebb`:
|
|
|
|
1. `cd ../sow-nodebb && cp .env.example .env`, then uncomment the "Theme
|
|
development" block so this working tree is the mounted package:
|
|
`PLUGIN_PATH=../sow-nodebb-theme`, `PLUGIN_ID=nodebb-theme-westgate`,
|
|
`EXTRA_PLUGINS=nodebb-plugin-westgate-wiki nodebb-plugin-westgate-pages`.
|
|
2. `nix develop --command make dev` — the forum comes up at
|
|
`http://localhost:4567` (or `HTTP_PORT`) with this theme already active.
|
|
Dev admin login: `admin` / `Admin12345!` (defaults; dev-only).
|
|
3. NodeBB compiles this theme's SCSS and templates at build time, so a browser
|
|
reload alone is not enough after editing them: `make dev-build`, then
|
|
reload. `make dev-restart` if changes still don't show.
|
|
4. `make dev-reset` wipes everything; required after changing `PLUGIN_*` or
|
|
`EXTRA_PLUGINS` in `.env`.
|
|
|
|
A fresh database is empty, so pages that render content (wiki, categories,
|
|
topics) need seeding first. `../sow-nodebb/AGENTS.md` has the recipes for
|
|
seeding over the REST API, for writing plugin settings straight to Redis, and
|
|
for driving a headless browser on this NixOS box (the Playwright MCP server
|
|
does not work here). Point any browser tooling at `http://localhost:4567` to
|
|
load pages, take screenshots, and compare before/after.
|
|
|
|
## Design Context
|
|
|
|
- `PRODUCT.md`: strategic design context — register, users, purpose,
|
|
positioning, brand personality, anti-references, design principles,
|
|
accessibility target (WCAG AA). Read it before design work.
|
|
- `DESIGN.md`: the visual system — palette ("The Velvet Ledger"), typography,
|
|
elevation, components, and do's/don'ts, with machine-readable tokens in its
|
|
frontmatter and `.impeccable/design.json`.
|
|
|
|
## Guidance Map
|
|
|
|
- `README.md` and `GAME_ICONS.md`: repo intro and icon usage notes.
|
|
- `theme.json`, `plugin.json`: theme metadata, hooks, static dirs.
|
|
- `theme.scss` (imports-only) and `scss/`: all styling; `scss/overrides.scss`
|
|
holds pre-Bootstrap variable overrides.
|
|
- `templates/`: Harmony template overrides (same relative paths as Harmony).
|
|
- `custom_pages/`: source content and mockups for custom-pages surfaces.
|
|
- `lib/`, `public/client.js`: server hooks and client behavior.
|
|
- `tests/`: contract tests for topbar, footer, icons, wiki table rendering,
|
|
and the Bootstrap dark-repaint variables. Plain assert scripts: run each with
|
|
`node tests/<name>.test.js`; there is no `npm test` script.
|
|
|
|
## Theme Direction
|
|
|
|
The visual target is black velvet silk, darkness, vampirism, decadence, and decay.
|
|
|
|
Use this palette direction:
|
|
|
|
- Plum and near-black as the dominant base.
|
|
- Muted gold for accents, borders, small highlights, and important affordances.
|
|
- Red only sparingly, preferably as a subtle detail or state color.
|
|
- Avoid bright, playful, clinical, or flat SaaS-style treatment.
|
|
- Favor depth, restraint, texture, and rich contrast over loud ornament.
|
|
|
|
## NodeBB Theme Rules
|
|
|
|
Follow the current NodeBB theme model:
|
|
|
|
- `theme.json` defines theme metadata and the base theme.
|
|
- This project uses `baseTheme: "nodebb-theme-harmony"`.
|
|
- Keep this as a child theme unless the user explicitly asks for a larger rewrite.
|
|
- `theme.scss` is the theme entry point and must stay imports-only.
|
|
- Do not append substantive CSS/SCSS directly to `theme.scss`.
|
|
- Do not add new root-level theme styling files.
|
|
- Put substantive Westgate-specific style overrides under focused files in `scss/`.
|
|
- Keep `scss/overrides.scss` focused on Bootstrap/Harmony variable overrides that must load before Bootstrap.
|
|
- Template overrides belong under `templates/` and must preserve the same relative path as the Harmony template they replace.
|
|
- Do not copy or redefine Harmony templates unless an actual override is needed.
|
|
- If a template does not exist here, NodeBB inherits it from the configured base theme.
|
|
- In the Westgate topbar, notification, chat, draft, and navigation count bubbles must honor NodeBB/Harmony's `hidden` class and only display when there is an actual count to check.
|
|
|
|
NodeBB theme documentation: https://docs.nodebb.org/development/themes/
|
|
|
|
## Current Files Of Interest
|
|
|
|
- `theme.json`: theme metadata and `baseTheme`.
|
|
- `plugin.json`: hooks, scripts, modules, template path, and static dirs.
|
|
- `theme.scss`: NodeBB SCSS entry point.
|
|
- `scss/overrides.scss`: current Westgate override layer.
|
|
- `lib/theme.js` and `lib/controllers.js`: server-side theme hooks/controllers.
|
|
- `public/client.js`: client-side theme behavior.
|
|
- `templates/`: local template overrides and admin templates.
|
|
|
|
## Working Practices
|
|
|
|
- Keep edits scoped to the theme package unless the task explicitly names the NodeBB install.
|
|
- Prefer existing NodeBB, Harmony, Bootstrap, and local theme patterns over introducing new frameworks.
|
|
- Keep selectors maintainable and avoid broad global overrides unless they are intentional theme-wide tokens or resets.
|
|
- Avoid unrelated formatting churn.
|
|
- Before overriding a template, inspect the corresponding Harmony template and copy only what is necessary.
|
|
- Preserve accessibility: readable contrast, visible focus states, usable hover/active states, and no text hidden purely for visual effect unless there is an accessible alternative.
|
|
|
|
## Tests
|
|
|
|
Tests must survive harmless changes to constants, defaults, wording, ordering, fixture data, and internal implementation details. A test that fails merely because a basic value changed is usually a bad test. Only assert exact values when the value is part of a documented public contract, external protocol, compatibility requirement, security rule, migration, or business rule.
|