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

use dioxus::prelude::*;

/// A thin reading progress bar fixed at the top of the viewport.
///
/// Uses a scroll event listener (RAF-throttled) to track reading progress.
#[component]
pub fn ReadingProgressBar() -> Element {
    let mut progress = use_signal(|| 0.0f64);

    use_effect(move || {
        spawn(async move {
            let mut eval = document::eval(
                r#"
                if (window.__dioxusDocsKitReadingProgressCleanup) {
                    window.__dioxusDocsKitReadingProgressCleanup();
                }
                let ticking = false;
                const handleScroll = () => {
                    if (!ticking) {
                        requestAnimationFrame(() => {
                            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
                            const pct = docHeight > 0 ? (window.scrollY / docHeight) * 100 : 0;
                            dioxus.send(Math.min(Math.max(pct, 0), 100));
                            ticking = false;
                        });
                        ticking = true;
                    }
                };
                window.addEventListener('scroll', handleScroll, { passive: true });
                handleScroll();
                window.__dioxusDocsKitReadingProgressCleanup = () => {
                    window.removeEventListener('scroll', handleScroll);
                    delete window.__dioxusDocsKitReadingProgressCleanup;
                };
                while (true) { await new Promise(r => setTimeout(r, 1000000)); }
                "#,
            );
            while let Ok(val) = eval.recv::<f64>().await {
                progress.set(val);
            }
        });
    });

    use_drop(|| {
        spawn(async move {
            let _ = document::eval(
                r#"
                if (window.__dioxusDocsKitReadingProgressCleanup) {
                    window.__dioxusDocsKitReadingProgressCleanup();
                }
                "#,
            );
        });
    });

    rsx! {
        div { class: "fixed top-0 left-0 w-full z-[100] pointer-events-none",
            div {
                class: "h-0.5 bg-primary transition-[width] duration-75",
                style: "width: {progress()}%",
            }
        }
    }
}