diff --git a/website/src/conf.gleam b/website/src/conf.gleam index bf5a1cbf..8db95b2e 100644 --- a/website/src/conf.gleam +++ b/website/src/conf.gleam @@ -1,5 +1,6 @@ -pub const base_url = "https://rosettea.github.io/Hilbish/versions/new-website/" +//pub const base_url = "https://rosettea.github.io/Hilbish/versions/new-website" +pub const base_url = "http://localhost:9080" pub fn base_url_join(cont: String) -> String { - base_url <> "/" <> cont + base_url <> cont } diff --git a/website/src/pages/doc.gleam b/website/src/pages/doc.gleam index 86a4f470..20d08f31 100644 --- a/website/src/pages/doc.gleam +++ b/website/src/pages/doc.gleam @@ -1,7 +1,11 @@ import gleam/dict +import gleam/io import gleam/list +import gleam/option +import gleam/order import gleam/string +import glaml import lustre/attribute import lustre/element import lustre/element/html @@ -10,13 +14,14 @@ import lustre/ssg/djot import conf import jot import post +import util pub fn page(p: post.Post, doc_pages_list) -> element.Element(a) { html.div([attribute.class("flex-auto flex flex-col overflow-none")], [ html.div( [ attribute.class( - "sm:hidden h-10 flex py-2 px-4 border-b border-b-zinc-300 w-full gap-2 backdrop-blur-sm bg-zinc-300/50 dark:bg-zinc-800/50 z-50", + "sm:hidden h-10 flex py-2 px-4 border-b border-b-zinc-300 w-full gap-2 backdrop-blur-sm bg-zinc-300/50 dark:bg-zinc-800/50", ), ], [ @@ -27,11 +32,11 @@ pub fn page(p: post.Post, doc_pages_list) -> element.Element(a) { "", "tag", [], - "", + "", ), ], ), - html.span([], [element.text(p.title)]), + html.span([attribute.class("font-bold")], [element.text(p.title)]), ], ), html.div([attribute.class("h-full sm:flex grid")], [ @@ -43,19 +48,93 @@ pub fn page(p: post.Post, doc_pages_list) -> element.Element(a) { html.div( [ attribute.class( - "p-4 border-r border-r-zinc-300 col-start-1 row-start-1 bg-neutral-200 dark:bg-neutral-900 basis-2/10 transition-transform duration-300 -translate-x-full peer-checked:translate-x-0 sm:translate-x-0 z-30", + "p-4 sm:border-r sm:border-r-zinc-300 col-start-1 row-start-1 bg-neutral-200 dark:bg-neutral-900 basis-2/10 transition-transform duration-300 -translate-x-full peer-checked:translate-x-0 sm:translate-x-0 z-30", ), ], [ html.ul( - [], - list.map(doc_pages_list, fn(post: #(String, post.Post)) { - html.li([attribute.class("mb-2")], [ - html.a([attribute.href(conf.base_url_join(post.0))], [ - element.text({ post.1 }.title), - ]), - ]) - }), + [attribute.class("text-lg flex flex-col gap-2")], + list.flatten( + list.group(doc_pages_list, fn(post: #(String, post.Post)) { + case { post.1 }.metadata { + option.Some(metadata) -> { + case + glaml.select_sugar(glaml.document_root(metadata), "menu") + { + Ok(glaml.NodeMap(menu)) -> { + let assert Ok(menu_first) = list.first(menu) + let assert Ok(glaml.NodeStr(parent)) = + glaml.select_sugar(menu_first.1, "parent") + parent + } + Ok(glaml.NodeStr(_)) -> { + // If it is a sring, it's just saying to be grouped + // in the menu. + // So use the title instead, because titles are unique? + { post.1 }.title + } + Ok(_) -> panic as "wrong type fool" + Error(_) -> panic as "what the hell" + } + } + option.None -> "" + } + }) + |> dict.to_list() + |> list.sort(fn(group1, group2) { + let assert Ok(group_1_parent_post) = + list.filter(doc_pages_list, fn(p) { + { p.1 }.title == group1.0 + }) + |> list.first() + let assert Ok(group_2_parent_post) = + list.filter(doc_pages_list, fn(p) { + { p.1 }.title == group2.0 + }) + |> list.first() + + let sort_weight_reverse = order.reverse(util.sort_weight) + sort_weight_reverse(group_1_parent_post, group_2_parent_post) + }) + |> list.map(fn(group: #(String, List(#(String, post.Post)))) { + let assert Ok(parent_post) = + list.filter(doc_pages_list, fn(p: #(String, post.Post)) { + { p.1 }.title == group.0 + }) + |> list.first() + [ + html.li([attribute.class("font-bold")], [ + html.a( + [ + attribute.href(conf.base_url_join( + { parent_post.1 }.slug, + )), + ], + [element.text({ parent_post.1 }.title)], + ), + ]), + case list.length(group.1) { + 1 -> element.none() + _ -> + html.ul( + [attribute.class("pl-4")], + list.sort(group.1, util.sort_weight) + |> list.filter(fn(p1) { + { p1.1 }.title != { parent_post.1 }.title + }) + |> list.map(fn(post: #(String, post.Post)) { + html.li([attribute.class("mb-2")], [ + html.a( + [attribute.href(conf.base_url_join(post.0))], + [element.text({ post.1 }.title)], + ), + ]) + }), + ) + }, + ] + }), + ), ), ], ), @@ -66,7 +145,7 @@ pub fn page(p: post.Post, doc_pages_list) -> element.Element(a) { ), ], [ - html.h1([attribute.class("mb-2 font-bold text-4xl")], [ + html.h1([attribute.class("my-3 font-bold text-4xl")], [ element.text(p.title), ]), // todo: add date of publishing @@ -91,17 +170,28 @@ fn render_doc(md: String) { 3 -> "text-2xl" _ -> "text-xl" } + + let margin = case level { + 1 -> "my-2" + _ -> "my-1" + } + let attr = dict.insert( attrs, "class", - "mb-1 text-neutral-800 dark:text-neutral-300 font-bold " <> size, + margin + <> " text-neutral-800 dark:text-neutral-300 font-bold " + <> size, ) case level { 1 -> html.h1(to_attr(attr), content) 2 -> html.h2(to_attr(attr), content) 3 -> html.h3(to_attr(attr), content) + 4 -> html.h4(to_attr(attr), content) + 5 -> html.h5(to_attr(attr), content) + 6 -> html.h6(to_attr(attr), content) _ -> html.p(to_attr(attr), content) } }, @@ -118,31 +208,3 @@ fn to_attr(attrs) { use attrs, key, val <- dict.fold(attrs, []) [attribute.attribute(key, val), ..attrs] } - -fn render_doc_(md: String) -> String { - // w-full m-2 p-2 bg-neutral-700 - let doc = jot.parse(md) - let updated_content = - list.map(doc.content, fn(container) { - case container { - jot.Heading(attributes, level, content) -> { - let size = case level { - 1 -> "text-4xl" - 2 -> "text-3xl" - 3 -> "text-2xl" - _ -> "text-xl" - } - let attr = dict.insert(attributes, "class", "font-bold " <> size) - jot.Heading(attr, level, content) - } - _ -> container - } - }) - echo doc - - jot.document_to_html(jot.Document( - content: updated_content, - references: doc.references, - footnotes: doc.footnotes, - )) -} diff --git a/website/src/pages/index.gleam b/website/src/pages/index.gleam index daa8f938..752d4da7 100644 --- a/website/src/pages/index.gleam +++ b/website/src/pages/index.gleam @@ -38,7 +38,7 @@ pub fn page() -> element.Element(a) { element.text("Extensible, scriptable, configurable: All in Lua."), ]), html.div([attribute.class("flex flex-row gap-2 mt-2")], [ - button("Install", "bg-pink-500/30", conf.base_url_join("install")), + button("Install", "bg-pink-500/30", conf.base_url_join("/install")), button( "GitHub", "bg-stone-500/30", @@ -77,7 +77,7 @@ pub fn page() -> element.Element(a) { [ html.img([ attribute.class("h-8"), - attribute.src(conf.base_url_join("hilbish-flower.png")), + attribute.src(conf.base_url_join("/hilbish-flower.png")), ]), element.text("Hilbish"), ], diff --git a/website/src/post.gleam b/website/src/post.gleam index 3c748b29..84bd648d 100644 --- a/website/src/post.gleam +++ b/website/src/post.gleam @@ -1,6 +1,12 @@ -import gleam/option import glaml +import gleam/option pub type Post { - Post(name: String, title: String, slug: String, metadata: option.Option(glaml.Document), contents: String) + Post( + name: String, + title: String, + slug: String, + metadata: option.Option(glaml.Document), + contents: String, + ) } diff --git a/website/src/util.gleam b/website/src/util.gleam new file mode 100644 index 00000000..dbfd3c55 --- /dev/null +++ b/website/src/util.gleam @@ -0,0 +1,29 @@ +import gleam/int +import gleam/option +import gleam/string + +import glaml +import post + +pub fn sort_weight(p1: #(String, post.Post), p2: #(String, post.Post)) { + let assert option.Some(p1_metadata) = { p1.1 }.metadata + let p1_weight = case + glaml.select_sugar(glaml.document_root(p1_metadata), "weight") + { + Ok(glaml.NodeInt(w)) -> w + _ -> 0 + } + + let assert option.Some(p2_metadata) = { p2.1 }.metadata + let p2_weight = case + glaml.select_sugar(glaml.document_root(p2_metadata), "weight") + { + Ok(glaml.NodeInt(w)) -> w + _ -> 0 + } + + case p1_weight == p2_weight { + True -> string.compare({ p1.1 }.name, { p2.1 }.name) + False -> int.compare(p1_weight, p2_weight) + } +} diff --git a/website/src/website.gleam b/website/src/website.gleam index e77dcc2e..f4cb55d6 100644 --- a/website/src/website.gleam +++ b/website/src/website.gleam @@ -3,6 +3,7 @@ import gleam/list import gleam/option import gleam/order import gleam/string +import util import glaml import lustre/attribute @@ -34,6 +35,7 @@ pub fn main() { _ -> slug } + io.debug(path) let assert Ok(content) = simplifile.read(path) let frontmatter = djot.frontmatter(content) let metadata = case frontmatter { @@ -72,44 +74,7 @@ pub fn main() { option.None -> False } }) - |> list.sort(fn(p1, p2) { - //io.debug(p1) - //io.debug(p2) - let assert option.Some(p1_metadata) = { p1.1 }.metadata - let p1_weight = case - glaml.select_sugar(glaml.document_root(p1_metadata), "weight") - { - Ok(glaml.NodeInt(w)) -> w - _ -> 0 - } - - let assert option.Some(p2_metadata) = { p2.1 }.metadata - let p2_weight = case - glaml.select_sugar(glaml.document_root(p2_metadata), "weight") - { - Ok(glaml.NodeInt(w)) -> w - _ -> 0 - } - - case p1_weight == 0 { - True -> { - case p1_weight == 0 { - True -> order.Eq - False -> - case p1_weight > p2_weight { - True -> order.Lt - False -> order.Gt - } - } - } - False -> { - case p1_weight > p2_weight { - True -> order.Lt - False -> order.Gt - } - } - } - }) + |> list.sort(util.sort_weight) let build = ssg.new("./public") @@ -156,7 +121,7 @@ fn nav() -> element.Element(a) { [attribute.href("/"), attribute.class("flex items-center gap-1")], [ html.img([ - attribute.src(conf.base_url_join("hilbish-flower.png")), + attribute.src(conf.base_url_join("/hilbish-flower.png")), attribute.class("h-8"), ]), html.span([attribute.class("self-center text-3xl font-medium")], [ @@ -169,7 +134,7 @@ fn nav() -> element.Element(a) { html.div( [attribute.class("flex gap-3 dark:text-pink-300 text-pink-600")], [ - html.a([attribute.href(conf.base_url_join(""))], [ + html.a([attribute.href(conf.base_url_join("/"))], [ element.text("Home"), ]), html.a([attribute.href(conf.base_url_join("/install"))], [ @@ -203,7 +168,7 @@ fn footer() -> element.Element(a) { ], [ html.img([ - attribute.src(conf.base_url_join("hilbish-flower.png")), + attribute.src(conf.base_url_join("/hilbish-flower.png")), attribute.class("h-24"), ]), html.span([attribute.class("self-center text-6xl")], [ @@ -246,12 +211,12 @@ fn create_page(content: element.Element(a)) -> element.Element(a) { ]), html.link([ attribute.rel("stylesheet"), - attribute.href(conf.base_url_join("tailwind.css")), + attribute.href(conf.base_url_join("/tailwind.css")), ]), html.title([], "Hilbish"), html.meta([attribute.name("theme-color"), attribute.content("#ff89dd")]), html.meta([ - attribute.content(conf.base_url_join("hilbish-flower.png")), + attribute.content(conf.base_url_join("/hilbish-flower.png")), attribute.attribute("property", "og:image"), ]), html.meta([