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
|
// IMPORTS ---------------------------------------------------------------------
import gleam/list
import lustre/attribute
import lustre/element.{Element}
import lustre/element/html
pub fn docs(md: String) -> Element(msg) {
let #(content, summary) = parse_markdown(md)
html.body(
[attribute.class("bg-gray-50 prose max-w-none")],
[
html.div(
[attribute.class("max-w-[96rem] mx-auto grid grid-cols-8")],
[docs_left(), docs_content(content), docs_right(summary)],
),
],
)
}
fn docs_left() -> Element(msg) {
html.aside(
[
attribute.style([#("align-self", "start")]),
attribute.class("sticky top-0 border-r hidden px-4 h-screen"),
attribute.class("lg:block lg:col-span-2"),
attribute.class("xl:col-span-2"),
],
[
html.div(
[
attribute.class(
"absolute right-0 inset-y-0 w-[50vw] bg-gray-100 -z-10",
),
],
[],
),
html.h2([attribute.class("text-indigo-600")], [element.text("Lustre.")]),
docs_left_section(
"Docs",
[
#("Quickstart", "/docs/quickstart"),
#("Managing state", "/docs/managing-state"),
#("Side effects", "/docs/side-effects"),
#("Components", "/docs/components"),
#("Server-side rendering", "/docs/server-side-rendering"),
],
),
docs_left_section(
"Reference",
[
#("lustre", "/api/lustre"),
#("lustre/attribute", "/api/lustre/attribute"),
#("lustre/effect", "/api/lustre/effect"),
#("lustre/element", "/api/lustre/element"),
#("lustre/element/html", "/api/lustre/element/html"),
#("lustre/element/svg", "/api/lustre/element/svg"),
#("lustre/event", "/api/lustre/event"),
],
),
docs_left_section(
"External",
[
#("GitHub", "https://github.com/hayleigh-dot-dev/gleam-lustre"),
#("Discord", "https://discord.gg/Fm8Pwmy"),
#("Buy me a coffee?", "https://github.com/sponsors/hayleigh-dot-dev"),
],
),
],
)
}
fn docs_left_section(
title: String,
pages: List(#(String, String)),
) -> Element(msg) {
html.nav(
[],
[
html.h2([], [element.text(title)]),
html.ul(
[attribute.class("ml-2")],
{
use #(name, url) <- list.map(pages)
html.li([], [html.a([attribute.href(url)], [element.text(name)])])
},
),
],
)
}
fn docs_content(content: List(Element(msg))) -> Element(msg) {
html.main(
[
attribute.class("col-span-8 pt-4 px-4 pb-32"),
attribute.class("lg:px-8 lg:col-span-6"),
attribute.class("xl:col-span-5"),
],
content,
)
}
fn docs_right(summary: List(Element(msg))) -> Element(msg) {
html.aside(
[
attribute.style([#("align-self", "start")]),
attribute.class("sticky top-0 border-l hidden p-4 py-10 h-screen"),
attribute.class("xl:block xl:col-span-1"),
],
[
html.div(
[attribute.class("flex flex-col h-full overflow-y-scroll")],
summary,
),
],
)
}
// EXTERNALS -------------------------------------------------------------------
@external(javascript, "../app.ffi.mjs", "parse_markdown")
fn parse_markdown(md: String) -> #(List(Element(msg)), List(Element(msg)))
|
