setup routing

Author: vshakitskiy

gleam.toml

@@ -17,6 +17,7 @@ target = "javascript"
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
 lustre = ">= 5.3.5 and < 6.0.0"
 gleam_javascript = ">= 1.0.0 and < 2.0.0"
+modem = ">= 2.1.1 and < 3.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"
@@ -33,4 +34,4 @@ host = "0.0.0.0"
 port = 8080
 
 [tools.lustre.html]
-title = "🚧 wiskiy"
+title = "🚧 wiskiy"

index.html

@@ -33,6 +33,7 @@ packages = [
   { name = "lustre_dev_tools", version = "2.0.2", build_tools = ["gleam"], requirements = ["argv", "booklet", "filepath", "gleam_community_ansi", "gleam_crypto", "gleam_erlang", "gleam_http", "gleam_httpc", "gleam_json", "gleam_otp", "gleam_regexp", "gleam_stdlib", "glint", "group_registry", "justin", "lustre", "mist", "polly", "simplifile", "tom", "wisp"], otp_app = "lustre_dev_tools", source = "hex", outer_checksum = "BA4281B369292A0100D2FA66B6886C7A4205537EE0D5D38B3CAC504BA724E91E" },
   { name = "marceau", version = "1.3.0", build_tools = ["gleam"], requirements = [], otp_app = "marceau", source = "hex", outer_checksum = "2D1C27504BEF45005F5DFB18591F8610FB4BFA91744878210BDC464412EC44E9" },
   { name = "mist", version = "5.0.3", build_tools = ["gleam"], requirements = ["exception", "gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "gleam_yielder", "glisten", "gramps", "hpack_erl", "logging"], otp_app = "mist", source = "hex", outer_checksum = "7C4BE717A81305323C47C8A591E6B9BA4AC7F56354BF70B4D3DF08CC01192668" },
+  { name = "modem", version = "2.1.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "modem", source = "hex", outer_checksum = "444332FF806610B955D57389B3643245BBEC61A705A61B4FF7E67E3AF148F339" },
   { name = "platform", version = "1.0.0", build_tools = ["gleam"], requirements = [], otp_app = "platform", source = "hex", outer_checksum = "8339420A95AD89AAC0F82F4C3DB8DD401041742D6C3F46132A8739F6AEB75391" },
   { name = "polly", version = "2.1.0", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib", "simplifile"], otp_app = "polly", source = "hex", outer_checksum = "1BA4D0ACE9BCF52AEA6AD9DE020FD8220CCA399A379E50A1775FC5C1204FCF56" },
   { name = "simplifile", version = "2.3.0", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "0A868DAC6063D9E983477981839810DC2E553285AB4588B87E3E9C96A7FB4CB4" },
@@ -48,3 +49,4 @@ gleam_stdlib = { version = ">= 0.44.0 and < 2.0.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
 lustre = { version = ">= 5.3.5 and < 6.0.0" }
 lustre_dev_tools = { version = ">= 2.0.2 and < 3.0.0" }
+modem = { version = ">= 2.1.1 and < 3.0.0" }

manifest.toml

@@ -38,13 +38,17 @@
 }
 
 @layer base {
-  html, body {
-    @apply h-full
+  html {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply min-h-screen bg-background text-primary;
   }
 }
 
 @layer components {
   #app {
-    @apply h-full flex flex-col px-4 font-monocraft bg-background text-primary;
+    @apply min-h-screen flex flex-col px-4 font-monocraft max-w-5xl mx-auto;
   }
 }

src/app.css

@@ -1,39 +1,69 @@
+import gleam/result
+import gleam/uri
 import lustre
 import lustre/attribute
+import lustre/effect.{type Effect}
 import lustre/element.{type Element}
 import lustre/element/html
+import modem
 
 pub fn main() {
-  let app = lustre.simple(init, update, view)
+  let app = lustre.application(init, update, view)
   let assert Ok(_) = lustre.start(app, "#app", Nil)
 
   Nil
 }
 
+pub type Route {
+  Home
+}
+
 type Model =
-  Nil
+  Route
 
-fn init(_args) -> Model {
-  Nil
+fn init(_args) -> #(Model, Effect(Msg)) {
+  let route =
+    modem.initial_uri()
+    |> result.map(fn(uri) { uri.path_segments(uri.path) })
+    |> fn(path) {
+      case path {
+        _ -> Home
+      }
+    }
+
+  #(route, modem.init(on_url_change))
 }
 
-type Msg
+fn on_url_change(uri: uri.Uri) -> Msg {
+  case uri.path_segments(uri.path) {
+    _ -> OnRouterChange(Home)
+  }
+}
 
-fn update(model: Model, msg: Msg) -> Model {
-  Nil
+type Msg {
+  OnRouterChange(Route)
+}
+
+fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+  case msg {
+    OnRouterChange(route) -> #(route, effect.none())
+  }
 }
 
 fn view(model: Model) -> Element(Msg) {
   element.fragment([
-    view_navbar(),
+    view_header(),
     html.main([attribute.class("flex-1 flex items-center justify-center")], [
-      view_hero(),
+      case model {
+        Home -> view_home()
+      },
     ]),
+    view_footer(),
   ])
 }
 
-fn view_navbar() -> Element(Msg) {
-  html.header([], [
+fn view_header() -> Element(Msg) {
+  html.header([attribute.class("h-7")], [
     html.nav([attribute.class("bg-background")], [
       html.div([attribute.class("")], [
         html.a([attribute.href("/")], [html.text("Home")]),
@@ -42,7 +72,15 @@ fn view_navbar() -> Element(Msg) {
   ])
 }
 
-fn view_hero() -> Element(Msg) {
+fn view_footer() -> Element(Msg) {
+  html.footer([], [
+    html.p([attribute.class("my-4 text-center text-sm text-stone-500")], [
+      html.text("Made with Gleam & Lustre"),
+    ]),
+  ])
+}
+
+fn view_home() -> Element(Msg) {
   html.section([attribute.class("sm:flex sm:gap-6")], [
     html.div([], [
       html.img([
@@ -66,37 +104,39 @@ fn view_hero() -> Element(Msg) {
       html.p(
         [
           attribute.class(
-            "mt-4 text-justify leading-6 xs:max-w-md sm:max-w-sm md:max-w-lg md:text-lg xl:text-xl",
+            "mt-4 text-justify leading-6 xs:max-w-md sm:max-w-sm md:max-w-lg
+            md:text-lg xl:text-xl",
           ),
         ],
         [
           html.text(
-            "19 y/o, student & developer from Russia. I'm passionate about networking and backend development, and I'm currently working on my own side projects and having fun working with new technologies. In love with ",
-          ),
-          html.a(
-            [
-              attribute.class("text-detail"),
-              attribute.href("https://gleam.run"),
-              attribute.target("_blank"),
-            ],
-            [html.text("#gleam")],
+            "19 y/o, student & developer from Russia. I'm passionate about
+            networking and backend development, and I'm currently working on my
+            own side projects and having fun working with new technologies. In
+            love with ",
           ),
+          tag("gleam", "https://gleam.run"),
           html.text(", "),
-          html.a(
-            [
-              attribute.class("text-detail"),
-              attribute.href(
-                "https://rateyourmusic.com/list/Hyp3r10n/_dariacore-hyperflip/1/",
-              ),
-              attribute.target("_blank"),
-            ],
-            [
-              html.text("#hyperflip"),
-            ],
+          tag(
+            "hyperflip",
+            "https://rateyourmusic.com/list/Hyp3r10n/_dariacore-hyperflip/1/",
           ),
           html.text("."),
         ],
       ),
     ]),
   ])
 }
+
+fn tag(name: String, link: String) -> Element(Msg) {
+  html.a(
+    [
+      attribute.class("text-detail"),
+      attribute.href(link),
+      attribute.target("_blank"),
+    ],
+    [
+      html.text("#" <> name),
+    ],
+  )
+}