dioxus-docs-kit 0.6.0

Reusable documentation site shell for Dioxus applications
Documentation 
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
126
127
128
129
130
131
132
133

use dioxus::prelude::*;
use dioxus_mdx::{DocContent, DocTableOfContents, EndpointPage, extract_headers};

use crate::DocsContext;
use crate::registry::DocsRegistry;

use super::copy_page::CopyPageButton;
use super::docs_layout::LayoutOffsets;
use super::docs_meta::DocsPageMeta;
use super::page_nav::DocsPageNav;

/// Documentation page content renderer.
///
/// Checks if the path is an API endpoint page or a regular MDX page and renders accordingly.
///
/// # Props
///
/// - `path`: Current docs page path.
/// - `article_footer`: Optional element rendered after the article body, before
///   pagination (e.g. "Was this helpful?" widget).
///
/// # Stable public classes
///
/// Uses `dk-article`, `dk-article-title`, `dk-article-body`, `dk-article-header`,
/// and `dk-article-footer-slot` for consumer CSS hooks.
#[component]
pub fn DocsPageContent(path: String, article_footer: Option<Element>) -> Element {
    let registry = use_context::<&'static DocsRegistry>();
    let ctx = use_context::<DocsContext>();

    // Check if this is an API endpoint page
    if let Some((operation, spec)) = registry.get_api_operation_with_spec(&path) {
        return rsx! {
            DocsPageMeta { path: path.clone() }
            div { class: "dk-endpoint flex flex-col",
                EndpointPage { operation: operation.clone(), spec: spec.clone() }
                main { class: "px-8 lg:px-12 pb-12",
                    div { class: "max-w-2xl",
                        if let Some(ft) = article_footer {
                            div { class: "dk-article-footer-slot mb-6", {ft} }
                        }
                        DocsPageNav { current_path: path.clone() }
                    }
                }
            }
        };
    }

    let offsets = try_use_context::<LayoutOffsets>().unwrap_or(LayoutOffsets {
        sticky_top: "top-20",
        scroll_mt: "scroll-mt-20",
        sidebar_height: "h-[calc(100vh-5rem)]",
    });

    let doc = match registry.get_parsed_doc(&path) {
        Some(d) => d,
        None => {
            let base = ctx.base_path.clone();
            return rsx! {
                div { class: "container mx-auto px-8 py-12 max-w-4xl",
                    div { class: "text-center",
                        h1 { class: "text-4xl font-bold mb-4", "404" }
                        p { class: "text-base-content/70 mb-8",
                            "Page not found: {path}"
                        }
                        Link {
                            to: NavigationTarget::Internal(base),
                            class: "btn btn-primary",
                            "Go to Documentation"
                        }
                    }
                }
            };
        }
    };

    let headers = extract_headers(&doc.raw_markdown);

    rsx! {
        DocsPageMeta { path: path.clone() }
        div { class: "flex",
            // Main content
            main { class: "flex-1 min-w-0 px-8 py-12 lg:px-12",
                article { class: "dk-article max-w-3xl mx-auto",
                    // Page header
                    header { class: "dk-article-header mb-8 pb-8 border-b border-base-300",
                        div { class: "flex items-start justify-between gap-4",
                            h1 { class: "dk-article-title text-4xl font-bold tracking-tight mb-3",
                                "{doc.frontmatter.title}"
                            }
                            if !doc.raw_markdown.is_empty() {
                                CopyPageButton { content: doc.raw_markdown.clone() }
                            }
                        }
                        if let Some(desc) = &doc.frontmatter.description {
                            p { class: "dk-article-description text-lg text-base-content/70",
                                "{desc}"
                            }
                        }
                    }

                    // MDX content
                    div { class: "dk-article-body prose prose-base max-w-none
                        prose-headings:{offsets.scroll_mt}
                        prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-10 prose-h2:mb-4
                        prose-h3:text-xl prose-h3:font-medium prose-h3:mt-8 prose-h3:mb-3
                        prose-p:text-base-content/80 prose-p:leading-relaxed
                        prose-a:text-primary prose-a:no-underline hover:prose-a:underline
                        prose-code:bg-base-200 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm",
                        DocContent { nodes: doc.content.clone() }
                    }

                    // Optional consumer footer slot (e.g. "Was this helpful?")
                    if let Some(ft) = article_footer {
                        div { class: "dk-article-footer-slot mt-12", {ft} }
                    }

                    // Page navigation
                    DocsPageNav { current_path: path.clone() }
                }
            }

            // Table of Contents sidebar (right side)
            if !headers.is_empty() {
                aside { class: "dk-toc w-56 shrink-0 hidden xl:block",
                    div { class: "sticky {offsets.sticky_top} p-6",
                        DocTableOfContents { headers }
                    }
                }
            }
        }
    }
}