index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="booster-config" content='{
      "basePath" : "/scripts/boosts/",
      "conductors" : [
        { "conductor": "unveil", "selector" : "[data-unveil]", "strategy": "eager", "version": "3" }
      ]
    }'>
    <link rel="stylesheet" href="/styles/styles.css" />
    <script defer src="https://cdn.jsdelivr.net/gh/bigskysoftware/htmx@1.9.12/src/htmx.min.js"></script>
    <script src="/main.js" type="module"></script>
  </head>
  <body hx-ext="booster">
    <header id="header">
      <nav
        hx-boost="true"
        hx-target="#main"
        hx-select="#main"
        hx-swap="outerHTML show:#header:top"
      >
        <a href="/">Home</a>
        <a href="/page2.html">Page 2</a>
        <a href="/page3.html">Page 3</a>
        <a href="/page4.html">Page 4</a>
      </nav>
    </header>
    <main id="main" hx-history-elt>
      <h1>Home page</h1>
      <section>
        <header>
          <h2>Example component: celebrate.js</h2>
        </header>
        <div id="celebrate" data-booster="celebrate" data-options='{"message":"Hello, stranger!"}'></div>
      </section>
    </main>
  </body>
</html>