Splitting "How It Werks" in two
Two things, in order. First, what the fold at the bottom of the map looks like
after the grab-bag of facts moves out — the same four steps, no longer squeezed
into 12.5px fine print, ending in one link. Second, the page those facts move
to: /how-it-werks/, built the way /how-we-know/
already is, because that page solved this exact problem for data-sourcing questions
and there was no reason to solve it twice.
How it werks
Search the map or build yerself an itinerary — everything you save
stays in this browser, your location never leaves your device, and here's exactly what
happens when you use it.
Your Location & Privacy
What happens when I hit Near Me?
Your browser asks
permission, and saying no is fine — the city and ZIP boxes do the same job. Say yes,
and your location stays on your device: it's used only to measure distance to a stop,
never sent to us, and never saved. Reload the page and it's forgotten, though your
browser remembers your answer and won't ask twice.
Settings & Yer Stuff
Where do my bookmarks and itineraries live?
Right here in
this browser, and nowhere else. Bookmarks, saved itineraries and yer two Settings never
leave your device. Forget everything on this device clears all of it and puts
the search back to how it arrived.
What do the two Settings do?
One picks which app a
Directions button opens; the other picks what color the page is. Both are saved
alongside your bookmarks, so they're still set after you reload.
How Directions Hands Off
Why does my itinerary only show part of the drive?
It depends on your maps app. Apple takes a whole itinerary in one link on iOS 18.4
and later — an older iPhone shows only the last stop. Google takes three stops at a
time on a phone, so a long itinerary hands over as a few legs.
What this mockup is answering
roadmap/how-it-werks/PROPOSAL.md asked four questions before anything got
built. Here's where each one landed.
Does it become a page, or a shorter section?
Both, split down the middle. The how-to steps stay on the map — they're the part
somebody wants at their fingertips while actually using the thing, and they were never the
part that was messy. The grab-bag of facts becomes /how-it-werks/, a
document page built the same way /how-we-know/ already is.
What stays on the map?
All four jump links and the sticky bar's How It Werks button keep working exactly
as they do today — #howitwerks is still a real fold with real content in it,
just shorter. Nothing that currently scrolls to an in-page anchor starts navigating away
instead.
The overlap with /how-we-know/ — measured, not guessed
Of the eight original "Important Info" paragraphs, two are pinned in place for reasons that
have nothing to do with tidiness: Data Freshness carries the UPDATED:START/END markers
scripts/build.mjs writes into on every build, and where the roadtrip line comes
from is the page's OSRM/OpenStreetMap attribution — the code that was already here said, in
so many words, "it does not move and it does not change," and that call stands. Three more —
what's new, where our data comes from, and how this site looks — were never content of their
own; each was one sentence ending in a link to /roadmap/, /how-we-know/
or /style-guide/. Those three collapse into one line on the map that still carries
all three links (index.html has to keep them somewhere — verify-pages.mjs checks for each by
name) and get the fuller "More About This Site" treatment on the new page instead. The three
that were genuinely new writing — privacy, Settings, the Directions hand-off — are the only ones
that actually moved.
Does the footer actually get shorter, or does it just move?
Shorter, and measured rather than assumed once the OSM constraint was found. The old
"Important Info" column ran 384 words at 12.5px. What's left inline is 102 words —
the Data Freshness line, the OSM paragraph verbatim, and one new sentence linking out — because
two of those eight paragraphs turned out not to be movable at all. The ~150 words that were
genuinely new moved to a page built for reading them, at 16px body text instead of 12.5px.
The font-size fix, specifically
The old column inherited footer{font-size:12.5px} in index.html — a rule
sized for the copyright line at the very bottom, not for content anyone was meant to sit and
read. The four steps that stay on the map move to 15px. The new page inherits
page.css's 16px body text the same way every other document page does.
Chrome
This file's breadcrumb and footer are copied byte-for-byte from
roadmap/find-whataburger/mockup.html, which scripts/verify-docs.mjs
treats as the canonical copy for every mockup under roadmap/. The embedded
preview of the new page carries its own second breadcrumb and its own footer-shaped div,
because it's showing what that page's chrome looks like — neither one is this mockup's real
chrome, which is the pair at the very top and very bottom of this file.
What shipped
/how-it-werks/index.html is live, generated by a real function in
scripts/build-pages.mjs the way /how-we-know/'s is — not a hand-typed
file, so it can't drift the way this bench's embedded preview could. It carries its own FAQPage
and BreadcrumbList JSON-LD, its own canonical, and is named in sitemap-home.xml and
llms.txt. index.html's own fold links to it. This project moved from
Planned straight to Launched in data/launched.json — no Building Now stop in
between, since the direction was approved and built in one pass rather than shipped in stages.
Not verified
I have not opened either page in an actual browser myself — I don't have one attached to this
session. Every check that runs from the command line passes (verify-docs.mjs,
verify-pages.mjs, verify-links.mjs, verify-facts.mjs), and
node --check confirms the build scripts still parse, but none of that is the same as
a person looking at the rendered page. Open both before calling this done.