Add SVG topology to bundles

[solazio]

Done

• Add SVG topology to bundles oveview page.

How to QA

• Visit the demo in your browser, link commented below
  • Or you can run the project locally using the dotrun snap with $ dotrun and view it in your web browser at: http://localhost:8045/kubeflow
  • If your demo doesn't work, read more about the demoservice
• Run through the following QA steps
• Compare to design 1 and design 2

Issue / Card

Fixes #

Screenshots

[webteam-app]

Demo starting at https://charmhub-io-775.demos.haus

[anthonydillon]

Why not just add the topology to the template above the readme? It will give you more freedom to mark it up and its where the next developer will first look to find it.

Does the design ask for it to be injected into the readme?

[solazio]

Why not just add the topology to the template above the readme? It will give you more freedom to mark it up and its where the next developer will first look to find it.

Does the design ask for it to be injected into the readme?

@danielmutis said that he wants the title to come first as per the design. @danielmutis what do you think?

[tbille]

The main title of the page is the bundle name on the header.

As a developer I would expect to see my readme not modified with injected image. It seems more natural to have before the readme to get a quick understanding of the bundle.

It also removes a code complexity, and we like simple code 😆

[danielmutis]

@solazio Let's push the whole readme below the image then.

@tbille @anthonydillon my main worry about the image is that it pushes the content down by a lot because they are quite large. I wonder if maybe we should hide part of it and have a show more.

[anthonydillon]

You could put the topology in its own tab?

[anthonydillon]

Thanks @solazio, few comments inline.

[anthonydillon]

LGTM 👍