[OUDS] Improve component marker in headings

[MaxLardenois]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Use a remark/rehype plugin to add a [[comp]] placeholder string instead of inline svg to mark paragraph as a component type definition in headings.
Maybe we could use that to display the svg in TOC also.

The plugin will replace [[comp]] by <svg class="hl-small-icon me-scaled-2xsmall mb-xsmall" width="1rem" height="1rem" aria-hidden="true"><use xlink:href="/[getBrand]/docs/0.5/assets/img/ouds-web-sprite.svg#component-atom" />

Motivation and context

As we will use this svg in headings many times it make sense to automate it and colocalise where the svg is defined.

[hannahiss]

I'm afraid that by using an astro component for some headings, we'll have issues with the generation of the TOC on the right. I remember we had that with some callouts containing headings.

[MaxLardenois]

I'm afraid that by using an astro component for some headings, we'll have issues with the generation of the TOC on the right. I remember we had that with some callouts containing headings.

Yes, that's why I'm suggesting to use a remark plugin and a string placeholder. Hopefully TOC generation (headings listing is done by remark) will have access to the string placeholder and we can add the svg in the TOC too.
But even if it's not the case (which I suspect) it will still be better to only have one location where the SVG is defined.