diff --git a/content/assets/styles.css b/content/assets/styles.css index a0cf7a2..e7b26dc 100644 --- a/content/assets/styles.css +++ b/content/assets/styles.css @@ -54,6 +54,9 @@ html, body { margin: 0px; overflow-x: clip; background-color: var(--base-color); + min-height: 100%; + display: flex; + flex-direction: column; } .blog-link { @@ -64,30 +67,59 @@ html, body { } .grid-container { - display: grid; - grid-auto-flow: row; - background-color: var(--mantle-color); - padding-left: 2vw; - padding-right: 2vw; min-height: 100vh; - /* sync media query with content-width (mobile) */ - /* @media only screen and (max-width: 960px) { - margin-left: 2vw; - margin-right: 2vw; - } */ - /* sync media query with content-width (desktop) */ @media only screen and (min-width: 960px) { + min-width: 960px; margin-left: auto; margin-right: auto; max-width: var(--content-width); } +} + + +.grid-cell { + background-color: var(--mantle-color); + padding: 2vh; + margin-left: 1vh; + margin-right: 1vh; +} + +.grid-cell.nav-bar { + margin-bottom: 2vh; + /* display: grid; + grid-auto-flow: column; */ +} +.grid-cell.bottom-bar { + margin-top: 2vh; + padding: 0; } +.grid-cell.page-content { + flex-grow: 1; +} + +.grid-cell.article-links { + flex-grow: 1; +} + +.nav-button { + font-family: inherit; + background-color: var(--crust-color); + border-style: none; + padding: 0.5em 1em; + margin-right: 0.5em; + font-size: x-large; + +} + +.nav-button:hover { + text-decoration: underline; +} -.gridCell { - padding-left: 2vw; - padding-right: 2vw; +.nav-button:active { + text-decoration: underline; + text-underline-offset: 0.25em; } \ No newline at end of file diff --git a/content/index.md b/content/index.md index 125c113..737d9ed 100644 --- a/content/index.md +++ b/content/index.md @@ -9,7 +9,7 @@ Outside of computers I enjoy modular origami, drawing, and boardgames. These pag ``` =html lucy debug ``` -These pages are rendered from markdown with a custom generator built on top of [lustge_ssg](https://github.com/lustre-labs/ssg). To find out more see my inaugural [post](blog/new-pages). These pages where built to replace my Angular based blog pages which did not play nice with github. If you where expecting to see those click [here](https://benev0.github.io/angular-pages/). +These pages are rendered from markdown with a custom generator built on top of [lustge_ssg](https://github.com/lustre-labs/ssg). To find out more see my inaugural [post](articles/new-pages). These pages where built to replace my Angular based blog pages which did not play nice with github. If you where expecting to see those click [here](https://benev0.github.io/angular-pages/). -[proceed to blog](blog) +[proceed to articles](articles) diff --git a/src/blog/render.gleam b/src/blog/render.gleam index 297688d..7b9352c 100644 --- a/src/blog/render.gleam +++ b/src/blog/render.gleam @@ -3,8 +3,10 @@ import gleam/dict import gleam/list import gleam/order import gleam/result -import lustre/attribute -import lustre/element/html.{a, body, div, head, html, link, p, script, text} +import lustre/attribute.{class, href} +import lustre/element/html.{ + a, body, button, div, head, html, link, p, script, text, +} import lustre/ssg/djot import lustre/vdom/vnode import tom @@ -52,18 +54,15 @@ fn include_styles_and_scripts( False -> head_content } - html([], [ - head([], head_content), - body([attribute.class("grid-container")], [ - div([attribute.class("grid-cell")], page), - ]), - ]) + html([], [head([], head_content), body([class("grid-container")], page)]) } pub fn render_md_path(path: String, asset_path: String) -> vnode.Element(_) { let assert Ok(posts.FileSource(_, md)) = posts.from_file(path) djot.render(md, djot.default_renderer()) + |> fn(elements) { [div([class("page-content grid-cell")], elements)] } + |> include_nav_bar() |> include_styles_and_scripts(asset_path, False) } @@ -83,6 +82,9 @@ pub fn render_md(md: String, asset_path: String) -> vnode.Element(_) { } djot.render(md, djot.default_renderer()) + |> include_article_headline(md) + |> fn(elements) { [div([class("page-content grid-cell")], elements)] } + |> include_nav_bar() |> include_styles_and_scripts(asset_path, math) } @@ -171,5 +173,35 @@ pub fn render_links(base: String, sources: List(posts.PostSource)) { |> list.map(render_matter(base, _)) [html.h1([], [text("Articles")]), ..rendered_matters] + |> fn(elements) { [div([class("article-links grid-cell")], elements)] } + |> include_nav_bar() |> include_styles_and_scripts("assets/", False) } + +pub fn include_article_headline( + article: List(vnode.Element(_)), + file_content: String, +) -> List(vnode.Element(_)) { + let assert Ok(matter) = { + use matter <- result.try(djot.metadata(file_content)) + let title = dict.get(matter, "title") + let datetime = dict.get(matter, "published") + Ok(#(title, datetime)) + } + + case matter { + #(Ok(tom.String(title)), _) -> [html.h1([], [text(title)]), ..article] + _ -> article + } +} + +fn render_nav_bar() -> vnode.Element(_) { + div([class("nav-bar grid-cell")], [ + a([href("/")], [button([class("nav-button")], [text("Home")])]), + a([href("/articles")], [button([class("nav-button")], [text("Articles")])]), + ]) +} + +fn include_nav_bar(content: List(vnode.Element(_))) -> List(vnode.Element(_)) { + [render_nav_bar(), ..content] +} diff --git a/src/build.gleam b/src/build.gleam index d99ba4d..37fe3da 100644 --- a/src/build.gleam +++ b/src/build.gleam @@ -42,8 +42,8 @@ fn build() -> Result(_, _) { "/", render.render_md_path("./content/index.md", "assets/"), ) - |> ssg.add_static_route("/blog", render.render_links("blog", blogs)) - |> ssg.add_dynamic_route("/blog", blog_dict, render.render_md( + |> ssg.add_static_route("/articles", render.render_links("articles", blogs)) + |> ssg.add_dynamic_route("/articles", blog_dict, render.render_md( _, "../assets/", ))