Render markdown in description fields (fixes #153)

[alvesitalo]

This creates a markdown render component and adds a story.

Pull Request checklist

• The pull request has a descriptive title (and a reference to an issue it
  fixes, if applicable)
• All tests and linter checks are passing
• The pull request is free of merge conflicts

[wlach]

This looks great, I actually don't have any feedback. :) Merging as-is.

[wlach]

Actually, sorry, there are some changes I'd request (it's been a long day). With regard to ping descriptions, we should also use this component on this page: https://github.com/mozilla/glean-dictionary/blob/main/src/pages/PingDetail.svelte

Also, I think we need to apply this to more than just pings. For example, metrics might have markdown in their descriptions as well. See, for example:

http://localhost:5000/#!/apps/fenix/metrics/metrics.search_count

[alvesitalo]

Pings and metrics are having markdown in their descriptions now. In addition, the markdown is being rendered inline, so pings will no longer have a <p> wrapping tag. 🎉

[wlach]

Code looks good now, thanks!

Thinking about this a bit more, I think we should generalize this to a Markdown component and use slots, instead of hardcoding a description field . That way you could do something like this just about anywhere:

<Markdown>
This my *markdown* text with a [link](https://mozilla.org)
</Markdown>

Do you mind making the modifications? After that, I'd be very happy to land.

[alvesitalo]

I don't. I think It's a great idea.

[alvesitalo]

Done! Markdown component is working, I just had to add a text var to work as a fallback for slot on StoryBook. Let me know if everything is OK.

[wlach]

Hmm, it's a bit unfortunate that this adds a hidden div to the document:

I offhand don't know of a better way of doing this though, and your solution does work well, so am inclined to merge.

[wlach]

Awesome work @alvesitalo! Congratulations on getting this over line.