canonrs-server 0.1.0

CanonRS server-side rendering support
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

//! DocProgress Examples
//!
//! Two usage modes:
//!   1. Standalone — fixed bar at top of viewport (no sticky header)
//!   2. Portal     — bar anchored to bottom edge of sticky header

use leptos::prelude::*;
use super::{DocProgress, DocProgressSlot};
use canonrs::blocks::header::Header;

#[component]
pub fn DocProgressExamples() -> impl IntoView {
    view! {
        <div style="padding: var(--space-xl); max-width: 720px;">
            <h2>"DocProgress"</h2>
            <p>"Reading progress indicator. Two modes depending on whether the page has a sticky header."</p>

            // ── Mode 1: Standalone ────────────────────────────────────────────
            <section style="margin-top: var(--space-2xl);">
                <h3>"Mode 1 — Standalone"</h3>
                <p>
                    "Use when the page has NO sticky header. "
                    "The bar renders at " <code>"position: fixed; top: 0"</code> " automatically. "
                    "No configuration needed."
                </p>

                <pre style="background: var(--theme-surface-muted); padding: var(--space-md); border-radius: var(--radius-md); margin-top: var(--space-md); overflow-x: auto;">
                    <code>
"use canonrs::ui::doc_progress::DocProgress;

view! {
    <DocProgress/>
    // page content
}"
                    </code>
                </pre>

                <div style="margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--theme-surface-muted); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--theme-surface-fg-muted);">
                    "↑ Live demo — scroll the page to see the bar fill at the top of the viewport"
                </div>

                <DocProgress />
            </section>

            // ── Mode 2: Portal ────────────────────────────────────────────────
            <section style="margin-top: var(--space-2xl);">
                <h3>"Mode 2 — Portal (sticky header)"</h3>
                <p>
                    "Use when the page HAS a sticky header. "
                    "Pass " <code>"DocProgressSlot"</code> " into the Header " <code>"bottom"</code> " slot. "
                    "The bar anchors to the bottom edge of the sticky header."
                </p>

                <pre style="background: var(--theme-surface-muted); padding: var(--space-md); border-radius: var(--radius-md); margin-top: var(--space-md); overflow-x: auto;">
                    <code>
"use canonrs::ui::doc_progress::DocProgressSlot;
use canonrs::blocks::header::Header;

view! {
    <Header
        bottom=leptos::children::ToChildren::to_children(|| view! {
            <DocProgressSlot/>
        })
        logo=...
        nav=...
        actions=...
    />
    // page content
}"
                    </code>
                </pre>

                // Live demo
                <div style="margin-top: var(--space-md); border: 1px solid var(--theme-surface-border); border-radius: var(--radius-md); overflow: hidden;">
                    <div style="padding: var(--space-xs) var(--space-md); background: var(--theme-surface-muted); font-size: var(--font-size-xs); color: var(--theme-surface-fg-muted);">
                        "↓ Live demo — sticky header with progress bar on its bottom edge"
                    </div>
                    <Header
                        bottom=leptos::children::ToChildren::to_children(|| view! {
                            <DocProgressSlot/>
                        })
                        logo=leptos::children::ToChildren::to_children(|| view! {
                            <span style="font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);">"MyApp"</span>
                        })
                        nav=leptos::children::ToChildren::to_children(|| view! {
                            <span style="color: var(--theme-surface-fg-muted); font-size: var(--font-size-sm);">"Docs"</span>
                        })
                    />
                </div>
            </section>

            // ── Scroll content ────────────────────────────────────────────────
            <div style="height: 150vh; margin-top: var(--space-2xl);">
                {(0..30).map(|i| view! {
                    <p style="margin: var(--space-md) 0; color: var(--theme-surface-fg-muted); font-size: var(--font-size-sm);">
                        "Paragraph " {i + 1} " — scroll to see the progress bar update."
                    </p>
                }).collect::<Vec<_>>()}
            </div>
        </div>
    }
}