Support SEO friendly URLs

[petersalomonsen]

For the MVP for DevHub I did this (the commit from April 28th):

• allow using widget from src attribute for any URL path
• script and docs for publishing to NEARFS

In addition, for ensuring this has the proper quality to be merged, I've added the following:

• playwright test scripts
• devcontainer setup
• test pipeline
• tests for setting src and initialprops
• fix of attribute change handler
• test for SEO friendly urls

A test that demonstrates this, is implemented in router.spec.js:

test("for supporting SEO friendly URLs, it should be possible to set initialProps and src widget from any path", async ({ page }) => {
  await page.goto("/community/webassemblymusic");
  await page.evaluate(() => {
    const viewerElement = document.querySelector('near-social-viewer');
    viewerElement.setAttribute("src", "devhub.near/widget/app");
    const pathparts = location.pathname.split("/");
    viewerElement.setAttribute("initialProps", JSON.stringify({ page: pathparts[1], handle: pathparts[2] }));
  });
  await expect(await page.getByText('WebAssembly Music', { exact: true })).toBeVisible();
});

fixes #12

[petersalomonsen]

Thanks @elliotBraem . I'm not 100% finished with this. I need to create more tests, and documentation before I can merge it. Currently just tested the idea of being able to have the path controlling the props for the widget. As you say we also still want to be able to control which widget to display from the path, and we need a good way to support both behaviours or even combine them.

So I'm still trying to figure out how to introduce this in a good way, without breaking any existing use cases.