WASM Sample App should update URL and provide links to specific samples

[michael-hawker]

Describe the bug

If you click on a specific sample at https://toolkitlabs.dev/ the url doesn't update, so you can't share a link to that specific sample page.

We need to:

• Have the URL update with information about the documentation page loaded
• Be able to process a non-root url and navigate to that page on launch
• Handle cases where that path is invalid and display a nice 404 page and have buttons to go to the home page, the Labs repo, the Toolkit documentation and Toolkit repo (as likely the experiment has moved to the main toolkit?)
  • Later maybe we want a mechanism for redirection if we know that is the case and can leave a stub metadata file or something somewhere that's non-invasive to the Labs repo?
• P2: If I select a specific sample from the drop-down (or have it in view) update url with an anchor # so that I can link to that sample, e.g. https://toolkitlabs.dev/contentsizer#leftsideshelf (don't think we want to have category/sub in url so we can re-organize later without breaking links)

Steps to reproduce

1. Go to toolkitlabs.dev
2. Click on a page
3. Look at URL

Expected behavior

See unique URL, able to copy it and share, open to that specific page when used.

Screenshots

No response

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

No response

Device form factor

No response

Additional context

No response

Help us help you

Yes, but only if others can assist.

[Arlodotexe]

Some useful resources:

• https://github.com/unoplatform/Uno.Wasm.Bootstrap/blob/main/doc/features-deep-linking.md
• Basic WebAssembly URL routing support unoplatform/uno#9373 (comment)

[Arlodotexe]

Thinking through this a bit, we'd want users to be able to navigate to:

1. Specific components as the first path parameter (e.g. https://toolkitlabs.dev/animations)
2. Documents within specific components as the second parameters (e.g. https://toolkitlabs.dev/animations/implicit-animations)

We have the setup to do the second, but we don't have a view for grouping sample docs by the component/package they're contained it. This would be useful for people using these packages and should be a considered as an improvement before building deep linking.