What do you use for templating? I think it mostly depends on that. Some templating languages allow you to compose templates, but others don't, making it a bit more complicated.

I use a templating language that allows me to insert templates into other templates, so I just "factor" out the navbar template and reuse it in all my other templates that need a navbar

I think you're using FastAPI, so you'll want to look at template inheritance with Jinja templates: https://jinja2docs.readthedocs.io/en/stable/templates.html#template-inheritance

have an

index

or

layout

template with your navbar, then put some

{% block content %}

tags in and override them in your child templates.

Okay, thanks. Are templates preferable to

<link rel="import" href="/path/to/imports/stuff.html">

?

Definitely : https://caniuse.com/imports

Ah, it's deprecated! And thanks for caniuse, I have seen it mentioned but never actually used it.

waiting for that #nodejs-htmx

hotwire-htmx isn't ridiculous enough?

sorry had to do that... I will stop now 😂

Hi, I'm facing a strange issue... I had everything working on a site I built. I was linking to htmx and hyperscript files on unpkg.com... I decided to bundle all the JS files using webpack. soI added these 2 lines to my main script (imported on the head of the html doc):

window._ = require ("../npm_webpack/node_modules/hyperscript.org");
window.htmx = require ("../npm_webpack/node_modules/htmx.org");

After bundling, Hyperscript seems to be working as usual. But now I lost the HTMX functionality in all my navigation links but one. There aren't any errors on the console. I'm not sure why it only works on a single link now, and not sure how to start troubleshooting this either since I'm really bad with Webpack. If anyone has a different bundling approach, can you share?

What I do is install htmx with npm and then copy

node_modules/htmx.org/dist/htmx.min.js

to my public folder during the build, then I serve the file using my CDN... Then I just include the file using a regular

<script>

tag on the template that needs it.

Thanks so much! I was implementing something like that initially, and it worked great. Just wanted to put everything on a single JS file.

import htmx from 'htmx.org/dist/htmx.js';
window.htmx = htmx;

import _hyperscript from 'hyperscript.org';

That's what I'm using in a current project. Versions: htmx 1.6.1 and hyperscript 0.9.0

Thank you Craig. I used what you wrote and I have the same result. Hyperscript does work... but HTMX is only being applied to one navigation link, ignoring the others.

That's odd. Does it work fine if you link to a locally-hosted htmx (same version as in node_modules) via a tag?

yes, it works perfectly with the other methods

🤔

What methods are you using on the navigation links? And is there anything different between the one that works and those that don't?

Just to make sure, i'm going to download the npm packages again ... and the navigation links are very basic. I have these attributes on the body tag:

so very standard GET requests, that should be handled by htmx for all the links on the site.

This is interesting... if I downgrade from HTMX

1.6.1

to

1.6.0

, then all things work as expected on my WebPack export.

😮 That's unexpected!

This is a very simple project, but I barely know how to configure Webpack. It might be that I have something glaringly wrong there! For now, I'll stay with 1.6.0 🙂

A question on using the "hx-push" response headers from the server. What's the htmx/correct way to set the page title for the new page?

I think you can include a new tag in the response, and it'll be parsed.

Thanks Craig, that's what I thought. Noticed the page titles in history get over-written, and looks like it's already an issue. https://github.com/bigskysoftware/htmx/issues/746

Good spot! 🙂