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.
54 lines
2.3 KiB
JavaScript
54 lines
2.3 KiB
JavaScript
import PublicLayout from '../../components/PublicLayout.jsx'
|
|
import PageHeader from '../../components/PageHeader.jsx'
|
|
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
|
|
import { useAsync } from '../../lib/useAsync.js'
|
|
import { longDate } from '../../lib/format.js'
|
|
import { api } from '../../api/client.js'
|
|
import { useSite } from '../../contexts/SiteContext.jsx'
|
|
|
|
export default function News() {
|
|
const { loading, error, data } = useAsync(() => api.posts('news'))
|
|
const { siteShortName } = useSite()
|
|
const posts = data || []
|
|
|
|
return (
|
|
<PublicLayout section="website">
|
|
<div className="shell-mid page-body">
|
|
<PageHeader
|
|
eyebrow="Development"
|
|
title="News & Updates"
|
|
lead={`Progress notes and announcements as ${siteShortName} takes shape.`}
|
|
/>
|
|
<section style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
|
|
{loading && <Loading />}
|
|
{error && <ErrorState message="Could not load news right now." />}
|
|
{!loading && !error && posts.length === 0 && <EmptyState>No news posts yet — check back soon.</EmptyState>}
|
|
{posts.map((p) => (
|
|
<article key={p.id} className="panel" style={{ padding: 28 }}>
|
|
<div
|
|
className="sans"
|
|
style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12, fontSize: '0.74rem', letterSpacing: '0.08em', textTransform: 'uppercase' }}
|
|
>
|
|
<span style={{ color: 'var(--accent)', fontWeight: 700 }}>News</span>
|
|
<span className="dim">{longDate(p.published_at || p.created_at)}</span>
|
|
</div>
|
|
<h2 className="display" style={{ margin: '0 0 10px', fontSize: '1.55rem', color: 'var(--head)' }}>
|
|
{p.title}
|
|
</h2>
|
|
{(p.excerpt || p.body) && (
|
|
<p style={{ margin: 0, color: 'var(--text)', fontSize: '1.04rem' }}>{p.excerpt || stripHtml(p.body)}</p>
|
|
)}
|
|
</article>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</PublicLayout>
|
|
)
|
|
}
|
|
|
|
function stripHtml(html) {
|
|
if (!html) return ''
|
|
const text = html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim()
|
|
return text.length > 280 ? text.slice(0, 280) + '…' : text
|
|
}
|