fix(core): update old css variables names

packages/components/package.json

@@ -1,26 +1,22 @@
 {
-  "name": "@mini-strap/components",
-  "version": "0.0.1",
-  "module": "src/components.scss",
-  "type": "module",
-  "scripts": {
-    "ci:publish": "bun publish --production --frozen-lockfile"
-  },
-  "exports": {
-    ".": "./src/components.scss",
-    "./OffCanvas/": {
-      "import": "./src/OffCanvas/",
-      "require": "./src/OffCanvas/"
-    }
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "bun-plugin-dts": "^0.2.3",
-    "bun-style-loader": "^0.4.0",
-    "sass": "^1.79.2",
-    "sass-embedded": "^1.79.1"
-  },
-  "peerDependencies": {
-    "typescript": "^5.0.0"
-  }
+	"name": "@mini-strap/components",
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"ci:publish": "bun publish --production --frozen-lockfile"
+	},
+	"exports": {
+		".": "./src/index.ts",
+		"./navbar/*": "./src/navbar/*"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"bun-plugin-dts": "^0.2.3",
+		"bun-style-loader": "^0.4.0",
+		"sass": "^1.79.2",
+		"sass-embedded": "^1.79.1"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	}
 }

packages/components/src/index.ts

@@ -0,0 +1,7 @@
+import navarHtml from "./navbar/navbar.html";
+
+export const HTMLComponents = {
+	navbar: navarHtml,
+};
+
+export default {};

packages/components/src/navbar/navbar.html

@@ -0,0 +1 @@
+<h1>Hello World!</h1>

packages/components/src/navbar/navbar.scss

@@ -0,0 +1,42 @@
+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);
+}

packages/core/src/_utils.scss

@@ -69,29 +69,29 @@
 }
 
 .msp-hstack {
-  --prj-gap: var(--prj-spacing-3);
+  --msp-gap: var(--msp-spacing-3);
   display: flex;
-  gap: var(--prj-gap);
+  gap: var(--msp-gap);
   align-items: center;
 }
 
 .msp-hstack-reverse {
-  --prj-gap: var(--prj-spacing-3);
+  --msp-gap: var(--msp-spacing-3);
   display: flex;
-  gap: var(--prj-gap);
+  gap: var(--msp-gap);
   align-items: center;
   flex-direction: row-reverse;
 }
 
 .msp-vstack {
-  --prj-gap: var(--prj-spacing-3);
+  --msp-gap: var(--msp-spacing-3);
   display: flex;
-  gap: var(--prj-gap);
+  gap: var(--msp-gap);
   flex-direction: column;
 }
 
 .msp-vstack-reverse {
-  --prj-gap: var(--prj-spacing-3);
+  --msp-gap: var(--msp-spacing-3);
   display: flex;
   flex-direction: column-reverse;
 }
@@ -140,16 +140,16 @@
 }
 
 .msp-grid {
-  --prj-gap: var(--prj-spacing-3);
-  --prj-columns: repeat(3, 1fr);
-  --prj-min-col-width: 150px;
+  --msp-gap: var(--msp-spacing-3);
+  --msp-columns: repeat(3, 1fr);
+  --msp-min-col-width: 150px;
   display: grid;
-  grid-template-columns: var(--prj-columns);
-  gap: var(--prj-gap);
+  grid-template-columns: var(--msp-columns);
+  gap: var(--msp-gap);
 }
 
 @mixin grid-cols($amount) {
-  --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
+  --msp-columns: repeat(#{$amount}, minmax(var(--msp-min-col-width), 1fr));
 }
 
 @for $i from 1 through 12 {
@@ -285,7 +285,7 @@
   }
 
   .msp-gap-#{$name} {
-    --prj-gap: #{$value};
+    --msp-gap: #{$value};
   }
 }
 
@@ -306,11 +306,11 @@
 }
 
 .msp-shadow-1 {
-  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
+  box-shadow: 10px 10px 5px 0px var(--msp-shadow);
 }
 
 .msp-border-radius {
-  border-radius: var(--prj-border-radius);
+  border-radius: var(--msp-border-radius);
 }
 
 @each $index, $variable, $value in $spacings {

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>