Repository navigation
Redesign homepage with a click-to-run live map hero - #22
Merged
Merged
Conversation
Hero now explains what the library is, lists platforms, links to install and examples, and shows the web build of the example app inside a phone frame. The live map only loads on click; a static WebP poster is shown until tiles actually load, and stays if they fail (e.g. the URL-restricted token rejecting a non-production origin). Also replaces the 1.7 MB hero PNG with WebP assets, drops the unused Docusaurus template feature component, fixes the mobile horizontal overflow, and nudges one Prism token color and the homepage primary buttons to pass WCAG AA contrast.
mfazekas
marked this pull request as ready for review
October 26, 2026 09:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reworks the homepage so a first-time visitor sees what @rnmapbox/maps is, which platforms it supports, how to install it, and where to go next (install, examples, components, navigation, community).
The hero shows the example app's existing web build (
/example-app/V10/GlobeProjection) inside a phone frame. It only loads on click: until then it is a 68 KB WebP poster, and the poster stays up until tiles actually load, so a missing or rejected token shows "Live map unavailable here" instead of a blank map. It reuses the example app's URL-restricted token, so the homepage needs no token of its own. Without JS, the button is a plain link to the example page.Also swaps the 1.7 MB hero PNG for WebP, removes the unused template
HomepageFeaturescomponent, removes the obsolete Gitter footer link, fixes the mobile horizontal overflow, and adjusts one Prism token color and the homepage primary buttons to pass WCAG AA contrast.Lighthouse on local builds (median of 3, before → after): mobile performance 72 → 76, simulated LCP 13.9s → 5.7s; desktop 87 → 97, LCP 2.4s → 1.2s; accessibility, best practices and SEO stay at 100. Page weight drops from 2.6 MB to 1.0 MB.
Adds a "Turn-by-turn navigation" section with a 13 s muted loop of
<NavigationView>on a simulated route (Android emulator), in the same phone frame, and the same clip on the navigation overview page. ThePhoneVideocomponent usespreload="none"and only plays while on screen, so page load fetches just the 25 KB poster (WebM 386 KB / MP4 395 KB load on scroll); reduced-motion and no-JS visitors get the poster. Lighthouse is unchanged with it (mobile 76, desktop 97, median of 5 and 3 runs, page weight +25 KB).