initial commit

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I4a6b498153eccd5407510dd541b7f4816a6a6964

crates/pinakes-ui/src/components/markdown_viewer.rs

@@ -0,0 +1,180 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn MarkdownViewer(content_url: String, media_type: String) -> Element {
+    let mut rendered_html = use_signal(String::new);
+    let mut frontmatter_html = use_signal(|| Option::<String>::None);
+    let mut loading = use_signal(|| true);
+    let mut error = use_signal(|| Option::<String>::None);
+
+    // Fetch content on mount
+    let url = content_url.clone();
+    let mtype = media_type.clone();
+    use_effect(move || {
+        let url = url.clone();
+        let mtype = mtype.clone();
+        spawn(async move {
+            loading.set(true);
+            error.set(None);
+            match reqwest::get(&url).await {
+                Ok(resp) => match resp.text().await {
+                    Ok(text) => {
+                        if mtype == "md" || mtype == "markdown" {
+                            let (fm_html, body_html) = render_markdown_with_frontmatter(&text);
+                            frontmatter_html.set(fm_html);
+                            rendered_html.set(body_html);
+                        } else {
+                            frontmatter_html.set(None);
+                            rendered_html.set(render_plaintext(&text));
+                        };
+                    }
+                    Err(e) => error.set(Some(format!("Failed to read content: {e}"))),
+                },
+                Err(e) => error.set(Some(format!("Failed to fetch: {e}"))),
+            }
+            loading.set(false);
+        });
+    });
+
+    let is_loading = *loading.read();
+
+    rsx! {
+        div { class: "markdown-viewer",
+            if is_loading {
+                div { class: "loading-overlay",
+                    div { class: "spinner" }
+                    "Loading content..."
+                }
+            }
+
+            if let Some(ref err) = *error.read() {
+                div { class: "error-banner",
+                    span { class: "error-icon", "\u{26a0}" }
+                    "{err}"
+                }
+            }
+
+            if !is_loading && error.read().is_none() {
+                if let Some(ref fm) = *frontmatter_html.read() {
+                    div {
+                        class: "frontmatter-card",
+                        dangerous_inner_html: "{fm}",
+                    }
+                }
+                div {
+                    class: "markdown-content",
+                    dangerous_inner_html: "{rendered_html}",
+                }
+            }
+        }
+    }
+}
+
+/// Parse frontmatter and render markdown body. Returns (frontmatter_html, body_html).
+fn render_markdown_with_frontmatter(text: &str) -> (Option<String>, String) {
+    use gray_matter::Matter;
+    use gray_matter::engine::YAML;
+
+    let matter = Matter::<YAML>::new();
+    let Ok(result) = matter.parse(text) else {
+        // If frontmatter parsing fails, just render the whole text as markdown
+        return (None, render_markdown(text));
+    };
+
+    let fm_html = result.data.and_then(|data| render_frontmatter_card(&data));
+
+    let body_html = render_markdown(&result.content);
+    (fm_html, body_html)
+}
+
+/// Render frontmatter fields as an HTML card.
+fn render_frontmatter_card(data: &gray_matter::Pod) -> Option<String> {
+    let gray_matter::Pod::Hash(map) = data else {
+        return None;
+    };
+
+    if map.is_empty() {
+        return None;
+    }
+
+    let mut html = String::from("<dl class=\"frontmatter-fields\">");
+
+    for (key, value) in map {
+        let display_value = pod_to_display(value);
+        let escaped_key = escape_html(key);
+        html.push_str(&format!("<dt>{escaped_key}</dt><dd>{display_value}</dd>"));
+    }
+
+    html.push_str("</dl>");
+    Some(html)
+}
+
+fn pod_to_display(pod: &gray_matter::Pod) -> String {
+    match pod {
+        gray_matter::Pod::String(s) => escape_html(s),
+        gray_matter::Pod::Integer(n) => n.to_string(),
+        gray_matter::Pod::Float(f) => f.to_string(),
+        gray_matter::Pod::Boolean(b) => b.to_string(),
+        gray_matter::Pod::Array(arr) => {
+            let items: Vec<String> = arr.iter().map(pod_to_display).collect();
+            items.join(", ")
+        }
+        gray_matter::Pod::Hash(map) => {
+            let items: Vec<String> = map
+                .iter()
+                .map(|(k, v)| format!("{}: {}", escape_html(k), pod_to_display(v)))
+                .collect();
+            items.join("; ")
+        }
+        gray_matter::Pod::Null => String::new(),
+    }
+}
+
+fn render_markdown(text: &str) -> String {
+    use pulldown_cmark::{Options, Parser, html};
+
+    let mut options = Options::empty();
+    options.insert(Options::ENABLE_TABLES);
+    options.insert(Options::ENABLE_STRIKETHROUGH);
+    options.insert(Options::ENABLE_TASKLISTS);
+    options.insert(Options::ENABLE_FOOTNOTES);
+    options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
+
+    let parser = Parser::new_ext(text, options);
+    let mut html_output = String::new();
+    html::push_html(&mut html_output, parser);
+
+    // Strip script tags for safety
+    strip_script_tags(&html_output)
+}
+
+fn render_plaintext(text: &str) -> String {
+    let escaped = escape_html(text);
+    format!("<pre><code>{escaped}</code></pre>")
+}
+
+fn escape_html(text: &str) -> String {
+    text.replace('&', "&amp;")
+        .replace('<', "&lt;")
+        .replace('>', "&gt;")
+        .replace('"', "&quot;")
+}
+
+fn strip_script_tags(html: &str) -> String {
+    // Simple removal of <script> tags
+    let mut result = html.to_string();
+    while let Some(start) = result.to_lowercase().find("<script") {
+        if let Some(end) = result.to_lowercase()[start..].find("</script>") {
+            result = format!(
+                "{}{}",
+                &result[..start],
+                &result[start + end + "</script>".len()..]
+            );
+        } else {
+            // Malformed script tag - remove to end
+            result = result[..start].to_string();
+            break;
+        }
+    }
+    result
+}