Use djot for project pages

Author: GearsDatapacks

projects/datapacks/fungecraft.toml renamed to projects/datapacks/fungecraft.djot

@@ -1,13 +1,13 @@
+---
 title = "Fungecraft"
-
 download = "https://modrinth.com/datapack/fungecraft"
-
 youtube = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/RI9JmWbVt7M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'
+---
 
-description = """Fungecraft is a Minecraft version of the esoteric programming language Befunge, using Minecraft blocks instead of ASCII Characters.<br/>
-<br/>
-Fungecraft is to date one of my favourite packs that I've worked on. It was my first real computational datapack, and it was a lot of fun to work on.<br/>
-With the making of it, I was able to prove that mcfunction was turing complete, which cool. I was also very passionate about esolangs at the time, hence the reason for making it.<br/>
-<br/>
-I made Fungecraft before string parsing was a thing, so I used blocks instead of a book as input.<br/>
-I think Fungecraft helped me get into the mindset of this kind of datapack, and allowed me to later go on to make far more complex packs, such as Code of Copper."""
+Fungecraft is a Minecraft version of the esoteric programming language Befunge, using Minecraft blocks instead of ASCII Characters.\
+\
+Fungecraft is to date one of my favourite packs that I've worked on. It was my first real computational datapack, and it was a lot of fun to work on.
+With the making of it, I was able to prove that mcfunction was turing complete, which cool. I was also very passionate about esolangs at the time, hence the reason for making it.\
+\
+I made Fungecraft before string parsing was a thing, so I used blocks instead of a book as input.
+I think Fungecraft helped me get into the mindset of this kind of datapack, and allowed me to later go on to make far more complex packs, such as Code of Copper.

projects/datapacks/gadgets.toml renamed to projects/datapacks/gadgets.djot

@@ -1,9 +1,9 @@
+---
 title = "Gadgets"
-
 download = "https://www.planetminecraft.com/data-pack/gadgets-5629494/"
-
 youtube = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/fzf6l934f4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'
+---
 
-description = """Gadgets is a datapack that I made when I was feeling motivated, but didn't have any good ideas. I'm not particularly proud of it, but I guess it's an interesting pack.<br/>
-<br/>
-It's not very original, which is why I don't care much for it. I guess I learned something about datapacks while making it, but overall it was just me trying to get some views and downloads as I hadn't really posted a datapack in a while."""
+Gadgets is a datapack that I made when I was feeling motivated, but didn't have any good ideas. I'm not particularly proud of it, but I guess it's an interesting pack.\
+\
+It's not very original, which is why I don't care much for it. I guess I learned something about datapacks while making it, but overall it was just me trying to get some views and downloads as I hadn't really posted a datapack in a while.

projects/datapacks/lucky-blocks.toml renamed to projects/datapacks/lucky-blocks.djot

@@ -1,11 +1,11 @@
+---
 title = "Lucky Blocks"
-
 download = "https://modrinth.com/datapack/lucky-blocks"
-
 youtube = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Br87So1Ouag" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'
+---
 
-description = """My lucky blocks datapack was a very big project for me at the time, and remains my most popular datapack to date. This particular datapack holds a special place in my heart, as it marked the beginning of my journey as a Minecraft content creator on YouTube. <br/>
-<br/>
-There are 5 tiers of lucky blocks: Coal up to Netherite. Each one holds better rewards, but also bigger dangers. Upon breaking a Lucky Block, you might be showered with valuable treasures, ranging from rare resources like diamonds and emeralds to powerful enchanted items. Alternatively, you might find yourself facing unexpected challenges as waves of mobs descend upon you or treacherous traps are sprung.<br/>
-<br/>
-The main reason this datapack took so much effort to make was that I had to create my own custom crafting table, so that the lucky blocks were easily craftable. I'm very thankful I did so though, because I have used the crafter in many datapacks since."""
+My lucky blocks datapack was a very big project for me at the time, and remains my most popular datapack to date. This particular datapack holds a special place in my heart, as it marked the beginning of my journey as a Minecraft content creator on YouTube. \
+\
+There are 5 tiers of lucky blocks: Coal up to Netherite. Each one holds better rewards, but also bigger dangers. Upon breaking a Lucky Block, you might be showered with valuable treasures, ranging from rare resources like diamonds and emeralds to powerful enchanted items. Alternatively, you might find yourself facing unexpected challenges as waves of mobs descend upon you or treacherous traps are sprung.\
+\
+The main reason this datapack took so much effort to make was that I had to create my own custom crafting table, so that the lucky blocks were easily craftable. I'm very thankful I did so though, because I have used the crafter in many datapacks since.

