Repository navigation
docs: link example pages to the hosted web example app - #4384
Merged
Merged
Conversation
The web example app opens an example from #/<groupName>/<name>, using the group and name from docs/examples.json. Examples marked webSupported get a "Try it on web" link on their doc page.
Each group is a nested stack named after its directory (Map) and each example a route named <groupName>/<name> (Map/ShowMap). On web, React Navigation's linking maps these to /example-app/Map/ShowMap, so the URL follows navigation, back/forward work and reloads land on the same screen. The docs link to these paths. GitHub Pages has no SPA fallback, so update-docs writes a copy of the exported index.html at each documented group and example path.
This branch was successfully deployed
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.
Description
Example doc pages get a "Try it on web" link that opens the example in https://rnmapbox.github.io/example-app/, e.g. https://rnmapbox.github.io/example-app/Map/ShowMap.
The example app's navigation now uses named routes instead of the generic
Group/Itemroutes with a label path. Each group is a nested stack named after its directory (Map), and each example is a route named<groupName>/<name>(Map/ShowMap), using the names fromdocs/examples.json. The screens are generated from the existing group/item tree. On web only, React Navigation'slinkingconfig maps these to/example-app/Mapand/example-app/Map/ShowMap, so the URL follows navigation, browser back/forward work, and reloads land on the same screen. The base URL is part of the screen paths becauseconfig.pathdoesn't match the bare/example-app.GitHub Pages has no SPA fallback, so
update-docs.ymlrunsexample/scripts/web_route_pages.jsafterexpo export, which writes a copy of the exportedindex.html(it only uses absolute/example-app/...URLs) at each group and example path indocs/examples.json.Only examples with the new
webSupported: truemetadata get the link. It is opt-in, unlikeexcludeFromPercy, so new examples aren't linked until someone checks them on web. I opened all examples on a local staticexpo export -p webwith Playwright: 41 of 70 work and are marked. The 29 left out are:Images/Models: SymbolCircleLayer CustomIcon, CustomIconNativeAsset, ScalableImages, ShapeSourceIcon; Annotations CustomCallout; V10 SimpleModelLayer.ShowMap, MapFps and MapUnMount are linked even though their user-location part is a no-op on web.
Native keeps the same lists, titles and back behaviour. I checked that with Detox on iOS (
firstTest,visual, and a 10-exampledocScreenshotssample, whose screenshots match a baseline build) and an Android smoke run through groups, examples, Most recent, the Bug Report page, and system and in-app back.Checklist
CONTRIBUTING.mdyarn generatein the root folder/exampleapp./example)Screenshot OR Video
Generated doc page excerpt: