-
Notifications
You must be signed in to change notification settings - Fork 0
/
html_dsl.gleam
65 lines (64 loc) · 2.01 KB
/
html_dsl.gleam
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
import gleam/io
import html_dsl/types/html.{body, button, h1, header, html, nav}
import html_dsl/types/html/head.{charset, head, meta, script, title}
import html_dsl/types/html/lists.{ul}
import html_dsl/types/html/form.{Submit, Text, element, form, input, label}
import html_dsl/types/attribute.{class, id}
import html_dsl/types/html/form/select.{select}
import gleam/option.{None}
/// Example of creating an HTML string
pub fn main() {
html(
lang: "en",
head: head()
|> title("Hello, Gleam!")
|> charset("UTF-8")
|> meta("viewport", "width=device-width, initial-scale=1.0")
|> meta("description", "A Gleam program that generates HTML.")
|> script("https://cdn.tailwindcss.com")
|> head.end(),
body: body(
attributes: id(None, "main-content")
|> class("bg-black text-white"),
inner: header(
class(None, "grid place-content-center"),
nav(None, "Hello"),
)
<> case False {
True -> h1(None, "True")
False -> h1(None, "False")
}
<> ul(None)
|> lists.add(
attribute.new()
|> class("text-blue-400"),
"This is a list item",
)
|> lists.add(None, "This is another list item")
|> lists.end()
<> form(
class(None, "flex")
|> attribute.add("method", "GET")
|> attribute.add("action", "#"),
)
|> label(None, "Name:")
|> input(None, Text, "name")
|> input(None, Submit, "submit")
|> element(button(None, "Click me!"))
|> select(None)
|> select.add(
attribute.add(None, "selected", "selected")
|> attribute.add("disabled", "disabled"),
"",
"--Please choose an option--",
)
|> select.add(None, value: "something", label: "Something")
|> select.add(None, value: "else", label: "Else")
|> select.end()
|> form.end(),
),
)
|> html.force()
|> html.html_to_string()
|> io.println()
}