feat: Improve markdown typography #2179

marek-mihok commented 7 months ago

The PR fulfills these requirements: (check all the apply)

[x] It's submitted to the main branch.
[x] When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
[x] When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
[x] If changes were made to ui folder, unit tests (make test) still pass.
[ ] New/updated tests are included

This change allows using compact=False attribute to toggle on a modern, well-structured and reader-friendly markdown look!

https://github.com/h2oai/wave/assets/23740173/cdae1e2c-58d9-4799-aaa0-5fe3a1fda185

Updated API is as follows:

/**
 * Create a card that renders Markdown content.
 *
 * Github-flavored markdown is supported.
 * HTML markup is allowed in markdown content.
 * URLs, if found, are displayed as hyperlinks.
 * Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.
 * :icon "InsertTextBox"
 */
interface State {
  /**
   * The title for this card.
   * :t "textbox"
   * :value "Untitled Content"
   **/
  title: S
  /**
   * The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
   * :t "textarea"
   * :value "Hello, World!"
   **/
  content: S
  /**
   * Additional data for the card.
   **/
  data?: Rec
  /**
 * In compact mode markdown content takes less screen space. Defaults to True.
 **/
  compact?: B
}

In addition, this PR fixes an issue where there was a conflict when using multiple markdown cards on the same page.

Closes #2179

mturoci commented 7 months ago

@marek-mihok there is no need to add the whole Tailwind. The issue talks about adding only styles from https://tailwindcss.com/docs/typography-plugin.

marek-mihok commented 7 months ago

Can you please add an example with all the markdown elements for a side by side comparison?

I've updated the existing example with side by side comparison. Please let me know if it is fine.

Seems like the new styles are pretty spacious. Let's add compact attribute defaulting to true to toggle this behavior.

Done ✅

Can the added CSS be loaded dynamically (only when markdown card is actually used)?

Done ✅

@mturoci since this is a visual change, do we need tests checking if proper styling is applied when compact=False?

h2oai / wave

feat: Improve markdown typography #2179 #2189