Bulma Widgets - LiveComponent wrappers using Bulma

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.

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!

I find making a library out of my internal widgets helps keep me a bit more disciplined in documenting them. Plus maybe others find them useful. Not currently planning on adding Bulma extensions as I don’t use them currently, but I’d be willing to accept PR’s.

Great! I used yours to see how I could model something like a card component. I tried a few variations and ended up liking a pattern of using a case statement in a do block with the LiveComponents as the Source-of-Truth. Though I also provide a “default” setup using proplist options for cases where you would want standard buttons, like this:

    <%= live_component @socket, CardComponent, 
                   id: :card1, 
                   footers: ["Save Item": "card-1-save"] do %>
      <%= case @item do %>
        <% :content_item -> %>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus nec iaculis mauris. <a>@bulmaio</a>.
          <a href="#">#css</a> <a href="#">#responsive</a>
          <br>
          <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
        <% _other -> %>
      <% end %>
    <% end %>

It turns out that using the do-block actually makes composability pretty straightforward, even using the parent LiveView assigns (@modal_va is set in the parent LiveView) works! I’m pretty happy with the composability, even though you have to write a case statement. A macro would be nice to handle that but broke when I tried it.

You can also mix and match from default event handlers or custom ones like in this example. Note the save-button targets the parent LiveView while the cancel-button uses the default cancel handler:

    <%= live_component @socket, ModalComponent, id: :modal2 do %>
      <%= case @item do %>
        <% :header -> %>
          <p class="modal-card-title">Second Modal</p>
          <button class="delete" phx-click="delete" phx-target="<%= @target %>" aria-label="close">
        <% :footer -> %>
          <button class="button is-success" phx-click="modal-2-save" >
            Save changes
          </button>
          <button class="button" phx-click="cancel" phx-target="<%= @target %>">
            Cancel
          </button>
        <% _other -> %>
      <% end %>
    <% end %>

Originally I tried using the parent LiveView as the Source-of-Truth, but it seems you can’t define handle_event’s without providing an id and state in the LiveComponent (in LiveView v0.9.0). Between that and having two spots to define/configure the widgets felt confusing and a bit cumbersome. So having the widgets send events to the parent LiveView allows a pretty simple interaction between widgets that seems pretty simple and robust so far. Though documenting it well is the tricky part.

Also there are helper functions to do things like open/close/update a widget like:

  def handle_event("modal-1-save", _params, socket) do
    {:noreply, socket |> widget_close(:modal1)}
  end