kacaii.dev
💻 My personal website
blog.kacaii.dev/
blog
gleam
lustre
:sparkles: start writing post about college project
+7
.justfiles/gleam.just
+7
.justfiles/gleam.just
-26
Taskfile.yml
-26
Taskfile.yml
···
1
-
version: "3"
2
-
3
-
includes:
4
-
docker: ./.taskfiles/Docker/Taskfile.yml
5
-
tw: ./.taskfiles/Tailwind/Taskfile.yml
6
-
7
-
tasks:
8
-
default:
9
-
desc: List available tasks
10
-
cmd: task --list-all
11
-
silent: true
12
-
13
-
run-image:
14
-
desc: Run the container
15
-
cmds:
16
-
- task: docker:run
17
-
18
-
ship-image:
19
-
desc: Build, Tag and Push your app
20
-
cmds:
21
-
- task: docker:shipment
22
-
23
-
tailwind-watch:
24
-
desc: Start Tailwind file watching
25
-
cmds:
26
-
- task: tw:watch
+1
justfile
+1
justfile
-9
priv/posts/building-a-server-with-wisp.md
-9
priv/posts/building-a-server-with-wisp.md
+24
priv/posts/building-my-college-project-with-gleam.md
+24
priv/posts/building-my-college-project-with-gleam.md
···
1
+
---
2
+
title = "Building my college project with Gleam"
3
+
date = 2025-12-28
4
+
tags = ["gleam", "college"]
5
+
---
6
+
7
+
## Picking a language
8
+
9
+
Every semester my college assigns us a major project. This usually meant coming up
10
+
with a startup concept or designing a website in Figma, but we never got to
11
+
actually put our ideas _in pratice_. This semester was different.
12
+
13
+
The whole class were assigned the task of building an software aimed at helping
14
+
firefighters handle a *large volume* of incidents. Being responsible for the backend
15
+
_mostly_ by myself, I was pretty insecure as first. I needed something reliable
16
+
and built for getting things done _fast_.
17
+
18
+
## Enter Gleam 🌃
19
+
20
+
```gleam
21
+
pub fn main() -> Nil {
22
+
io.println("Hello!")
23
+
}
24
+
```
+7
-1
priv/static/blog.css
+7
-1
priv/static/blog.css
···
1
1
@import "output.css";
2
+
@import "maple_mono.css";
2
3
3
4
:root {
4
5
--hover-glow: 120%;
···
9
10
--ctp-lavender: #b4befe;
10
11
}
11
12
13
+
.post-content {
12
14
13
-
.post-content {
15
+
code {
16
+
font-size: 1rem;
17
+
font-family: maple-mono;
18
+
background-color: var(--ctp-mantle);
19
+
}
14
20
15
21
h1,
16
22
h2,
+23
priv/static/maple_mono.css
+23
priv/static/maple_mono.css
···
1
+
@font-face {
2
+
font-family: maple-mono;
3
+
src: url(maple_mono/MapleMono-Regular.ttf);
4
+
}
5
+
6
+
@font-face {
7
+
font-family: maple-mono;
8
+
src: url(maple_mono/MapleMono-Bold.ttf);
9
+
font-weight: bold;
10
+
}
11
+
12
+
@font-face {
13
+
font-family: maple-mono;
14
+
src: url(maple_mono/MapleMono-Italic.ttf);
15
+
font-style: italic;
16
+
}
17
+
18
+
@font-face {
19
+
font-family: maple-mono;
20
+
src: url(maple_mono/MapleMono-BoldItalic.ttf);
21
+
font-style: italic;
22
+
font-weight: bold;
23
+
}
priv/static/maple_mono/MapleMono-Bold.ttf
priv/static/maple_mono/MapleMono-Bold.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-BoldItalic.ttf
priv/static/maple_mono/MapleMono-BoldItalic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-ExtraBold.ttf
priv/static/maple_mono/MapleMono-ExtraBold.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-ExtraBoldItalic.ttf
priv/static/maple_mono/MapleMono-ExtraBoldItalic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-ExtraLight.ttf
priv/static/maple_mono/MapleMono-ExtraLight.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-ExtraLightItalic.ttf
priv/static/maple_mono/MapleMono-ExtraLightItalic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-Italic.ttf
priv/static/maple_mono/MapleMono-Italic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-Light.ttf
priv/static/maple_mono/MapleMono-Light.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-LightItalic.ttf
priv/static/maple_mono/MapleMono-LightItalic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-Medium.ttf
priv/static/maple_mono/MapleMono-Medium.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-MediumItalic.ttf
priv/static/maple_mono/MapleMono-MediumItalic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-Regular.ttf
priv/static/maple_mono/MapleMono-Regular.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-SemiBold.ttf
priv/static/maple_mono/MapleMono-SemiBold.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-SemiBoldItalic.ttf
priv/static/maple_mono/MapleMono-SemiBoldItalic.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-Thin.ttf
priv/static/maple_mono/MapleMono-Thin.ttf
This is a binary file and will not be displayed.
priv/static/maple_mono/MapleMono-ThinItalic.ttf
priv/static/maple_mono/MapleMono-ThinItalic.ttf
This is a binary file and will not be displayed.
+3
-1
src/blog/root.gleam
+3
-1
src/blog/root.gleam
···
19
19
])
20
20
21
21
let style =
22
-
class("px-12 mx-auto bg-ctp-base text-ctp-text selection:bg-ctp-surface0")
22
+
class(
23
+
"px-12 mx-auto mt-8 font-sans bg-ctp-base text-ctp-text selection:bg-ctp-surface0",
24
+
)
23
25
24
26
html.html([attr.lang("en")], [head, html.body([style], content)])
25
27
|> element.to_document_string
+2
-2
src/web/http_router.gleam
+2
-2
src/web/http_router.gleam
···
1
1
import blog/page/home
2
-
import blog/page/post_content
2
+
import blog/page/render_post
3
3
import web
4
4
import wisp
5
5
···
8
8
9
9
case wisp.path_segments(req) {
10
10
[] -> home.handle_request(ctx)
11
-
["posts", post] -> post_content.handle_request(ctx, post)
11
+
["posts", post] -> render_post.handle_request(ctx, post)
12
12
13
13
_ -> wisp.not_found()
14
14
}