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