mirror of
https://github.com/Hilbis/Hilbish
synced 2025-07-01 16:52:03 +00:00
feat: complete side bar styling, fix heading margins a bit, add something to home page
This commit is contained in:
parent
ac1d744696
commit
25a0475b7e
GPG Key ID:
904FC49417B44DCD
@ -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
|
||||
}
|
||||
|
||||
@ -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(
|
||||
[],
|
||||
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,
|
||||
))
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
],
|
||||
|
||||
@ -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,
|
||||
)
|
||||
}
|
||||
|
||||
29
website/src/util.gleam
Normal file
29
website/src/util.gleam
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
@ -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([
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user