feat: add sugar, links, css & content to /everything page

src/tour.gleam

@@ -1,14 +1,18 @@
 import filepath
 import gleam/io
 import gleam/list
-import gleam/option.{type Option, None, Some}
+import gleam/option.{None, Some}
 import gleam/result
 import gleam/string
 import gleam/string_builder
 import htmb.{h, text}
 import simplifile
 import snag
-import tour/widgets
+import tour/types/lesson.{type Chapter, type Lesson, Chapter, Lesson}
+import tour/document
+import tour/page.{PageConfig, ScriptConfig}
+import tour/styles
+import tour/pages/everything
 
 const static = "static"
 
@@ -98,7 +102,7 @@ const what_next_html = "
 
 const path_home = "/"
 
-const page_contents = "/table-of-contents"
+const path_table_of_contents = "/table-of-contents"
 
 const path_what_next = "/what-next"
 
@@ -128,21 +132,6 @@ pub fn main() {
  }
 }
 
-type Chapter {
- Chapter(name: String, path: String, lessons: List(Lesson))
-}
-
-type Lesson {
- Lesson(
- name: String,
- text: String,
- code: String,
- path: String,
- previous: Option(String),
- next: Option(String),
- )
-}
-
 type FileNames {
  FileNames(path: String, name: String, slug: String)
 }
@@ -239,7 +228,7 @@ fn write_content(chapters: List(Chapter)) -> snag.Result(Nil) {
  name: "Table of Contents",
  text: string.join(list.map(chapters, contents_list_html), "\n"),
  code: hello_joe,
- path: page_contents,
+ path: path_table_of_contents,
  previous: None,
  next: None,
  )),
@@ -291,7 +280,7 @@ fn write_everything_page(chapters: List(Chapter)) -> snag.Result(Nil) {
  let path = public <> "/everything"
  use _ <- result.try(ensure_directory(path))
  let path = filepath.join(path, "/index.html")
- write_text(path, everything_html(chapters))
+ write_text(path, everything.render(chapters))
 }
 
 fn write_lesson(lesson: Lesson) -> snag.Result(Nil) {
@@ -515,182 +504,58 @@ fn file_error(
  }
 }
 
