feat: hx-boost on album page search

src/modules/album/album.templ

@@ -15,14 +15,20 @@ templ allAlbumsTempl(albums []utils.Album) {
 				Albums
 			</h1>
 			<div class="px-2">
-				<input
-					class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
-					placeholder="Search albums"
-					name="s"
-					hx-get="/album/"
-					hx-trigger="keyup changed delay:500ms"
+				<form
+					action="/album/"
+					method="GET"
+					hx-boost="true"
 					hx-target="#album-list"
-				/>
+					hx-trigger="keyup changed delay:500ms from:input, search"
+				>
+					<input
+						class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
+						type="search"
+						placeholder="Search albums"
+						name="s"
+					/>
+				</form>
 			</div>
 			<br/>
 			<div id="album-list" class="grid grid-cols-3 gap-2 px-2">

src/modules/auth/login.templ

@@ -7,7 +7,7 @@ templ LoginTempl() {
 		<nav class="bg-sky-500 text-white text-xl font-bold p-2">
 			music to go
 		</nav>
-		<div hx-ext="response-targets">
+		<div hx-ext="response-targets" class="container">
 			Login to Navidrome:
 			<br/>
 			<form
@@ -22,7 +22,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="navidrome-url"
-					class="w-full py-1 px-2 rounded"
+					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
 					placeholder="https://"
 					name="navidrome-url"
 					required
@@ -33,7 +33,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="username"
-					class="w-full py-1 px-2 rounded"
+					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
 					placeholder="username"
 					name="username"
 					required
@@ -44,7 +44,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="password"
-					class="w-full py-1 px-2 rounded"
+					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
 					placeholder="password"
 					name="password"
 					type="password"

src/modules/index/index.templ

@@ -28,9 +28,9 @@ templ IndexTempl(albums []utils.Album) {
 }
 
 templ AlbumCard(album utils.Album) {
-	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800 w-full max-w-32">
+	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800">
 		<div class="h-30 w-28 relative">
-			<img src={ fmt.Sprintf("/covers/%s", album.ID) }/>
+			<img class="w-full" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
 			<a
 				href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
 				class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"

tailwind.config.cjs

@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./src/**/*.{html,templ,go}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        "c-bg": "var(--c-bg)",
-        "c-on-bg": "var(--c-on-bg)",
-      }
-    },
-  },
-  plugins: [],
-}
-

tailwind.config.mjs

@@ -0,0 +1,40 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{html,templ,go}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        "c-bg": "var(--c-bg)",
+        "c-on-bg": "var(--c-on-bg)",
+      }
+    },
+  },
+  corePlugins: {
+    container: false
+  },
+  plugins: [
+    function({ addComponents }) {
+      addComponents({
+        '.container': {
+          maxWidth: '95%',
+          margin: "auto",
+          '@screen sm': {
+            maxWidth: '640px',
+          },
+          '@screen md': {
+            maxWidth: '768px',
+          },
+          '@screen lg': {
+            maxWidth: '1024px',
+          },
+          '@screen xl': {
+            maxWidth: '1280px',
+          },
+        }
+      })
+    }
+  ],
+}
+