Leading/trailing slashes on image paths

[hobbes7878]

OK, in reference to reuters-graphics/bluprint_graphics-kit#94 the default ai2svelte component isn't rendering the correct path in dev. I think this is down to the fact the default ai-map was created with an outdated ai2svelte, BUT I want to catalogue the original issue we were solving with the changes to the assets path here so I don't get lost in this again...

So here are the variations of assets value we see that is passed to ai2svelte's assetsPath prop:

• / - default assetsPath prop in ai2svelte component
• `` - empty path in dev in Kit, which is coalesced to /
• https://graphics.thomsonreuters.com/testfiles/2022/abcde12345/cdn - Preview path without trailing slash
• https://graphics.reuters.com/ROOT-SLUG/WILD/abcde12345 - Prod path without trailing slash

We want to ensure the preview and prod paths include a trailing slash, so I've introduced this regex:

assetsPath.replace(new RegExp('/([^/.]+)$'), '/$1/')

... which gives me the following for all the examples above:

• /
• /
• https://graphics.thomsonreuters.com/testfiles/2022/abcde12345/cdn/
• https://graphics.reuters.com/ROOT-SLUG/WILD/abcde12345/

From there, the path to the image needs to NOT include a leading slash, which is the issue in Kit where it's currently concatenated like this:

<div
        id="g-ai-chart-xs-img"
        class="g-aiImg"
        alt=""
        style="background-image: url({assetsPath.replace(
          new RegExp('/([^/.]+)$'),
          '/$1/'
        ) || '/'}/images/graphics/ai-chart-xs.png);"
      ></div>

Which in dev creates a protocol relative instead of a root relative path:

• //images/graphics/ai-chart-xs.png

I just checked a project created with the most recent ai2svelte version and the image path does not include the leading slash:

<div
        id="g-nordstream-map-sm-img"
        class="g-aiImg"
        alt=""
        style="background-image: url({assetsPath.replace(
          new RegExp('/([^/.]+)$'),
          '/$1/'
        )}images/graphics/nordstream-map-sm.png);"
      ></div>

So I just need to remove that leading slash in the demo ai2svelte in Kit.

No changes here, but want this record of the changes we made...