src/build.gleam

@@ -23,7 +23,7 @@ pub fn main() {
     |> add_dynamic_routes(
       categories,
       project.view,
-      fn(category: projects.Category) {
+      fn(category: projects.Category(a)) {
         #("/projects/" <> category.path, category.projects)
       },
     )

src/website/data/projects.gleam

@@ -2,14 +2,16 @@ 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 type Category {
-  Category(title: String, path: String, projects: Dict(String, Project))
+pub type Category(a) {
+  Category(title: String, path: String, projects: Dict(String, Project(a)))
 }
 
-fn categories() -> List(Category) {
+fn categories() -> List(Category(a)) {
   let assert Ok(contents) = simplifile.read("projects/projects.toml")
   let assert Ok(toml) = tom.parse(contents)
   let assert Ok(categories) = tom.get_array(toml, ["categories"])
@@ -20,27 +22,28 @@ fn categories() -> List(Category) {
   Category(title:, path:, projects: dict.new())
 }
 
-pub fn all() -> List(Category) {
+pub fn all() -> List(Category(a)) {
   use category <- list.map(categories())
   let assert Ok(files) = simplifile.read_directory("projects/" <> category.path)
   let projects =
     list.fold(files, category.projects, fn(projects, file) {
-      use <- bool.guard(!string.ends_with(file, ".toml"), projects)
+      use <- bool.guard(!string.ends_with(file, ".djot"), projects)
       let file_path = "projects/" <> category.path <> "/" <> file
       let assert Ok(contents) = simplifile.read(file_path)
-      let assert Ok(toml) = tom.parse(contents)
 
-      let title = get_string_key(toml, "title")
-      let download = get_string_key(toml, "download")
-      let youtube = get_string_key(toml, "youtube")
-      let description = get_string_key(toml, "description")
-      // Remove .toml suffix
+      let assert Ok(metadata) = djot.metadata(contents)
+      let contents = djot.render(contents, djot.default_renderer())
+
+      let title = get_string_key(metadata, "title")
+      let download = get_string_key(metadata, "download")
+      let youtube = get_string_key(metadata, "youtube")
+      // Remove .djot suffix
       let project_name = string.drop_end(file, 5)
 
       dict.insert(
         projects,
         project_name,
-        Project(title:, download:, youtube:, description:),
+        Project(title:, download:, youtube:, contents:),
       )
     })
   Category(..category, projects:)
@@ -52,6 +55,11 @@ fn get_string_key(toml: Dict(String, Toml), key: String) -> String {
   value
 }
 
-pub type Project {
-  Project(title: String, download: String, youtube: String, description: String)
+pub type Project(a) {
+  Project(
+    title: String,
+    download: String,
+    youtube: String,
+    contents: List(element.Element(a)),
+  )
 }

src/website/page/project.gleam

@@ -4,7 +4,7 @@ import lustre/element/html
 import website/component
 import website/data/projects.{type Project}
 
-pub fn view(project: Project) -> Element(a) {
+pub fn view(project: Project(a)) -> Element(a) {
   component.page(project.title, [
     html.div([attribute.class("mx-auto max-w-3xl px-4 sm:px-6 lg:px-8")], [
       html.h1(
@@ -13,11 +13,7 @@ pub fn view(project: Project) -> Element(a) {
       ),
     ]),
     html.div([attribute.class("mx-auto max-w-4xl px-4 sm:px-6 lg:px-8")], [
-      html.div([attribute.class("py-8 leading-8")], [
-        html.p([attribute.class("text-xl")], [
-          component.dangerous_html(project.description),
-        ]),
-      ]),
+      html.div([attribute.class("py-8 leading-8 text-xl")], project.contents),
       component.dangerous_html(project.youtube),
       html.a(
         [

src/website/page/projects.gleam

@@ -6,7 +6,7 @@ import lustre/element/html
 import website/component
 import website/data/projects.{type Category, type Project}
 
-pub fn view(categories: List(Category)) -> Element(a) {
+pub fn view(categories: List(Category(a))) -> Element(a) {
   component.text_page(
     "Projects",
     "My Projects",
@@ -32,7 +32,11 @@ pub fn view(categories: List(Category)) -> Element(a) {
   )
 }
 
-fn format_project(category: String, id: String, project: Project) -> Element(a) {
+fn format_project(
+  category: String,
+  id: String,
+  project: Project(a),
+) -> Element(a) {
   html.a([attribute.href("/projects/" <> category <> "/" <> id)], [
     html.div(
       [