Add book example

This serves multiple purposes: 1. Demonstrate how to use the crate for a book view similar to mdbook 2. A more in depth example of all the rendering of different elements 3. Easier to visually "test" changes.
lampsitter · Nov 28, 2023 · 612a458 · 612a458
1 parent c6e67ae
commit 612a458
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 33 deletions.
diff --git a/examples/book.rs b/examples/book.rs
@@ -0,0 +1,118 @@
+//! Make sure to run this example from the repo directory and not the example
+//! directory. To see all the features in full effect, run this example with
+//! `cargo r --example book --all-features`
+//! Add `light` or `dark` to the end of the command to specify theme. Default
+//! is light. `cargo r --example book --all-features dark`
+//!
+//! Shows a simple way to use the crate to implement a book like view.
+
+use eframe::egui;
+use egui_commonmark::*;
+
+struct Page {
+    name: String,
+    content: String,
+}
+
+struct App {
+    cache: CommonMarkCache,
+    curr_tab: Option<usize>,
+    pages: Vec<Page>,
+}
+
+impl App {
+    fn sidepanel(&mut self, ui: &mut egui::Ui) {
+        egui::SidePanel::left("left_documentation_panel")
+            .resizable(false)
+            .default_width(100.0)
+            .show_inside(ui, |ui| {
+                let style = ui.style_mut();
+                style.visuals.widgets.active.bg_stroke = egui::Stroke::NONE;
+                style.visuals.widgets.hovered.bg_stroke = egui::Stroke::NONE;
+                style.visuals.widgets.inactive.bg_fill = egui::Color32::TRANSPARENT;
+                style.visuals.widgets.inactive.bg_stroke = egui::Stroke::NONE;
+                ui.with_layout(egui::Layout::top_down_justified(egui::Align::LEFT), |ui| {
+                    for (i, p) in self.pages.iter().enumerate() {
+                        if Some(i) == self.curr_tab {
+                            let _ = ui.selectable_label(true, &p.name);
+                        } else if ui.selectable_label(false, &p.name).clicked() {
+                            self.curr_tab = Some(i);
+                        }
+                        ui.separator();
+                    }
+                });
+            });
+    }
+
+    fn content_panel(&mut self, ui: &mut egui::Ui) {
+        egui::ScrollArea::vertical().show(ui, |ui| {
+            // Add a frame with margin to prevent the content from hugging the sidepanel
+            egui::Frame::none()
+                .inner_margin(egui::Margin::symmetric(5.0, 0.0))
+                .show(ui, |ui| {
+                    CommonMarkViewer::new("viewer")
+                        .default_width(Some(512))
+                        .max_image_width(Some(512))
+                        .show(
+                            ui,
+                            &mut self.cache,
+                            &self.pages[self.curr_tab.unwrap_or(0)].content,
+                        );
+                });
+        });
+    }
+}
+
+impl eframe::App for App {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            self.sidepanel(ui);
+            self.content_panel(ui);
+        });
+    }
+}
+
+fn main() {
+    let mut args = std::env::args();
+    args.next();
+    let use_dark_theme = if let Some(theme) = args.next() {
+        if theme == "light" {
+            false
+        } else {
+            theme == "dark"
+        }
+    } else {
+        false
+    };
+
+    let _ = eframe::run_native(
+        "Markdown viewer",
+        eframe::NativeOptions::default(),
+        Box::new(move |cc| {
+            cc.egui_ctx.set_visuals(if use_dark_theme {
+                egui::Visuals::dark()
+            } else {
+                egui::Visuals::light()
+            });
+
+            Box::new(App {
+                cache: CommonMarkCache::default(),
+                curr_tab: Some(0),
+                pages: vec![
+                    Page {
+                        name: "Hello World".to_owned(),
+                        content: include_str!("markdown/hello_world.md").to_owned(),
+                    },
+                    Page {
+                        name: "Headers".to_owned(),
+                        content: include_str!("markdown/headers.md").to_owned(),
+                    },
+                    Page {
+                        name: "Code blocks".to_owned(),
+                        content: include_str!("markdown/code-blocks.md").to_owned(),
+                    },
+                ],
+            })
+        }),
+    );
+}
diff --git a/examples/hello_world.rs b/examples/hello_world.rs
@@ -13,39 +13,7 @@ struct App {
 
 impl eframe::App for App {
     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
-        let text = r#"# Commonmark Viewer Example
-
-A *bunch* ~~of~~ __different__ `text` styles.
-
-| __A table!__ |
-| -------- |
-| ![Rust logo](examples/rust-logo-128x128.png) |
-| Some filler text |
-| [Link to repo](https://github.com/lampsitter/egui_commonmark) |
-
-```rs
-let mut vec = Vec::new();
-vec.push(5);
-```
-
-> Some smart quote here
-
-- [ ] A feature[^1]
-- [X] A completed feature
-    1. Sub item
-
-[^1]: A footnote
-
-# Header 1
-## Header 2
-### Header 3
-#### Header 4
-##### Header 5
-###### Header 6
-
-Some text.
-            "#;
-
+        let text = include_str!("markdown/hello_world.md");
         egui::CentralPanel::default().show(ctx, |ui| {
             egui::ScrollArea::vertical().show(ui, |ui| {
                 CommonMarkViewer::new("viewer")

diff --git a/examples/markdown/code-blocks.md b/examples/markdown/code-blocks.md
@@ -0,0 +1,20 @@
+# Code blocks
+
+
+```toml
+egui_commonmark = "0.10"
+image = { version = "0.24", default-features = false, features = ["png"] }
+```
+
+```rust
+use egui_commonmark::*;
+let markdown =
+r"# Hello world
+
+* A list
+* [ ] Checkbox
+";
+
+let mut cache = CommonMarkCache::default();
+CommonMarkViewer::new("viewer").show(ui, &mut cache, markdown);
+```
diff --git a/examples/markdown/headers.md b/examples/markdown/headers.md
@@ -0,0 +1,12 @@
+# Header 1
+
+## Header 2
+
+### Header 3
+
+#### Header 4
+
+##### Header 5
+
+###### Header 6
+
diff --git a/examples/markdown/hello_world.md b/examples/markdown/hello_world.md
@@ -0,0 +1,31 @@
+# Commonmark Viewer Example
+
+A *bunch* ~~of~~ __different__ `text` styles.
+
+| __A table!__ |
+| -------- |
+| ![Rust logo](examples/rust-logo-128x128.png) |
+| Some filler text |
+| [Link to repo](https://github.com/lampsitter/egui_commonmark) |
+
+```rs
+let mut vec = Vec::new();
+vec.push(5);
+```
+
+> Some smart quote here
+
+- [ ] A feature[^1]
+- [X] A completed feature
+    1. Sub item
+
+[^1]: A footnote
+
+# Header 1
+## Header 2
+### Header 3
+#### Header 4
+##### Header 5
+###### Header 6
+
+Some text.