aboutsummaryrefslogtreecommitdiff
path: root/src/tour.gleam
diff options
context:
space:
mode:
Diffstat (limited to 'src/tour.gleam')
-rw-r--r--src/tour.gleam297
1 files changed, 80 insertions, 217 deletions
diff --git a/src/tour.gleam b/src/tour.gleam
index a5e04ea..4834c9b 100644
--- a/src/tour.gleam
+++ b/src/tour.gleam
@@ -8,9 +8,9 @@ import gleam/string_builder
import htmb.{h, text}
import simplifile
import snag
-import tour/widgets
import tour/document
-import tour/page
+import tour/page.{PageConfig, ScriptConfig}
+import tour/styles
const static = "static"
@@ -611,71 +611,49 @@ fn everything_html(chapters: List(Chapter)) -> String {
)
})
- let render_next = True
-
- case render_next {
- True ->
- page.html(
- page.PageConfig(
- path: "everything",
- title: "Everything!",
- scripts: page.ScriptConfig(head: [], body: [
- document.script(
- "/highlight/highlight.core.min.js",
- document.ScriptOptions(module: True, defer: True),
- [],
- ),
- document.script(
- "/highlight/highlight-gleam.js",
- document.ScriptOptions(module: True, defer: True),
- [],
- ),
- ]),
- stylesheets: ["/highlight/highlight.css"],
- content: [
- h("main", [#("id", "everything")], [
- h(
- "aside",
- [#("id", "everything-contents"), #("class", "dim-bg")],
- table_of_contents,
- ),
- h("section", [#("id", "everything-lessons")], chapter_lessons),
- ]),
- ],
- ),
- )
- |> page.render
- _ ->
- page_html(
- at: "everything",
- titled: "Everything!!!",
- containing: [
- h("main", [#("id", "everything")], [
- h(
- "aside",
- [#("id", "everything-contents"), #("class", "dim-bg")],
- table_of_contents,
- ),
- h("section", [#("id", "everything-lessons")], chapter_lessons),
- ]),
- h(
- "script",
- [#("src", "/highlight/highlight.core.min.js"), #("type", "module")],
+ // TODO: use proper values for location and such
+ page.html(
+ page.PageConfig(
+ path: "everything",
+ title: "Everything!",
+ scripts: page.ScriptConfig(
+ head: [
+ document.script(
+ "/js/highlight/highlight.core.min.js",
+ document.ScriptOptions(module: True, defer: False),
[],
),
- h(
- "script",
- [#("src", "/highlight/highlight-gleam.js"), #("type", "module")],
+ document.script(
+ "/js/highlight/regexes.js",
+ document.ScriptOptions(module: True, defer: True),
[],
),
],
- with_styles: ["/highlight/highlight.css"],
- )
- }
- // TODO: use proper values for location and such
+ body: [
+ document.script(
+ "/js/highlight/highlight-gleam.js",
+ document.ScriptOptions(module: True, defer: True),
+ [],
+ ),
+ ],
+ ),
+ stylesheets: [styles.page, ..styles.defaults_code],
+ content: [
+ h("main", [#("id", "everything")], [
+ h(
+ "aside",
+ [#("id", "everything-contents"), #("class", "dim-bg")],
+ table_of_contents,
+ ),
+ h("section", [#("id", "everything-lessons")], chapter_lessons),
+ ]),
+ ],
+ ),
+ )
+ |> page.render
}
-fn lesson_html(page: Lesson) -> String {
+fn lesson_html(lesson: Lesson) -> String {
let navlink = fn(name, link) {
case link {
None -> h("span", [], [text(name)])
@@ -683,38 +661,52 @@ fn lesson_html(page: Lesson) -> String {
}
}
- 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", path_table_of_contents)], [text("Contents")]),
- text(" — "),
- navlink("Next", page.next),
+ 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("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")], []),
- ],
- with_styles: [],
+ ],
+ 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),
+ [],
+ ),
+ ],
+ head: [],
+ ),
+ stylesheets: [styles.page, ..styles.defaults_code],
+ ),
)
+ |> page.render
}
type Link {
@@ -726,132 +718,3 @@ fn link_html(for link: Link, attributes attributes: List(#(String, String))) {
h("a", link_attributes, [text(link.label)])
}
-
-/// Renders the tour's navbar as html
-fn page_navbar(
- titled title: String,
- links additional_links: List(Link),
-) -> htmb.Html {
- let links = {
- [Link(label: "gleam.run", to: "http://gleam.run"), ..additional_links]
- |> list.map(fn(l) { link_html(l, [#("class", "link")]) })
- }
- let nav_right_items = list.flatten([links, [widgets.theme_picker()]])
-
- 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"),
- ],
- [],
- ),
- text(title),
- ]),
- h("div", [#("class", "nav-right")], nav_right_items),
- ])
-}
-
-/// Renders the page head as HTML
-fn page_head(
- at path: String,
- titled title: String,
- with_styles styles: List(String),
-) -> htmb.Html {
- let metaprop = fn(property, content) {
- h("meta", [#("property", property), #("content", content)], [])
- }
- let link = fn(rel, href) { h("link", [#("rel", rel), #("href", href)], []) }
-
- let stylesheet = fn(src: String) { link("stylesheet", src) }
- let title = title <> " - The Gleam Language Tour"
- let description =
- "An interactive introduction and reference to the Gleam programming language. Learn Gleam in your browser!"
- let metaprops = [
- 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"),
- ]
-
- let metadata = [
- 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)], []),
- ..metaprops
- ]
-
- let links = [
- link("shortcut icon", "https://gleam.run/images/lucy/lucy.svg"),
- link("stylesheet", "/common.css"),
- link("stylesheet", "/style.css"),
- ..list.map(styles, stylesheet)
- ]
-
- let scripts = [
- 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,
- )),
- ]),
- ]
-
- let head_content = {
- let parts = [metadata, links, scripts]
- parts
- |> list.concat
- }
-
- h("head", [], head_content)
-}
-
-fn page_html(
- at path: String,
- titled title: String,
- containing content: List(htmb.Html),
- with_styles styles: List(String),
-) -> String {
- let head = {
- let static_styles = ["/common.css", "/styles.css"]
- let head_styles =
- [static_styles, styles]
- |> list.concat()
-
- page_head(at: path, titled: title, with_styles: head_styles)
- }
-
- h("html", [#("lang", "en-gb"), #("class", "theme-light")], [
- head,
- h("body", [], [
- page_navbar(titled: "Gleam Language Tour", links: []),
- ..content
- ]),
- ])
- |> htmb.render_page("html")
- |> string_builder.to_string
-}