Skip to content

Commit e54455e

Browse files
ghivertghivert
committed
Improve landing page
1 parent 20dc50a commit e54455e

File tree

11 files changed

+211
-36
lines changed

11 files changed

+211
-36
lines changed

‎landing_page/manifest.toml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
# You typically do not need to edit this file
33

44
packages = [
5-
{ name = "gleam_erlang", version = "0.28.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "BE551521F708DCE5CB954AFBBDF08519C1C44986521FD40753608825F48FFA9E" },
5+
{ name = "gleam_erlang", version = "0.30.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "760618870AE4A497B10C73548E6E44F43B76292A54F0207B3771CBB599C675B4" },
66
{ name = "gleam_javascript", version = "0.13.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "F98328FCF573DA6F3A35D7F6CB3F9FF19FD5224CCBA9151FCBEAA0B983AF2F58" },
7-
{ name = "gleam_otp", version = "0.12.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BFACC1513410DF5A1617169A9CD7EA334973AC71D860A17574BA7B2EADD89A6F" },
7+
{ name = "gleam_otp", version = "0.14.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "5A8CE8DBD01C29403390A7BD5C0A63D26F865C83173CF9708E6E827E53159C65" },
88
{ name = "gleam_stdlib", version = "0.40.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86606B75A600BBD05E539EB59FABC6E307EEEA7B1E5865AFB6D980A93BCB2181" },
99
{ name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
1010
{ name = "redraw", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_stdlib"], otp_app = "redraw", source = "hex", outer_checksum = "4E6F55F965FD7A4B0514E269AC61BF8EF5EE421DCC19333BF80F4874250FDFB6" },
1111
{ name = "redraw_dom", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw"], otp_app = "redraw_dom", source = "hex", outer_checksum = "0FFAAA6FFA52B88C1506EB6908E07479DA51B9F55F875A596E0B48E30FCE5DCE" },
12-
{ name = "sketch", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "F162070BCCF8BEF28C9520E80501565403E681D9E3F80844EC5ED307A2E4ADDF" },
12+
{ name = "sketch", version = "3.1.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "6CBFAAA92C37F1F44FC552FD9E9DAC34598BDEB5F873B6191C696DC67D85AD00" },
1313
{ name = "sketch_redraw", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw", "sketch"], otp_app = "sketch_redraw", source = "hex", outer_checksum = "5AB2158228C93C0AAEC24E863EE9110D871F04D76B70206FD24D208E13325BFC" },
1414
]
1515

‎landing_page/src/components/button.gleam‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1+
import redraw/attribute as a
12
import redraw/html as h
23
import sketch as s
34
import sketch/redraw/html as sh
45
import sketch/size.{px, rem}
56

6-
pub fn primary(content: String) {
7+
fn primary_class() {
78
s.class([
9+
s.display("block"),
10+
s.text_decoration("none"),
811
s.background("#eee"),
912
s.border_radius(px(6)),
1013
s.padding_("9px 16px"),
1114
s.font_size(rem(1.0)),
15+
s.color("inherit"),
1216
])
13-
|> sh.button([], [h.text(content)])
17+
}
18+
19+
pub fn primary(attributes, content: String) {
20+
primary_class()
21+
|> sh.button(attributes, [h.text(content)])
1422
}
1523

1624
pub type Color {
@@ -43,3 +51,12 @@ pub fn example(color, text) {
4351
])
4452
|> sh.button([], [h.text(text)])
4553
}
54+
55+
pub fn link(link, content) {
56+
s.class([
57+
s.compose(primary_class()),
58+
s.background("#fff"),
59+
s.border("1px solid #ccc"),
60+
])
61+
|> sh.a([a.href(link)], [h.text(content)])
62+
}

‎landing_page/src/components/copy_button.gleam‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ fn on_copy(text, set_copied) {
3939

4040
fn code_install() {
4141
s.class([
42-
s.border("1px solid black"),
42+
s.border("1px solid #ccc"),
4343
s.border_radius(px(8)),
4444
s.display("flex"),
4545
s.align_items("center"),
4646
s.padding(px(2)),
47-
s.padding_left(px(6)),
47+
s.padding_left(px(8)),
4848
s.gap(px(9)),
4949
s.font_size(rem(0.7)),
5050
s.font_weight("450"),

‎landing_page/src/components/footer.gleam‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import redraw
2+
import redraw/attribute as a
3+
import redraw/html as h
4+
import sketch as s
5+
import sketch/redraw/html as sh
6+
import sketch/size.{px, rem}
7+
8+
pub fn footer() {
9+
use <- redraw.component__("Footer")
10+
footer_([], [
11+
column([
12+
footer_details([h.text("Made with 💜 by Chou Corp.")]),
13+
footer_details([
14+
h.text("With the help of "),
15+
link("https://gaspard.design", "gaspard.design"),
16+
]),
17+
]),
18+
])
19+
}
20+
21+
fn footer_(attributes, children) {
22+
s.class([
23+
s.margin_top(px(120)),
24+
s.padding(px(36)),
25+
s.display("flex"),
26+
s.justify_content("center"),
27+
])
28+
|> sh.div(attributes, children)
29+
}
30+
31+
fn footer_details(children) {
32+
s.class([
33+
s.font_size(rem(0.8)),
34+
s.line_height("1.4"),
35+
s.font_weight("500"),
36+
s.color("#888"),
37+
])
38+
|> sh.div([], children)
39+
}
40+
41+
fn column(children) {
42+
s.class([
43+
s.display("flex"),
44+
s.flex_direction("column"),
45+
s.align_items("center"),
46+
])
47+
|> sh.div([], children)
48+
}
49+
50+
fn link(href, content) {
51+
s.class([s.color("#ffaff3")])
52+
|> sh.a([a.href(href)], [h.text(content)])
53+
}

‎landing_page/src/components/navbar.gleam‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import icons
22
import redraw
33
import redraw/attribute as a
4+
import redraw/html as h
45
import sketch as s
56
import sketch/redraw/html as sh
67
import sketch/size.{px}
78

89
pub fn navbar() {
910
use <- redraw.component__("Navbar")
10-
nav([], [
11-
icons.small(icons.home()),
11+
nav([a.id("navbar")], [
12+
// icons.small(icons.home()),
13+
h.div([], []),
1214
sh.div(s.class([s.display("flex"), s.gap(px(24))]), [], [
1315
external_icon("https://hexdocs.pm/sketch", icons.book_open()),
1416
external_icon("https://github.com/ghivert/sketch", icons.github()),

‎landing_page/src/components/windows.gleam‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import redraw/attribute as a
33
import redraw/html as h
44
import sketch as s
55
import sketch/redraw/html as sh
6-
import sketch/size.{px}
6+
import sketch/size.{percent, px}
77

88
const border = "rgb(223, 234, 255)"
99

@@ -16,6 +16,8 @@ pub fn scaffold(children) {
1616
s.flex("1"),
1717
s.display("flex"),
1818
s.flex_direction("column"),
19+
s.max_height(px(400)),
20+
s.max_width(percent(100)),
1921
])
2022
|> sh.div([], children)
2123
}
@@ -78,7 +80,6 @@ pub fn editor(content) {
7880
s.background("#fff"),
7981
s.padding(px(10)),
8082
s.display("flex"),
81-
s.max_height(px(400)),
8283
s.overflow("auto"),
8384
s.flex_grow(1),
8485
])

‎landing_page/src/ffi.gleam‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,6 @@ pub fn highlight_css(code: String) -> String
1717

1818
@external(javascript, "./landing_page.ffi.mjs", "highlightXml")
1919
pub fn highlight_xml(code: String) -> String
20+
21+
@external(javascript, "./landing_page.ffi.mjs", "scrollTo")
22+
pub fn scroll_to(id: String) -> Nil

‎landing_page/src/landing_page.ffi.mjs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,13 @@ export function highlightCss(code) {
2323
export function highlightXml(code) {
2424
return hljs.highlight(code, { language: 'xml' }).value
2525
}
26+
27+
export function scrollTo(id) {
28+
const node = document.getElementById(id)
29+
const nav = document.getElementById('navbar')
30+
if (!node || !nav) return
31+
const nodeRect = node.getBoundingClientRect()
32+
const navRect = nav.getBoundingClientRect()
33+
const top = nodeRect.top - navRect.bottom - 18
34+
window.scrollTo({ top, behavior: 'smooth' })
35+
}

‎landing_page/src/landing_page.gleam‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import components/button
22
import components/copy_button
3+
import components/footer
34
import components/navbar
45
import components/windows
5-
import layout.{body_container, main_title, row, section, title, title_container}
6+
import ffi
7+
import layout.{
8+
body_container, column, main_title, row, section, section_explanation, title,
9+
title_container,
10+
}
611
import redraw
12+
import redraw/handler
713
import redraw/html as h
814
import redraw_dom/client
915
import sketch as s
1016
import sketch/redraw as sr
1117
import sketch/redraw/html as sh
18+
import sketch/size.{px}
1219
import texts
1320

1421
pub fn main() {
@@ -23,6 +30,7 @@ fn app() {
2330
let plain_css_section = plain_css_section()
2431
let wisp_section = wisp_section()
2532
let navbar = navbar.navbar()
33+
let footer = footer.footer()
2634
use <- redraw.component__("App")
2735
sh.div(s.class([s.font_family("Lexend")]), [], [
2836
navbar(),
@@ -31,6 +39,7 @@ fn app() {
3139
redraw_section(),
3240
plain_css_section(),
3341
wisp_section(),
42+
footer(),
3443
])
3544
}
3645

@@ -39,7 +48,7 @@ fn description_section() {
3948
title_container([
4049
main_title("Leverage on your CSS knowledge."),
4150
main_title("Create your own styles."),
42-
main_title("Make your application Gleam."),
51+
main_title("Make your application Gleaming."),
4352
]),
4453
body_container([], [
4554
title("Sketch, CSS for anywhere"),
@@ -51,24 +60,34 @@ fn description_section() {
5160
h.div([], [h.text(texts.explanation_trd)]),
5261
h.div([], [h.text("Show me an example with…")]),
5362
row([], [
54-
button.primary("Lustre"),
55-
button.primary("Redraw"),
56-
button.primary("Plain CSS"),
57-
button.primary("SSR"),
63+
button.primary([scroll_to("lustre-section")], "Lustre"),
64+
button.primary([scroll_to("redraw-section")], "Redraw"),
65+
button.primary([scroll_to("plain-css-section")], "Plain CSS"),
66+
button.primary([scroll_to("wisp-section")], "SSR"),
5867
]),
5968
]),
6069
])
6170
}
6271

72+
fn scroll_to(id: String) {
73+
use _event <- handler.on_click()
74+
ffi.scroll_to(id)
75+
}
76+
6377
fn lustre_section() {
6478
let copy_button = copy_button.copy_button()
6579
use <- redraw.component__("LustreSection")
66-
section("#eee", [
67-
row([], [
80+
section("lustre-section", "#eee", [
81+
column([], [
6882
copy_button.title("Sketch Lustre"),
6983
copy_button(#("gleam add sketch sketch_lustre")),
7084
]),
71-
layout.windows_wrapper([
85+
layout.windows_wrapper(px(1000), [
86+
column([], [
87+
section_explanation([], [h.text(texts.sketch_lustre_fst)]),
88+
section_explanation([], [h.text(texts.sketch_lustre_snd)]),
89+
button.link("https://hexdocs.pm/sketch_lustre", texts.bring_me_docs),
90+
]),
7291
layout.windows_row([
7392
windows.scaffold([
7493
windows.menu_bar([windows.traffic_lights()]),
@@ -89,12 +108,17 @@ fn lustre_section() {
89108
fn redraw_section() {
90109
let copy_button = copy_button.copy_button()
91110
use <- redraw.component__("RedrawSection")
92-
section("#fff", [
93-
row([], [
111+
section("redraw-section", "#fff", [
112+
column([], [
94113
copy_button.title("Sketch Redraw"),
95114
copy_button(#("gleam add sketch sketch_redraw")),
96115
]),
97-
layout.windows_wrapper([
116+
layout.windows_wrapper(px(1000), [
117+
column([], [
118+
section_explanation([], [h.text(texts.sketch_redraw_fst)]),
119+
section_explanation([], [h.text(texts.sketch_redraw_snd)]),
120+
button.link("https://hexdocs.pm/sketch_redraw", texts.bring_me_docs),
121+
]),
98122
layout.windows_row([
99123
windows.scaffold([
100124
windows.menu_bar([windows.traffic_lights()]),
@@ -115,12 +139,17 @@ fn redraw_section() {
115139
fn plain_css_section() {
116140
let copy_button = copy_button.copy_button()
117141
use <- redraw.component__("PlainCssSection")
118-
section("#eee", [
119-
row([], [
142+
section("plain-css-section", "#eee", [
143+
column([], [
120144
copy_button.title("Sketch CSS"),
121145
copy_button(#("gleam add sketch sketch_css")),
122146
]),
123-
layout.windows_wrapper([
147+
layout.windows_wrapper(px(1400), [
148+
column([], [
149+
section_explanation([], [h.text(texts.sketch_css_fst)]),
150+
section_explanation([], [h.text(texts.sketch_css_snd)]),
151+
button.link("https://hexdocs.pm/sketch_css", texts.bring_me_docs),
152+
]),
124153
layout.windows_row([
125154
windows.scaffold([
126155
windows.menu_bar([windows.traffic_lights()]),
@@ -142,12 +171,17 @@ fn plain_css_section() {
142171
fn wisp_section() {
143172
let copy_button = copy_button.copy_button()
144173
use <- redraw.component__("WispSection")
145-
section("#fff", [
146-
row([], [
174+
section("wisp-section", "#fff", [
175+
column([], [
147176
copy_button.title("Sketch SSR"),
148177
copy_button(#("gleam add sketch")),
149178
]),
150-
layout.windows_wrapper([
179+
layout.windows_wrapper(px(1400), [
180+
column([], [
181+
section_explanation([], [h.text(texts.sketch_wisp_fst)]),
182+
section_explanation([], [h.text(texts.sketch_wisp_snd)]),
183+
button.link("https://hexdocs.pm/sketch_lustre", texts.bring_me_docs),
184+
]),
151185
layout.windows_row([
152186
windows.scaffold([
153187
windows.menu_bar([windows.traffic_lights()]),

0 commit comments

Comments
 (0)