add htmx

.air.toml

@@ -5,7 +5,7 @@ tmp_dir = ".air-tmp"
   bin = "./tijl.dev"
   cmd = "just build"
   delay = 1000
-  exclude_dir = ["node_modules"]
+  exclude_dir = ["node_modules","modules/db","static/js","static/css"]
   exclude_unchanged = false
   follow_symlink = false
   include_ext = ["go", "html"]

modules/logger/logger.go

@@ -11,7 +11,7 @@ var (
 )
 
 func init() {
-	Logger = zerolog.New(os.Stderr).With().Timestamp().Logger()
+	Logger = zerolog.New(os.Stderr).With().Timestamp().Logger().Output(zerolog.ConsoleWriter{Out: os.Stderr})
 }
 
 func Info() *zerolog.Event {

package-lock.json

@@ -6,8 +6,12 @@
 	"packages": {
 		"": {
 			"name": "tijldev-next",
+			"dependencies": {
+				"htmx.org": "^1.9.12"
+			},
 			"devDependencies": {
 				"@tailwindcss/typography": "^0.5.14",
+				"@types/node": "^22.4.2",
 				"daisyui": "^4.12.10",
 				"tailwindcss": "^3.4.10",
 				"typescript": "^5.0.0",
@@ -516,6 +520,15 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/@types/node": {
+			"version": "22.4.2",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.2.tgz",
+			"integrity": "sha512-nAvM3Ey230/XzxtyDcJ+VjvlzpzoHwLsF7JaDRfoI0ytO0mVheerNmM45CtA0yOILXwXXxOrcUWH3wltX+7PSw==",
+			"dev": true,
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
 		"node_modules/ansi-regex": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -939,6 +952,11 @@
 				"node": ">= 0.4"
 			}
 		},
+		"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/is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1772,6 +1790,12 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -7,9 +7,13 @@
 	},
 	"devDependencies": {
 		"@tailwindcss/typography": "^0.5.14",
+		"@types/node": "^22.4.2",
 		"daisyui": "^4.12.10",
 		"tailwindcss": "^3.4.10",
 		"typescript": "^5.0.0",
 		"vite": "^4.0.0"
+	},
+	"dependencies": {
+		"htmx.org": "^1.9.12"
 	}
 }

views/layouts/base.html

@@ -7,6 +7,7 @@
     <link rel="icon" href="/static/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#f28c18" />
+    <script type="module" defer src="/static/js/interactive.js"></script>
     <title>{{.Title}}</title>
 </head>
 

views/partials/menu.html

@@ -1,4 +1,4 @@
-<nav class="flex fixed mx-auto w-full lg:w-[80%] xl:w-[75%]">
+<nav hx-boost="true" class="flex fixed mx-auto w-full lg:w-[80%] xl:w-[75%]">
     <div class="mt-4 mx-4 rounded-2xl shadow-2xl bg-base-300 navbar">
         <div class="flex-1">
             <a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>

vite.config.js

@@ -13,12 +13,22 @@ export default defineConfig({
 			input: {
 				interactive: "web/lib/index.ts",
 			},
+			onwarn: (entry, next) => {
+				if (
+					entry.loc?.file &&
+					/htmx\.esm\.js$/.test(entry.loc.file) &&
+					/Use of eval in/.test(entry.message)
+				) {
+					return;
+				}
+				return next(entry);
+			},
 		},
-	},
+		server: {
-	server: {
+			port: 3001,
-		port: 3001,
+			proxy: {
-		proxy: {
+				"/api": "http://localhost:3000", // Proxy API requests to the Go server
-			"/api": "http://localhost:3000", // Proxy API requests to the Go server
+			},
 		},
 	},
 });

web/lib/index.ts

@@ -0,0 +1,3 @@
+import htmx from "htmx.org";
+
+window.htmx = htmx;