feat: add htmx as npm dependency

package-lock.json

@@ -11,6 +11,7 @@
         "@astrojs/check": "^0.5.10",
         "@astrojs/tailwind": "^5.1.0",
         "astro": "^4.10.0",
+        "htmx.org": "^1.9.12",
         "tailwindcss": "^3.4.3",
         "typescript": "^5.4.5"
       },
@@ -3597,6 +3598,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/htmx.org": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.12.tgz",
+      "integrity": "sha512-VZAohXyF7xPGS52IM8d1T1283y+X4D+Owf3qY1NZ9RuBypyu9l8cGsxUMAG5fEAb/DhT7rDoJ9Hpu5/HxFD3cw=="
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "@astrojs/check": "^0.5.10",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.10.0",
+    "htmx.org": "^1.9.12",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },

src/env.d.ts

@@ -1,2 +1,8 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+export declare global {
+  interface Window {
+    htmx: any;
+  }
+}

src/layouts/Layout.astro

@@ -15,7 +15,6 @@ import "../styles/main.css";
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <script src="../scripts/htmx.min.js"></script>
     <meta name="htmx-config" content='{code:"204", swap: false}' />
     <title>{title}</title>
   </head>
@@ -25,4 +24,9 @@ import "../styles/main.css";
       <slot />
     </div>
   </body>
+  <script>
+    import htmx from "htmx.org";
+
+    window.htmx = htmx;
+  </script>
 </html>