My personal website, in gleam+lustre!
Dam
Signed-off-by: MLC Bloeiman <mar@strawmelonjuice.com>
+126
-42
assets/fonts/OpenDyslexic3-Regular.ttf
assets/fonts/OpenDyslexic3-Regular.ttf
This is a binary file and will not be displayed.
+9
-7
gleam.toml
+9
-7
gleam.toml
···
1
1
name = "homepage"
2
2
version = "1.0.0"
3
3
4
+
[javascript]
5
+
source_maps = true
6
+
4
7
[dependencies]
5
8
gleam_stdlib = ">= 0.44.0 and < 2.0.0"
6
9
lustre = ">= 5.6.0 and < 6.0.0"
7
10
modem = ">= 2.1.2 and < 3.0.0"
8
11
jot = ">= 10.1.1 and < 11.0.0"
9
-
chilp = ">= 2.0.1-rc1 and < 3.0.0"
10
-
# chilp = { git = "https://tangled.org/strawmelonjuice.com/chilp", ref = "main" }
12
+
# chilp = ">= 2.0.1-rc1 and < 3.0.0"
13
+
chilp = { git = "https://tangled.org/strawmelonjuice.com/chilp", ref = "main" }
11
14
# chilp = { path = "../../../tangled.sh/strawmelonjuice.com/chilp/" }
12
15
gleam_time = ">= 1.7.0 and < 2.0.0"
13
16
webls = ">= 1.6.1 and < 2.0.0"
···
31
34
32
35
[tools.lustre.html]
33
36
meta = [
37
+
{ name = "fediverse:creator", content = "mar@sharkey.mar.ollie.earth" },
34
38
{ name = "fediverse:creator", content = "mar@procial.tchncs.de" },
35
39
{ name = "fediverse:creator", content = "strawmelonjuice@pony.social" },
36
40
]
37
41
links = [
38
-
{ rel = "preconnect", href = "https://fontlay.com" },
42
+
{ rel = "preconnect", href = "https://fonts.mar.ollie.earth" },
39
43
{ rel = "shortcut icon", href = "/strawmelonjuice.svg", type = "image/x-icon" },
40
44
{ rel = "alternate", href = "/rss.xml", type = "application/rss+xml", title = "Site-wide RSS Feed" },
41
45
{ rel = "alternate", href = "/atom.xml", type = "application/atom+xml", title = "Site-wide ATOM Feed" },
46
+
{ rel = "me", href = "https://sharkey.mar.ollie.earth/@mar" },
42
47
{ rel = "me", href = "https://pony.social/@strawmelonjuice" },
43
48
{ rel = "me", href = "https://procial.tchncs.de/@mar" },
44
49
{ rel = "me", href = "https://bsky.app/profile/did:plc:jgtfsmv25thfs4zmydtbccnn" },
···
46
51
]
47
52
scripts = []
48
53
# { src = "https://unpkg.com/website-carbon-badges@1.1.3/b.min.js", defer = true },
49
-
stylesheets = [
50
-
{ href = "/styles.css" },
51
-
{ href = "https://fontlay.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lilex:ital,wght@0,100..700;1,100..700&display=swap" },
52
-
]
54
+
stylesheets = [{ href = "/styles.css" }]
53
55
title = "Mar's site"
+2
-2
manifest.toml
+2
-2
manifest.toml
···
4
4
packages = [
5
5
{ name = "argv", version = "1.0.2", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "BA1FF0929525DEBA1CE67256E5ADF77A7CDDFE729E3E3F57A5BDCAA031DED09D" },
6
6
{ name = "booklet", version = "1.1.0", build_tools = ["gleam"], requirements = [], otp_app = "booklet", source = "hex", outer_checksum = "08E0FDB78DC4D8A5D3C80295B021505C7D2A2E7B6C6D5EAB7286C36F4A53C851" },
7
-
{ name = "chilp", version = "2.0.1-rc1", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib", "gleam_time", "html_parser", "lustre", "rsvp"], otp_app = "chilp", source = "hex", outer_checksum = "B2A2DDD1F1A4329823FCC98484224973ABA1D482D743655E62F7A0D286C20A7D" },
7
+
{ name = "chilp", version = "2.0.1-rc1", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib", "gleam_time", "html_parser", "lustre", "rsvp"], source = "git", repo = "https://tangled.org/strawmelonjuice.com/chilp", commit = "210c18cf4d9aa0b04229c51f03bb6394fe41aa2d" },
8
8
{ name = "directories", version = "1.2.0", build_tools = ["gleam"], requirements = ["envoy", "gleam_stdlib", "platform", "simplifile"], otp_app = "directories", source = "hex", outer_checksum = "D13090CFCDF6759B87217E8DDD73A75903A700148A82C1D33799F333E249BF9E" },
9
9
{ name = "envoy", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "envoy", source = "hex", outer_checksum = "9C6FBB6BFA02A52798BEEC5977A738CAD6E4A057F4B67FD0C8061AD2502C191A" },
10
10
{ name = "exception", version = "2.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "exception", source = "hex", outer_checksum = "329D269D5C2A314F7364BD2711372B6F2C58FA6F39981572E5CA68624D291F8C" },
···
53
53
54
54
[requirements]
55
55
argv = { version = ">= 1.0.2 and < 2.0.0" }
56
-
chilp = { version = ">= 2.0.1-rc1 and < 3.0.0" }
56
+
chilp = { git = "https://tangled.org/strawmelonjuice.com/chilp", ref = "main" }
57
57
gleam_erlang = { version = ">= 1.3.0 and < 2.0.0" }
58
58
gleam_json = { version = ">= 3.1.0 and < 4.0.0" }
59
59
gleam_regexp = { version = ">= 1.1.1 and < 2.0.0" }
+103
-16
site.css
+103
-16
site.css
···
1
1
@import "tailwindcss";
2
2
@source "./src/homepage.gleam";
3
-
@source "./build/packages/chilp/src/chilp/widget.gleam";
4
-
@source "../../../tangled.sh/strawmelonjuice.com/chilp/src/chilp/widget.gleam";
3
+
@source "./build/packages/chilp/src/chilp.gleam";
4
+
@source "../../../tangled.sh/strawmelonjuice.com/chilp/src/chilp.gleam";
5
5
@plugin "daisyui";
6
+
7
+
@font-face {
8
+
font-family: 'Atkinson Hyperlegible Next';
9
+
font-style: normal;
10
+
font-weight: 500;
11
+
font-display: swap;
12
+
src: url(https://fonts.strawmelonjuice.com/https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v7/NaP4cYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGscKFt4tOOfV4ZmW33rQhtA.ttf) format('truetype');
13
+
}
14
+
15
+
@font-face {
16
+
font-family: 'Fira Code';
17
+
font-style: normal;
18
+
font-weight: 400;
19
+
font-display: swap;
20
+
src: url(https://fonts.strawmelonjuice.com/https://fonts.gstatic.com/s/firacode/v27/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sFVc.ttf) format('truetype');
21
+
}
22
+
23
+
@font-face {
24
+
font-family: 'Lato';
25
+
font-style: normal;
26
+
font-weight: 400;
27
+
font-display: swap;
28
+
src: url(https://fonts.strawmelonjuice.com/https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHvxk.ttf) format('truetype');
29
+
}
6
30
7
31
@plugin "daisyui/theme" {
8
32
name: "strawmelonjuicedotcom";
···
37
61
--border: 2px;
38
62
--depth: 1;
39
63
--noise: 1;
40
-
--font-sans: "Lilex", monospace, system-ui, sans-serif;
41
-
}
42
-
43
-
44
-
@font-face {
45
-
font-family: "OpenDyslectic 3";
46
-
src: url(/fonts/OpenDyslexic3-Regular.ttf);
64
+
--font-sans: "Fira Code", monospace, system-ui, sans-serif;
65
+
--font-size: 16px;
66
+
--prose-font-size: 18px;
47
67
}
48
68
49
69
50
70
@layer base {
51
71
html {
52
-
font-family: "Lilex", monospace, system-ui, sans-serif;
72
+
font-family: "Fira Code", monospace, system-ui, sans-serif;
53
73
font-optical-sizing: auto;
54
74
font-size: var(--font-size);
55
75
font-weight: 400;
···
59
79
60
80
#cv-a4 {
61
81
font-family: "Lato", sans-serif;
62
-
font-weight: 400;
63
82
font-style: normal;
64
83
font-size: var(--font-size);
65
84
line-height: var(--line-height);
···
77
96
78
97
p {
79
98
font-family:
80
-
"OpenDyslectic 3",
81
-
"Lilex",
99
+
"Atkinson Hyperlegible Next",
100
+
"Fira Code",
82
101
sans-serif;
83
102
font-weight: 100;
84
-
font-size: var(--font-size);
103
+
font-size: var(--prose-font-size);
85
104
86
105
}
87
106
}
88
107
89
108
.codeblock {
90
109
font-family:
91
-
"Lilex",
110
+
"Fira Code",
92
111
monospace;
93
112
}
94
113
···
99
118
flex-wrap: wrap;
100
119
}
101
120
102
-
/* As to not collide with chilp's footers, we had to be a bit more specific */
121
+
.chilp-oat-enhance-inset-blueskyreply {
122
+
color: rgb(0, 106, 255);
123
+
background-color: white;
124
+
125
+
&::after {
126
+
content: "luesky";
127
+
}
128
+
}
129
+
130
+
.chilp-oat-enhance-inset-blackskyreply {
131
+
color: white;
132
+
background-color: black;
133
+
134
+
&::after {
135
+
content: "lacksky";
136
+
}
137
+
}
138
+
139
+
.chilp-oat-enhance-inset-witchskyreply {
140
+
color: white;
141
+
background-color: rgb(237, 83, 69);
142
+
143
+
&::after {
144
+
content: "itchsky";
145
+
}
146
+
}
147
+
148
+
.comment-widget {
149
+
.tabs-box {
150
+
text-size-adjust: 100%;
151
+
tab-size: 4;
152
+
line-height: 1.5;
153
+
-webkit-tap-highlight-color: transparent;
154
+
box-sizing: border-box;
155
+
border-width: 0px 0px 2px;
156
+
border-style: solid;
157
+
border-image: initial;
158
+
margin: 0px;
159
+
flex-flow: wrap;
160
+
display: flex;
161
+
border-radius: 20px;
162
+
height: 45px;
163
+
padding: 3.6px 0px 1.5px;
164
+
justify-content: center;
165
+
align-items: stretch;
166
+
gap: 0.5rem;
167
+
}
168
+
169
+
.tab {
170
+
margin: 5px;
171
+
height: 30px;
172
+
width: 40%;
173
+
border-radius: 20px;
174
+
border: none;
175
+
order: 0;
176
+
padding-inline: 12px;
177
+
background-color: var(--color-indigo-50);
178
+
box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral);
179
+
color: var(--color-base-content);
180
+
181
+
&.tab-active {
182
+
color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
183
+
background-color: var(--tab-bg, var(--color-base-300));
184
+
box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral);
185
+
}
186
+
}
187
+
}
188
+
189
+
/* As to not collide with chilp's comment footers, we had to be a bit more specific */
103
190
#app .footer {
104
191
position: fixed;
105
192
bottom: 0;
+1
-1
src/homepage.gleam
+1
-1
src/homepage.gleam
···
23
23
category: "Devlog",
24
24
title: "Chilp",
25
25
summary: "Bluesky and Mastodon comments on my blog!",
26
-
published: Date(3000, April, 28) |> stuff.no_time_timestamp(),
26
+
published: stuff.date_stamp(Date(3026, May, 5), hours: 15, minutes: 00),
27
27
revised: None,
28
28
body: File(Djot, "./written-contents/blog/devblog/chilp/chilp-2.dj"),
29
29
tags: [
+1
-1
src/homepage/stuff/prestyled_elements.gleam
+1
-1
src/homepage/stuff/prestyled_elements.gleam
+10
-15
written-contents/blog/devblog/chilp/chilp-2.dj
+10
-15
written-contents/blog/devblog/chilp/chilp-2.dj
···
19
19
20
20
Okay, the intro is done, let me show you how easy it is for me to insert a Chilp widget.
21
21
22
-
This is just the example from <https://github.com/lustre-labs/lustre/blob/main/examples/01-basics/01-hello-world/src/app.gleam>, I added only about 12 lines to it!
22
+
This is just the example from <https://github.com/lustre-labs/lustre/blob/main/examples/01-basics/01-hello-world/src/app.gleam>, I added only about 6 lines to it!
23
23
24
24
### An example
25
25
26
26
27
27
```gleam
28
28
// IMPORTS --------------------------------------------------------------------------------------------------------------
29
+
import chilp
29
30
import lustre
30
31
import lustre/element.{type Element}
31
32
import lustre/element/html
32
33
import lustre/event
33
-
import chilp
34
-
import chilp/widget
35
34
36
35
// MAIN -----------------------------------------------------------------------------------------------------------------
37
36
38
37
pub fn main() {
39
-
let assert Ok(_) = widget.register()
38
+
let assert Ok(_) = chilp.register()
40
39
let app = lustre.simple(init, update, view)
41
40
let assert Ok(_) = lustre.start(app, "#app", Nil)
42
41
···
73
72
html.button([event.on_click(UserClickedDecrement)], [html.text("-")]),
74
73
html.p([], [html.text("Count: "), html.text(count)]),
75
74
html.button([event.on_click(UserClickedIncrement)], [html.text("+")]),
76
-
// And then we place the widget itself here! under the counter.
75
+
// And then we place the widget itself here! under the counter.
77
76
chilp.widget(
78
77
// Anchoring this one to me mewing on the timeline
79
-
mastodon: option.Some(chilp.mastodon(
80
-
instance: "pony.social",
81
-
postid: "115911235653686237",
82
-
)),
83
-
// And anchoring this one to a post about my hamster
84
-
bluesky: option.Some(chilp.bluesky(
85
-
did: "did:plc:jgtfsmv25thfs4zmydtbccnn",
86
-
post_id: "3mjeg3m7fd22i",
87
-
)),
78
+
mastodon: option.Some(chilp.mastodon(instance: "pony.social", postid: "115911235653686237")),
79
+
// And also anchoring it to a post about my hamster, sure!
80
+
bluesky: option.Some(chilp.bluesky(did: "did:plc:jgtfsmv25thfs4zmydtbccnn", post_id: "3mjeg3m7fd22i")),
88
81
),
89
82
])
90
83
}
91
84
```
92
85
93
-
The widget will be unstyled but is very easily styled into shape using for example DaisyUI, if you just want to see it alive, see the bottom of this post!
86
+
Bamn! That's it!
87
+
88
+
The widget will be unstyled but is very easily [styled into shape using whatever you prefer](https://hexdocs.pm/chilp/2.0.1-rc1/styling.html), if you just want to see it alive, see the bottom of this post!
94
89
95
90
### What it does
96
91