Enhancement: do not incapacitate browser back button

[webketje]

Information

The glob-tool kind of abuses the browser history API. I suspect too many pushState calls (perhaps through a library like vue-router or caused by sync'ing the example options & input to the URL). As soon as one nagivates to https://do.co/glob-tool or the full URL https://www.digitalocean.com/community/tools/glob the browser back button is severely incapacitated as 8 history entries are added.

Details

Steps to reproduce

Navigate to do.co/glob-tool or the full URL in any browser, then long-press the browser back button (in Firefox and Chromium this displays a list of the previous history entries).

Expected behavior

At most 1 or 2 history entries should be added. Perhaps possible to use history.replaceState

[MattIPv4]

👀 Would appear to be a bug, I don't recall it doing that historically (it used to just push a single entry iirc for the default values).

That being said, also agree it should probably be using replaceState instead. Switching to that "fixes" this, but would be great to solve for why it writes 8 times on first load in the first place.

[webketje]

Another idea is to only read from the URL on initial load, and combined with #9 instead provide a share button with an input box and copy button with the live updated share URL (a bit similar to how Youtube video share button works)..
If this is added sync'ing to the url bar for easy copying becomes obsolete.

[MattIPv4]

I would probably still want to write to the URL even if the share button was implemented, as it not only allows someone to just copy the URL to share, but also acts as a great way to implicitly save state (rather than writing to localstorage etc.). We follow a similar pattern for our NGINXConfig tool, and in a way with our DNS/SPF tools (they write the domain to the URL).