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
|
// IMPORTS ---------------------------------------------------------------------
import app/layout
import gleam/function
import gleam/map.{Map}
import lustre
import lustre/attribute
import lustre/effect.{Effect}
import lustre/element.{Element}
import lustre/element/html
// MAIN ------------------------------------------------------------------------
pub fn main(route: Route) -> fn(Msg) -> Nil {
let app = lustre.application(init, update, view)
let assert Ok(dispatch) = lustre.start(app, "body", route)
dispatch
}
// MODEL -----------------------------------------------------------------------
type Model {
Model(route: Route, content: String, history: Map(String, String))
}
fn init(route: Route) -> #(Model, Effect(Msg)) {
let content = ""
let history = map.new()
let model = Model(route, content, history)
let effects = case route.path {
"/" -> fetch_post("/docs/quickstart", history)
_ -> fetch_post(route.path, history)
}
#(model, effects)
}
// UPDATE ----------------------------------------------------------------------
pub type Msg {
OnRouteChange(Route)
GotPost(String, String)
}
pub type Route {
Route(path: String, hash: String)
}
fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
// We need to do this because Gleam doesn't support record field access in
// guards just yet.
let current_path = model.route.path
case msg {
OnRouteChange(Route(path: "/", hash: _) as route) -> #(
Model(..model, route: route),
fetch_post("/docs/quickstart", model.history),
)
// Only fetch the markdown
OnRouteChange(Route(path: path, hash: _) as route) if path != current_path -> #(
Model(..model, route: route),
fetch_post(path, model.history),
)
GotPost(path, content) -> #(
Model(
..model,
content: content,
history: map.insert(model.history, path, content),
),
effect.none(),
)
}
}
fn fetch_post(path: String, history: Map(String, String)) -> Effect(Msg) {
use dispatch <- effect.from
case map.get(history, path) {
Ok(content) -> dispatch(GotPost(path, content))
Error(_) ->
fetch_post_content(path, function.compose(GotPost(path, _), dispatch))
}
}
@external(javascript, "./app.ffi.mjs", "fetch_post")
fn fetch_post_content(path: String, dispatch: fn(String) -> Nil) -> Nil
// VIEW ------------------------------------------------------------------------
fn view(model: Model) -> Element(Msg) {
case model.route.path {
"/" ->
html.body(
[],
[
html.div(
[
attribute.class(
"w-screen h-screen flex justify-center items-center",
),
attribute.style([
#("background-color", "hsla(226,0%,100%,1)"),
#(
"background-image",
" radial-gradient(at 62% 13%, hsla(170,76%,60%,1) 0px, transparent 65%),
radial-gradient(at 67% 42%, hsla(234,89%,70%,1) 0px, transparent 65%),
radial-gradient(at 10% 7%, hsla(213,93%,57%,1) 0px, transparent 65%),
radial-gradient(at 32% 46%, hsla(291,93%,80%,1) 0px, transparent 65%)",
),
]),
],
[
html.hgroup(
[],
[
html.h1(
[attribute.class("text-8xl")],
[element.text("Lustre.")],
),
html.p(
[attribute.class("pl-1")],
[element.text("Web apps from space!")],
),
],
),
],
),
layout.docs_section(model.content),
],
)
_ -> layout.docs_page(model.content)
}
}
|
