diff options
| -rw-r--r-- | docs/index.html | 72 | ||||
| -rw-r--r-- | docs/src/app.gleam | 56 |
2 files changed, 116 insertions, 12 deletions
diff --git a/docs/index.html b/docs/index.html index f6dce3a..ba9941e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,16 +5,84 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Lustre</title> + <script type="module"> + document.head.appendChild( + Object.assign(document.createElement("base"), { + href: import.meta.env.BASE_URL, + }) + ); + </script> + <style> + @font-face { + font-family: "NTDapper"; + font-style: normal; + font-weight: 400; + src: url("/fonts/NTDapper-regular.woff2") format("woff2"); + } + @font-face { + font-family: "NTDapper"; + font-style: normal; + font-weight: 500; + src: url("/fonts/NTDapper-medium.woff2") format("woff2"); + } + @font-face { + font-family: "NTDapper"; + font-style: normal; + font-weight: 700; + src: url("/fonts/NTDapper-bold.woff2") format("woff2"); + } + @font-face { + font-family: "NTDapper"; + font-style: normal; + font-weight: 900; + src: url("/fonts/NTDapper-black.woff2") format("woff2"); + } + @tailwind base; @tailwind components; @tailwind utilities; </style> <script type="module"> - import { main } from "./src/app.gleam"; + import { main, OnRouteChange } from "./src/app.gleam"; document.addEventListener("DOMContentLoaded", () => { - main(); + const url = new URL(window.location.href); + const dispatch = main({ path: url.pathname, hash: url.hash }); + + // We want to trap click events on anchor elements so we can do our own + // client side routing. + document.addEventListener("click", (e) => { + let target = e.target; + + while (target) { + if (target === document.body) return; + if (target.tagName === "A") { + const url = new URL(target.href); + + if (url.origin !== window.location.origin) return; + if (url.pathname !== window.location.pathname) e.preventDefault(); + + window.requestAnimationFrame(() => + window.history.pushState({}, "", url.href) + ); + + return void dispatch( + new OnRouteChange({ path: url.pathname, hash: url.hash }) + ); + } + + target = target.parentNode; + } + }); + + // This lets us listen to the back and forward buttons in the browser + // and trigger our app's routing. + window.addEventListener("popstate", () => { + const url = new URL(window.location.href); + + dispatch(new OnRouteChange({ path: url.pathname, hash: url.hash })); + }); }); </script> </head> diff --git a/docs/src/app.gleam b/docs/src/app.gleam index 8d72ed9..a84d040 100644 --- a/docs/src/app.gleam +++ b/docs/src/app.gleam @@ -1,15 +1,25 @@ // IMPORTS --------------------------------------------------------------------- +import app/page/api/lustre as lustre_api +import app/page/api/lustre/attribute as attribute_api +import app/page/api/lustre/effect as effect_api +import app/page/api/lustre/element as element_api +import app/page/api/lustre/element/html as html_api +import app/page/api/lustre/element/svg as svg_api +import app/page/api/lustre/event as event_api +import app/page/docs/components as components_docs +import app/page/docs/managing_state as managing_state_docs +import app/page/docs/quickstart as quickstart_docs +import app/page/docs/server_side_rendering as server_side_rendering_docs +import app/page/docs/side_effects as side_effects_docs import lustre -import lustre/attribute import lustre/element.{Element} -import lustre/element/html // MAIN ------------------------------------------------------------------------ -pub fn main() -> fn(Msg) -> Nil { +pub fn main(route: Route) -> fn(Msg) -> Nil { let app = lustre.simple(init, update, view) - let assert Ok(dispatch) = lustre.start(app, "body", Nil) + let assert Ok(dispatch) = lustre.start(app, "body", route) dispatch } @@ -17,25 +27,51 @@ pub fn main() -> fn(Msg) -> Nil { // MODEL ----------------------------------------------------------------------- type Model { - Model + Model(route: Route) } -fn init(_) -> Model { - Model +fn init(route: Route) -> Model { + Model(route) } // UPDATE ---------------------------------------------------------------------- pub type Msg { - None + OnRouteChange(Route) +} + +pub type Route { + Route(path: String, hash: String) } fn update(model: Model, msg: Msg) -> Model { - model + case msg { + OnRouteChange(route) -> Model(..model, route: route) + } } // VIEW ------------------------------------------------------------------------ fn view(model: Model) -> Element(Msg) { - html.body([], [html.h1([], [element.text("Hello, world!")])]) + case model.route.path { + "/" -> quickstart_docs.view() + + "/api" -> lustre_api.view() + "/api/lustre" -> lustre_api.view() + "/api/lustre/attribute" -> attribute_api.view() + "/api/lustre/effect" -> effect_api.view() + "/api/lustre/element" -> element_api.view() + "/api/lustre/element/html" -> html_api.view() + "/api/lustre/element/svg" -> svg_api.view() + "/api/lustre/event" -> event_api.view() + + "/docs" -> quickstart_docs.view() + "/docs/quickstart" -> quickstart_docs.view() + "/docs/managing-state" -> managing_state_docs.view() + "/docs/side-effects" -> side_effects_docs.view() + "/docs/components" -> components_docs.view() + "/docs/server-side-rendering" -> server_side_rendering_docs.view() + + _ -> quickstart_docs.view() + } } |