Implement blog generator

Author: GearsDatapacks

README.md

@@ -2,10 +2,3 @@
 
 Code for [my website](https://gearsco.de), written in [Gleam](https://gleam.run),
 using [Lustre](https://lustre.build) and [Lustre SSG](https://hexdocs.pm/lustre_ssg).
-
-I have recently restructured the website from a multi-page site to an SPA, so for
-now Lustre SSG is overkill for what I need, and the codebase is a little messy.
-I do want to eventually make a blog and other pages for this site, so at some point
-it will get another rewrite.
-
-For an example of Gleam/Lustre SSG, see: https://github.com/giacomocavalieri/giacomocavalieri.me

blog/test.djot

@@ -0,0 +1,7 @@
+---
+title = "Test article"
+date = "2025-11-25"
+description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+---
+
+Hello, world!

src/build.gleam

@@ -1,12 +1,26 @@
 import gleam/io
+import gleam/list
+import lustre/element
 import lustre/ssg
+import website/data/blog
+import website/page/blog_home
+import website/page/blog_post
 import website/page/index
 
 pub fn main() {
+  let posts = blog.posts()
+
   let build =
     ssg.new("./priv")
     |> ssg.add_static_route("/", index.view())
     |> ssg.add_static_dir("./static")
+    |> ssg.add_static_route("/blog/index", blog_home.view(posts))
+    |> add_dynamic_routes(
+      "/blog",
+      posts,
+      fn(post) { post.slug },
+      blog_post.view,
+    )
     |> ssg.build
 
   case build {
@@ -17,3 +31,19 @@ pub fn main() {
     }
   }
 }
+
+fn add_dynamic_routes(
+  config: ssg.Config(ssg.HasStaticRoutes, a, b),
+  path: String,
+  list: List(data),
+  slug: fn(data) -> String,
+  view: fn(data) -> element.Element(msg),
+) -> ssg.Config(ssg.HasStaticRoutes, a, b) {
+  list.fold(list, config, fn(config, data) {
+    ssg.add_static_route(
+      config,
+      path <> "/" <> slug(data) <> "/index",
+      view(data),
+    )
+  })
+}

src/website/data/blog.gleam

@@ -0,0 +1,45 @@
+import gleam/bool
+import gleam/dict.{type Dict}
+import gleam/list
+import gleam/string
+import lustre/element
+import lustre/ssg/djot
+import simplifile
+import tom.{type Toml}
+
+pub fn posts() -> List(Post(a)) {
+  let assert Ok(files) = simplifile.read_directory("blog/")
+
+  list.filter_map(files, fn(file) {
+    use <- bool.guard(!string.ends_with(file, ".djot"), Error(Nil))
+    let file_path = "blog/" <> file
+    let assert Ok(contents) = simplifile.read(file_path)
+
+    let assert Ok(metadata) = djot.metadata(contents)
+    let contents = djot.render(contents, djot.default_renderer())
+
+    let title = get_string_key(metadata, "title")
+    let description = get_string_key(metadata, "description")
+    let date = get_string_key(metadata, "date")
+    // Remove .djot suffix
+    let slug = string.drop_end(file, 5)
+
+    Ok(Post(title:, slug:, date:, contents:, description:))
+  })
+}
+
+fn get_string_key(toml: Dict(String, Toml), key: String) -> String {
+  let assert Ok(value) = dict.get(toml, key)
+  let assert tom.String(value) = value
+  value
+}
+
+pub type Post(a) {
+  Post(
+    title: String,
+    slug: String,
+    date: String,
+    description: String,
+    contents: List(element.Element(a)),
+  )
+}

src/website/data/projects.gleam

@@ -0,0 +1,27 @@
+import gleam/list
+import lustre/attribute
+import lustre/element
+import lustre/element/html
+import website/component
+import website/data/blog
+
+pub fn view(posts: List(blog.Post(_))) -> element.Element(_) {
+  component.page("Blog", [
+    component.text_page("My Blog", list.map(posts, post)),
+  ])
+}
+
+fn post(post: blog.Post(_)) -> element.Element(_) {
+  html.div([], [
+    html.a(
+      [attribute.href("/blog/" <> post.slug), attribute.class("underline")],
+      [
+        html.h2([attribute.class("text-xl font-bold")], [
+          element.text(post.title),
+        ]),
+      ],
+    ),
+    html.span([attribute.class("text-sm")], [element.text(post.date)]),
+    html.p([attribute.class("text-lg")], [element.text(post.description)]),
+  ])
+}

src/website/page/blog_home.gleam

@@ -0,0 +1,16 @@
+import lustre/attribute
+import lustre/element
+import lustre/element/html
+import website/component
+import website/data/blog
+
+pub fn view(post: blog.Post(a)) -> element.Element(a) {
+  component.page(post.title, [
+    component.text_page(post.title, [
+      html.h2([attribute.class("text-xl font-bold text-center m-0")], [
+        element.text(post.date),
+      ]),
+      ..post.contents
+    ]),
+  ])
+}