dioxus-docs-kit 0.4.1

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
134
135
136
137
138
139
140
141
142
143
144

use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::ld_icons::{LdMenu, LdSearch};

use crate::blog::registry::BlogRegistry;
use crate::components::docs_layout::{CurrentTheme, DrawerOpen};

use super::mobile_drawer::BlogMobileDrawer;
use super::search_modal::BlogSearchModal;
use super::theme_toggle::BlogThemeToggle;

/// Blog layout shell.
///
/// # Context requirements
///
/// - `&'static BlogRegistry` — provided by consumer
/// - `BlogContext` — provided by consumer
#[component]
pub fn BlogLayout(
    header: Option<Element>,
    #[props(default = true)] show_header: bool,
    children: Element,
) -> Element {
    let registry = use_context::<&'static BlogRegistry>();

    let parent_search: Option<Signal<bool>> = try_use_context();
    let parent_drawer: Option<DrawerOpen> = try_use_context();

    let local_search = use_signal(|| false);
    let local_drawer = use_signal(|| false);

    let mut search_open = parent_search.unwrap_or(local_search);
    let mut drawer_open = parent_drawer.map(|d| d.0).unwrap_or(local_drawer);

    use_context_provider(|| search_open);
    use_context_provider(|| DrawerOpen(drawer_open));

    // Theme state
    let theme_default = registry
        .theme
        .as_ref()
        .map(|t| t.default_theme.clone())
        .unwrap_or_default();
    let theme_storage_key = registry
        .theme
        .as_ref()
        .map(|t| t.storage_key.clone())
        .unwrap_or_default();
    let has_theme = registry.theme.is_some();

    let mut current_theme = use_signal(|| theme_default.clone());
    use_context_provider(|| CurrentTheme(current_theme));

    use_effect(move || {
        if !has_theme {
            return;
        }
        let key = theme_storage_key.clone();
        let fallback = theme_default.clone();
        spawn(async move {
            let mut eval = document::eval(&format!(
                r#"
                let theme = null;
                try {{ theme = localStorage.getItem('{key}'); }} catch(e) {{}}
                theme = theme || '{fallback}';
                document.documentElement.setAttribute('data-theme', theme);
                dioxus.send(theme);
                "#
            ));
            if let Ok(stored) = eval.recv::<String>().await {
                current_theme.set(stored);
            }
        });
    });

    // Keyboard shortcut: Cmd/Ctrl+K
    use_effect(move || {
        spawn(async move {
            let mut eval = document::eval(
                r#"
                document.addEventListener('keydown', (e) => {
                    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                        e.preventDefault();
                        dioxus.send(true);
                    }
                });
                while (true) { await new Promise(r => setTimeout(r, 1000000)); }
                "#,
            );
            loop {
                if (eval.recv::<bool>().await).is_ok() {
                    search_open.toggle();
                }
            }
        });
    });

    rsx! {
        div { class: "min-h-screen bg-base-100",
            if show_header {
                div { class: "sticky top-0 z-50",
                    if let Some(hdr) = header {
                        {hdr}
                    } else {
                        div { class: "navbar bg-base-200 border-b border-base-300 px-4 lg:px-8",
                            div { class: "flex-1 gap-2",
                                button {
                                    class: "btn btn-ghost btn-sm btn-square lg:hidden",
                                    onclick: move |_| drawer_open.toggle(),
                                    Icon { class: "size-5", icon: LdMenu }
                                }
                            }
                            div { class: "flex-none gap-1",
                                BlogSearchButton { search_open }
                                BlogThemeToggle {}
                            }
                        }
                    }
                }
            }

            div { class: "flex-1 min-w-0",
                {children}
            }
        }

        BlogMobileDrawer { open: drawer_open }
        BlogSearchModal {}
    }
}

/// Reusable search button for blog headers.
#[component]
pub fn BlogSearchButton(search_open: Signal<bool>) -> Element {
    rsx! {
        button {
            class: "btn btn-ghost btn-sm gap-2",
            onclick: move |_| search_open.set(true),
            Icon { class: "size-4", icon: LdSearch }
            span { class: "hidden sm:inline text-base-content/60 text-sm", "Search" }
            kbd { class: "kbd kbd-xs hidden sm:inline-flex", "\u{2318}K" }
        }
    }
}