-fn slugify_path(path: String) -> String {
- string.replace(path, "/", "")
-}
-
-fn everything_html(chapters: List(Chapter)) -> String {
- let lessons = {
- use chapter <- list.flat_map(chapters)
- use lesson <- list.flat_map(chapter.lessons)
- [
- h("h2", [#("id", slugify_path(lesson.path))], [text(lesson.name)]),
- htmb.dangerous_unescaped_fragment(string_builder.from_string(lesson.text)),
- h("pre", [], [h("code", [], [text(lesson.code)])]),
- ]
- }
-
- let table_of_contents =
- list.map(chapters, fn(chapter) {
- h("li", [], [
- h("h3", [], [text(chapter.name)]),
- h(
- "ul",
- [],
- list.map(chapter.lessons, fn(lesson) {
- h("li", [], [
- h("a", [#("href", "#" <> slugify_path(lesson.path))], [
- text(lesson.name),
- ]),
- ])
- }),
- ),
- ])
- })
-
- // TODO: use proper values for location and such
- page_html(at: "everything", titled: "Everythingyyy!!!", containing: [
- h("main", [#("class", "everything")], [
- h("ul", [#("class", "everything-contents")], table_of_contents),
- h("article", [#("class", "everything-lessons")], lessons),
- ]),
- ])
-}
-
-fn lesson_html(page: Lesson) -> String {
+fn lesson_html(lesson: Lesson) -> String {
  let navlink = fn(name, link) {
  case link {
  None -> h("span", [], [text(name)])
  Some(path) -> h("a", [#("href", path)], [text(name)])
  }
  }
 
- page_html(at: page.path, titled: page.name, containing: [
- h("article", [#("id", "playground")], [
- h("section", [#("id", "left")], [
- h("h2", [], [text(page.name)]),
- htmb.dangerous_unescaped_fragment(string_builder.from_string(page.text)),
- h("nav", [#("class", "prev-next")], [
- navlink("Back", page.previous),
- text(" — "),
- h("a", [#("href", page_contents)], [text("Contents")]),
- text(" — "),
- navlink("Next", page.next),
- ]),
- ]),
- h("section", [#("id", "right")], [
- h("section", [#("id", "editor")], [
- h("div", [#("id", "editor-target")], []),
+ page.html(
+ PageConfig(
+ path: lesson.path,
+ title: lesson.name,
+ content: [
+ h("article", [#("id", "playground")], [
+ h("section", [#("id", "left")], [
+ h("h2", [], [text(lesson.name)]),
+ htmb.dangerous_unescaped_fragment(string_builder.from_string(
+ lesson.text,
+ )),
+ h("nav", [#("class", "prev-next")], [
+ navlink("Back", lesson.previous),
+ text(" — "),
+ h("a", [#("href", path_table_of_contents)], [text("Contents")]),
+ text(" — "),
+ navlink("Next", lesson.next),
+ ]),
+ ]),
+ h("section", [#("id", "right")], [
+ h("section", [#("id", "editor")], [
+ h("div", [#("id", "editor-target")], []),
+ ]),
+ h("aside", [#("id", "output")], []),
+ ]),
  ]),
- h("aside", [#("id", "output")], []),
- ]),
- ]),
- h("script", [#("type", "gleam"), #("id", "code")], [
- htmb.dangerous_unescaped_fragment(string_builder.from_string(page.code)),
- ]),
- h("script", [#("type", "module"), #("src", "/index.js")], []),
- ])
-}
-
-fn page_html(
- at path: String,
- titled title: String,
- containing content: List(htmb.Html),
-) -> String {
- let metaprop = fn(property, content) {
- h("meta", [#("property", property), #("content", content)], [])
- }
- let link = fn(rel, href) { h("link", [#("rel", rel), #("href", href)], []) }
-
- let title = title <> " - The Gleam Language Tour"
- let description =
- "An interactive introduction and reference to the Gleam programming language. Learn Gleam in your browser!"
-
- h("html", [#("lang", "en-gb"), #("class", "theme-light")], [
- h("head", [], [
- h("meta", [#("charset", "utf-8")], []),
- h(
- "meta",
- [
- #("name", "viewport"),
- #("content", "width=device-width, initial-scale=1"),
- ],
- [],
- ),
- h("title", [], [text(title)]),
- h("meta", [#("name", "description"), #("content", description)], []),
- metaprop("og:type", "website"),
- metaprop("og:title", title),
- metaprop("og:description", description),
- metaprop("og:url", "https://tour.gleam.run/" <> path),
- metaprop("og:image", "https://gleam.run/images/og-image.png"),
- metaprop("twitter:card", "summary_large_image"),
- metaprop("twitter:url", "https://tour.gleam.run/" <> path),
- metaprop("twitter:title", title),
- metaprop("twitter:description", description),
- metaprop("twitter:image", "https://gleam.run/images/og-image.png"),
- link("shortcut icon", "https://gleam.run/images/lucy/lucy.svg"),
- link("stylesheet", "/common.css"),
- link("stylesheet", "/style.css"),
- h(
- "script",
- [
- #("defer", ""),
- #("data-domain", "tour.gleam.run"),
- #("src", "https://plausible.io/js/script.js"),
- ],
- [],
- ),
- h("script", [#("type", "module")], [
- htmb.dangerous_unescaped_fragment(string_builder.from_string(
- widgets.theme_picker_js,
- )),
- ]),
- ]),
- h("body", [], [
- h("nav", [#("class", "navbar")], [
- h("a", [#("href", "/"), #("class", "logo")], [
- h(
- "img",
- [
- #("src", "https://gleam.run/images/lucy/lucy.svg"),
- #("alt", "Lucy the star, Gleam's mascot"),
- ],
+ ],
+ scripts: ScriptConfig(
+ body: [
+ h("script", [#("type", "gleam"), #("id", "code")], [
+ htmb.dangerous_unescaped_fragment(string_builder.from_string(
+ lesson.code,
+ )),
+ ]),
+ document.script(
+ "/index.js",
+ document.ScriptOptions(module: True, defer: False),
  [],
  ),
- text("Gleam Language Tour"),
- ]),
- h("div", [#("class", "nav-right")], [
- h("a", [#("href", "https://gleam.run")], [text("gleam.run")]),
- h("div", [#("class", "theme-picker")], [
- h(
- "button",
- [
- #("type", "button"),
- #("alt", "Switch to light mode"),
- #("title", "Switch to light mode"),
- #("class", "theme-button -light"),
- #("data-light-theme-toggle", ""),
- ],
- [widgets.icon_moon(), widgets.icon_toggle_left()],
- ),
- h(
- "button",
- [
- #("type", "button"),
- #("alt", "Switch to dark mode"),
- #("title", "Switch to dark mode"),
- #("class", "theme-button -dark"),
- #("data-dark-theme-toggle", ""),
- ],
- [widgets.icon_sun(), widgets.icon_toggle_right()],
- ),
- ]),
- ]),
- ]),
- ..content
- ]),
- ])
- |> htmb.render_page("html")
- |> string_builder.to_string
+ ],
+ head: [],
+ ),
+ stylesheets: [styles.page, ..styles.defaults_code],
+ ),
+ )
+ |> page.render
 }

src/tour/components.gleam

@@ -0,0 +1,40 @@
+import gleam/list
+import htmb.{type Html, h, text}
+import tour/document.{type HtmlAttribute}
+import tour/widgets
+
+pub type Link {
+ Link(label: String, to: String)
+}
+
+/// Renders a styled text link
+pub fn text_link(
+ for link: Link,
+ attributes attributes: List(HtmlAttribute),
+) -> Html {
+ let link_attributes = [#("class", "link"), ..attributes]
+
+ document.anchor(link.to, link_attributes, [text(link.label)])
+}
+
+/// Renders the tour's navbar as html
+pub fn navbar(titled title: String, links links: List(Link)) -> Html {
+ let links = list.map(links, fn(l) { text_link(l, []) })
+
+ let nav_right_items = list.flatten([links, [widgets.theme_picker()]])
+
+ h("nav", [#("class", "navbar")], [
+ document.anchor("/", [#("class", "logo")], [
+ h(
+ "img",
+ [
+ #("src", "https://gleam.run/images/lucy/lucy.svg"),
+ #("alt", "Lucy the star, Gleam's mascot"),
+ ],
+ [],
+ ),
+ text(title),
+ ]),
+ h("div", [#("class", "nav-right")], nav_right_items),
+ ])
+}