feat(website): add html components imports to build script

packages/website/.gitignore

@@ -2,6 +2,7 @@
 # Compiled assets managed by bun
 static/css/**/*
 static/js/**/*
+templates/ext-components/**/*
 
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 

packages/website/_scripts/build.ts

@@ -1,6 +1,10 @@
 import type { BuildConfig, BunPlugin, PluginBuilder } from "bun";
+import { readdir, rm } from "node:fs/promises";
+import { join } from "node:path";
 import type { FileImporter } from "sass";
 
+import { HTMLComponents } from "@mini-strap/components";
+
 const outdir = "./static";
 
 const nodeModuleImporter: FileImporter<"async"> = {
@@ -51,16 +55,42 @@ const assets: BuildConfig[] = [
 		splitting: true,
 		minify: true,
 	},
+
+	{
+		entrypoints: Object.values(HTMLComponents),
+		outdir: "./templates/ext-components",
+		target: "browser",
+		naming: {
+			// default values
+			entry: "[name].[ext]",
+			asset: "[name].[ext]",
+			chunk: "[name]-[hash].[ext]",
+		},
+		// On by default in Bun v1.2+
+		html: true,
+		experimentalCss: true,
+	},
 ];
 
-await Promise.all(
+const out = await Promise.all(
 	assets.map(async (item) => {
 		const result = await Bun.build(item);
 
 		if (!result.success) {
 			throw new AggregateError(result.logs, "Build failed");
 		}
+
+		return result;
 	}),
 );
 
+async function deleteJsFiles(folder: string) {
+	const files = await readdir(folder);
+	const jsFiles = files.filter((file) => file.endsWith(".js"));
+
+	await Promise.all(jsFiles.map((file) => rm(join(folder, file))));
+}
+
+await deleteJsFiles("./templates/ext-components");
+
 console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`);

packages/website/templates/partials/navbar.html

@@ -1,93 +0,0 @@
-<div id="main-navbar" class="pt-1">
-  <nav class="navbar navbar-desktop msp-d-none msp-d-lg-block msp-container">
-    <ul class="msp-list-unstyle msp-hstack">
-      <li class="nav-item">
-        <a class="nav-link" href={link.href}>{link.text}</a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="msp-text-end msp-d-lg-none">
-    <OffCanvasBtn />
-    <OffCanvas>
-    <nav class="navbar navbar-mobile">
-      <ul class="list-unstyle text-start">
-        <li class="nav-item mb-3">
-          <a class="nav-link" href={link.href}>{link.text}</a>
-        </li>
-      </ul>
-    </nav>
-    </OffCanvas>
-  </div>
-</div>
-
-<script>
-  const setActiveLink = () => {
-    const links =
-      document.querySelectorAll < HTMLAnchorElement > (`#main-navbar a`);
-
-    links.forEach((link) => {
-      if (link.pathname === '/' && location.pathname === '/') {
-        link.classList.add('active');
-        return;
-      }
-
-      if (link.pathname === '/' && location.pathname !== '/') {
-        link.classList.remove('active');
-        return;
-      }
-
-      location.pathname.startsWith(link.pathname) ?
-        link.classList.add('active') :
-        link.classList.remove('active');
-    });
-  };
-  // Add active class to the current link
-  document.addEventListener('astro:page-load', setActiveLink, {
-    once: true
-  });
-  document.addEventListener('astro:after-swap', setActiveLink);
-</script>
-
-<style lang="scss">
-  nav {
-    width: 100%;
-  }
-
-  .navbar-desktop ul {
-    width: fit-content;
-    margin-left: auto;
-
-    .nav-item {
-      margin-bottom: 0;
-    }
-  }
-
-  ul {
-    padding: 0;
-  }
-
-  li>a {
-    padding: 0.25rem 0.5rem;
-  }
-
-  a {
-    --boder-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    text-decoration: none;
-
-    transition: background-color 200ms, color 200ms;
-  }
-
-  a.active {
-    border: 1px solid var(--prj-accent-bg);
-  }
-
-  a:hover {
-    --border-color: var(--prj-accent-bg);
-    background-color: var(--prj-accent-bg);
-    color: var(--prj-accent-text);
-    border: 1px solid var(--border-color);
-  }
-</style>