1 files changed, 58 insertions, 0 deletions
diff --git a/examples/server_demo/src/demo/web.gleam b/examples/server_demo/src/demo/web.gleam
new file mode 100644
index 0000000..b8c17e2
--- /dev/null
+++ b/examples/server_demo/src/demo/web.gleam
@@ -0,0 +1,58 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/http/request.{type Request as HttpRequest}
+import gleam/http/response.{type Response as HttpResponse}
+import gleam/result
+import gleam/string_builder
+import lustre/attribute.{attribute}
+import lustre/element
+import lustre/element/html.{html}
+import lustre/server
+import lustre/ui/styles
+import mist.{type Connection, type ResponseData}
+import wisp.{type Request, type Response}
+
+//
+
+pub fn handle(req: HttpRequest(Connection)) -> HttpResponse(ResponseData) {
+  wisp.mist_handler(handler, "")(req)
+}
+
+fn handler(req: Request) -> Response {
+  use req <- wisp.handle_head(req)
+  use <- wisp.serve_static(req, under: "/static", from: static_directory())
+
+  html([attribute("lang", "en")], [
+    html.head([], [
+      html.meta([attribute("charset", "utf-8")]),
+      html.meta([
+        attribute("name", "viewport"),
+        attribute("content", "width=device-width, initial-scale=1"),
+      ]),
+      styles.elements(),
+      html.script(
+        [attribute("type", "module")],
+        "
+        import '/static/lustre-server-component.mjs'
+
+        document.addEventListener('DOMContentLoaded', () => {
+          document
+            .querySelector('lustre-server-component')
+            .addEventListener('alert', event => {
+              console.log(`The server count says: ${event.detail}`)
+            })
+        })
+        ",
+      ),
+    ]),
+    html.body([], [server.component([server.route("/ws")])]),
+  ])
+  |> element.to_string_builder
+  |> string_builder.prepend("<!DOCTYPE html>\n")
+  |> wisp.html_response(200)
+}
+
+fn static_directory() -> String {
+  wisp.priv_directory("lustre")
+  |> result.unwrap("")
+}