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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

use leptos::prelude::*;
use super::{Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator};
use canonrs_core::primitives::{BreadcrumbPrimitive, BreadcrumbItemPrimitive, BreadcrumbLinkPrimitive, BreadcrumbSeparatorPrimitive};
use canonrs_core::meta::ActivityState;

#[component]
pub fn BasicExample() -> impl IntoView {
    view! {
        <div style="display: flex; flex-direction: column; gap: 2rem;">
            <div>
                <h4>"Basic Breadcrumb"</h4>
                <Breadcrumb>
                    <BreadcrumbItem>
                        <BreadcrumbLink href="/">"Home"</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbSeparator>"/"</BreadcrumbSeparator>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbLink href="/products">"Products"</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbSeparator>"/"</BreadcrumbSeparator>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbLink href="/products/category">"Category"</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbSeparator>"/"</BreadcrumbSeparator>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbPage>"Item"</BreadcrumbPage>
                    </BreadcrumbItem>
                </Breadcrumb>
            </div>

            <div>
                <h4>"Collapsible Breadcrumb"</h4>
                <BreadcrumbPrimitive class=String::new()>
                    <BreadcrumbItemPrimitive class=String::new()>
                        <BreadcrumbLinkPrimitive href="/".to_string() state=ActivityState::Inactive class=String::new()>"Home"</BreadcrumbLinkPrimitive>
                    </BreadcrumbItemPrimitive>
                    <BreadcrumbItemPrimitive class=String::new()>
                        <BreadcrumbSeparatorPrimitive class=String::new()>"/"</BreadcrumbSeparatorPrimitive>
                    </BreadcrumbItemPrimitive>

                    <details data-breadcrumb-collapse="" id="breadcrumb-collapse-1">
                        <summary data-breadcrumb-ellipsis-trigger="">"..."</summary>
                        <div data-breadcrumb-collapse-content="">
                            <BreadcrumbLinkPrimitive href="/docs".to_string() state=ActivityState::Inactive class=String::new()>"Documentation"</BreadcrumbLinkPrimitive>
                            <BreadcrumbLinkPrimitive href="/docs/components".to_string() state=ActivityState::Inactive class=String::new()>"Components"</BreadcrumbLinkPrimitive>
                            <BreadcrumbLinkPrimitive href="/docs/components/forms".to_string() state=ActivityState::Inactive class=String::new()>"Forms"</BreadcrumbLinkPrimitive>
                        </div>
                    </details>

                    <BreadcrumbItemPrimitive class=String::new()>
                        <BreadcrumbSeparatorPrimitive class=String::new()>"/"</BreadcrumbSeparatorPrimitive>
                    </BreadcrumbItemPrimitive>
                    <BreadcrumbItemPrimitive class=String::new()>
                        <BreadcrumbLinkPrimitive href="/products".to_string() state=ActivityState::Inactive class=String::new()>"Products"</BreadcrumbLinkPrimitive>
                    </BreadcrumbItemPrimitive>
                    <BreadcrumbItemPrimitive class=String::new()>
                        <BreadcrumbSeparatorPrimitive class=String::new()>"/"</BreadcrumbSeparatorPrimitive>
                    </BreadcrumbItemPrimitive>
                    <BreadcrumbItemPrimitive class=String::new()>
                        <span data-rs-breadcrumb-page="" aria-current="page">"Current Item"</span>
                    </BreadcrumbItemPrimitive>
                </BreadcrumbPrimitive>
            </div>
        </div>
    }
}

#[component]
pub fn AutoExample() -> impl IntoView {
    use super::BreadcrumbAuto;
    use canonrs_core::{NavigationState, HeadingHierarchy, HeadingNode};
    use std::collections::HashMap;

    let mock_state = {
        let mut state = NavigationState::new();
        let headings = vec![
            HeadingNode {
                id: "introduction".to_string(),
                text: "Introduction".to_string(),
                level: 1,
                parent_id: None,
                children_ids: vec!["getting-started".to_string()],
            },
            HeadingNode {
                id: "getting-started".to_string(),
                text: "Getting Started".to_string(),
                level: 2,
                parent_id: Some("introduction".to_string()),
                children_ids: vec!["installation".to_string()],
            },
            HeadingNode {
                id: "installation".to_string(),
                text: "Installation".to_string(),
                level: 3,
                parent_id: Some("getting-started".to_string()),
                children_ids: vec![],
            },
        ];
        let mut id_to_index = HashMap::new();
        for (idx, node) in headings.iter().enumerate() {
            id_to_index.insert(node.id.clone(), idx);
        }
        state.heading_hierarchy = HeadingHierarchy { headings, id_to_index };
        state.current_heading_id = Some("installation".to_string());
        state
    };

    let state_signal = RwSignal::new(mock_state);
    provide_context(state_signal);

    view! {
        <div>
            <h4>"Auto Breadcrumb (from NavigationContext)"</h4>
            <BreadcrumbAuto />
        </div>
    }
}