if you do this with a site generator it will do it for you (jekyll, zola, etc.)

i think that static site generation path is probably the one i could take and just generate all the html content

does this make sense?

Yes, using templating system is your best course of action

ah I see, usually I'd do it in the backend template engine

ok, great!

i just would like to make sure i am on the right track 🙂

@high-article-21845 like this: https://discord.com/channels/725789699527933952/929014829212123156/1051145642422063154

example is in go but you get the idea

perfect

you use the go site generator?

(hugo, i think the name)

I don't use a generator

I like to compile it all into the app

I dont use hugo because I want to use my golang structs/data in the template

i see!

makes sense

the only reason i would like to do that so there is no need to compute the same thing over and over and just have the truly dynamic content change

kind of getting the best from both worlds

that's cool too

though hugo is not a bad way to do it, you could plop a main.go file somewhere in the and use the same layout/html then put it up on a host like heroku or something as a go handler

for the more dynamic stuff that you can't do just with htmx and getting other pages that way

feels more blog like to me that way though

just easier to deploy a service as a single file

👋 I have a question around htmx and initialising external JS libs. Hope this is the right place and someone had a similar experience? I'm using vanilla JS and twig with sprig (=htmx). I have written JS code to enhance a form (init captcha package, init address autocompletion package, init phone number formatting package, ...) I'm building a modal popup that loads the modal content via ajax. The modal content is an htmx form.

Button click --> opens modal --> plain xhr call fetches form page --> form html is rendered --> on form submit, htmx swaps the form showing either the form errors or a success message.

I'm finding myself in an annoying situation where I have to 1) Init my form components on

DOMContentLoaded

when my website loads, 2) init my form components again when the modal content is loaded over xhr and 3) init my form components again on

htmx:afterSwap

because it's dynamic DOM content in step 2 and 3 and it needs to initialise again. And if I have a form field somewhere outside of the modal, it risks getting 2+ event listeners attached to it because I re-run the form init on certain events. I read about event delegation but a form element should init when it gets shown, while the examples of event delegation are usually click or change events on the

document

or

window

? Any tips to make this a bit smoother?

Hi there, I'm wondering if anyone has built a dynamic site with Cloudflare Pages by using htmx? It seems like it could be backed by some Workers function APIs and grab what's needed from the KV store

Should work fine as long as CORS is correctly set up on Cloudflare Pages (and whatever API's you use).

Thanks! Are there any other similar approaches for something like this? Essentially, my goal is to build a very simple frontend for a separate SaaS product that'll be built largely on top of Cloudflare Workers (to be used with their WordPress-based sites). It'll allow someone to log into a Dashboard with some analytics and toggles - probably just a few pages that can be dynamically populated, hopefully with HTMX!

If you use https://htmx.org/api/#onLoad and scope your initialization to the passed in

elt

, you should be able to initialize things properly w/o any duplication on both full page loads as well as partial updates.

Hey ya'll, question on sse extension, is something like this possible?

html
<div hx-ext="sse" sse-connect="/server-url">
    <div sse-swap="event1"></div>
    <div sse-swap="event2">
        <div sse-swap="event3"></div>
    </div>
</div>

I'm running into an issue where event1 and event2 are swapping OK but event 3 is not. In order to get event3 to swap properly I had to do this:

html
<div hx-ext="sse" sse-connect="/server-url">
    <div sse-swap="event1"></div>
    <div sse-swap="event2">
        <div hx-ext="sse" sse-connect="/server-url" sse-swap="event3"></div>
    </div>
</div>