add nav bar

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;
 }

content/index.md

@@ -9,7 +9,7 @@ Outside of computers I enjoy modular origami, drawing, and boardgames. These pag
 ``` =html
 <img alt="lucy debug" src="assets/lucydebugfail.svg" height="100px" style="float: right;"/>
 ```
-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)

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

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