Improve styling

- Added font
- Added custom renderer for djot

Signed-off-by: Naomi Roberts <[e-mail]>

gleam.toml

···
 simplifile = ">= 2.0.0 and < 3.0.0"
 lustre_ssg = ">= 0.8.3 and < 1.0.0"
 tom = ">= 1.1.1 and < 2.0.0"
+jot = ">= 4.0.0 and < 5.0.0"
+gleam_regexp = ">= 1.1.1 and < 2.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"

manifest.toml

···
 ]
 
 [requirements]
+gleam_regexp = { version = ">= 1.1.1 and < 2.0.0" }
 gleam_stdlib = { version = ">= 0.60.0 and < 0.70.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
+jot = { version = ">= 4.0.0 and < 5.0.0" }
 lustre = { version = ">= 5.0.0 and < 6.0.0" }
 lustre_ssg = { version = ">= 0.8.3 and < 1.0.0" }
 simplifile = { version = ">= 2.0.0 and < 3.0.0" }

src/website/common.gleam

···
 import lustre/element/html
 import lustre/ssg/djot
 import tom
+
+// import website/djot_renderer
 import website/style
 
 pub type Post(a) {
···
     ]),
     html.footer([style.footer()], [
       html.hr([attr.style("color", "lightgrey")]),
-      .."
-The source code for this website is available [here](https://codeberg.org/naomi/website) or [here](https://tangled.sh/@lesbian.skin/website) under the [BSD 3 with Attribution](https://spdx.org/licenses/BSD-3-Clause-Attribution) license.
-
-If you wish to get in contact, please send an email to [[e-mail]](mailto:[e-mail]), or contact me on [Discord](https://chat.lesbian.skin).
-"
-      |> djot.render(djot.default_renderer())
+      html.p([], [
+        html.text("The source code for this website is available "),
+        link([], "here", "https://codeberg.org/naomi/website", True),
+        html.text(" or "),
+        link([], "here", "https://tangled.sh/@lesbian.skin/website", True),
+        html.text(" under the "),
+        link(
+          [],
+          "BSD 3 with Attribution",
+          "https://spdx.org/licenses/BSD-3-Clause-Attribution",
+          True,
+        ),
+        html.text(" license."),
+      ]),
+      html.p([], [
+        html.text("If you wish to get in contact, please send an email to "),
+        link([], "[e-mail]", "mailto:[e-mail]", True),
+        html.text(", or contact me on "),
+        link([], "Discord", "https://chat.lesbian.skin", True),
+        html.text("."),
+      ]),
     ]),
   ])
 }
···
     //   False -> element.none()
     // },
     ],
+  )
+}
+
+pub fn raw_link(
+  attributes attributes: List(attr.Attribute(a)),
+  content content: List(element.Element(a)),
+  href href: String,
+  external external: Bool,
+) -> element.Element(a) {
+  let attrs = [attr.href(href), style.link(), ..attributes]
+  html.a(
+    case external {
+      False -> attrs
+      True -> [
+        attr.target("_blank"),
+        attr.rel("noopener noreferrer"),
+        attr.style("display", "inline-block"),
+        ..attrs
+      ]
+    },
+    content,
   )
 }
 

src/website/data/posts.gleam

···
 import simplifile
 import tom
 import website/common.{type Post, Post}
+import website/djot_renderer
 
 pub fn all() -> List(Post(a)) {
   let path = "./src/website/data/posts/"
···
         [],
         post_md
           |> djot.content()
-          |> djot.render(djot.default_renderer()),
+          |> djot.render(djot_renderer.renderer()),
       ),
     )
   })

src/website/data/projects.gleam

···
 import simplifile
 import tom
 import website/common.{type Project, Link, Project}
+import website/djot_renderer
 
 pub fn all() -> List(Project(a)) {
   let path = "./src/website/data/projects/"
···
         [],
         project_md
           |> djot.content()
-          |> djot.render(djot.default_renderer()),
+          |> djot.render(djot_renderer.renderer()),
       ),
     )
   })

src/website/djot_renderer.gleam

