16 ms·

Can HTMX be used with static site generators, such as Hugo, to create interactive documentation websites?

by laex 3y ago

varenc 3y ago
Technically feasible? Absolutely. You can already create interactive documentation just with client side JS in your Hugo generated site. And HTMX is just a client-side JS system for building that sort of JS-required interactivity in HTML alone without directly touching JavaScript. That said, I don't think the tooling to make this simple to get started with in Hugo is there yet. Though you could certainly build it.
cpitman 3y ago
I think that unpoly(https://unpoly.com/ https://unpoly.com/) would be easier for that use case. htmx generally expects succesive http requests to only return the fragment of html that will be swapped into the target, not the entire page. So you generally want something server side that can check the request and either return the full page (either for a first hit or disabled javascript) or return just a fragment (an htmx request). Unpoly has similar goals to htmx, but by default works with full page responses, swapping only the identified content in the page.
- 0xblinq 3y ago
  Unpoly is great. I used it a few years ago for reimplementing the UI of an application built with a traditional MVC framework and I was impressed with the results. Nobody could tell it was not React/vue/etc from the outside and the frontend code was quite simple and minimal.
- adamckay 3y ago
  You're correct that it's the general expectation, but it is possible to select certain elements from the response using `hx-select` [1], so it is possible, just not particularly efficient... [1] https://htmx.org/attributes/hx-select/ https://htmx.org/attributes/hx-select/
earthboundkid 3y ago
Why does documentation need any JavaScript at all beyond opening the hamburger menu?
- replwoacause 3y ago
  Why does it even need a hamburger menu?
  - sgc 3y ago
    Because you need to hide nav on mobile, since accessibility requirements from google and other web crawlers will require it to fill the much of the page, or your site won't be indexed.
- yawaramin 3y ago
  You don't need JavaScript for a hamburger menu, I am doing it with pure HTML. Hint: the <details> tag.
  - earthboundkid 3y ago
    Hint: that’s bad for accessibility.
    - yawaramin 3y ago
      Hint: there's nothing inherently inaccessible about the <details> tag, it all depends on how you use it.
- bmacho 3y ago
  No need for javascript for the hamburger menu, it is doable with CSS checkbox, see for example the hamburger menu on https://lanyon.getpoole.com/ https://lanyon.getpoole.com/ . Or another example, the teddit reddit-frontend has collapseable threads with the summary/details tags, also works without javascript.
  - 3y ago

Can HTMX be used with static site generators, such as Hugo, to create interactive documentation websites?

by laex 3y ago

Can HTMX be used with static site generators, such as Hugo, to create interactive documentation websites?

Technically feasible? Absolutely. You can already create interactive documentation just with client side JS in your Hugo generated site. And HTMX is just a client-side JS system for building that sort of JS-required interactivity in HTML alone without directly touching JavaScript. That said, I don't think the tooling to make this simple to get started with in Hugo is there yet. Though you could certainly build it.

cpitman 3y ago

I think that unpoly(https://unpoly.com/ https://unpoly.com/) would be easier for that use case. htmx generally expects succesive http requests to only return the fragment of html that will be swapped into the target, not the entire page. So you generally want something server side that can check the request and either return the full page (either for a first hit or disabled javascript) or return just a fragment (an htmx request). Unpoly has similar goals to htmx, but by default works with full page responses, swapping only the identified content in the page.

0xblinq 3y ago
Unpoly is great. I used it a few years ago for reimplementing the UI of an application built with a traditional MVC framework and I was impressed with the results. Nobody could tell it was not React/vue/etc from the outside and the frontend code was quite simple and minimal.
adamckay 3y ago
You're correct that it's the general expectation, but it is possible to select certain elements from the response using `hx-select` [1], so it is possible, just not particularly efficient... [1] https://htmx.org/attributes/hx-select/ https://htmx.org/attributes/hx-select/

earthboundkid 3y ago

Why does documentation need any JavaScript at all beyond opening the hamburger menu?

replwoacause 3y ago
Why does it even need a hamburger menu?
- sgc 3y ago
  Because you need to hide nav on mobile, since accessibility requirements from google and other web crawlers will require it to fill the much of the page, or your site won't be indexed.
yawaramin 3y ago
You don't need JavaScript for a hamburger menu, I am doing it with pure HTML. Hint: the <details> tag.
- earthboundkid 3y ago
  Hint: that’s bad for accessibility.
  - yawaramin 3y ago
    Hint: there's nothing inherently inaccessible about the <details> tag, it all depends on how you use it.
bmacho 3y ago
No need for javascript for the hamburger menu, it is doable with CSS checkbox, see for example the hamburger menu on https://lanyon.getpoole.com/ https://lanyon.getpoole.com/ . Or another example, the teddit reddit-frontend has collapseable threads with the summary/details tags, also works without javascript.
- 3y ago