fix(kit): what installing the template into a real core showed
The template was built into a running core - MariaDB, the real loader, a browser - and both halves of the walk passed: core reconciled two Teams out of the provider on the first boot, /public/teams/<slug>/members came back with projected:true, and the clan page rendered core's activity feed and forum in the two slots this module declared. That last one is the whole point of the phase: a module whose id is not "uo" now gets core's Team content, which is what website#160 fixed. module-uo's own guild page was walked on the same core and is unchanged. Two things the walk found, both of the kind only a browser can: PageHeader takes `lead`, not `subtitle`. The template has been passing subtitle since it was written, and an unknown prop on a React component is silently dropped - so every page built from this template rendered its heading with nothing under it, on a site where every core page has a line there. Nothing warns anywhere. Fixed on all three pages, and chapter 2 now says to check prop names against 3.4 rather than guessing them, beside the paragraph about `shell` that exists for exactly the same reason. "1 members" on the clan list. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -566,6 +566,14 @@ That paragraph exists because the kit's acceptance run
|
|||||||
([`kit-acceptance.md`][acceptance]) built a module by following this chapter to the
|
([`kit-acceptance.md`][acceptance]) built a module by following this chapter to the
|
||||||
letter, and its page rendered outside the site. Everything else it wrote was right.
|
letter, and its page rendered outside the site. Everything else it wrote was right.
|
||||||
|
|
||||||
|
**And check a component's prop names against [§3.4][api] rather than guessing
|
||||||
|
them.** `PageHeader` takes `eyebrow`, `title`, `lead` and `center` — a page that
|
||||||
|
passes `subtitle` renders its heading and nothing under it, because an unknown
|
||||||
|
prop on a React component is silently dropped. Nothing warns, in the console or
|
||||||
|
anywhere else; the page simply looks emptier than every core page around it. This
|
||||||
|
template shipped exactly that mistake until a run of it against a real core was
|
||||||
|
looked at, which is the only way that class of thing is ever found.
|
||||||
|
|
||||||
**It is curated and closed, not a re-export of core's component library.** Adding
|
**It is curated and closed, not a re-export of core's component library.** Adding
|
||||||
to it is a minor version bump, and so is adding an optional prop to a member;
|
to it is a minor version bump, and so is adding an optional prop to a member;
|
||||||
changing an existing prop is a major one.
|
changing an existing prop is a major one.
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export default function Clan() {
|
|||||||
<>
|
<>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title={data.name}
|
title={data.name}
|
||||||
subtitle={`${data.memberCount} members${data.abbr ? ` · ${data.abbr}` : ''}`}
|
lead={`${data.memberCount} members${data.abbr ? ` · ${data.abbr}` : ''}`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Core's per-Team notification control lands here — ABOVE the roster,
|
{/* Core's per-Team notification control lands here — ABOVE the roster,
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export default function Clans() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PublicLayout shell="narrow">
|
<PublicLayout shell="narrow">
|
||||||
<PageHeader title="Clans" subtitle="The companies, orders and warbands of the world" />
|
<PageHeader title="Clans" lead="The companies, orders and warbands of the world" />
|
||||||
|
|
||||||
{loading && <Loading />}
|
{loading && <Loading />}
|
||||||
{error && <ErrorState error={error} />}
|
{error && <ErrorState error={error} />}
|
||||||
@@ -34,7 +34,9 @@ export default function Clans() {
|
|||||||
<Link to={`/examplegame/clans/${clan.externalId}`}>
|
<Link to={`/examplegame/clans/${clan.externalId}`}>
|
||||||
{clan.name}{clan.abbr ? ` [${clan.abbr}]` : ''}
|
{clan.name}{clan.abbr ? ` [${clan.abbr}]` : ''}
|
||||||
</Link>
|
</Link>
|
||||||
<span style={{ opacity: 0.7 }}> — {clan.memberCount} members</span>
|
<span style={{ opacity: 0.7 }}>
|
||||||
|
{' '}— {clan.memberCount} member{clan.memberCount === 1 ? '' : 's'}
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -48,7 +48,12 @@ export default function WorldStatus() {
|
|||||||
<PublicLayout shell="narrow">
|
<PublicLayout shell="narrow">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="World status"
|
title="World status"
|
||||||
subtitle="What the game server last told us about itself"
|
// `lead`, not `subtitle`. PageHeader takes `eyebrow`, `title`, `lead` and
|
||||||
|
// `center`, and an unknown prop on a React component is silently dropped —
|
||||||
|
// so a page written with `subtitle` renders its title and nothing else, on
|
||||||
|
// a site where every core page has a line under its heading. Nothing warns.
|
||||||
|
// Found by installing this template into a real core and looking at it.
|
||||||
|
lead="What the game server last told us about itself"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{loading && <Loading />}
|
{loading && <Loading />}
|
||||||
|
|||||||
Reference in New Issue
Block a user