webfluent 0.4.0-alpha

The Web-First Language — compiles to HTML, CSS, JavaScript, and PDF. 50+ built-in components, reactivity, routing, i18n, SSG, and template engine.
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
132
133
134
135
136
137
138
139
140

Page Home (path: "/", title: "WebFluent — The Web-First Language") {
    state counter = 0
    state taskInput = ""
    state showDemo = false

    Container {
        Spacer(xl)

        Heading(t("hero.title"), h1, center, slideUp)
        Spacer(sm)
        Text(t("hero.sub1"), muted, center, fadeIn)
        Text(t("hero.sub2"), muted, center, fadeIn)

        Spacer()

        Row(gap: md, justify: center) {
            Button(t("hero.cta"), primary, large) { navigate("/getting-started") }
            Button(t("hero.guide"), large) { navigate("/guide") }
        }

        Spacer(xl)

        Card(outlined) {
            Card.Body {
                Code("Page Home (path: \"/\") \{\n    Container \{\n        Heading(\"Hello, WebFluent!\", h1)\n        Text(\"Build for the web. Nothing else.\")\n\n        Button(\"Get Started\", primary, large) \{\n            navigate(\"/docs\")\n        \}\n    \}\n\}", block)
            }
        }

        Spacer(xl)
        Divider()
        Spacer()

        Heading(t("demo.title"), h2, center)
        Text(t("demo.subtitle"), muted, center)

        Spacer()

        Grid(columns: 2, gap: lg) {
            Card(elevated, fadeIn) {
                Card.Header { Heading(t("demo.counter"), h2) }
                Card.Body {
                    Row(align: center, gap: md) {
                        Button("-", large) { counter = counter - 1 }
                        Heading("{counter}", h2, primary)
                        Button("+", primary, large) { counter = counter + 1 }
                    }
                    Spacer(sm)
                    Text(t("demo.counter.hint"), muted, small)
                }
            }

            Card(elevated, fadeIn) {
                Card.Header { Heading(t("demo.binding"), h2) }
                Card.Body {
                    Input(text, bind: taskInput, placeholder: t("demo.binding.placeholder"), label: "Input")
                    Spacer(sm)
                    if taskInput != "" {
                        Alert("You typed: {taskInput}", info)
                    }
                    Text(t("demo.binding.hint"), muted, small)
                }
            }

            Card(elevated, fadeIn) {
                Card.Header { Heading(t("demo.conditional"), h2) }
                Card.Body {
                    Switch(bind: showDemo, label: t("demo.conditional.toggle"))
                    Spacer(sm)
                    if showDemo, animate(slideUp, fadeOut) {
                        Card(outlined) {
                            Card.Body {
                                Badge("Visible!", success)
                                Spacer(sm)
                                Text(t("demo.conditional.text"))
                            }
                        }
                    }
                }
            }

            Card(elevated, fadeIn) {
                Card.Header { Heading(t("demo.components"), h2) }
                Card.Body {
                    Stack(gap: sm) {
                        Row(gap: sm) {
                            Button("Primary", primary)
                            Button("Danger", danger)
                            Button("Success", success)
                        }
                        Row(gap: sm) {
                            Badge("New", primary)
                            Badge("Sale", danger)
                            Badge("Active", success)
                            Tag("WebFluent")
                        }
                        Progress(value: 72, max: 100)
                        Text(t("demo.components.hint"), muted, small)
                    }
                }
            }
        }

        Spacer(xl)
        Divider()
        Spacer()

        Heading(t("why.title"), h2, center)
        Text(t("why.subtitle"), muted, center)

        Spacer()

        Grid(columns: 3, gap: md) {
            FeatureCard(title: t("why.syntax"), description: t("why.syntax.desc"))
            FeatureCard(title: t("why.components"), description: t("why.components.desc"))
            FeatureCard(title: t("why.reactivity"), description: t("why.reactivity.desc"))
            FeatureCard(title: t("why.design"), description: t("why.design.desc"))
            FeatureCard(title: t("why.animation"), description: t("why.animation.desc"))
            FeatureCard(title: t("why.i18n"), description: t("why.i18n.desc"))
            FeatureCard(title: t("why.ssg"), description: t("why.ssg.desc"))
            FeatureCard(title: t("why.a11y"), description: t("why.a11y.desc"))
            FeatureCard(title: t("why.zero"), description: t("why.zero.desc"))
        }

        Spacer(xl)

        Card(elevated) {
            Card.Body {
                Row(align: center, justify: between) {
                    Stack {
                        Heading(t("cta.title"), h2)
                        Text(t("cta.subtitle"), muted)
                    }
                    Button(t("hero.cta"), primary, large) { navigate("/getting-started") }
                }
            }
        }

        Spacer(xl)
    }
}