feat: Improve markdown typography #2179 (#2189)

h2oai · Nov 16, 2023 · a321fc9 · a321fc9
1 parent d956559
commit a321fc9
Show file tree

Hide file tree

Showing 15 changed files with 807 additions and 146 deletions.
diff --git a/py/examples/markdown.py b/py/examples/markdown.py
@@ -1,52 +1,66 @@
 # Markdown
 # Use a markdown card to display formatted content using #markdown.
 # ---
-from h2o_wave import site, ui
+from h2o_wave import site, ui, app, main, Q
 
-page = site['/demo']
 
-sample_markdown = '''=
-The **quick** _brown_ fox jumped over the lazy dog.
+sample_markdown='''
+# Heading level 1
+## Heading level 2
+### Heading level 3
+#### Heading level 4
+##### Heading level 5
+###### Heading level 6
+___
+The **quick** __brown__ *fox* **_jumped_ over** the ~~lazy~~ _dog_.
+
+This is <sup>superscript</sup> and this is <sub>subscript</sub>!
 
 Block quote:
 
 > The quick brown fox jumped over the lazy dog.
 
+Ordered list:
+
+1. James Madison
+1. James Monroe
+1. John Quincy Adams
+
 Unordered list:
 
-- The quick brown fox jumped over the lazy dog.
-- The quick brown fox jumped over the lazy dog.
-- The quick brown fox jumped over the lazy dog.
+- George Washington
+* John Adams
++ Thomas Jefferson
++ John Doe
 
-Ordered list:
+Nested list:
 
-1. The quick brown fox jumped over the lazy dog.
-1. The quick brown fox jumped over the lazy dog.
-1. The quick brown fox jumped over the lazy dog.
+1. First list item
+   - First nested list item
+     - Second nested list item  
 
 Image:
 
 ![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)
 
-Table:
+Image caption:
+
+<figcaption>A single track trail outside of Albuquerque, New Mexico.</figcaption>
+
+Table: 
 
 | Column 1 | Column 2 | Column 3 |
 | -------- | -------- | -------- |
 | Item 1   | Item 2   | Item 3   |
 | Item 1   | Item 2   | Item 3   |
 | Item 1   | Item 2   | Item 3   |
 
-'''
+Inline code:
+
+Use `ui.markdown_card` to start creating your own markdown content!
+
+Code block:
 
-page['example'] = ui.markdown_card(
-    box='1 1 3 10',
-    title='I was made using markdown!',
-    content=sample_markdown,
-)
-page['example1'] = ui.markdown_card(
-    box='4 1 3 10',
-    title='I was made using markdown!',
-    content='''
 ```py
 from h2o_wave import main, app, Q, ui
 
@@ -59,8 +73,29 @@ async def serve(q: Q):
         content='Hello, world!'
     )
 
-    await q.page`.save()
-''',
-)
+    await q.page.save()
+```
+
+<!-- This content will not appear in the rendered Markdown -->
+
+Ignore \*markdown\* formatting.
 
-page.save()
+Linking:
+
+This framework is made by [h2o.ai](https://h2o.ai)
+'''
+
+@app('/demo')
+async def serve(q: Q):
+    q.page['example'] = ui.markdown_card(
+        box='1 1 3 9',
+        title='Markdown - compact (default)',
+        content=sample_markdown,
+    )
+    q.page['example1'] = ui.markdown_card(
+            box='4 1 3 9',
+            title='Markdown - regular',
+            content=sample_markdown,
+            compact=False
+    )
+    await q.page.save()
diff --git a/py/h2o_lightwave/h2o_lightwave/types.py b/py/h2o_lightwave/h2o_lightwave/types.py
@@ -9608,11 +9608,13 @@ def __init__(
             title: str,
             content: str,
             data: Optional[PackedRecord] = None,
+            compact: Optional[bool] = None,
             commands: Optional[List[Command]] = None,
     ):
         _guard_scalar('MarkdownCard.box', box, (str,), False, False, False)
         _guard_scalar('MarkdownCard.title', title, (str,), False, False, False)
         _guard_scalar('MarkdownCard.content', content, (str,), False, False, False)
+        _guard_scalar('MarkdownCard.compact', compact, (bool,), False, True, False)
         _guard_vector('MarkdownCard.commands', commands, (Command,), False, True, False)
         self.box = box
         """A string indicating how to place this component on the page."""
