Refactor JS and improve HTMX integration

TorstenDittmann · TorstenDittmann · commit 35141478c3c3 · 2025-04-13T13:10:22.000+02:00
- Moved inline theme/layout switcher scripts to main.js
- Added HTMX boost to navigation
- Replaced CDN highlight.js with npm package
- Fixed blog feed hover effects
- Bumped package version to 1.0.29
diff --git a/apps/docs/docs.html b/apps/docs/docs.html
@@ -483,23 +483,4 @@ <h3>Confirm your action!</h3>
 		<button autofocus onclick="modalExample.close()">Confirm</button>
 	</footer>
 </dialog>
-<script>
-for (const element of document.querySelectorAll("[data-theme-switcher]")) {
-	element.addEventListener("click", () => {
-		document.documentElement.setAttribute(
-			"data-theme",
-			element.dataset.themeSwitcher,
-		);
-	});
-}
-
-for (const element of document.querySelectorAll("[data-layout-switcher]")) {
-	element.addEventListener("click", () => {
-		document.body.setAttribute(
-			"data-layout",
-			element.dataset.layoutSwitcher,
-		);
-	});
-}
-</script>
 {{/base}}
diff --git a/apps/docs/install.html b/apps/docs/install.html
@@ -44,23 +44,4 @@ <h4>Theme Switching Code</h4>
 		><code class="language-html">&lt;html data-theme="light"&gt;</code></pre>
 	</section>
 </main>
-<script>
-for (const element of document.querySelectorAll("[data-theme-switcher]")) {
-	element.addEventListener("click", () => {
-		document.documentElement.setAttribute(
-			"data-theme",
-			element.dataset.themeSwitcher,
-		);
-	});
-}
-
-for (const element of document.querySelectorAll("[data-layout-switcher]")) {
-	element.addEventListener("click", () => {
-		document.body.setAttribute(
-			"data-layout",
-			element.dataset.layoutSwitcher,
-		);
-	});
-}
-</script>
 {{/base}}
diff --git a/apps/docs/main.js b/apps/docs/main.js
@@ -1,3 +1,28 @@
 import "htmx.org";
 import "launch.css";
-hljs.highlightAll();
+import "highlight.js/styles/github-dark.css";
+import hljs from "highlight.js";
+
+function on_mount() {
+	hljs.highlightAll();
+	for (const element of document.querySelectorAll("[data-theme-switcher]")) {
+		element.addEventListener("click", () => {
+			document.documentElement.setAttribute(
+				"data-theme",
+				element.dataset.themeSwitcher,
+			);
+		});
+	}
+
+	for (const element of document.querySelectorAll("[data-layout-switcher]")) {
+		element.addEventListener("click", () => {
+			document.body.setAttribute(
+				"data-layout",
+				element.dataset.layoutSwitcher,
+			);
+		});
+	}
+}
+
+on_mount();
+document.addEventListener("htmx:afterRequest", on_mount);
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -9,6 +9,7 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
+		"highlight.js": "^11.11.1",
 		"htmx.org": "^1.9.12",
 		"launch.css": "workspace:*",
 		"vite": "^6.2.0",
diff --git a/apps/docs/partials/base.hbs b/apps/docs/partials/base.hbs
@@ -5,13 +5,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="color-scheme" content="light dark" />
 		<title>{{ title }}</title>
-		<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/github-dark.min.css">
-		<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
 	</head>
 
 	<body data-layout="website">
 		<header>
-			<nav>
+			<nav hx-boost="true">
 				<a href="/">launch.css</a>
 				<menu>
 					<li><a href="/install">Install</a></li>
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "launch.css",
-	"version": "1.0.28",
+	"version": "1.0.29",
 	"description": "A classless CSS framework built for speed. Style your website later—build it now.",
 	"homepage": "https://launch-css.dev",
 	"main": "dist/index.css",
diff --git a/packages/main/src/compoments/_blog.scss b/packages/main/src/compoments/_blog.scss
@@ -41,8 +41,8 @@ article,
 			object-fit: cover;
 		}
 	}
+}
 
-	&:hover > figure > img {
-		transform: scale(1.05);
-	}
+[role="feed"] > *:hover > figure > img {
+	transform: scale(1.05);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "launch.css",`
`3`		`- "version": "1.0.28",`
	`3`	`+ "version": "1.0.29",`
`4`	`4`	`"description": "A classless CSS framework built for speed. Style your website later—build it now.",`
`5`	`5`	`"homepage": "https://launch-css.dev",`
`6`	`6`	`"main": "dist/index.css",`
Original file line number	Diff line number	Diff line change
`@@ -41,8 +41,8 @@ article,`
`41`	`41`	`object-fit: cover;`
`42`	`42`	`}`
`43`	`43`	`}`
	`44`	`+}`
`44`	`45`
`45`		`- &:hover > figure > img {`
`46`		`- transform: scale(1.05);`
`47`		`- }`
	`46`	`+[role="feed"] > *:hover > figure > img {`
	`47`	`+ transform: scale(1.05);`
`48`	`48`	`}`