What are the limitations of HTML tags in the Charmhub visualization of the README.md?

juju
, ,
1

We have a custom README.md file for our slurm-charms that contains many HTML tags for fancier styles (mostly for centering elements).

The problem is that the GitHub rendering is not the same as the CharmHub store visualization.
Compare Github README with the CharmHub README:

  • CharmHub is breaking the lines in the same paragraph, that should not happen in a Markdown file (consecutive lines should be in the same paragraph)
  • Center alignment (with align="center") is not moving the logo to the center of the page.

So, what are the limitations of HTML rendering in Charmhub? What are the accepted tags that we can use? Or should we avoid them at all costs?

Which Markdown “flavor” is supported (CommonMark, GitHub, Sphinx, etc.)? Are there any extensions we can use?

2

Hi @heitor

The reason for this issue is that the paragraphs in all our Canonical websites have a width limit to help with readability. When lines of text become too long it makes them harder to read, so we limit this width to improve legibility. When you add custom HTML to centre align the elements on the page, what happens is that the container of the titles has a different width as the containers of the paragraph, which makes your page look misaligned.

As for your question on markdown, we support CommonMark without any extensions in Charmhub.

Most developers don’t customise their readme much, so we have chosen to be consistent in styling across our charm detail pages. I would suggest as little custom styling as possible should give you the best results.

3

Thanks for the input @danielmutis.

I removed the HTML tags from the README.md and now the paragraphs have longer lines. Something was breaking the lines before the text width.