Adding Alpinejs lib to plus page ?

[glsubri]

Hi @markuswustenberg

I've made a small lib for Alpinejs: https://github.com/glsubri/gomponents-alpine

It's usage ressembles the htmx library. I'll probably be supporting more elements later, but for a basic usage, it works just fine IMO.

What do you think if we add it to the gomponents+ page ?

BTW, the template kit repo looks nice 👌

[markuswustenberg]

@glsubri cool! Yeah, let's do that. Could you provide a minimal example, in the approximate style and size of the existing ones on the plus page?

[glsubri]

@markuswustenberg Sure. We can go with a smaller version of what's in the README

package main

import (
    "net/http"

    x "github.com/glsubri/gomponents-alpine"
    . "maragu.dev/gomponents"
    . "maragu.dev/gomponents/html"
)

// example from: https://alpinejs.dev/directives/transition#applying-css-classes
func transitions() Node {
    return Div(
        x.Data("{ open: false }"),

        Button(
            x.On("click", "open = !open"),

            Class("border bg-gray-200 p-2 rounded"),
            Text("Toggle"),
        ),

        Div(
            x.Show("open"),
            x.Transition(".duration.500.ms"),

            Text("Hello 👋"),
        ),
    )
}

Do you think that would fit or should we go with something else ?

[markuswustenberg]

Maybe we can do something that looks a bit like the other navbar examples? Here's the one for HTMX:

package main

import (
    . "maragu.dev/gomponents"
    hx "maragu.dev/gomponents-htmx"
    . "maragu.dev/gomponents/html"
)

func Navbar() Node {
    return Nav(hx.Boost("true"),
        A(Href("/"), Text("Home")),
        A(Href("/about"), Text("About")),
    )
}

Perhaps something like this?

package main

import (
    x "github.com/glsubri/gomponents-alpine"
    . "maragu.dev/gomponents"
    . "maragu.dev/gomponents/html"
)

func Navbar() Node {
    return Nav(
        x.Data("{ submenu: false }"),

        A(Href("/"), Text("Home")),
        A(x.On("click", "submenu = ! submenu"), Href("/about"), Text("About")),
        Div(x.Show("submenu"), Div()),
    )
}

[glsubri]

Looks great 👍