chore: update docs and example #2179

h2oai · Nov 13, 2023 · 2348d8a · 2348d8a
1 parent 00f25a2
commit 2348d8a
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 39 deletions.
diff --git a/py/examples/markdown.py b/py/examples/markdown.py
@@ -1,52 +1,71 @@
 # 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_.
 
 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. First list item
+   - First nested list item
+     - Second nested list item  
+
+<!-- This content will not appear in the rendered Markdown -->
 
-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.
+Ignore \*markdown\* formatting.
+
+This framework is made by [h2o.ai](https://h2o.ai)
 
 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 `git status` to list all new or modified files that haven't yet been committed.
+
+
+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 +78,35 @@ async def serve(q: Q):
         content='Hello, world!'
     )
 
-    await q.page`.save()
-''',
-)
+    await q.page.save()
+```
+
+2<sub><sup>2</sup></sub> = 4
+
+1<sup>2</sup> = 1
+
+Linking
+--------------------
+
+Search with [Google][1],
+[Yahoo][2] or [MSN][3].
 
-page.save()
+  [1]: http://google.com/        "Google"
+  [2]: http://search.yahoo.com/  "Yahoo Search"
+  [3]: http://search.msn.com/    "MSN Search"
+'''
+
+@app('/demo')
+async def serve(q: Q):
+    q.page['example'] = ui.markdown_card(
+        box='1 1 3 9',
+        title='Markdown - compact',
+        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/ui/src/markdown.css b/ui/src/markdown.css
@@ -176,14 +176,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 1.25em;
 }
 
-.wave-prose .lead {
-    color: var(--wave-text6);
-    font-size: 1.25em;
-    line-height: 1.6;
-    margin-top: 1.2em;
-    margin-bottom: 1.2em;
-}
-
 .wave-markdown a {
     color: var(--wave-themePrimary);
     text-decoration: underline;
@@ -585,11 +577,6 @@ pre code::after {
     content: none;
 }
 
-.wave-prose code::before,
-code::after {
-    content: "`";
-}
-
 .wave-prose h2 code {
     font-size: 0.875em;
 }

diff --git a/website/widgets/content/markdown.md b/website/widgets/content/markdown.md
@@ -92,3 +92,33 @@ q.page['example'] = ui.markdown_card(
 Displaying code with proper syntax highlighting is supported out of the box. The list of supported languages can be found [here](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md).
 
 Wave uses [AndroidStudio](https://developer.android.com/studio) theme as default, but can be changed by picking one of the plenty [other themes](https://highlightjs.org/static/demo/), downloading its [CSS](https://github.com/highlightjs/highlight.js/tree/main/src/styles) and loading it within the Wave app. See [this example](/docs/examples/markdown-code-theme) to learn how to change the code highlighting theme into a popular `Atom One Dark`.
+
+## Compact
+
+By default, markdown is rendered compactly to fit more content.
+Use `compact=False` for a modern, well-structured and reader-friendly look.
+
+```py
+sample_markdown = '''=
+# Heading
+
+The **quick** _brown_ fox jumped over the lazy dog.
+
+Blockquote:
+
+> The quick brown fox jumped over the lazy dog.
+
+Ordered 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.
+'''
+
+q.page['example'] = ui.markdown_card(
+    box='1 1 3 10',
+    title='I was made using markdown!',
+    content=sample_markdown,
+    compact=False
+)
+```