Lumiverse - Frontend for Kavita

[upper jungle]

Lumiverse is the custom frontend for my self-hosted instance of the Kavita manga/book server made in Gleam with Lustre :3

Still work in progress and I'm gonna post progress updates here but it does work now..

https://safe.saya.moe/txmrmo4SyeHa.png
https://safe.saya.moe/TjqRXIm2oUqu.png
https://safe.saya.moe/8QshfbBbd2Vk.png

I'm gonna work on the reader now.

Hosted on my Forgejo instance which might go down sometimes: https://celestia.sammyette.party/Astrality/Lumiverse

[summer plume]

looks really cool!

[upper jungle]

reader works https://safe.saya.moe/kKEgVWBzhH8Z.mp4

[humble hill]

This is a really cool app!

This isn't gonna be a whole code review - I'm not saying you actually need to change anything. But one thing I would highly recommend is looking into Plinth: https://hexdocs.pm/plinth/index.html

It does a lot of the javascript/browser interfacing for you so you wouldn't need to use nearly as much FFI

Other stylistic things I'd add (these are just stylistic things, your code works, it's awesome!) ...

So you have a bunch of functions in an "elements" directory that return elements. There's basically a lustre convention that those kinds of functions (functions returning elements to be rendered) are called "views" and are usually named something like "view_{thing}". That's just a convention though.

Another thing would be just looking for opportunities to keep the line length down. The long lines I'm seeing are just lists of attributes on elements etc. I think the standard gleam formatter would do most of the work for you there. I'll often do import lustre/attribute as att or something like that just so I don't have to type attribute so much.

I'm just scanning and so I can't go much deeper than that but those are my off-the-cuff tips 😄

And generally I'd say dig into the gleam stdlib so you can find opportunities to reduce FFI. Here's another one:

const uri_from_url = (url) => {
  return new Uri(
    /* scheme   */ new (url.protocol ? Some : None)(url.protocol.slice(0, -1)),
    /* userinfo */ new None(),
    /* host     */ new (url.host ? Some : None)(url.host.split(":")[0]),
    /* port     */ new (url.port ? Some : None)(parseInt(url.port)),
    /* path     */ url.pathname,
    /* query    */ new (url.search ? Some : None)(url.search),
    /* fragment */ new (url.hash ? Some : None)(url.hash.slice(1)),
  );
};

This could just be:

import gleam/uri
...
  let assert Ok(uri) = uri.parse(url)

https://hexdocs.pm/gleam_stdlib/gleam/uri.html#parse

FFI is handy as hell and very tempting when you are already good with javascript, but it doesn't give you the type safe guarantees gleam does.

Otherwise I'd just say congrats on your baller app 😄

[lusty ravine]

That parse suggestion is wrong

Url is a browser URL object not a string

[humble hill]

Ohhh that's not ffi is it

Gleam uri.parse does turn a url string to a Uri tho:

parse("https://example.com:1234/a/b?query=true#fragment")
// -> Ok(
//   Uri(
//     scheme: Some("https"),
//     userinfo: None,
//     host: Some("example.com"),
//     port: Some(1234),
//     path: "/a/b",
//     query: Some("query=true"),
//     fragment: Some("fragment")
//   )
// )

Ohhh shit I see what you mean now

Ok forget that

[lusty ravine]

^.^

[upper jungle]

thanks and i appeciate all the tips also

[upper jungle]

soo anything about #general message

:#

[lusty ravine]

I am travelling right now

I’m very happy to help when i am able, please don’t demand my attention when its convenient for you ^.^