bcode_docs_site_ui 0.0.1-alpha.0

Bcode documentation website UI components
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

//! Home page — landing page with no sidebar.

use hyperchad::actions::logic::if_responsive;
use hyperchad::template::{Containers, container};
use hyperchad::transformer::models::LayoutDirection;

use crate::home_layout as layout;

/// The landing page for bcode docs site.
#[must_use]
pub fn home() -> Containers {
    container! {
        div
            #hero-wrap
            flex-grow=1
            justify-content=center
            align-items=center
            padding-x=(if_responsive("tablet").then::<i32>(24).or_else(80))
            padding-y=(if_responsive("mobile").then::<i32>(48).or_else(80))
        {
            (hero())
            (features())
        }
    }
}

fn hero() -> Containers {
    container! {
        div
            #hero-inner
            align-items=center
            max-width=820
            gap=(if_responsive("mobile").then::<i32>(24).or_else(32))
        {
            div
                #hero-brand
                color=(layout::green())
                font-size=(if_responsive("tablet").then::<i32>(40).or_else(64))
                font-family=(layout::MONO_FONT)
                text-align=center
            {
                ">_ bcode"
            }

            h1
                #hero-tagline
                color=(layout::text_primary())
                font-size=(if_responsive("tablet").then::<i32>(22).or_else(32))
                font-family=(layout::MONO_FONT)
                text-align=center
                margin-bottom=16
            {
                "Terminal-native coding agent and Rust SDK"
            }

            div
                #hero-description
                color=(layout::text_secondary())
                font-size=(if_responsive("mobile").then::<i32>(14).or_else(16))
                font-family=(layout::MONO_FONT)
                text-align=center
                max-width=680
            {
                "Work from a keyboard-first TUI with explicit permissions and durable sessions, or embed the same typed agent building blocks in a Rust application."
            }

            (hero_actions())
        }
    }
}

fn hero_actions() -> Containers {
    container! {
        div
            #hero-actions
            direction=row
            gap=16
            margin-top=32
            justify-content=center
        {
            anchor
                href="/docs"
                background=(layout::green())
                color=#0d1117
                padding-x=24
                padding-y=12
                border-radius=6
                text-decoration="none"
                font-family=(layout::MONO_FONT)
                font-size=14
            {
                "read docs"
            }
            anchor
                href="https://github.com/BSteffaniak/bcode"
                target="_blank"
                border="1, #7ee787"
                color=(layout::green())
                padding-x=24
                padding-y=12
                border-radius=6
                text-decoration="none"
                font-family=(layout::MONO_FONT)
                font-size=14
            {
                "view on github"
            }
        }
    }
}

fn features() -> Containers {
    container! {
        div
            #features-row
            direction=(
                if_responsive("tablet")
                    .then::<LayoutDirection>(LayoutDirection::Column)
                    .or_else(LayoutDirection::Row)
            )
            gap=24
            margin-top=(if_responsive("mobile").then::<i32>(48).or_else(80))
            max-width=960
        {
            (feature_card(
                0,
                "terminal-native",
                "A keyboard-first TUI with streamed output, rich Markdown, and native tool presentations."
            ))
            (feature_card(
                1,
                "permissioned",
                "Plan and build modes keep sensitive commands and repository changes behind explicit policy."
            ))
            (feature_card(
                2,
                "embeddable",
                "Use Bcode's provider, tool, session, and workflow APIs without the TUI or daemon."
            ))
        }
    }
}

fn feature_card(index: u8, title: &str, description: &str) -> Containers {
    let id = format!("feature-card-{index}");
    container! {
        div
            id=(id)
            background=(layout::surface())
            border-radius=8
            padding=(if_responsive("mobile").then::<i32>(20).or_else(24))
            flex=1
            border-left="2, #7ee787"
        {
            h3
                color=(layout::text_primary())
                font-size=15
                font-family=(layout::MONO_FONT)
                margin-bottom=8
            {
                (title)
            }
            div
                color=(layout::text_muted())
                font-size=13
                font-family=(layout::MONO_FONT)
            {
                (description)
            }
        }
    }
}