New sandcastle title and dirty state tracking

[jjspace]

Description

• Clean up the window title management. Now shows the name of the sandcastle or "New sandcastle" and "Cesium Sandcastle"
• Add "dirty" state tracking for the code. When dirty add a * to the page title
• Warn when navigating away from the page or trying to load a different gallery item if the code is "dirty"
  • "Saving" the code by clicking "Share" which currently updates the url in place is considered "clean" again because forward/back navigation will work to that URL. This behavior may change when the share functionality gets improved.
• Slightly updated how the version string in the top right is constructed, it was broken before.

Merge after #12755 as this is based on the UI work in there

Issue number and link

Part of #12566

Testing plan

• Run npm run dev in the sandcastle package or npm run build-sandcastle and npm start from the project root
• load new sandcastle and check the title
• Swap to a gallery demo and check the title
• Make a change to the code and make sure the title gets it's *
• Try navigating away when in the "dirty" state and make sure it always shows a warning
  • Reload the page
  • Click the top logo
  • Close the tab/window
  • Click a different gallery demo
  • Click the code button for a different demo

Author checklist

• I have submitted a Contributor License Agreement
• I have added my name to CONTRIBUTORS.md
• I have updated CHANGES.md with a short summary of my change
• I have added or updated unit tests to ensure consistent code coverage
• I have updated the inline documentation, and included code examples where relevant
• I have performed a self-review of my code

[github-actions]

Thank you for the pull request, @jjspace!

✅ We can confirm we have a CLA on file for you.

[ggetz]

Thanks @jjspace! A few questions and branding-related comments.

[ggetz]

This is totally up-to-par with what we had before, but what do you think of propagating the current sandcastle to local storage or similar?

The goal would to be to persist state, like what happens when you reload a GitHub tab with an in-progress comment. Or maybe a slightly different workflow, like what happens if you leave and come back to https://geojson.io/.

[jjspace]

what do you think of propagating the current sandcastle to local storage or similar?

This (or similar) has been requested often and I do really want to find some solution to try and prevent lost work. However I think it should be a separate effort, this PR just tries to match the functionality of the existing sandcastle. This is already on the running task list but further down for lower priority.happy to re-evaluate if you think it's a "must have" before release.

My current thought is not to make it truly persist every page load but offer a "saved state" that we can suggest the user reload like jsfiddle does

[ggetz]

No problem with adjusting this as a subsequent PR.

We should probably link or move this conversation to the issue, which I'll let you organize as you see fit.

But for the sake of keeping it going:

My current thought is not to make it truly persist every page load but offer a "saved state" that we can suggest the user reload like jsfiddle does

Cool, that sounds appropriate to me. That seems very similar to what https://geojson.io/ does, as I linked above and shown below. But let me know if I misunderstood.

[jjspace]

@ggetz no updates yet but I responded to all your comments if you wanna take another look.

[ggetz]

@jjspace Responded above. Hopefully that's enough to move forward. But, if not, let me know and we can chat further.

[jjspace]

Thanks @ggetz, I like your suggestions. The title has been simplified to Sandcastle* | CesiumJS or [title]* | Sandcastle | CesiumJS. The dirty * will only show up if it's actually been modified. The title will only show when viewing the actual gallery demos for now to keep the title cleaner.

This should be ready for another look, please merge if happy

[ggetz]

Working great! Thanks @jjspace!