···
+import gleam/dict
+import gleam/list
+import gleam/option
+import gleam/regexp
+import gleam/string
+import jot
+import lustre/attribute as attr
+import lustre/element
+import lustre/element/html
+import lustre/ssg/djot
+import website/common
+import website/style
+
+pub fn renderer() -> djot.Renderer(element.Element(msg)) {
+  let to_attributes = fn(attrs) {
+    use attrs, key, val <- dict.fold(attrs, [])
+    [attr.attribute(key, val), ..attrs]
+  }
+
+  djot.Renderer(
+    codeblock: fn(attrs, lang, code) {
+      let lang = option.unwrap(lang, "text")
+      html.pre([style.code_block(), ..to_attributes(attrs)], [
+        html.code([attr.attribute("data-lang", lang), style.monospaced()], [
+          html.text(code),
+        ]),
+      ])
+    },
+    emphasis: fn(content) { html.em([], content) },
+    heading: fn(attrs, level, content) {
+      case level {
+        1 -> html.h1(to_attributes(attrs), content)
+        2 -> html.h2(to_attributes(attrs), content)
+        3 -> html.h3(to_attributes(attrs), content)
+        4 -> html.h4(to_attributes(attrs), content)
+        5 -> html.h5(to_attributes(attrs), content)
+        6 -> html.h6(to_attributes(attrs), content)
+        _ -> html.p(to_attributes(attrs), content)
+      }
+    },
+    link: fn(destination, references, content) {
+      case destination {
+        jot.Reference(ref) ->
+          case dict.get(references, ref) {
+            Ok(url) ->
+              common.raw_link(
+                attributes: [],
+                content:,
+                href: url,
+                external: False,
+              )
+            Error(_) ->
+              common.raw_link(
+                attributes: [attr.id(linkify("back-to-" <> ref))],
+                content:,
+                href: "#" <> linkify(ref),
+                external: False,
+              )
+          }
+        jot.Url(url) ->
+          common.raw_link(attributes: [], content:, href: url, external: False)
+      }
+    },
+    paragraph: fn(attrs, content) { html.p(to_attributes(attrs), content) },
+    bullet_list: fn(layout, style, items) {
+      let list_style_type =
+        attr.style("list-style-type", case style {
+          "-" -> "'-'"
+          "*" -> "disc"
+          _ -> "circle"
+        })
+
+      html.ul([list_style_type], {
+        list.map(items, fn(item) {
+          case layout {
+            jot.Tight -> html.li([], item)
+            jot.Loose -> html.li([], [html.p([], item)])
+          }
+        })
+      })
+    },
+    raw_html: fn(content) { element.unsafe_raw_html("", "div", [], content) },
+    strong: fn(content) { html.strong([], content) },
+    text: fn(text) { html.text(text) },
+    code: fn(content) { html.code([style.monospaced()], [html.text(content)]) },
+    image: fn(destination, alt) {
+      case destination {
+        jot.Reference(ref) ->
+          html.img([attr.src("#" <> linkify(ref)), attr.alt(alt)])
+        jot.Url(url) -> html.img([attr.src(url), attr.alt(alt)])
+      }
+    },
+    linebreak: html.br([]),
+    thematicbreak: html.hr([]),
+  )
+}
+
+fn linkify(text: String) -> String {
+  let assert Ok(re) = regexp.from_string(" +")
+
+  text
+  |> regexp.split(re, _)
+  |> string.join("-")
+}

src/website/page/post.gleam

···
 import lustre/ssg/djot
 import website/common.{type Post}
 import website/data/posts
+import website/djot_renderer
 import website/style
 
 pub fn view_all(posts: List(Post(a))) -> List(Element(a)) {
···
         ]),
       ]),
       html.div([], [
-        html.p([], post.summary |> djot.render(djot.default_renderer())),
+        html.p([], post.summary |> djot.render(djot_renderer.renderer())),
       ]),
     ])
   })
···
         ]),
       ]),
       html.hr([]),
-      html.p([], post.summary |> djot.render(djot.default_renderer())),
+      html.p([], post.summary |> djot.render(djot_renderer.renderer())),
       post.content,
     ]),
   ]

src/website/page/project.gleam

···
 import lustre/ssg/djot
 import website/common.{type Project, Project}
 import website/data/projects
+import website/djot_renderer
 import website/style
 
 pub fn view_all(projects: List(Project(a))) -> List(Element(a)) {
···
         ),
       ]),
       html.div([], [
-        html.p([], project.summary |> djot.render(djot.default_renderer())),
+        html.p([], project.summary |> djot.render(djot_renderer.renderer())),
       ]),
     ])
   })
···
             }),
         ),
       ]),
-      html.p([], project.summary |> djot.render(djot.default_renderer())),
+      html.p([], project.summary |> djot.render(djot_renderer.renderer())),
       project.content,
     ]),
   ]

src/website/style.gleam

···
 pub fn link() {
   attr.styles([
     #("text-decoration", "underline"),
-    #("color", "black"),
+    #("color", "darkblue"),
     #("font-variant-emoji", "text"),
   ])
 }
···
     #("gap", "0.5em"),
   ])
 }
+
+pub fn monospaced() {
+  attr.styles([#("font-family", "monospace, monospace")])
+}
+
+pub fn code_block() {
+  attr.styles([
+    #("font-family", "monospace, monospace"),
+    #("border-radius", "0.4em"),
+    #("border", "2px solid black"),
+    #("padding", "1em 1em 1em 1em"),
+  ])
+}