Skip to main content

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, parse_document, parse_mdx, parse_openapi,
110    strip_leading_h1,
111};
112
113// Re-export the syntax-highlighting theme types so consumers can build a
114// `CodeThemeOverride` without depending on `dioxus-code` directly. Only available
115// with the `highlight` feature (default), which pulls in `dioxus-code`.
116#[cfg(feature = "highlight")]
117pub use dioxus_code::{CodeTheme, Theme};
118
119// Re-export components
120pub use components::{
121    ApiInfoHeader, DocAccordionGroup, DocAccordionItem, DocCallout, DocCard, DocCardGroup,
122    DocCodeBlock, DocCodeGroup, DocContent, DocExpandable, DocNodeRenderer, DocParamField,
123    DocRequestExample, DocResponseExample, DocResponseField, DocSteps, DocTableOfContents, DocTabs,
124    DocUpdate, EndpointCard, EndpointPage, MdxContent, MdxIcon, MdxRenderer, MethodBadge,
125    OpenApiViewer, ParameterItem, ParametersList, RequestBodySection, ResponseItem, ResponsesList,
126    SchemaDefinitions, SchemaTypeLabel, SchemaViewer, TagGroup, UngroupedEndpoints,
127    extract_headers, slugify,
128};
129
130// `CodeThemeOverride` wraps a `dioxus-code` type, so it's only available with the
131// `highlight` feature (default).
132#[cfg(feature = "highlight")]
133pub use components::CodeThemeOverride;
134
135#[cfg(feature = "mermaid")]
136pub use components::MermaidDiagram;