feat: complete side bar styling, fix heading margins a bit, add something to home page

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
 }

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",
               [],
-              "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" class=\"fill-black\"><path d=\"M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z\"/></svg>",
+              "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" class=\"fill-white\"><path d=\"M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z\"/></svg>",
             ),
           ],
         ),
-        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(
-            [],
+            [attribute.class("text-lg flex flex-col gap-2")],
-            list.map(doc_pages_list, fn(post: #(String, post.Post)) {
+            list.flatten(
-              html.li([attribute.class("mb-2")], [
+              list.group(doc_pages_list, fn(post: #(String, post.Post)) {
-                html.a([attribute.href(conf.base_url_join(post.0))], [
+                case { post.1 }.metadata {
-                  element.text({ post.1 }.title),
+                  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,
-  ))
-}

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"),
             ],

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,
+  )
 }

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)
+  }
+}

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) {
+    |> list.sort(util.sort_weight)
-      //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
-          }
-        }
-      }
-    })
 
   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([