NotAShelf/pinakes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

pinakes-ui: add preview/source toggle to markdown viewer

Browse source 
Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I91797e05e0747473ed8edb9878da73566a6a6964
This commit is contained in:
raf 2026-02-10 12:32:15 +03:00
commit 3595f89fec
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
2 changed files with 585 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

46
crates/pinakes-ui/src/components/markdown_viewer.rs
View file

@ -12,8 +12,10 @@ pub fn MarkdownViewer(
) -> Element {
let mut rendered_html = use_signal(String::new);
let mut frontmatter_html = use_signal(|| Option::<String>::None);
let mut raw_content = use_signal(String::new);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut show_preview = use_signal(|| true);
// Fetch content on mount
let url = content_url.clone();
@ -27,6 +29,7 @@ pub fn MarkdownViewer(
match reqwest::get(&url).await {
Ok(resp) => match resp.text().await {
Ok(text) => {
raw_content.set(text.clone());
if mtype == "md" || mtype == "markdown" {
let (fm_html, body_html) = render_markdown_with_frontmatter(&text);
frontmatter_html.set(fm_html);
@ -88,9 +91,28 @@ pub fn MarkdownViewer(
});
let is_loading = *loading.read();
let is_preview = *show_preview.read();
rsx! {
div { class: "markdown-viewer",
// View toggle toolbar
if !is_loading && error.read().is_none() {
div { class: "markdown-toolbar",
button {
class: if is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(true),
title: "Preview Mode",
"Preview"
}
button {
class: if !is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(false),
title: "Source Mode",
"Source"
}
}
}
if is_loading {
div { class: "loading-overlay",
div { class: "spinner" }
@ -106,15 +128,23 @@ pub fn MarkdownViewer(
}
if !is_loading && error.read().is_none() {
if let Some(ref fm) = *frontmatter_html.read() {
div {
class: "frontmatter-card",
dangerous_inner_html: "{fm}",
if is_preview {
// Preview mode - show rendered markdown
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}",
}
} else {
// Source mode - show raw markdown
pre { class: "markdown-source",
code { "{raw_content}" }
}
}
div {
class: "markdown-content",
dangerous_inner_html: "{rendered_html}",
}
}
}