htmx based gui

[gedw99]

nice system architecture with Cue and NATS. Kind of perfect light system

htmx or htmz based GUI would be nice. If you have a Issue / Epic for it I can take a shot at it.

htmz is an iframe hack: https://github.com/Kalabasa/htmz

[jlarfors]

@gedw99 thanks for your interest! By "GUI" do you you mean web UI or terminal UI? We are using HTMX already for the web UI.

https://github.com/verifa/horizon/blob/ed4e3a49b64e533b4cf9bd26e6d7298ed6633988/pkg/gateway/server.go#L32

And we've built an http proxy over nats, so the different extensions will serve their own HTML to be rendered in the gateway. In Go, this is done by creating our ownhttp.RoundTripper that allows sending http messages over nats quite nicely:

https://github.com/verifa/horizon/blob/ed4e3a49b64e533b4cf9bd26e6d7298ed6633988/pkg/gateway/portal.go#L69

Some help is definitely appreciated with the UI. What are your main interests that you would like to help with?

[gedw99]

Hey

Thanks for the links @jlarfors

I have an idea which maybe is worth considering. Lets call it HTMX Chrome. I use HTMX a lot, and one thing that Horizon is capable of doing ( based on its architecture ) is to add hinting to the Web GUI in the browser.

When your in Dev mode, we could add "hints" into the current html output via our Proxy layer, so devs can more easily understand what is happening with the HTMX meta tags in the HTML. Thats the generalised idea.

There are various opportunities here once that basic stuff is in place:

The link could open up the code in vscode etc of where the HTML came from. It could however also do a lot more thanks to NATS being integrated into the system. All we are doing is adding a little bit of extra HTML to the GUI to show the code files where the HTML came from.

We could later use the HTMX meta tags to help hint about the linkage of a HTMX swap ( and other OPs that HTMX does ), etc. HTMX is sort of cool how your just replacing html at runtime, but it can get a little complex on large projects where you loose track of what is modifying what and what depends on what.

We could even load the main web site in an Iframe and show the HTMX aspects in a left pane to allow editing the actual code tags to reroute a HTMX. This is just one idea of where it could go.

When in Prod Mode, we dont show the HTMX Chrome.

I totally get this is "a bit different", but when I saw the way HTMX and NATS is integrated I just seems natural. I also realise that Horizon is a new project and it's still got a long way to go, so think of this as a base for an idea. Even just the Providence aspect could be done if we have the basic concept of DEV / PROD distinction. Then later as we use it some of the other ideas like editing the HTMX routing could be worth playing with.

[jlarfors]

@gedw99 thanks for the suggestion and interesting idea.

I think your idea is out of scope for what Horizon is trying to be. Horizon is aimed at "platform teams" (as defined in Team Topologies), or any kind of similar team (some call it DevOps Teams, DevEx Teams, whatever). So it is a portal for developers to use to enable their work, not a development tool, per se.

The main use for HTMX right now is how parts of the HTML page are stitched together, with something like this:

<div hx-get={ fmt.Sprintf("/portals/%s/%s/%s", account, portal, subpath) } hx-trigger="load"></div>

The HTTP service receiving this converts the http.Request to []byte and sends it over NATS to another service that converts it back to an http.Request and has it's own HTTP server to handle it. The response is then sent back over NATS and finally into the UI.

This kind of technique could absolutely be applied to what you are suggesting and feel free to get inspiration from this code base.

[jlarfors]

I am going to close this issue. There are now some better examples, e.g. https://github.com/verifa/horizon/blob/75e57350d17bb8f52ac20f1e6241b15f0443a476/examples/greetings/portal.templ#L36

[gedw99]

thanks @jlarfors for all the direction and the greetings example. It really helps to have examples.