Both doors get a share card, and they are not the same card
A link to tera.lumbridgecorp.com or office.lumbridgecorp.com unfurled as a bare
blue URL. No picture, no sentence, and a title — "Lumbridge Simulate — San
Francisco" — that was wrong at one of the two doors and stale at the other.
There were no `og:` or `twitter:` tags in the document at all. For a project
whose entire pitch is that you should look at it, that is the most expensive
missing markup in the repo.
Both cards are screenshots of the running app, not drawings of it, and that is
the load-bearing decision rather than a shortcut. `scripts/brand-assets/` builds
them in two passes: shoot the city and the office out of `dist/`, then render
`og.html` over those shots at exactly 1200x630. The thing is worth looking at,
and a drawing of it goes stale in silence — which is not hypothetical. The card
currently live on lumbridgecorp.com is a viewport screenshot of a marketing page
that has since been rewritten, so that preview advertises a positioning the site
no longer uses, and it has been doing so for a month with nobody noticing. A
card regenerated from `dist/` by one command is a card that can be kept true by
running the command.
The clock is shifted to midday for the capture, because the sun is real —
`observe()` computes it from `new Date()` — and a card regenerated at two in the
morning is an honest photograph of a black rectangle. Shifted rather than
frozen: everything else runs off `requestAnimationFrame`, and a stopped clock
stalls the frame loop the screenshot is waiting on.
Every string on the cards is the project's own. The headlines are what
`README.md` already says each half is; "Clone it and it works" is CONTRACT.md
§0's acceptance test in the words `main.ts` uses for it; the licence in the
corner is the one in the repo root. A share card is the most-read and least
reviewed sentence a project has, which is exactly why it should not be where new
claims get invented.
The harder half was that the two doors are one bundle. The app sorts out which
door it is by reading its own hostname; a crawler cannot, because it reads the
HTML and nothing else — so one `index.html` means both doors unfurl as the same
place, and being a different place is the office door's whole reason to exist. A
second hand-written shell is what the Caddy config already argues against for the
static root ("sharing the root rather than copying it means a deploy cannot leave
the two doors on different builds"), and two 900-line files each carrying the
inline stylesheet would drift on the first CSS change with nothing to notice.
So the build emits both. Everything outside the `ogc:` markers is copied byte for
byte — verified: `office.html` and `index.html` are identical below `</head>` and
point at the same bundle hash — and only the head block differs. A change to the
interface reaches both doors by construction. It runs in `writeBundle` rather
than `transformIndexHtml` because it needs the finished document, after Vite has
rewritten the asset URLs, and it errors rather than no-oping if the markers go
missing: a card that is quietly the wrong one is the failure the plugin exists to
prevent.
`deploy/Caddyfile.snippet` documents the one line that turns it on — the office
door's `try_files` fallback pointing at `/office.html` off the same shared root.
A deployment that skips it is not broken; the office door keeps working and
unfurls with the city's card, which is what it did before.
Not deployed. The live Caddyfile still falls back to /index.html for the office
host, so this needs that one-line change on cloud-2 before office.
lumbridgecorp.com unfurls as the office.
Both shells boot clean in Chrome with zero console errors, 31 client tests and
the no-binary gate still pass — `public/` is exempt from it, which is where the
two PNGs live.
This commit is contained in:
+51
-1
@@ -20,7 +20,57 @@
|
||||
and logs the 404 to the console, which buries the errors that matter.
|
||||
-->
|
||||
<link rel="icon" href="data:," />
|
||||
<title>Lumbridge Simulate — San Francisco</title>
|
||||
|
||||
<!--
|
||||
==== Social ==== ogc:start
|
||||
Everything between the `ogc:` markers is rewritten at build time to produce
|
||||
`office.html`, which is the same page with the office's title, description
|
||||
and card on it. See the `twoDoors` plugin in `vite.config.ts` for why that
|
||||
is a build step and not a second hand-maintained file.
|
||||
|
||||
Both doors had none of this at all, which for a project whose entire pitch
|
||||
is visual is the most expensive line of missing markup in the repo: a link
|
||||
to either one unfurled as a bare blue URL with no picture, no title beyond
|
||||
the tab's, and no sentence.
|
||||
-->
|
||||
<title>Tera — cities from above, and an office you can walk into</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="The map view of Lumbridge Simulate: a real sun and moon over a board you can fly around, and an office you can step into. Apache-2.0, self-hostable, runs with no server at all."
|
||||
/>
|
||||
<link rel="canonical" href="https://tera.lumbridgecorp.com/" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Lumbridge Simulate" />
|
||||
<meta property="og:title" content="Tera — cities from above, and an office you can walk into" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A real sun and moon over a board you can fly around, and an office you can step into. Apache-2.0, self-hostable. Clone it and it works."
|
||||
/>
|
||||
<meta property="og:url" content="https://tera.lumbridgecorp.com/" />
|
||||
<!--
|
||||
Absolute, and it has to be. Several unfurlers — Slack and iMessage among
|
||||
them — will not resolve a relative `og:image` against the page URL, and a
|
||||
card that works on X and silently does not work in a DM is the worst of
|
||||
the two outcomes because nobody sees it fail.
|
||||
-->
|
||||
<meta property="og:image" content="https://tera.lumbridgecorp.com/og-tera.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="The San Francisco Bay Area rendered from above in Tera, under a midday sun."
|
||||
/>
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Tera — cities from above, and an office you can walk into" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A real sun and moon over a board you can fly around, and an office you can step into. Apache-2.0, self-hostable. Clone it and it works."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://tera.lumbridgecorp.com/og-tera.png" />
|
||||
<!-- ogc:end -->
|
||||
<style>
|
||||
/*
|
||||
* The whole interface, inline, on purpose.
|
||||
|
||||
Reference in New Issue
Block a user