1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
//! # dioxus-mdx
//!
//! MDX parsing and rendering components for Dioxus applications.
//!
//! This crate provides a complete solution for rendering Mintlify-style MDX documentation
//! in Dioxus applications, including:
//!
//! - **Parser**: Extracts frontmatter, code blocks, and custom components from MDX
//! - **Components**: Pre-built Dioxus components for callouts, cards, tabs, steps, etc.
//! - **Syntax Highlighting**: Code blocks with language-aware highlighting
//!
//! ## Quick Start
//!
//! ```rust,ignore
//! use dioxus::prelude::*;
//! use dioxus_mdx::{parse_document, MdxContent};
//!
//! #[component]
//! fn DocsPage(content: String) -> Element {
//! rsx! {
//! MdxContent { content }
//! }
//! }
//! ```
//!
//! ## Parsing Only
//!
//! If you want to parse MDX without using the components:
//!
//! ```rust
//! use dioxus_mdx::{parse_document, parse_mdx, DocNode};
//!
//! let mdx_content = r#"---
//! title: Getting Started
//! ---
//!
//! <Tip>This is a helpful tip!</Tip>
//!
//! ## Introduction
//!
//! Welcome to the documentation.
//! "#;
//!
//! // Parse with frontmatter
//! let doc = parse_document(mdx_content);
//! assert_eq!(doc.frontmatter.title, "Getting Started");
//!
//! // Parse content only
//! let nodes = parse_mdx("## Hello\n\n<Note>A note</Note>");
//! ```
//!
//! ## Supported Components
//!
//! - **Callouts**: `<Tip>`, `<Note>`, `<Warning>`, `<Info>`
//! - **Cards**: `<Card>`, `<CardGroup>`
//! - **Tabs**: `<Tabs>`, `<Tab>`
//! - **Steps**: `<Steps>`, `<Step>`
//! - **Accordion**: `<AccordionGroup>`, `<Accordion>`
//! - **Code**: `<CodeGroup>`, fenced code blocks with syntax highlighting
//! - **API Docs**: `<ParamField>`, `<ResponseField>`, `<Expandable>`
//! - **Examples**: `<RequestExample>`, `<ResponseExample>`
//! - **Changelog**: `<Update>`
//!
//! ## Styling
//!
//! Components use Tailwind CSS with DaisyUI classes. Ensure your project has
//! Tailwind and DaisyUI configured. The components use:
//!
//! - Base/neutral classes: `bg-base-200`, `text-base-content`, etc.
//! - Color classes: `text-primary`, `bg-success/10`, etc.
//! - Typography: `prose`, `prose-sm`
//!
//! ## Features
//!
//! - `web` (default): Enables web-specific features like clipboard copy
//!
//! ## Custom Link Handling
//!
//! For internal navigation, components accept an `on_link` callback:
//!
//! ```rust,ignore
//! use dioxus::prelude::*;
//! use dioxus_mdx::DocCardGroup;
//!
//! #[component]
//! fn DocsPage(group: CardGroupNode) -> Element {
//! let nav = use_navigator();
//!
//! rsx! {
//! DocCardGroup {
//! group,
//! on_link: move |href: String| nav.push(&href),
//! }
//! }
//! }
//! ```
// Re-export parser types and functions
pub use ;
// Re-export components
pub use ;
pub use MermaidDiagram;