Bulma Widgets - LiveComponent wrappers using Bulma

An interesting note on the lacritch.xyz server is that it’s using Nerves to build and deploy to a small Linux VPS. It currently takes ~5 seconds to come back up after rebooting. It doesn’t have a proxy in front, so if anyone any security issues I’d love to know!

Interesting project. I like Bulma too.
I happen to develop a toy website (source code) with Phoenix LiveView and Bulma. Will definitely give your library a try soon.

Also, I’m super curious about the use case of Nerves here. As I know Nerves packs applications, ERTs and a small Linux system together into a small system image, if I am not wrong. So how do you deploy the combined system to your VPS?

Hey @elcritch this is very cool project We also like and use Bulma for our projects, for example see our app (still WIP). It’s all written in LiveView.

Did you consider about how change a css style or a html content in your components for different using? I mean, e.g. a few modal window, one for showing danger action (see our modal in app), one for showing warning (different style and data), etc. But it’s only one component (as you can see in our component modal).

Oh yes, that’s correct. Nerves builds a firmware image with the system and code that can be uploaded via an Upload script by ./upload.sh lacritch.xyz. Easy as can be. The code for this server is on my GitHub at Cloud Server. I should probably fix the Phoenix signing keys so they’re not in the config.exs but this is a throw-away server so I made it public so you could see it. The whole process is programmable in a few dozen lines of Elixir as well. Bootstrapping the initial VPS image is a little fiddly but not too bad. I used a Knoppix image to write the initial Nerves firmware to a VPS disk and it worked like a charm.

Another note is that I don’t see why one couldn’t take a Nerves firmware image and create a container image by dumping the squashfs filesystem to a tarball. Then you don’t need to worry about library version compatibility since it’s all cross-compiled. There’s more discussion on the topic Can you use nerves to deploy a cloud-based server? - #12 by axelson and Running Nerves on Amazon EC2

Honestly, when/if my company needs to deploy web services I’m going to use Nerves images. I don’t see the need for K8s unless you’re doing microservices and I plan to do everything in Elixir. Maybe make a nice LiveView dashboard, insta k8s alternative.

Great! It would be good to get feedback from people. Your app looks nice, and it’s a nice complete looking setup for people to look at! Looks like you’re using POW which I haven’t tried yet.

Nice! Mind if I copy some of your components? I did a little HTML content in the tab’s component using a do block which works nicely, but that doesn’t scale to lots of components. There’s only two components currently, but the hardest part was just getting plumbing together. I’m not sure if how I’m handling the update/2 functions is the best, but it’s working.

The biggest issue in these component libraries is how to make a usable API for the more complex elements. That and it’d be nice to have a similar library for bootstrap, etc. Still having all the widgets connected so that clicking a another UI widget closes an already open dropdown. Otherwise it feels clunky and coding those interactions up is tedious.

P.S. one thing I forgot to note, it that on iOS/embedded touchscreens many buttons don’t work with LiveView. I’ve got some JS code that fixes it by appending event handlers for touch. Just FYI, I had trouble using both of your sites on my iPhone.

Oh you’re doing really cool things and inspired me a lot.

Really? which part of it? I thought it was working well because on my iPhone it seems good.

Nifty!

I might’ve got the two sites mixed up. I thought you’d posted a link to your site too?

P.S. I also added Modal Component. I’m curious if the API makes sense to others!

Cool project. I am currently working with LiveComponents and Bulma myself. I wrote generic Bulma widgets to reuse them. Are you also planning to integrate the additional Bulma extensions on wikiki?

Don’t mind, it’s use to free. If I understand it correctly your Bulma Widgets behave as the source of truth, right? Maybe that’s the reason why is a composition of components so complicated. Just an idea, instead of using update function, define for each component a couple functions like handle_event/handle_info/.. which would provide a communication between these components.

Yes, I agree. The API should follow the KISS rule.

I had trouble using both of your sites on my iPhone.

We didn’t want to build this app for mobile devices. It’s only for desktop using But it’s good to know, thx.