1 files changed, 123 insertions, 0 deletions
diff --git a/docs/src/app/layout.gleam b/docs/src/app/layout.gleam
new file mode 100644
index 0000000..9f3b294
--- /dev/null
+++ b/docs/src/app/layout.gleam
@@ -0,0 +1,123 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/list
+import lustre/attribute
+import lustre/element.{Element}
+import lustre/element/html
+
+pub fn docs(md: String) -> Element(msg) {
+  let #(content, summary) = parse_markdown(md)
+
+  html.body(
+    [attribute.class("bg-gray-50 prose max-w-none")],
+    [
+      html.div(
+        [attribute.class("max-w-[96rem] mx-auto grid grid-cols-8")],
+        [docs_left(), docs_content(content), docs_right(summary)],
+      ),
+    ],
+  )
+}
+
+fn docs_left() -> Element(msg) {
+  html.aside(
+    [
+      attribute.style([#("align-self", "start")]),
+      attribute.class("sticky top-0 border-r hidden px-4 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-gray-100 -z-10",
+          ),
+        ],
+        [],
+      ),
+      html.h2([attribute.class("text-indigo-600")], [element.text("Lustre.")]),
+      docs_left_section(
+        "Docs",
+        [
+          #("Quickstart", "/docs/quickstart"),
+          #("Managing state", "/docs/managing-state"),
+          #("Side effects", "/docs/side-effects"),
+          #("Components", "/docs/components"),
+          #("Server-side rendering", "/docs/server-side-rendering"),
+        ],
+      ),
+      docs_left_section(
+        "Reference",
+        [
+          #("lustre", "/api/lustre"),
+          #("lustre/attribute", "/api/lustre/attribute"),
+          #("lustre/effect", "/api/lustre/effect"),
+          #("lustre/element", "/api/lustre/element"),
+          #("lustre/element/html", "/api/lustre/element/html"),
+          #("lustre/element/svg", "/api/lustre/element/svg"),
+          #("lustre/event", "/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"),
+        ],
+      ),
+    ],
+  )
+}
+
+fn docs_left_section(
+  title: String,
+  pages: List(#(String, String)),
+) -> Element(msg) {
+  html.nav(
+    [],
+    [
+      html.h2([], [element.text(title)]),
+      html.ul(
+        [attribute.class("ml-2")],
+        {
+          use #(name, url) <- list.map(pages)
+          html.li([], [html.a([attribute.href(url)], [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 top-0 border-l hidden p-4 py-10 h-screen"),
+      attribute.class("xl:block xl:col-span-1"),
+    ],
+    [
+      html.div(
+        [attribute.class("flex flex-col h-full overflow-y-scroll")],
+        summary,
+      ),
+    ],
+  )
+}
+
+// EXTERNALS -------------------------------------------------------------------
+
+@external(javascript, "../app.ffi.mjs", "parse_markdown")
+fn parse_markdown(md: String) -> #(List(Element(msg)), List(Element(msg)))