diff options
Diffstat (limited to 'docs/src/app/layout.gleam')
| -rw-r--r-- | docs/src/app/layout.gleam | 261 |
1 files changed, 0 insertions, 261 deletions
diff --git a/docs/src/app/layout.gleam b/docs/src/app/layout.gleam deleted file mode 100644 index 5ec9222..0000000 --- a/docs/src/app/layout.gleam +++ /dev/null @@ -1,261 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import app/ui/hooks -import app/ui/radix -import app/ui/markdown -import gleam/list -import gleam/string -import lustre/attribute -import lustre/element.{Element} -import lustre/element/html -import lustre/event - -pub fn docs_page(md: String) -> Element(msg) { - let #(content, summary) = markdown.parse(md) - - html.body( - [attribute.class("prose prose-lustre max-w-none")], - [ - html.div( - [attribute.class("max-w-[96rem] mx-auto grid grid-cols-8")], - [docs_top(), docs_left(), docs_content(content), docs_right(summary)], - ), - ], - ) -} - -pub fn docs_section(md: String) -> Element(msg) { - let #(content, summary) = markdown.parse(md) - - html.div( - [attribute.class("prose prose-lustre max-w-none")], - [ - html.div( - [attribute.class("max-w-[96rem] mx-auto grid grid-cols-8")], - [docs_top(), docs_left(), docs_content(content), docs_right(summary)], - ), - ], - ) -} - -fn docs_top() -> Element(msg) { - html.header( - [attribute.class("sticky top-0 z-10 col-span-8 lg:hidden bg-white")], - [docs_top_toggle()], - ) -} - -fn docs_top_toggle() -> Element(msg) { - use open, set_open, _ <- hooks.use_state(False) - - case open { - True -> docs_top_open(set_open(False)) - False -> docs_top_closed(set_open(True)) - } -} - -fn docs_top_open(close: msg) -> Element(msg) { - html.div( - [attribute.class("relative")], - [ - html.div( - [attribute.class("flex justify-between items-center px-4 py-2")], - [ - html.h2( - [attribute.class("text-indigo-600 my-0")], - [element.text("Lustre.")], - ), - html.button( - [ - event.on_click(close), - attribute.class("hover:bg-gray-200 rounded p-2"), - ], - [radix.cross([attribute.class("w-4 h-4")])], - ), - ], - ), - html.nav( - [ - attribute.class( - "absolute top-0 w-full rounded-b-2xl px-4 mt-12 bg-white shadow", - ), - ], - docs_left_links(), - ), - ], - ) -} - -fn docs_top_closed(open: msg) -> Element(msg) { - html.div( - [ - attribute.class( - "flex justify-between items-center px-4 py-2 border-b shadow", - ), - ], - [ - html.h2( - [attribute.class("text-indigo-600 my-0")], - [element.text("Lustre.")], - ), - html.button( - [event.on_click(open), attribute.class("hover:bg-gray-100 rounded p-2")], - [radix.hamburger([attribute.class("w-4 h-4")])], - ), - ], - ) -} - -fn docs_left() -> Element(msg) { - html.aside( - [ - attribute.style([#("align-self", "start")]), - attribute.class("relative sticky top-0 hidden px-4 pb-10 h-screen"), - attribute.class("lg:block lg:col-span-2"), - attribute.class("xl:col-span-2"), - ], - [ - html.div( - [ - attribute.class( - "absolute right-0 inset-y-0 w-[50vw] bg-gradient-to-b from-white to-gray-100 -z-10", - ), - ], - [], - ), - html.div( - [attribute.class("flex flex-col h-full overflow-y-scroll")], - [ - html.h2( - [attribute.class("mb-0")], - [ - html.a( - [ - attribute.href("/"), - attribute.class("text-indigo-600 no-underline"), - ], - [element.text("Lustre")], - ), - ], - ), - html.p( - [attribute.class("text-gray-400 font-bold")], - [element.text("Web apps from space.")], - ), - ..docs_left_links() - ], - ), - ], - ) -} - -fn docs_left_links() -> List(Element(msg)) { - let link = string.append(base_url(), _) - - [ - docs_left_section( - "Docs", - [ - #("Quickstart", link("docs/quickstart")), - #("Managing state", link("docs/managing-state")), - #("Side effects", link("docs/side-effects")), - #("Components", link("docs/components")), - #("Server-side rendering", link("docs/server-side-rendering")), - ], - ), - docs_left_section( - "Guides", - [ - #("Using with Mist", link("guides/mist")), - #("Using with Wisp", link("guides/wisp")), - ], - ), - docs_left_section( - "Reference", - [ - #("lustre", link("api/lustre")), - #("lustre/attribute", link("api/lustre/attribute")), - #("lustre/effect", link("api/lustre/effect")), - #("lustre/element", link("api/lustre/element")), - #("lustre/element/html", link("api/lustre/element/html")), - #("lustre/element/svg", link("api/lustre/element/svg")), - #("lustre/event", link("api/lustre/event")), - ], - ), - docs_left_section( - "External", - [ - #("GitHub", "https://github.com/hayleigh-dot-dev/gleam-lustre"), - #("Discord", "https://discord.gg/Fm8Pwmy"), - #("Buy me a coffee?", "https://github.com/sponsors/hayleigh-dot-dev"), - ], - ), - ] -} - -@external(javascript, "../app.ffi.mjs", "base") -fn base_url() -> String { - "/" -} - -fn docs_left_section( - title: String, - pages: List(#(String, String)), -) -> Element(msg) { - html.nav( - [], - [ - html.h2([attribute.class("my-0 lg:mt-8 lg:mb-4")], [element.text(title)]), - html.ul( - [attribute.class("ml-2")], - { - use #(name, url) <- list.map(pages) - html.li( - [], - [ - html.a( - [attribute.href(url), attribute.class("font-serif")], - [element.text(name)], - ), - ], - ) - }, - ), - ], - ) -} - -fn docs_content(content: List(Element(msg))) -> Element(msg) { - html.main( - [ - attribute.class("col-span-8 pt-4 px-4 pb-32"), - attribute.class("lg:px-8 lg:col-span-6"), - attribute.class("xl:col-span-5"), - ], - content, - ) -} - -fn docs_right(summary: List(Element(msg))) -> Element(msg) { - html.aside( - [ - attribute.style([#("align-self", "start")]), - attribute.class("sticky relative top-0 hidden p-4 py-10 h-screen"), - attribute.class("xl:block xl:col-span-1"), - ], - [ - html.div( - [ - attribute.class( - "absolute left-0 inset-y-0 w-[50vw] bg-gradient-to-b from-white to-gray-100 -z-10", - ), - ], - [], - ), - html.div( - [attribute.class("flex flex-col h-full overflow-y-scroll")], - summary, - ), - ], - ) -} |