Add repositories view

src/website.gleam

···
+import birl
+import gleam/dynamic
+import gleam/int
 import gleam/list
 import gleam/string
 import gleam/uri.{type Uri}
···
 import lustre/event
 import lustre/ui
 import lustre/ui/layout/cluster
+import lustre_http
 import modem
 import website/common
 import website/posts
 import website/projects
-import gleam/dynamic
-import lustre_http
+import gleam/order
 
 // Main
 
···
     current_route: Route,
     posts: List(posts.Post(Msg)),
     projects: List(projects.Project(Msg)),
-    repositories: List(Repository)
+    repos: List(Repository),
   )
 }
 
···
     description: String,
     name: String,
     stars_count: Int,
+    html_url: String,
+    updated_at: String,
+  )
+}
+
+type RepositoryBirled {
+  RepositoryBirled(
+    avatar_url: String,
+    description: String,
+    name: String,
+    stars_count: Int,
+    html_url: String,
+    updated_at: birl.Time,
   )
 }
 
 fn get_repositories() -> Effect(Msg) {
   let url = "https://codeberg.org/api/v1/users/naomi/repos"
-  let decoder = dynamic.list(of: dynamic.decode4(
-    Repository,
-    dynamic.field("avatar_url", dynamic.string),
-    dynamic.field("description", dynamic.string),
-    dynamic.field("name", dynamic.string),
-    dynamic.field("stars_count", dynamic.int)
-  ))
+  let decoder =
+    dynamic.list(of: dynamic.decode6(
+      Repository,
+      dynamic.field("avatar_url", dynamic.string),
+      dynamic.field("description", dynamic.string),
+      dynamic.field("name", dynamic.string),
+      dynamic.field("stars_count", dynamic.int),
+      dynamic.field("html_url", dynamic.string),
+      dynamic.field("updated_at", dynamic.string),
+    ))
   lustre_http.get(url, lustre_http.expect_json(decoder, ApiGotRepositories))
 }
 
+fn sort_repos(repos: List(Repository)) -> List(RepositoryBirled) {
+  let repos =
+    repos
+    |> list.map(fn(repo) {
+      case repo {
+        Repository(a, b, c, d, e, time) -> {
+          let time = case time |> birl.parse {
+            Ok(time) -> time
+            Error(_) -> {
+              birl.now() |> birl.set_day(birl.Day(1, 1, 1970))
+            }
+          }
+          RepositoryBirled(a, b, c, d, e, time)
+        }
+      }
+    })
+    |> list.sort(fn(a, b) {
+      let a = a.updated_at |> birl.get_day
+      let b = b.updated_at |> birl.get_day
+      order.break_tie(order.break_tie(int.compare(a.year, b.year), int.compare(a.month, b.month)), int.compare(a.date, b.date))
+    })
+    |> list.reverse
+}
+
 fn switch_theme() -> Effect(Msg) {
   effect.from(fn(disp) {
     do_switch_theme()
···
       current_route: get_route(),
       projects: projects.all(),
       posts: posts.all(),
+      repos: [],
     ),
     {
       init_theme()
-      modem.init(on_route_change)
+      effect.batch([get_repositories(), modem.init(on_route_change)])
     },
   )
 }
···
     )
     ChangeDarkMode -> #(model, switch_theme())
     DoneChangeDarkMode -> #(model, effect.none())
-    ApiGotRepositories -> #(model, effect.none())
+    ApiGotRepositories(Ok(repos)) -> #(
+      Model(..model, repos: repos),
+      effect.none(),
+    )
+
+    ApiGotRepositories(Error(_)) -> #(model, effect.none())
   }
 }
 
···
   ])
 }
 
-fn view_home(_model: Model) -> Element(Msg) {
+fn view_home(model: Model) -> Element(Msg) {
   html.div([], [
     html.div(
       [
···
       ],
       [
         html.p([attr.class("mb-4")], [
+          html.h1([attr.class("text-3xl m-0 mb-4 text-pink-400")], [
+            element.text("About Me"),
+          ]),
           element.text(
             "Hi! I'm Naomi (or Mia), a trans girl from the UK who loves to code! I mostly make Minecraft mods, but have started
     to begin other projects like ",
···
           ),
           cluster.of(
             html.div,
-            [attr.class("gap-4 sm:gap-20 flex flex-col sm:flex-row")],
+            [attr.class("gap-4 sm:gap-20 flex flex-col md:flex-row")],
             [
               ui.stack([], [
                 html.h3([attr.class("text-2xl underline")], [
···
           "drop-shadow-md text-xl p-4 mb-4 rounded-xl bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
         ),
       ],
-      [html.h1([attr.class("text-3xl m-0 text-pink-400")],[element.text("Repositories")])],
+      [
+        html.h1([attr.class("text-3xl m-0 mb-4 text-pink-400")], [
+          element.text("Repositories"),
+        ]),
+        html.div(
+          [attr.class("grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4")],
+          model.repos
+            |> sort_repos
+            |> list.map(fn(repo) {
+              let url = case repo.avatar_url {
+                "" -> "https://avatars.githubusercontent.com/u/95784613?v=4"
+                a -> a
+              }
+              html.a(
+                [
+                  attr.class(
+                    "
+                    drop-shadow-lg rounded-xl p-4 
+                    dark:text-neutral-200
+                    bg-gray-300 dark:bg-neutral-700 
+                    hover:bg-slate-300 dark:hover:bg-slate-700
+                    ",
+                  ),
+                  attr.href(repo.html_url),
+                ],
+                [
+                  html.div([attr.class("flex items-center")], [
+                    html.img([
+                      attr.src(url),
+                      attr.class("drop-shadow-md rounded-xl max-w-16 max-h-16"),
+                    ]),
+                    html.div([attr.class("m-2")], [
+                      html.h2([], [element.text(repo.name)]),
+                      html.h2([], [
+                        element.text(
+                          "⭐ " <> repo.stars_count |> int.to_string,
+                        ),
+                      ]),
+                    ]),
+                  ]),
+                  html.div([], [
+                    case repo.description {
+                      "" -> html.p([attr.class("text-neutral-500 dark:text-neutral-400")], [element.text("No description")])
+                      a -> element.text(a)
+                    }
+                  ]),
+                ],
+              )
+            }),
+        ),
+      ],
     ),
   ])
 }