From c4fd738c39db25a2648aac92d7080a50db35b322 Mon Sep 17 00:00:00 2001 From: Guillaume Hivert Date: Tue, 14 May 2024 11:14:41 +0200 Subject: [PATCH] refactor: change way to generate nodes with sketch Signed-off-by: Guillaume Hivert --- apps/frontend/gleam.toml | 6 +- apps/frontend/manifest.toml | 10 +- apps/frontend/src/data/model.gleam | 2 - apps/frontend/src/frontend/view.gleam | 12 +- .../src/frontend/view/body/styles.gleam | 217 ++++++------------ .../src/frontend/view/footer/styles.gleam | 38 +-- .../src/frontend/view/navbar/styles.gleam | 45 +--- apps/frontend/src/frontend/view/types.gleam | 42 +--- apps/frontend/src/sketch/lustre/extra.gleam | 42 ++++ 9 files changed, 143 insertions(+), 271 deletions(-) create mode 100644 apps/frontend/src/sketch/lustre/extra.gleam diff --git a/apps/frontend/gleam.toml b/apps/frontend/gleam.toml index 8658ad4..35dc8f6 100644 --- a/apps/frontend/gleam.toml +++ b/apps/frontend/gleam.toml @@ -10,15 +10,15 @@ typescript_declarations = true [dependencies] gleam_javascript = "~> 0.8" +gleam_json = ">= 1.0.1 and < 2.0.0" gleam_stdlib = "~> 0.34 or ~> 1.0" grille_pain = {path = "../../packages/grille_pain"} lustre = ">= 4.2.0 and < 5.0.0" lustre_http = "~> 0.5" +modem = ">= 1.1.0 and < 2.0.0" plinth = ">= 0.2.0 and < 1.0.0" -sketch = ">= 2.2.0 and < 3.0.0" +sketch = ">= 2.2.2 and < 3.0.0" tardis = ">= 0.1.0 and < 1.0.0" -gleam_json = ">= 1.0.1 and < 2.0.0" -modem = ">= 1.1.0 and < 2.0.0" [dev-dependencies] gleeunit = "~> 1.0" diff --git a/apps/frontend/manifest.toml b/apps/frontend/manifest.toml index 7e2b752..a766edb 100644 --- a/apps/frontend/manifest.toml +++ b/apps/frontend/manifest.toml @@ -12,15 +12,15 @@ packages = [ { name = "gleam_stdlib", version = "0.37.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "5398BD6C2ABA17338F676F42F404B9B7BABE1C8DC7380031ACB05BBE1BCF3742" }, { name = "gleeunit", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "72CDC3D3F719478F26C4E2C5FED3E657AC81EC14A47D2D2DEBB8693CA3220C3B" }, { name = "grille_pain", version = "1.0.0", build_tools = ["gleam"], requirements = ["birl", "gleam_stdlib", "lustre", "scheduler", "sketch", "tardis"], source = "local", path = "../../packages/grille_pain" }, - { name = "lustre", version = "4.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "258F876CD7AB12C2C773F1A30F76DFC0A0ED989B720070DF32FC0717A6A0E60C" }, + { name = "lustre", version = "4.2.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "927683F0F45D32A3C10449A8E85F0DAE383AADDB31AD7499670C998E73DA8D49" }, { name = "lustre_http", version = "0.5.2", build_tools = ["gleam"], requirements = ["gleam_fetch", "gleam_http", "gleam_javascript", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_http", source = "hex", outer_checksum = "FB0478CBFA6B16DBE8ECA326DAE2EC15645E04900595EF2C4F039ABFA0512ABA" }, { name = "modem", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "modem", source = "hex", outer_checksum = "4C6E448089B09A57C179455D44526A717E4E217D4000B91201617FD2D9F18E68" }, { name = "plinth", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "83211E672D83F3CE14681D0ECD3AD883EE7588E423E7C9DDDB460014AD60AC24" }, { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" }, { name = "scheduler", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../../packages/scheduler" }, - { name = "sketch", version = "2.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "8860E68627E33E4B63379050C1699546828CBF02364F26E191B95EA080AE483A" }, + { name = "sketch", version = "2.2.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "AE2FE447AB1C993CE4884D9EFE915D1971AEDED335904B77BE875B5BE3D7378B" }, { name = "tardis", version = "0.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "tardis", source = "hex", outer_checksum = "C8E7BAB95C59EF50332905A06B82BB35526B7BE2F191580F3CD8790903AA49F7" }, - { name = "thoas", version = "1.2.0", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "540C8CB7D9257F2AD0A14145DC23560F91ACDCA995F0CCBA779EB33AF5D859D1" }, + { name = "thoas", version = "1.2.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "E38697EDFFD6E91BD12CEA41B155115282630075C2A727E7A6B2947F5408B86A" }, ] [requirements] @@ -31,7 +31,7 @@ gleeunit = { version = "~> 1.0" } grille_pain = { path = "../../packages/grille_pain" } lustre = { version = ">= 4.2.0 and < 5.0.0" } lustre_http = { version = "~> 0.5" } -modem = { version = ">= 1.1.0 and < 2.0.0"} +modem = { version = ">= 1.1.0 and < 2.0.0" } plinth = { version = ">= 0.2.0 and < 1.0.0" } -sketch = { version = ">= 2.2.0 and < 3.0.0" } +sketch = { version = ">= 2.2.2 and < 3.0.0" } tardis = { version = ">= 0.1.0 and < 1.0.0" } diff --git a/apps/frontend/src/data/model.gleam b/apps/frontend/src/data/model.gleam index ca1fbf8..a74c90e 100644 --- a/apps/frontend/src/data/model.gleam +++ b/apps/frontend/src/data/model.gleam @@ -1,6 +1,5 @@ import data/model/mock import data/search_result.{type SearchResult, type SearchResults} -import gleam/io import gleam/list import gleam/pair import gleam/result @@ -52,6 +51,5 @@ fn insert_module_names(index: Index, search_results: List(SearchResult)) { list.key_find(acc, key) |> result.unwrap([]) |> fn(i) { list.prepend(i, #(val.module_name, val.name)) } - |> io.debug() |> fn(i) { list.key_set(acc, key, i) } } diff --git a/apps/frontend/src/frontend/view.gleam b/apps/frontend/src/frontend/view.gleam index 1182f4b..417842d 100644 --- a/apps/frontend/src/frontend/view.gleam +++ b/apps/frontend/src/frontend/view.gleam @@ -3,14 +3,12 @@ import frontend/colors/palette import frontend/view/body/body import frontend/view/footer/footer import frontend/view/navbar/navbar -import gleam/list -import lustre/attribute.{type Attribute} -import lustre/element.{type Element} import sketch +import sketch/lustre/extra as l import sketch/size -fn layout(attributes: List(Attribute(msg)), children: List(Element(msg))) { - sketch.class([ +fn layout(attributes, children) { + l.memo("div", attributes, children, [ sketch.display("grid"), sketch.grid_template_areas( "\"navbar\" @@ -23,10 +21,6 @@ fn layout(attributes: List(Attribute(msg)), children: List(Element(msg))) { sketch.background(palette.dark.underwater_blue), sketch.color(palette.dark.white), ]) - |> sketch.memo() - |> sketch.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn view(model: Model) { diff --git a/apps/frontend/src/frontend/view/body/styles.gleam b/apps/frontend/src/frontend/view/body/styles.gleam index b0dec20..795aee3 100644 --- a/apps/frontend/src/frontend/view/body/styles.gleam +++ b/apps/frontend/src/frontend/view/body/styles.gleam @@ -1,118 +1,93 @@ import frontend/colors/palette -import gleam/list -import lustre/element import sketch as s +import sketch/lustre/extra as l import sketch/size.{px} -pub fn implementations_pill( - background: String, - color: String, - attributes, - children, -) { +pub fn implementations_pill(background, color, attributes, children) { let id = "implementations-pill-" <> background - s.dynamic(id, [ + l.dynamic("div", attributes, children, id, [ s.background(background), s.color(color), s.padding_("4px 9px"), s.border_radius(px(6)), s.font_size(px(10)), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn implementations_pill_wrapper(attributes, children) { - s.class([s.display("flex"), s.align_items("center"), s.gap(px(6))]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) + l.element("div", attributes, children, [ + s.display("flex"), + s.align_items("center"), + s.gap(px(6)), + ]) } pub fn search_result(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.background(palette.dark.unexpected_aubergine), s.border_radius(px(14)), s.overflow("hidden"), s.padding(px(12)), s.box_shadow("0 0 3px 2px " <> palette.dark.black <> "4d"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn search_results_wrapper(attributes, children) { - s.class([ + l.element("div", attributes, children, [ s.display("grid"), s.padding_("0 48px"), s.gap(px(24)), s.grid_template_columns("min-content minmax(auto, 1fr)"), s.justify_items("center"), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn search_details(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.background(palette.dark.unexpected_aubergine), s.display("flex"), s.gap(px(12)), s.justify_content("space-between"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn search_details_title(attributes, children) { - s.class([s.display("flex"), s.align_items("center"), s.gap(px(12))]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) + l.element("div", attributes, children, [ + s.display("flex"), + s.align_items("center"), + s.gap(px(12)), + ]) } pub fn qualified_name(attributes, children) { - s.class([ + l.element("a", attributes, children, [ s.overflow("hidden"), s.text_overflow("ellipsis"), s.direction("rtl"), s.text_decoration("none"), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("a", _, children) } pub fn search_body(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.background(palette.dark.black), s.border_radius(px(12)), s.margin(px(-12)), s.margin_top(px(12)), s.padding(px(12)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn signature(attributes, children) { - s.class([s.white_space("pre-wrap"), s.display("block"), s.line_height("1.6")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("code", _, children) + l.memo("code", attributes, children, [ + s.white_space("pre-wrap"), + s.display("block"), + s.line_height("1.6"), + ]) } pub fn documentation(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.background(palette.dark.charcoal), s.padding(px(12)), s.border_radius(px(10)), @@ -122,22 +97,14 @@ pub fn documentation(attributes, children) { s.flex_direction("column"), s.gap(px(12)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn documentation_title(attributes, children) { - s.class([s.color(palette.dark.dark_white)]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) + l.memo("div", attributes, children, [s.color(palette.dark.dark_white)]) } pub fn search_wrapper(attributes, children) { - s.class([ + l.memo("form", attributes, children, [ s.display("grid"), s.grid_template_rows("auto auto auto"), s.grid_template_columns("auto auto auto"), @@ -152,10 +119,6 @@ pub fn search_wrapper(attributes, children) { s.width(size.percent(100)), s.margin_("auto"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("form", _, children) } pub fn search_title_() { @@ -169,15 +132,14 @@ pub fn search_title_() { } pub fn search_title(attributes, children) { - s.class([s.compose(search_title_()), s.font_size(size.rem_(2.5))]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) + l.memo("div", attributes, children, [ + s.compose(search_title_()), + s.font_size(size.rem_(2.5)), + ]) } pub fn search_title_wrapper(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.grid_area("title"), s.display("flex"), s.flex_direction("column"), @@ -186,22 +148,14 @@ pub fn search_title_wrapper(attributes, children) { s.color(palette.dark.dark_white), s.line_height("1.3"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn search_lucy(attributes) { - s.class([s.width(px(40))]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("img", _, []) + l.memo("img", attributes, [], [s.width(px(40))]) } pub fn search_input(attributes) { - s.class([ + l.memo("input", attributes, [], [ s.grid_area("input"), s.appearance("none"), s.background(palette.dark.white), @@ -215,14 +169,10 @@ pub fn search_input(attributes) { s.focus([s.outline("2px solid " <> palette.dark.faff_pink)]), s.width(size.percent(100)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("input", _, []) } pub fn search_submit(attributes) { - s.class([ + l.memo("input", attributes, [], [ s.grid_area("submit"), s.appearance("none"), s.border("none"), @@ -239,14 +189,10 @@ pub fn search_submit(attributes) { s.active([s.background(palette.dark.dark_faff_pink)]), s.focus([s.background(palette.dark.dark_faff_pink)]), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("input", _, []) } pub fn matches_titles(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.line_height("1.3"), s.color(palette.dark.dark_white), s.display("flex"), @@ -254,22 +200,17 @@ pub fn matches_titles(attributes, children) { s.gap(px(6)), s.font_size(px(12)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn matches_title(attributes, children) { - s.class([s.color(palette.dark.white), s.font_size(px(18))]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) + l.memo("div", attributes, children, [ + s.color(palette.dark.white), + s.font_size(px(18)), + ]) } pub fn empty_state(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("flex"), s.align_items("center"), s.gap(px(24)), @@ -278,22 +219,14 @@ pub fn empty_state(attributes, children) { s.width(size.percent(100)), s.margin_("auto"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn empty_state_lucy(attributes) { - s.class([s.width(px(100))]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("img", _, []) + l.memo("img", attributes, [], [s.width(px(100))]) } pub fn empty_state_titles(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.font_size(px(20)), s.display("flex"), s.flex_direction("column"), @@ -301,22 +234,17 @@ pub fn empty_state_titles(attributes, children) { s.line_height("1.3"), s.max_width(px(400)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn empty_state_subtitle(attributes, children) { - s.class([s.font_size(px(16)), s.color(palette.dark.dark_white)]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) + l.memo("div", attributes, children, [ + s.font_size(px(16)), + s.color(palette.dark.dark_white), + ]) } pub fn sidebar_wrapper(attributes, children) { - s.class([ + l.element("div", attributes, children, [ s.position("sticky"), s.top(px(130)), s.display("flex"), @@ -325,31 +253,29 @@ pub fn sidebar_wrapper(attributes, children) { s.height_("calc(100vh - 130px)"), s.overflow("auto"), s.padding_("12px 0"), - s.property( - "mask", - "linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255,1) 1% 99%, rgba(255, 255, 255, 0))", - ), + s.property("mask", { + "linear-gradient( + 180deg, + rgba(255,255,255, 0) 0%, + rgba(255,255,255,1) 0.5% 99.5%, + rgba(255, 255, 255, 0) + )" + }), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn sidebar_package_name(attributes, children) { - s.class([ + l.element("div", attributes, children, [ s.background(palette.dark.unexpected_aubergine), s.padding(px(6)), s.border_radius(px(6)), s.overflow("hidden"), s.text_overflow("ellipsis"), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn sidebar_module_name(attributes, children) { - s.class([ + l.element("button", attributes, children, [ s.text_overflow("ellipsis"), s.overflow("hidden"), s.direction("rtl"), @@ -367,55 +293,40 @@ pub fn sidebar_module_name(attributes, children) { s.property("padding-inline", "0"), s.padding_left(px(12)), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("button", _, children) } pub fn sidebar_package_wrapper(attributes, children) { - s.class([ + l.element("div", attributes, children, [ s.display("flex"), s.flex_direction("column"), s.gap(px(9)), s.font_size(px(14)), s.max_width(px(250)), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn main(attributes, children) { - s.class([ + l.memo("main", attributes, children, [ s.grid_area("main"), s.display("flex"), s.flex_direction("column"), s.gap(px(24)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("main", _, children) } pub fn items_wrapper(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("flex"), s.flex_direction("column"), s.gap(px(24)), s.padding_top(px(12)), s.max_width(px(700)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn named_type_button(attributes, children) { - s.class([s.text_decoration("none")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("a", _, children) + l.memo("a", attributes, children, [ + s.text_decoration("none"), + s.hover([s.text_decoration("underline")]), + ]) } diff --git a/apps/frontend/src/frontend/view/footer/styles.gleam b/apps/frontend/src/frontend/view/footer/styles.gleam index 7eee7bf..34d9e3c 100644 --- a/apps/frontend/src/frontend/view/footer/styles.gleam +++ b/apps/frontend/src/frontend/view/footer/styles.gleam @@ -1,11 +1,10 @@ import frontend/colors/palette -import gleam/list -import lustre/element import sketch as s +import sketch/lustre/extra as l import sketch/size.{px} pub fn footer(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.background(palette.dark.charcoal), s.display("flex"), s.flex_direction("column"), @@ -14,14 +13,10 @@ pub fn footer(attributes, children) { s.gap(px(48)), s.margin_top(px(48)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn footer_built(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("flex"), s.flex_direction("column"), s.align_items("center"), @@ -29,14 +24,10 @@ pub fn footer_built(attributes, children) { s.font_size(size.rem_(0.8)), s.line_height("1.3"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn footer_links(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("grid"), s.grid_template_columns("repeat(3, 1fr)"), s.grid_template_rows("repeat(6, auto)"), @@ -44,44 +35,29 @@ pub fn footer_links(attributes, children) { s.max_width(px(700)), s.width(size.percent(100)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn footer_section(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("grid"), s.grid_template_columns("1fr"), s.grid_template_rows("subgrid"), s.grid_row("1 / 7"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn foot_title(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.color(palette.dark.dark_white), s.font_weight("500"), s.padding_("6px 0px"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn foot_lk(attributes, children) { - s.class([ + l.memo("a", attributes, children, [ s.font_size(size.rem_(0.9)), s.color(palette.dark.white), s.text_decoration("none"), ]) - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("a", _, children) } diff --git a/apps/frontend/src/frontend/view/navbar/styles.gleam b/apps/frontend/src/frontend/view/navbar/styles.gleam index 334d2ee..68e7c0f 100644 --- a/apps/frontend/src/frontend/view/navbar/styles.gleam +++ b/apps/frontend/src/frontend/view/navbar/styles.gleam @@ -1,8 +1,7 @@ import frontend/colors/palette import frontend/view/body/styles as body_styles -import gleam/list -import lustre/element import sketch as s +import sketch/lustre/extra as l import sketch/size.{px} pub const search_lucy = body_styles.search_lucy @@ -10,49 +9,33 @@ pub const search_lucy = body_styles.search_lucy pub const search_input = body_styles.search_input pub fn search_input_wrapper(attributes, children) { - s.class([s.width_("100%")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("form", _, children) + l.memo("form", attributes, children, [s.width_("100%")]) } pub fn navbar_search_title(attributes, children) { - s.class([ + l.memo("a", attributes, children, [ s.font_size(size.rem_(1.2)), s.compose(body_styles.search_title_()), s.text_decoration("none"), s.cursor("pointer"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("a", _, children) } pub fn nav_links(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("flex"), s.align_items("baseline"), s.gap(px(48)), s.padding(px(48)), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn coming_soon(attributes, children) { - s.class([s.font_size(size.rem_(0.7))]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("span", _, children) + l.memo("span", attributes, children, [s.font_size(size.rem_(0.7))]) } pub fn trending(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("flex"), s.flex_direction("column"), s.gap(px(3)), @@ -60,14 +43,10 @@ pub fn trending(attributes, children) { s.color(palette.dark.dark_white), s.white_space("nowrap"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn navbar(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.position("sticky"), s.top(px(0)), s.display("flex"), @@ -80,21 +59,13 @@ pub fn navbar(attributes, children) { s.height(px(130)), s.z_index(1000), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } pub fn navbar_search(attributes, children) { - s.class([ + l.memo("div", attributes, children, [ s.display("flex"), s.gap(px(48)), s.align_items("center"), s.flex("1"), ]) - |> s.memo() - |> s.to_lustre() - |> list.prepend(attributes, _) - |> element.element("div", _, children) } diff --git a/apps/frontend/src/frontend/view/types.gleam b/apps/frontend/src/frontend/view/types.gleam index fa3f4ed..5584607 100644 --- a/apps/frontend/src/frontend/view/types.gleam +++ b/apps/frontend/src/frontend/view/types.gleam @@ -1,52 +1,32 @@ import frontend/colors/palette -import gleam/list import lustre/element/html as h import sketch as s +import sketch/lustre/extra as l + +fn span(text: String, color: String) { + l.memo("span", [], [h.text(text)], [s.color(color)]) +} pub fn keyword(text: String) { - s.class([s.color("#c678dd")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend([], _) - |> h.span([h.text(text)]) + span(text, "#c678dd") } pub fn fun(text: String) { - s.class([s.color("#61afef")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend([], _) - |> h.span([h.text(text)]) + span(text, "#61afef") } pub fn label(text: String) { - s.class([s.color("#e06c75")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend([], _) - |> h.span([h.text(text)]) + span(text, "#e06c75") } pub fn type_(text: String) { - s.class([s.color("#e5c07b")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend([], _) - |> h.span([h.text(text)]) + span(text, "#e5c07b") } pub fn variable(text: String) { - s.class([s.color("#98c379")]) - |> s.memo() - |> s.to_lustre() - |> list.prepend([], _) - |> h.span([h.text(text)]) + span(text, "#98c379") } pub fn dark_white(text: String) { - s.class([s.color(palette.dark.dark_white)]) - |> s.memo() - |> s.to_lustre() - |> list.prepend([], _) - |> h.span([h.text(text)]) + span(text, palette.dark.dark_white) } diff --git a/apps/frontend/src/sketch/lustre/extra.gleam b/apps/frontend/src/sketch/lustre/extra.gleam new file mode 100644 index 0000000..731f6e2 --- /dev/null +++ b/apps/frontend/src/sketch/lustre/extra.gleam @@ -0,0 +1,42 @@ +import gleam/list +import lustre/attribute.{type Attribute} +import lustre/element.{type Element} +import sketch as s + +pub fn element( + tag: String, + attributes: List(Attribute(msg)), + children: List(Element(msg)), + styles: List(s.Style(media, pseudo_selector)), +) { + s.class(styles) + |> s.to_lustre() + |> list.prepend(attributes, _) + |> element.element(tag, _, children) +} + +pub fn memo( + tag: String, + attributes: List(Attribute(msg)), + children: List(Element(msg)), + styles: List(s.Style(media, pseudo_selector)), +) { + s.class(styles) + |> s.memo() + |> s.to_lustre() + |> list.prepend(attributes, _) + |> element.element(tag, _, children) +} + +pub fn dynamic( + tag: String, + attributes: List(Attribute(msg)), + children: List(Element(msg)), + id: String, + styles: List(s.Style(media, pseudo_selector)), +) { + s.dynamic(id, styles) + |> s.to_lustre() + |> list.prepend(attributes, _) + |> element.element(tag, _, children) +}