wtclaude
556dee7355
All checks were successful
PR checks / checks (pull_request) Successful in 49s
Replaces phase 1's scaffold with the real homepage: hero, the data path as
inline SVG, the self-hosted argument, all five capability groups, and the
get-started CTA. Three decisions the org lead took first are recorded in
PLAN.md as D17-D19.
The data path is drawn generically and captioned specifically (D17): the nodes
say "your game server" and "sidecar", the sub-labels and caption name ServUO and
uo-link. The SVG is aria-hidden because the four numbered steps beside it carry
the same path in prose — one telling, not two.
The capability list is data with a check behind it (D18). Every Game-intelligence
item names the module-uo capability slug it comes from, and the build fails if
the page and platform.json disagree either way. That needed a fifteenth fact in
checkFacts.mjs: §12 named the capability list as an externally-sourced fact and
nothing re-read it, so the chain rested on someone remembering. It also found
that the site was omitting two of the module's eight capabilities — guilds and
city governors are now listed, in the page and in §10.
The hero leads with the emblem (D19), derived from whichever logo.png is in
force so one file still changes the hero, header, tab icon and app icon
together.
Also here, both found by standing the build up rather than by review:
- checkBrand.mjs now enforces the demo slot's markup contract. applyBrand.mjs
reveals the demo link by replacing an exact pair of empty attributes; an
attribute inserted between them produces a build where the mount sets a demo
URL, the boot log says nothing and the link never appears. Both halves are
checked and the literal is derived from the expression applyBrand.mjs uses,
so they cannot drift.
- The header nav overflowed at 390px — four links plus the lockup measured
433px against a 390px viewport, so every phone got a horizontally scrolling
page. Phase 1 left this to phase 3 expecting a disclosure control; it got a
wrap instead, because with four links there is nothing to disclose and a
hamburger costs state, script and duplicate markup.
Verified on a clean checkout of this commit: all four checks, astro check, a
production build, a live /brand/* smoke, and a demo URL mounted and reverted.
Co-Authored-By: Claude <noreply@anthropic.com>
118 lines
3.6 KiB
Plaintext
118 lines
3.6 KiB
Plaintext
---
|
|
import { brand } from '../../lib/brand.mjs';
|
|
|
|
/**
|
|
* The get-started CTA (PLAN.md §10, the `/` row), built around the trap in §10's
|
|
* "installation path": a "Runic Gateway install" is two independent installs. The installer
|
|
* binary sets up the shard side only and never contacts the website; the website is a
|
|
* separate Docker deployment.
|
|
*
|
|
* That belongs on the homepage rather than being saved for the docs. It is the single
|
|
* misunderstanding most likely to make an evaluator think the software is broken, it costs
|
|
* two sentences to prevent, and §13 calls the installation path the priority of the whole
|
|
* project. Saying it here is what makes the docs a confirmation rather than a surprise.
|
|
*
|
|
* The two halves are ordered site-first because that is the order they must be done in: the
|
|
* shard side ends by pasting four values into the site's admin panel, which has to exist.
|
|
*
|
|
* Both "read the docs" links point at `/docs/` rather than at a page inside the journey.
|
|
* Phases 7 and 8 write those pages and own their slugs; guessing one now would put a URL in
|
|
* this file that nothing checks and that a later phase would have to remember to fix.
|
|
*/
|
|
---
|
|
|
|
<section class="page section start">
|
|
<div class="panel start__panel">
|
|
<p class="eyebrow">Getting started</p>
|
|
<h2>An install is two installs</h2>
|
|
<p class="start__lede prose">
|
|
This trips up almost everyone once. The website and the game-side bridge are separate
|
|
deployments on separate machines, and neither one installs the other. Doing them in
|
|
order takes an evening.
|
|
</p>
|
|
|
|
<div class="start__halves">
|
|
<div class="start__half">
|
|
<h3><span class="start__num">1</span> The site</h3>
|
|
<p>
|
|
A Docker Compose deployment on whatever host serves your community — a small VPS is
|
|
plenty. Pull the images, bring it up, create the first admin, then install a game
|
|
module from the admin panel.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="start__half">
|
|
<h3><span class="start__num">2</span> The game side</h3>
|
|
<p>
|
|
One binary, run on the machine the game server already lives on. It syncs the plugin,
|
|
installs the sidecar as a service, and prints four values. You paste those into
|
|
Admin → Shard, and the two halves find each other.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="start__actions">
|
|
<a class="btn btn--primary" href="/docs/">Read the install guide</a>
|
|
<a class="btn btn--ghost" href={brand.giteaOrg} rel="noopener noreferrer">Browse the source</a>
|
|
<a class="btn btn--ghost" href={brand.discordInvite} rel="noopener noreferrer">Ask on Discord</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.start__panel {
|
|
padding: clamp(1.5rem, 4vw, 2.75rem);
|
|
}
|
|
|
|
.start h2 {
|
|
margin: 0 0 0.75rem;
|
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
}
|
|
|
|
.start__lede {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.start__halves {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
|
|
}
|
|
|
|
.start__half h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.65rem;
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.start__num {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 1.9rem;
|
|
height: 1.9rem;
|
|
flex: none;
|
|
border: 1px solid var(--gold-deep);
|
|
border-radius: var(--radius-pill);
|
|
color: var(--gold);
|
|
font-family: var(--display);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.start__half p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.start__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 2.25rem;
|
|
}
|
|
</style>
|