4 files changed, 142 insertions, 0 deletions
diff --git a/examples/05-http-requests/README.md b/examples/05-http-requests/README.md
new file mode 100644
index 0000000..d6d82bd
--- /dev/null
+++ b/examples/05-http-requests/README.md
@@ -0,0 +1 @@
+# 04 HTTP Requests
diff --git a/examples/05-http-requests/gleam.toml b/examples/05-http-requests/gleam.toml
new file mode 100644
index 0000000..0937229
--- /dev/null
+++ b/examples/05-http-requests/gleam.toml
@@ -0,0 +1,12 @@
+name = "app"
+version = "1.0.0"
+target = "javascript"
+
+[dependencies]
+gleam_stdlib = "~> 0.34 or ~> 1.0"
+lustre = { path = "../../" }
+lustre_ui = "~> 0.3"
+lustre_http = "~> 0.5"
+
+[dev-dependencies]
+gleeunit = "~> 1.0"
diff --git a/examples/05-http-requests/manifest.toml b/examples/05-http-requests/manifest.toml
new file mode 100644
index 0000000..5e3d90f
--- /dev/null
+++ b/examples/05-http-requests/manifest.toml
@@ -0,0 +1,29 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "argv", version = "1.0.1", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "A6E9009E50BBE863EB37D963E4315398D41A3D87D0075480FC244125808F964A" },
+  { name = "gleam_community_ansi", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib"], otp_app = "gleam_community_ansi", source = "hex", outer_checksum = "FE79E08BF97009729259B6357EC058315B6FBB916FAD1C2FF9355115FEB0D3A4" },
+  { name = "gleam_community_colour", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "A49A5E3AE8B637A5ACBA80ECB9B1AFE89FD3D5351FF6410A42B84F666D40D7D5" },
+  { name = "gleam_erlang", version = "0.24.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "26BDB52E61889F56A291CB34167315780EE4AA20961917314446542C90D1C1A0" },
+  { name = "gleam_fetch", version = "0.3.1", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_stdlib", "gleam_http"], otp_app = "gleam_fetch", source = "hex", outer_checksum = "24F83C6EF5BC274EF4D712B374D7CDB795136883DA64E2BA6435AF8E6C57E6E2" },
+  { name = "gleam_http", version = "3.5.3", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "C2FC3322203B16F897C1818D9810F5DEFCE347F0751F3B44421E1261277A7373" },
+  { name = "gleam_javascript", version = "0.7.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "EEA30D1ABF62B06FC378764D598DF041303CFA33A6586BFF4C4BFEFFA83DBDBE" },
+  { name = "gleam_json", version = "0.7.0", build_tools = ["gleam"], requirements = ["thoas", "gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "CB405BD93A8828BCD870463DE29375E7B2D252D9D124C109E5B618AAC00B86FC" },
+  { name = "gleam_otp", version = "0.9.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "5FADBBEC5ECF3F8B6BE91101D432758503192AE2ADBAD5602158977341489F71" },
+  { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" },
+  { name = "gleeunit", version = "1.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "D364C87AFEB26BDB4FB8A5ABDE67D635DC9FA52D6AB68416044C35B096C6882D" },
+  { name = "glint", version = "0.14.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_community_colour", "snag", "gleam_stdlib"], otp_app = "glint", source = "hex", outer_checksum = "21AB16D5A50D4EF34DF935915FDBEE06B2DAEDEE3FCC8584C6E635A866566B38" },
+  { name = "lustre", version = "3.1.3", build_tools = ["gleam"], requirements = ["argv", "gleam_community_ansi", "gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib", "glint"], source = "local", path = "../.." },
+  { name = "lustre_http", version = "0.5.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "gleam_http", "lustre", "gleam_json", "gleam_javascript", "gleam_fetch"], otp_app = "lustre_http", source = "hex", outer_checksum = "7D7D91EB7C59177E7C2ECCF7D0BE530DDFF86264AE1BEF473E6F9F8C6C62CEB0" },
+  { name = "lustre_ui", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib", "lustre"], otp_app = "lustre_ui", source = "hex", outer_checksum = "F81BE5D20153CFFC717C2C4687A19375A8613528908AF7069DDA1B929C8398B1" },
+  { name = "snag", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "snag", source = "hex", outer_checksum = "54D32E16E33655346AA3E66CBA7E191DE0A8793D2C05284E3EFB90AD2CE92BCC" },
+  { name = "thoas", version = "0.4.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "4918D50026C073C4AB1388437132C77A6F6F7C8AC43C60C13758CC0ADCE2134E" },
+]
+
+[requirements]
+gleam_stdlib = { version = "~> 0.34 or ~> 1.0" }
+gleeunit = { version = "~> 1.0" }
+lustre = { path = "../../" }
+lustre_http = { version = "~> 0.5"}
+lustre_ui = { version = "~> 0.3" }
diff --git a/examples/05-http-requests/src/app.gleam b/examples/05-http-requests/src/app.gleam
new file mode 100644
index 0000000..0abd9dc
--- /dev/null
+++ b/examples/05-http-requests/src/app.gleam
@@ -0,0 +1,100 @@
+import gleam/dynamic
+import gleam/option.{type Option, None, Some}
+import lustre
+import lustre/attribute
+import lustre/effect.{type Effect}
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/event
+// Lustre_http is a community package that provides a simple API for making
+// HTTP requests from your update function. You can find the docs for the package
+// here:
+//
+//   https://hexdocs.pm/lustre_http/index.html
+import lustre_http.{type HttpError}
+// These examples are written with lustre_ui in mind. They'll work regardless,
+// but to see what lustre_ui can do make sure to run each of these examples with
+// the `--include-styles` flag:
+//
+//   $ gleam run -m lustre/try -- --include-styles
+//
+// In your own apps, make sure to add the `lustre_ui` dependency and include the
+// stylesheet somewhere.
+import lustre/ui
+import lustre/ui/aside
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main() {
+  let app = lustre.application(init, update, view)
+  let assert Ok(_) = lustre.start(app, "#app", Nil)
+}
+
+// MODEL -----------------------------------------------------------------------
+
+type Model {
+  Model(quote: Option(Quote))
+}
+
+type Quote {
+  Quote(author: String, content: String)
+}
+
+fn init(_) -> #(Model, Effect(Msg)) {
+  #(Model(quote: None), effect.none())
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub opaque type Msg {
+  Refresh
+  GotQuote(Result(Quote, HttpError))
+}
+
+fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+  case msg {
+    Refresh -> #(model, get_quote())
+    GotQuote(Ok(quote)) -> #(Model(quote: Some(quote)), effect.none())
+    GotQuote(Error(_)) -> #(model, effect.none())
+  }
+}
+
+fn get_quote() -> Effect(Msg) {
+  let url = "https://api.quotable.io/random"
+  let decoder =
+    dynamic.decode2(
+      Quote,
+      dynamic.field("author", dynamic.string),
+      dynamic.field("content", dynamic.string),
+    )
+
+  lustre_http.get(url, lustre_http.expect_json(decoder, GotQuote))
+}
+
+// VIEW ------------------------------------------------------------------------
+
+fn view(model: Model) -> Element(Msg) {
+  let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
+
+  ui.centre(
+    [attribute.style(styles)],
+    ui.aside(
+      [aside.min_width(70), attribute.style([#("width", "60ch")])],
+      view_quote(model.quote),
+      ui.button([event.on_click(Refresh)], [element.text("New quote")]),
+    ),
+  )
+}
+
+fn view_quote(quote: Option(Quote)) -> Element(msg) {
+  case quote {
+    Some(quote) ->
+      ui.stack([], [
+        element.text(quote.author <> " once said..."),
+        html.p([attribute.style([#("font-style", "italic")])], [
+          element.text(quote.content),
+        ]),
+      ])
+    None -> html.p([], [element.text("Click the button to get a quote!")])
+  }
+}