@@ -9622,6 +9624,8 @@ def __init__(
         """The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/"""
         self.data = data
         """Additional data for the card."""
+        self.compact = compact
+        """Make spacing tighter. Defaults to True."""
         self.commands = commands
         """Contextual menu commands for this component."""
 
@@ -9630,13 +9634,15 @@ def dump(self) -> Dict:
         _guard_scalar('MarkdownCard.box', self.box, (str,), False, False, False)
         _guard_scalar('MarkdownCard.title', self.title, (str,), False, False, False)
         _guard_scalar('MarkdownCard.content', self.content, (str,), False, False, False)
+        _guard_scalar('MarkdownCard.compact', self.compact, (bool,), False, True, False)
         _guard_vector('MarkdownCard.commands', self.commands, (Command,), False, True, False)
         return _dump(
             view='markdown',
             box=self.box,
             title=self.title,
             content=self.content,
             data=self.data,
+            compact=self.compact,
             commands=None if self.commands is None else [__e.dump() for __e in self.commands],
         )
 
@@ -9650,18 +9656,22 @@ def load(__d: Dict) -> 'MarkdownCard':
         __d_content: Any = __d.get('content')
         _guard_scalar('MarkdownCard.content', __d_content, (str,), False, False, False)
         __d_data: Any = __d.get('data')
+        __d_compact: Any = __d.get('compact')
+        _guard_scalar('MarkdownCard.compact', __d_compact, (bool,), False, True, False)
         __d_commands: Any = __d.get('commands')
         _guard_vector('MarkdownCard.commands', __d_commands, (dict,), False, True, False)
         box: str = __d_box
         title: str = __d_title
         content: str = __d_content
         data: Optional[PackedRecord] = __d_data
+        compact: Optional[bool] = __d_compact
         commands: Optional[List[Command]] = None if __d_commands is None else [Command.load(__e) for __e in __d_commands]
         return MarkdownCard(
             box,
             title,
             content,
             data,
+            compact,
             commands,
         )
 

diff --git a/py/h2o_lightwave/h2o_lightwave/ui.py b/py/h2o_lightwave/h2o_lightwave/ui.py
@@ -3388,6 +3388,7 @@ def markdown_card(
         title: str,
         content: str,
         data: Optional[PackedRecord] = None,
+        compact: Optional[bool] = None,
         commands: Optional[List[Command]] = None,
 ) -> MarkdownCard:
     """Create a card that renders Markdown content.
@@ -3402,6 +3403,7 @@ def markdown_card(
         title: The title for this card.
         content: The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
         data: Additional data for the card.
+        compact: Make spacing tighter. Defaults to True.
         commands: Contextual menu commands for this component.
     Returns:
         A `h2o_wave.types.MarkdownCard` instance.
@@ -3411,6 +3413,7 @@ def markdown_card(
         title,
         content,
         data,
+        compact,
         commands,
     )
 

diff --git a/py/h2o_wave/h2o_wave/types.py b/py/h2o_wave/h2o_wave/types.py
@@ -9608,11 +9608,13 @@ def __init__(
             title: str,
             content: str,
             data: Optional[PackedRecord] = None,
+            compact: Optional[bool] = None,
             commands: Optional[List[Command]] = None,
     ):
         _guard_scalar('MarkdownCard.box', box, (str,), False, False, False)
         _guard_scalar('MarkdownCard.title', title, (str,), False, False, False)
         _guard_scalar('MarkdownCard.content', content, (str,), False, False, False)
+        _guard_scalar('MarkdownCard.compact', compact, (bool,), False, True, False)
         _guard_vector('MarkdownCard.commands', commands, (Command,), False, True, False)
         self.box = box
         """A string indicating how to place this component on the page."""
@@ -9622,6 +9624,8 @@ def __init__(
         """The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/"""
         self.data = data
         """Additional data for the card."""
+        self.compact = compact
+        """Make spacing tighter. Defaults to True."""
         self.commands = commands
         """Contextual menu commands for this component."""
 
@@ -9630,13 +9634,15 @@ def dump(self) -> Dict:
         _guard_scalar('MarkdownCard.box', self.box, (str,), False, False, False)
         _guard_scalar('MarkdownCard.title', self.title, (str,), False, False, False)
         _guard_scalar('MarkdownCard.content', self.content, (str,), False, False, False)
+        _guard_scalar('MarkdownCard.compact', self.compact, (bool,), False, True, False)
         _guard_vector('MarkdownCard.commands', self.commands, (Command,), False, True, False)
         return _dump(
             view='markdown',
             box=self.box,
             title=self.title,
             content=self.content,
             data=self.data,
+            compact=self.compact,
             commands=None if self.commands is None else [__e.dump() for __e in self.commands],
         )
 
@@ -9650,18 +9656,22 @@ def load(__d: Dict) -> 'MarkdownCard':
         __d_content: Any = __d.get('content')
         _guard_scalar('MarkdownCard.content', __d_content, (str,), False, False, False)
         __d_data: Any = __d.get('data')
+        __d_compact: Any = __d.get('compact')
+        _guard_scalar('MarkdownCard.compact', __d_compact, (bool,), False, True, False)
         __d_commands: Any = __d.get('commands')
         _guard_vector('MarkdownCard.commands', __d_commands, (dict,), False, True, False)
         box: str = __d_box
         title: str = __d_title
         content: str = __d_content
         data: Optional[PackedRecord] = __d_data
+        compact: Optional[bool] = __d_compact
         commands: Optional[List[Command]] = None if __d_commands is None else [Command.load(__e) for __e in __d_commands]
         return MarkdownCard(
             box,
             title,
             content,
             data,
+            compact,
             commands,
         )
 

diff --git a/py/h2o_wave/h2o_wave/ui.py b/py/h2o_wave/h2o_wave/ui.py
@@ -3388,6 +3388,7 @@ def markdown_card(
         title: str,
         content: str,
         data: Optional[PackedRecord] = None,
+        compact: Optional[bool] = None,
         commands: Optional[List[Command]] = None,
 ) -> MarkdownCard:
     """Create a card that renders Markdown content.
@@ -3402,6 +3403,7 @@ def markdown_card(
         title: The title for this card.
         content: The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
         data: Additional data for the card.
+        compact: Make spacing tighter. Defaults to True.
         commands: Contextual menu commands for this component.
     Returns:
         A `h2o_wave.types.MarkdownCard` instance.
@@ -3411,6 +3413,7 @@ def markdown_card(
         title,
         content,
         data,
+        compact,
         commands,
     )
 

diff --git a/r/R/ui.R b/r/R/ui.R
@@ -3948,6 +3948,7 @@ ui_list_item1_card <- function(
 #' @param title The title for this card.
 #' @param content The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
 #' @param data Additional data for the card.
+#' @param compact Make spacing tighter. Defaults to True.
 #' @param commands Contextual menu commands for this component.
 #' @return A MarkdownCard instance.
 #' @export
@@ -3956,17 +3957,20 @@ ui_markdown_card <- function(
   title,
   content,
   data = NULL,
+  compact = NULL,
   commands = NULL) {
   .guard_scalar("box", "character", box)
   .guard_scalar("title", "character", title)
   .guard_scalar("content", "character", content)
   # TODO Validate data: Rec
+  .guard_scalar("compact", "logical", compact)
   .guard_vector("commands", "WaveCommand", commands)
   .o <- list(
     box=box,
     title=title,
     content=content,
     data=data,
+    compact=compact,
     commands=commands,
     view='markdown')
   class(.o) <- append(class(.o), c(.wave_obj, "WaveMarkdownCard"))

diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -1667,11 +1667,12 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_markdown_card" value="ui.markdown_card(box='$box$',title='$title$',content='$content$',data=$data$,commands=[&#10;	$commands$	&#10;])$END$" description="Create Wave MarkdownCard with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_markdown_card" value="ui.markdown_card(box='$box$',title='$title$',content='$content$',data=$data$,compact=$compact$,commands=[&#10;	$commands$	&#10;])$END$" description="Create Wave MarkdownCard with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="box" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="title" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="content" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="data" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="compact" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
     <variable name="commands" expression="" defaultValue="" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>

diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
@@ -1360,7 +1360,7 @@
   "Wave Full MarkdownCard": {
     "prefix": "w_full_markdown_card",
     "body": [
-      "ui.markdown_card(box='$1', title='$2', content='$3', data=${4:None}, commands=[\n\t\t$5\t\t\n])$0"
+      "ui.markdown_card(box='$1', title='$2', content='$3', data=${4:None}, compact=${5:True}, commands=[\n\t\t$6\t\t\n])$0"
     ],
     "description": "Create a full Wave MarkdownCard."
   },

diff --git a/ui/jest.config.js b/ui/jest.config.js
@@ -19,13 +19,11 @@ module.exports = {
   testEnvironment: "jsdom",
   transformIgnorePatterns: [
     "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-    "^.+\\.module\\.(css|sass|scss)$"
   ],
   modulePaths: [],
   moduleNameMapper: {
     "^react-native$": "react-native-web",
     '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
-    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
   },
   moduleFileExtensions: [
     "web.js",