Claude
7a08546da6
Replace baked-in UOM/MysticMoon/UOMysticmoon branding with a BRAND_* env scheme so one prebuilt image runs as any shard; UOMysticmoon becomes the first tenant that sets these vars rather than a special case in the code. Architecture (chosen because the app ships as a prebuilt image): - server/src/config/brand.js + bot/src/brand.js read BRAND_* once at boot, with Runic Gateway defaults. - Text/colors reach the SPA at RUNTIME through the existing public settings API (settings.model.getPublic -> SiteContext), so no client rebuild. The admin-editable site title + contact email still override BRAND_NAME/email. - SiteContext applies BRAND_ACCENT_COLOR to the --accent CSS var at runtime. - Express templates the built index.html <title>/description/OG/favicon at serve time from BRAND_* (renderIndexHtml in app.js). - Server-side consumers read brand directly: emails, TOTP issuer, API docs, boot logs, HTML error page. Bot uses it for embed color + logs. Assets: logo/hero/favicon delivered from a ./brand:/app/brand bind-mount (BRAND_LOGO/HERO/FAVICON), with neutral defaults baked in; hero falls back to a built-in image when unset. Scope: also genericized package.json names (uomysticmoon-* -> runic-gateway-*) and the DB_NAME/DB_USER/COOKIE_NAME code defaults (runic_gateway/runic/ rg_token). Production keeps its real values by pinning them in .env — see .env.uomysticmoon.example, which reproduces the exact UOMysticmoon identity (proof the substitution works). Changing a deployed COOKIE_NAME invalidates existing sessions, so UOMysticmoon pins uomm_token. Verified: 193 server tests pass, client builds, app.js loads + templates the built index.html, brand transform injects title/description/OG/favicon.
84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
import { Link, NavLink } from 'react-router-dom'
|
|
import MoonDot from './MoonDot.jsx'
|
|
import { useAuth } from '../contexts/AuthContext.jsx'
|
|
import { useSite } from '../contexts/SiteContext.jsx'
|
|
|
|
// One consistent top nav for the whole public site. Every page gets the same
|
|
// main links plus an auth-aware entry on the right (Sign in / My Account / Admin).
|
|
const NAV = [
|
|
{ label: 'Home', to: '/', end: true },
|
|
{ label: 'News', to: '/site/news' },
|
|
{ label: 'Screenshots', to: '/site/screenshots' },
|
|
{ label: 'Five on Friday', to: '/site/five-on-friday' },
|
|
{ label: 'Newsletter', to: '/site/newsletter' },
|
|
{ label: 'Wiki', to: '/wiki' },
|
|
{ label: 'Shard', to: '/site/shard' },
|
|
{ label: 'Champions', to: '/site/champs' },
|
|
{ label: 'Guilds', to: '/site/guilds' },
|
|
{ label: 'Governors', to: '/site/governors' },
|
|
{ label: 'Houses', to: '/site/houses' },
|
|
{ label: 'About', to: '/site/about' },
|
|
]
|
|
|
|
const linkStyle = ({ isActive }) => ({
|
|
background: isActive ? 'var(--accent)' : undefined,
|
|
color: isActive ? 'var(--bg-deep)' : undefined,
|
|
borderColor: isActive ? 'var(--accent)' : undefined,
|
|
})
|
|
|
|
export default function SiteHeader() {
|
|
const { user, loading } = useAuth()
|
|
const { siteTitle } = useSite()
|
|
|
|
// Where the auth entry points: staff → admin, player → portal, else sign in.
|
|
const account =
|
|
user && user.role && user.role !== 'player'
|
|
? { label: 'Admin', to: '/admin' }
|
|
: user
|
|
? { label: 'My Account', to: '/player' }
|
|
: { label: 'Sign in', to: '/account/login' }
|
|
|
|
return (
|
|
<header
|
|
style={{
|
|
borderBottom: '1px solid var(--line)',
|
|
background: 'rgba(9,13,18,0.86)',
|
|
backdropFilter: 'blur(8px)',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 30,
|
|
}}
|
|
>
|
|
<div
|
|
className="shell"
|
|
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, padding: '14px 0', flexWrap: 'wrap' }}
|
|
>
|
|
<Link
|
|
to="/"
|
|
className="display"
|
|
style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '1.2rem', letterSpacing: '0.05em', color: 'var(--accent-bright)', textDecoration: 'none', fontWeight: 600 }}
|
|
>
|
|
<MoonDot />
|
|
{siteTitle}
|
|
</Link>
|
|
<nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
|
|
{NAV.map((l) => (
|
|
<NavLink key={l.to} to={l.to} end={l.end} className="pill" style={linkStyle}>
|
|
{l.label}
|
|
</NavLink>
|
|
))}
|
|
{!loading && (
|
|
<NavLink
|
|
to={account.to}
|
|
className="pill"
|
|
style={{ marginLeft: 6, borderColor: 'var(--accent)', color: 'var(--accent-bright)' }}
|
|
>
|
|
{account.label}
|
|
</NavLink>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|