support for static markdown, new example and updated README

rambip · Aug 2, 2023 · 7a339d7 · 7a339d7
1 parent e590120
commit 7a339d7
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 25 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/README.md b/README.md
@@ -1,44 +1,52 @@
 A port of [yew-markdown](https://github.com/rambip/yew-markdown/) using leptos !
 
 # Usage
+You can use this component to render both static and dynamic markdown.
+## Static markdown
+
 ```rust
 use leptos::*;
 
 {
-    let (content, set_content) = create_signal(cx, "# Markdown Power !".to_string());
     ...
+    view!{cx,
+        <Markdown src="# Markdown Power !"/>
+    }
+}
+```
+
+## Dynamic markdown
+```rust
+{
+    ...
+    let (content, set_content) = create_signal(cx, "# Markdown Power !".to_string());
+
     view!{cx,
         <Markdown src=content/>
     }
 }
 ```
 
 # Examples
-Look at `./examples/`
+To build them, just follow the [leptos installation instructions](https://leptos-rs.github.io/leptos/02_getting_started.html) and run `trunk serve` to try them.
+
+## Showcase
+![](./showcase.jpg)
+
+`./examples/showcase`
+
+You can see the result [here](https://rambip.github.io/leptos-markdown/showcase)
+
+To be fair, this is not the vanilla component, there is a bit of styling added.
+
+## Editor
+`./examples/editor`
 
 There is a demo of an interactive editor [here](https://rambip.github.io/leptos-markdown/editor)
 
 
 # Comparison
-
 This project was great to compare the advantages and drawbacks of the two major rust web frameworks !
-I plan to write a post to explain that in detail, but if you are curious they are some things I already noticed:
-
-## Leptos is better for
-- `async` with `Suspense` ! The idea of `create_resource` is really intuitive and great ! Though, it has bugs (see below)
-- performance: it is both faster and more memory-efficient than Yew; since my App is about 2Mo, it is nice
-- Abstraction: the fact that all your context is inside `cx`, which is `Copy`, makes everything simpler !!! 
-- Ergonomics to access the js world: you can do an input form in 3 lines with `on:input` and `event_target_into`. In yew you needed a whole file to define your input element !
-- Styling: Leptos has default styling solutions, while Yew doesn't. It's always better to have a standard, even if it is not perfect
-
-## But ...
-- the documentation is not as clear as the `Yew` one. The content is quite good, but it's hader to navigate IMO. I found more answers in the discord than in the docs ...
-- Really Buggy: I opened 2 issues (like [this one](https://github.com/leptos-rs/leptos/issues/1456)) in one single day
-- `Box<dyn Fn(A) -> ...>` are a pain to work with, and it is the recommended way to work with generic optional parameters
-- Closures, closures, closures, closures !!! If you are not 100% confident about how closures in Rust work, you will get stuck at one point.
-
-## Small conclusion
-Leptos is really promising, and I think it could soon become a great choice for easy and safe web-developpment. In particular it's concise, has zero boilerplate and is very flexible.
-But I can't say I really enjoyed working with it for now: too many bugs, some things missing in the documentation, and I miss an intermediate guide on closure to survive the Leptos world😟
-
-Within one year, it can become the greatest rust web framework. Maybe.
+
+see [my feedback](./feedback/README.md) for a comparison
+
diff --git a/examples/showcase/Cargo.toml b/examples/showcase/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "markdown-showcase"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = {version="0.4.6", features=["nightly", "csr"]}
+
+leptos-markdown = {path= "../.."}
+wasm-bindgen = "=0.2.87"
+web-sys = {version="0.3.61", features=["HtmlTextAreaElement"]}
+
+wasm-logger = "0.2.0"
+log= "0.4.17"
+console_error_panic_hook = "0.1.7"
diff --git a/examples/showcase/index.html b/examples/showcase/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head> 
+        <title>markdown demo using leptos</title>
+        <link data-trunk rel="rust" data-wasm-opt="s">
+        <link data-trunk rel="css" href="./markdown.css">
+    </head>
+    <body></body>
+</html>
diff --git a/examples/showcase/markdown.css b/examples/showcase/markdown.css
@@ -0,0 +1,28 @@
+ blockquote { 
+     margin: 5px; border-left: 5px solid grey; 
+     padding: 5px;
+ } 
+
+ blockquote p {
+     margin: 5px
+ }
+
+ ul {
+     list-style-type:disc
+ }
+
+ table {
+     border: 1px solid black; border-collapse: collapse
+ }
+
+ td {
+     border: 1px solid grey; padding: 5px
+ }
+
+ thead {
+     background-color: #eee; font-weight: bold; 
+ }
+
+span.markdown-error {
+    background-color: red;
+}
diff --git a/examples/showcase/src/main.rs b/examples/showcase/src/main.rs
@@ -0,0 +1,57 @@
+use leptos::*;
+use leptos_markdown::Markdown;
+
+static MARKDOWN_SOURCE: &str = r#"
+## Code
+```rust
+fn main() {
+    println!("hello world !")
+}
+```
+
+## Math
+- $1+1=2$
+
+- $e^{i\pi}+1=0$
+
+
+$$\int_0^{+\infty}\dfrac{\sin(t)}{t}\,dt=\dfrac{\sqrt{\pi}}{2}$$
+
+
+## Links and images
+![](https://raw.githubusercontent.com/wooorm/markdown-rs/8924580/media/logo-monochromatic.svg?sanitize=true)
+
+for markdown documentation, see [here](https://commonmark.org/help/)
+
+Wikilinks are supported to: [[https://en.wikipedia.org/wiki/Markdown|markdown]]
+
+## Style
+| unstyled | styled    |
+| :-----:  | ------    |
+| bold     | **bold**  |
+| italics  | *italics* |
+| strike   | ~strike~  |
+
+> Hey, I am a quote !
+
+## Lists
+1) one
+2) two
+3) three
+
+- and
+- unorderded
+- too
+"#;
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    view!{cx,
+        <Markdown src=MARKDOWN_SOURCE wikilinks=true/>
+    }
+}
+
+fn main() {
+    console_error_panic_hook::set_once();
+    mount_to_body(|cx| view!{cx, <App/>})
+}
diff --git a/feedback/README.md b/feedback/README.md
@@ -0,0 +1,23 @@
+This project was great to compare the advantages and drawbacks of the two major rust web frameworks !
+
+I plan to write a post to explain that in detail, but if you are curious they are some things I already noticed:
+
+## Leptos is better for
+- `async` with `Suspense` ! The idea of `create_resource` is really intuitive and great ! Though, it has bugs (see below)
+- performance: it is both faster and more memory-efficient than Yew; since my App is about 2Mo, it is nice
+- Abstraction: the fact that all your context is inside `cx`, which is `Copy`, makes everything simpler !!! 
+- Ergonomics to access the js world: you can do an input form in 3 lines with `on:input` and `event_target_into`. In yew you needed a whole file to define your input element !
+- Styling: Leptos has default styling solutions, while Yew doesn't. It's always better to have a standard, even if it is not perfect
+
+## But ...
+- the documentation is not as clear as the `Yew` one. The content is quite good, but it's hader to navigate IMO. I found more answers in the discord than in the docs ...
+- Really Buggy: I opened 2 issues (like [this one](https://github.com/leptos-rs/leptos/issues/1456)) in one single day
+- `Box<dyn Fn(A) -> ...>` are a pain to work with, and it is the recommended way to work with generic optional parameters
+- Closures, closures, closures, closures !!! If you are not 100% confident about how closures in Rust work, you will get stuck at one point.
+
+## Small conclusion
+Leptos is really promising, and I think it could soon become a great choice for easy and safe web-developpment. In particular it's concise, has zero boilerplate and is very flexible.
+But I can't say I really enjoyed working with it for now: too many bugs, some things missing in the documentation, and I miss an intermediate guide on closure to survive the Leptos world 😟
+
+Within one year, it can become the greatest rust web framework. Maybe.
+So go over to https://leptos.dev/ and see if you like it !
diff --git a/showcase.jpg b/showcase.jpg
diff --git a/src/lib.rs b/src/lib.rs
@@ -56,7 +56,7 @@ pub fn Markdown(
 
     /// the markdown text to render
     #[prop(into)]
-    src: ReadSignal<String>,
+    src: MaybeSignal<String>,
 
     /// the callback called when a component is clicked.
     /// if you want to controll what happens when a link is clicked,
@@ -101,7 +101,7 @@ pub fn Markdown(
 
     view! {cx,
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous"/>
-        <div style="width:100%"> 
+        <div style="width:100%; padding-left: 10px"> 
             {move || src.with( |x| {
                     let stream = parse(x, &options, wikilinks);
                     log!("{stream:?}");