dioxus-docs-kit 0.6.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

//! Hooks and components shared between the docs and blog surfaces.

use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::ld_icons::{LdMoon, LdSun};

use super::docs_layout::CurrentTheme;
use crate::config::ThemeConfig;

/// Provide the [`CurrentTheme`] context and apply the persisted theme on mount.
///
/// Reads the stored preference from localStorage (falling back to the config's
/// default theme), sets `data-theme` on `<html>`, and keeps the returned signal
/// in sync. Called by `DocsLayout`/`BlogLayout`; call it yourself when you
/// render kit components (e.g. [`ThemeToggle`](super::ThemeToggle)) outside
/// those layouts, e.g. in a landing-page navbar.
pub fn use_theme_provider(theme: Option<ThemeConfig>) -> Signal<String> {
    let theme_default = theme
        .as_ref()
        .map(|t| t.default_theme.clone())
        .unwrap_or_default();
    let storage_key = theme
        .as_ref()
        .map(|t| t.storage_key.clone())
        .unwrap_or_default();
    let has_theme = theme.is_some();

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

    // On mount: read stored preference and apply data-theme
    use_effect(move || {
        if !has_theme {
            return;
        }
        let key = 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);
            }
        });
    });

    current_theme
}

/// Register a document-level Cmd/Ctrl+K listener that toggles `search_open`.
///
/// The handler is stored on `window` and any previous one is removed before
/// registering, so layout remounts never accumulate listeners.
pub(crate) fn use_search_hotkey(mut search_open: Signal<bool>) {
    use_effect(move || {
        spawn(async move {
            let mut eval = document::eval(
                r#"
                if (window.__dkSearchHotkey) {
                    document.removeEventListener('keydown', window.__dkSearchHotkey);
                }
                window.__dkSearchHotkey = (e) => {
                    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                        e.preventDefault();
                        dioxus.send(true);
                    }
                };
                document.addEventListener('keydown', window.__dkSearchHotkey);
                while (true) { await new Promise(r => setTimeout(r, 1000000)); }
                "#,
            );
            loop {
                if (eval.recv::<bool>().await).is_ok() {
                    search_open.toggle();
                }
            }
        });
    });
}

/// Light/dark theme toggle button shared by [`ThemeToggle`](super::ThemeToggle)
/// and [`BlogThemeToggle`](super::blog::BlogThemeToggle).
///
/// Renders nothing if `theme` has no `toggle_themes` configured.
#[component]
pub(crate) fn ThemeToggleButton(theme: Option<ThemeConfig>) -> Element {
    let toggle = match theme.as_ref().and_then(|t| t.toggle_themes.as_ref()) {
        Some(t) => t.clone(),
        None => return rsx! {},
    };

    let storage_key = theme
        .as_ref()
        .map(|t| t.storage_key.clone())
        .unwrap_or_default();

    let CurrentTheme(mut current_theme) = use_context::<CurrentTheme>();

    let (light, dark) = toggle;
    let is_dark = current_theme() == dark;

    rsx! {
        button {
            class: "btn btn-ghost btn-sm btn-square",
            title: if is_dark { "Switch to light mode" } else { "Switch to dark mode" },
            onclick: move |_| {
                let new_theme = if (current_theme)() == dark { light.clone() } else { dark.clone() };
                current_theme.set(new_theme.clone());
                let key = storage_key.clone();
                spawn(async move {
                    let _ = document::eval(&format!(
                        r#"document.documentElement.setAttribute('data-theme', '{new_theme}');
                        try {{ localStorage.setItem('{key}', '{new_theme}'); }} catch(e) {{}}"#
                    ));
                });
            },
            if is_dark {
                Icon { class: "size-5", icon: LdSun }
            } else {
                Icon { class: "size-5", icon: LdMoon }
            }
        }
    }
}