chore(version): v0.1.1

Reviewed-on: #6

.forgejo/workflows/publish.yaml

@@ -0,0 +1,45 @@
+name: Publish package
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+env:
+  NPM_TAG: ${{ github.ref == 'refs/heads/main' && 'latest' || 'next' }}
+
+# Variables reference: https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#about-contexts
+# Syntax reference: https://forgejo.org/docs/latest/user/actions/
+jobs:
+  build_and_publish:
+    runs-on: docker
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Cache Bun dependencies
+        id: cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Setup Bun
+        id: "setup_bun"
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install dependencies
+        run: "bun install"
+
+      - name: Bump version and publish
+        uses: https://github.com/cocogitto/cocogitto-action@v3.10
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.NPM_TOKEN_FORGEJO }}
+        with:
+          release: true
+          check-latest-tag-only: true
+          git-user: 'Cog Bot'
+          git-user-email: 'cog@alecodes.page'

CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
+
+- - -
+## v0.1.1 - 2025-02-14
+### Package updates
+- @mini-strap/core bumped to @mini-strap/core-v0.1.2
+### Global changes
+#### Miscellaneous Chores
+- update build script - (812e55e) - aleidk
+
+- - -
+
+## v0.1.0 - 2024-12-30
+### Package updates
+- @mini-strap/core bumped to @mini-strap/core-v0.1.0
+- @mini-strap/components bumped to @mini-strap/components-v0.1.0
+- @mini-strap/website bumped to @mini-strap/website-v0.1.0
+### Global changes
+#### Bug Fixes
+- add dummy publish script for website - (20cadc8) - aleidk
+#### Build system
+- fix build setup - (8442bbb) - aleidk
+#### Features
+- **(core)** add styles for vanilla form elements - (e754e40) - aleidk
+- **(website)** add build script for frontend dependencies - (698294c) - aleidk
+#### Miscellaneous Chores
+- **(website)** add docosaurus as SSG - (85660ac) - Alexander Navarro
+- **(website)** migrate from docosaurus to zola SSG - (7e8dc4e) - aleidk
+- setup ci workflow - (c1c1cdb) - aleidk
+- allow merge commits - (e75f0bb) - aleidk
+
+- - -
+
+Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto).

bunfig.toml

@@ -0,0 +1,4 @@
+[install.scopes]
+
+"@alecodes" = { token = "$NPM_REGISTRY_TOKEN", url = "https://git.alecodes.page/api/packages/alecodes/npm/" }
+"@mini-strap" = { token = "$NPM_REGISTRY_TOKEN", url = "https://git.alecodes.page/api/packages/alecodes/npm/" }

cog.toml

@@ -0,0 +1,32 @@
+from_latest_tag = true
+ignore_merge_commits = true
+disable_changelog = false
+disable_bump_commit = false
+tag_prefix = "v"
+generate_mono_repository_global_tag = true
+branch_whitelist = []
+skip_ci = "[skip ci]"
+skip_untracked = false
+pre_bump_hooks = []
+post_bump_hooks = ["git push", "git push origin {{version_tag}}"]
+pre_package_bump_hooks = [
+  "echo 'bump package {{package}} to {{version}}'",
+  "sed -E -i 's/(\"version\":) \"[0-9.]{5}\"/\\1 \"{{version}}\"/gi' package.json",
+  "bun run ci:publish",
+]
+post_package_bump_hooks = ["git push", "git push origin {{version_tag}}"]
+
+[git_hooks]
+
+[commit_types]
+
+[changelog]
+path = "CHANGELOG.md"
+authors = []
+
+[bump_profiles]
+
+[packages]
+"@mini-strap/core" = { path = "packages/core" }
+"@mini-strap/components" = { path = "packages/components" }
+"@mini-strap/website" = { path = "packages/website", public_api = false }

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "mini-strap",
+  "name": "@alecodes/mini-strap",
+  "version": "0.0.1",
   "module": "index.ts",
+  "private": true,
   "devDependencies": {
     "@eslint/js": "^9.10.0",
     "@types/bun": "latest",
@@ -14,8 +16,12 @@
     "typescript": "^5.0.0"
   },
   "scripts": {
-    "dev": "bun --filter '*' dev"
+    "dev": "bun --filter '*' dev",
+    "ci:publish": "bun --filter '**/core' ci:publish",
+    "bump": "cog bump --auto --skip-untracked"
   },
   "type": "module",
-  "workspaces": ["packages/*"]
+  "workspaces": [
+    "packages/*"
+  ]
 }

packages/components/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
+
+- - -
+## @mini-strap/components-v0.1.0 - 2024-12-30
+#### Bug Fixes
+- **(components)** replace initialization of components to prevent overrides - (8cbd097) - aleidk
+- **(components)** properly export html components - (48cafe8) - aleidk
+#### Features
+- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk
+- **(components)** add offcanvas component - (c47a2ef) - aleidk
+- **(components)** add the accordion component - (e0ed5a5) - aleidk
+- **(components)** add basic components - (d4a1114) - aleidk
+- **(core)** add styles for vanilla form elements - (e754e40) - aleidk
+#### Miscellaneous Chores
+- setup ci workflow - (c1c1cdb) - aleidk
+
+- - -
+
+Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto).

packages/components/build.ts

@@ -0,0 +1,32 @@
+import { type BunPlugin } from "bun";
+import dts from "bun-plugin-dts";
+import styleLoader from "bun-style-loader";
+import * as sass from "sass";
+
+const style: BunPlugin = {
+  name: "Sass Loader",
+  setup(build) {
+    console.log("Running SASS Plugin...");
+    build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
+      const contents = sass.compile(path);
+      const css = contents.css;
+
+      return {
+        loader: "file",
+        contents: css,
+      };
+    });
+  },
+};
+
+const result = await Bun.build({
+  outdir: "dist",
+  publicPath: "public",
+  format: "esm",
+  plugins: [style],
+  entrypoints: ["./src/components.scss"],
+});
+
+if (!result.success) {
+  throw new AggregateError(result.logs, "Build failed");
+}

packages/components/package.json

@@ -1,12 +1,24 @@
 {
-  "name": "mini-strap-components",
-  "module": "src/components.scss",
+	"name": "@mini-strap/components",
+	"version": "0.1.0",
 	"type": "module",
+	"scripts": {
+		"ci:publish": "bun publish --production --frozen-lockfile"
+	},
+	"exports": {
+		".": "./src/index.ts",
+		"./navbar/*": "./src/navbar/*",
+		"./accordion/*": "./src/accordion/*",
+		"./offcanvas/*": "./src/offcanvas/*"
+	},
 	"devDependencies": {
-    "@types/bun": "latest"
+		"@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/accordion/accordion.scss

@@ -0,0 +1,41 @@
+.msp-accordion {
+  // background-color: red;
+
+  &-item.msp-accordion-show {
+    .msp-accordion-header::after {
+      transform: rotate(180deg);
+    }
+  }
+  &-header {
+    cursor: pointer;
+    position: relative;
+
+    &::after {
+      display: inline-block;
+      position: absolute;
+      top: 50%;
+      right: 0;
+
+      transform: rotate(0deg);
+      translate: 110% -50%;
+
+      content: "";
+      width: 1em;
+      height: 1em;
+      // TODO: change SVG of the arrow
+      background: url('data:image/svg+xml;utf8,<svg fill="%23000000" viewBox="0 0 24 24" id="down-arrow-circle" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path id="secondary" d="M12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Zm2.83,10.5-2.14,3.12a.82.82,0,0,1-1.38,0L9.17,13.5A1,1,0,0,1,9.86,12h4.28A1,1,0,0,1,14.83,13.5Z" style="fill: %232ca9bc; stroke-width: 2;"></path><path id="primary" d="M12,7v5m.69,4.63,2.14-3.13a1,1,0,0,0-.69-1.5H9.86a1,1,0,0,0-.69,1.5l2.14,3.12A.82.82,0,0,0,12.69,16.63ZM12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Z" style="fill: none; stroke: %23000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>')
+        no-repeat center center;
+      background-size: contain;
+
+      transition: transform 0.5s ease;
+    }
+  }
+
+  &-collapse {
+    overflow: hidden;
+    height: 0;
+    display: none;
+
+    transition: height 0.5s ease;
+  }
+}

packages/components/src/accordion/index.ts

@@ -0,0 +1,53 @@
+import { qs, qsa } from "../utils";
+
+enum AccordionState {
+	Open = 1,
+	Closed = 2,
+}
+
+function waitAndHideCollapse(e: TransitionEvent) {
+	if (!e.target) return;
+
+	const el = e.target as HTMLElement;
+	el.style.display = "none";
+	el.removeEventListener("transitionend", waitAndHideCollapse);
+}
+
+function toggleAccordion(item: HTMLElement, state: AccordionState) {
+	const collapse = qs(".msp-accordion-collapse", item);
+
+	if (!collapse) throw new Error("Collapse element not found");
+
+	if (state === AccordionState.Closed) {
+		collapse.style.height = "0px";
+		collapse
+			.closest(".msp-accordion-item")
+			?.classList.remove("msp-accordion-show");
+
+		collapse.addEventListener("transitionend", waitAndHideCollapse);
+	} else if (state === AccordionState.Open) {
+		collapse.style.display = "block";
+
+		const height = qs(".msp-accordion-content", collapse)?.offsetHeight;
+		if (height == null) throw new Error("Content element not found");
+
+		collapse.style.height = `${height}px`;
+		collapse
+			.closest(".msp-accordion-item")
+			?.classList.add("msp-accordion-show");
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	qsa(".msp-accordion-item").forEach((item) => {
+		qs(".msp-accordion-header", item)?.addEventListener("click", (e) => {
+			e.preventDefault();
+			toggleAccordion(
+				item,
+				item.classList.contains("msp-accordion-show")
+					? AccordionState.Closed
+					: AccordionState.Open,
+			);
+		});
+	});
+});

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,34 @@
+{% macro navbar() %}
+  <nav class="msp-navbar msp-navbar-desktop msp-d-none msp-d-lg-block msp-container">
+    <ul class="msp-list-unstyle msp-hstack">
+      {% for i in range(end=3) %}{% endfor %}
+    </ul>
+  </nav>
+{% endmacro navbar %}
+
+
+{% macro navbar_item(href, label) %}
+  <li class="msp-nav-item">
+    <a class="msp-nav-link active" href="{{ href }}">{{ label }}</a>
+  </li>
+{% endmacro navbar_item %}
+
+<div class="msp-text-end msp-d-lg-none">
+  <OffCanvasBtn />
+  <OffCanvas>
+  <nav class="msp-navbar msp-navbar-mobile">
+    <ul class="msp-list-unstyle msp-text-start">
+      {
+      links.map((link) => (
+      <li class="msp-nav-item msp-mb-3">
+        <a class="msp-nav-link" href={link.href}>{link.text}</a>
+      </li>
+      ))
+      }
+      <li class="msp-nav-item mb-3">
+        <LangSelector />
+      </li>
+    </ul>
+  </nav>
+  </OffCanvas>
+</div>

packages/components/src/navbar/navbar.scss

@@ -0,0 +1,47 @@
+nav.msp-navbar {
+  width: 100%;
+
+  ul {
+    padding: 0;
+
+    li {
+      margin-bottom: 0;
+      height: 100%;
+    }
+  }
+
+  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(--msp-color-bg-accent);
+  }
+
+  a:hover {
+    --border-color: var(--msp-color-bg-accent);
+    background-color: var(--msp-color-bg-accent);
+    color: var(--msp-color-text-accent);
+    border: 1px solid var(--border-color);
+  }
+}
+
+.msp-navbar-desktop ul {
+  width: fit-content;
+  margin-left: auto;
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+}

packages/components/src/offcanvas/index.ts

@@ -0,0 +1,21 @@
+import { qs, qsa } from "../utils";
+
+document.addEventListener("DOMContentLoaded", () => {
+	qsa(".msp-offcanvas-toggle").forEach((item) => {
+		item.addEventListener("click", () => {
+			const target = item.dataset.mspTarget;
+
+			if (!target) {
+				throw new Error("No target provided");
+			}
+
+			const targetElement = qs(target);
+
+			if (!targetElement) {
+				throw new Error("No target found");
+			}
+
+			targetElement.classList.toggle("show");
+		});
+	});
+});

packages/components/src/offcanvas/style.scss

@@ -0,0 +1,89 @@
+@use "@mini-strap/core/mixins";
+
+:root {
+  --msp-offcanvas-anim-duration: var(--msp-anim-duration-md);
+  --msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
+
+  --msp-offcanvas-width: 15ch;
+}
+
+.msp-offcanvas {
+  position: fixed;
+  width: var(--msp-offcanvas-width);
+  height: 100vh;
+  top: 0;
+  left: -100%;
+
+  transition: left var(--msp-offcanvas-anim-duration)
+    var(--msp-offcanvas-anim-curve-out);
+
+  &-content {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+
+    background-color: var(--msp-color-bg-surface-1);
+
+    padding: var(--msp-spacing-3);
+
+    &-body,
+    &-header,
+    &-footer {
+      position: relative;
+      z-index: 5;
+    }
+  }
+
+  &.show {
+    left: 0;
+
+    transition: left var(--msp-offcanvas-anim-duration)
+      var(--msp-offcanvas-anim-curve-in);
+
+    .msp-offcanvas-backdrop {
+      opacity: 40%;
+      left: 0;
+
+      transition:
+        opacity var(--msp-offcanvas-anim-duration)
+          var(--msp-offcanvas-anim-curve-in),
+        left 0s linear;
+    }
+  }
+
+  .msp-offcanvas-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    z-index: 4;
+
+    background-color: rgba(0, 0, 0);
+    opacity: 0;
+
+    top: 0;
+    left: -100%;
+    // Delay the width transition on remove so it's desn't appear to be sliding or to be not working
+    transition:
+      opacity var(--msp-offcanvas-anim-duration)
+        var(--msp-offcanvas-anim-curve-out),
+      left 0s linear var(--msp-offcanvas-anim-duration);
+  }
+}
+
+@include mixins.responsive using($breakpoint, $size) {
+  .msp-offcanvas.msp-offcanvas-#{$breakpoint} {
+    width: var(--msp-offcanvas-width);
+    left: 0;
+
+    & ~ * {
+      margin-left: var(--msp-offcanvas-width);
+    }
+
+    .msp-offcanvas-backdrop {
+      display: none !important;
+    }
+  }
+}

packages/components/src/offcanvas/template.html

@@ -0,0 +1,51 @@
+<div id="mobile-nav" class="off-canvas">
+  <div class="off-canvas-content" transition:persist>
+    <button class="off-canvas-toggle" data-target="#mobile-nav">
+      <svg
+        width="40px"
+        height="40px"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#ffffff"
+      >
+        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+        <g
+          id="SVGRepo_tracerCarrier"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></g>
+        <g id="SVGRepo_iconCarrier">
+          <path
+            fill="#cad3f5"
+            d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+          ></path>
+        </g>
+      </svg>
+    </button>
+
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+
+  <div
+    class="off-canvas-backdrop off-canvas-toggle"
+    data-target="#mobile-nav"
+  ></div>
+</div>
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    document.querySelectorAll <
+      HTMLElement >
+      ".off-canvas-toggle".forEach((btn) =>
+        btn.addEventListener("click", () => {
+          const { target } = btn.dataset;
+
+          if (!target) return;
+
+          document.querySelector(target)?.classList.toggle("active");
+        }),
+      );
+  });
+</script>

packages/components/src/utils.ts

@@ -0,0 +1,13 @@
+export const qs = (
+	query: string,
+	el: Element | Document = document,
+): HTMLElement | null => {
+	return el.querySelector(query);
+};
+
+export const qsa = (
+	query: string,
+	el: Element | Document = document,
+): NodeListOf<HTMLElement> => {
+	return el.querySelectorAll(query);
+};

packages/components/tsconfig.json

@@ -23,5 +23,8 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
+
+    // library configuration
+    // "baseUrl": "./src/"
   }
 }

packages/core/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
+
+- - -
+## @mini-strap/core-v0.1.2 - 2025-02-14
+#### Bug Fixes
+- build binary of core - (e80fa61) - aleidk
+
+- - -
+
+## @mini-strap/core-v0.1.1 - 2025-02-14
+#### Miscellaneous Chores
+- update build script - (812e55e) - aleidk
+
+- - -
+
+## @mini-strap/core-v0.1.0 - 2024-12-30
+#### Bug Fixes
+- **(core)** update old css variables names - (9c6d935) - aleidk
+- remove deprecation warnings from sass - (b452baa) - aleidk
+#### Build system
+- fix build setup - (8442bbb) - aleidk
+#### Features
+- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk
+- **(components)** add offcanvas component - (c47a2ef) - aleidk
+- **(components)** add basic components - (d4a1114) - aleidk
+- **(website)** add offcanvas documentation - (c0a20f8) - aleidk
+- **(website)** add build script for frontend dependencies - (698294c) - aleidk
+#### Miscellaneous Chores
+- setup ci workflow - (c1c1cdb) - aleidk
+
+- - -
+
+## v0.0.0 - 2024-12-30
+#### Features
+- **(core)** add styles for vanilla tables - (cf0b401) - aleidk
+- **(core)** add styles for vanilla form elements - (e754e40) - aleidk
+
+- - -
+
+Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto).

packages/core/build.ts

@@ -0,0 +1,99 @@
+#!/usr/bin/env bun
+
+import type { BuildConfig, BunPlugin, PluginBuilder } from "bun";
+import { parseArgs } from "node:util";
+import type { FileImporter } from "sass";
+
+const { values, positionals } = parseArgs({
+	args: Bun.argv,
+	options: {
+		production: {
+			type: "boolean",
+			short: "p",
+			default: true,
+		},
+		filter: {
+			type: "string",
+			short: "f",
+			default: "all",
+		},
+	},
+	strict: true,
+	allowPositionals: true,
+});
+
+const outdir = positionals.at(2);
+
+if (!outdir) {
+	throw new Error("No outdir provided!");
+}
+
+const nodeModuleImporter: FileImporter<"async"> = {
+	findFileUrl(url) {
+		if (url.startsWith("@")) {
+			return new URL(import.meta.resolve(url));
+		}
+
+		return null;
+	},
+};
+
+const sassPlugin: BunPlugin = {
+	name: "Sass Loader",
+	async setup(build: PluginBuilder) {
+		const sass = await import("sass");
+		build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
+			// read and compile it with the sass compiler
+			const result = await sass.compileAsync(path, {
+				importers: [nodeModuleImporter],
+			});
+
+			return {
+				loader: "css",
+				contents: result.css,
+			};
+		});
+	},
+};
+
+const assets: BuildConfig[] = [];
+
+const filter = values.filter ?? "all";
+
+if (["all", "sass"].includes(filter)) {
+	assets.push({
+		entrypoints: ["./src/style.scss"],
+		outdir: `${outdir}/css`,
+		naming: "[name].css",
+		plugins: [sassPlugin],
+		minify: values.production,
+
+		// On by default in Bun v1.2+
+		html: true,
+		experimentalCss: true,
+	});
+}
+
+// if (["all", "js", "ts"].includes(filter)) {
+// 	assets.push({
+// 		entrypoints: ["./js/index.ts"],
+// 		outdir: `${outdir}/js`,
+// 		target: "browser",
+// 		splitting: values.production,
+// 		minify: values.production,
+// 	});
+// }
+
+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;
+	}),
+);
+
+console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`);

packages/core/package.json

@@ -1,12 +1,23 @@
 {
-  "name": "mini-strap-core",
-  "module": "src/style.scss",
+	"name": "@mini-strap/core",
+	"version": "0.1.2",
 	"type": "module",
+	"exports": {
+		".": "./src/style.scss",
+		"./mixins": "./src/_mixins.scss"
+	},
+	"bin": {
+		"@mini-strap/core": "build.ts"
+	},
+	"scripts": {
+		"build": "bun sass --style compressed src/style.scss dist/style.css",
+		"ci:publish": "bun run build && bun publish --production --frozen-lockfile --silent"
+	},
 	"devDependencies": {
-    "@types/bun": "latest"
+		"@types/bun": "latest",
+		"sass": "^1.83.0"
 	},
 	"peerDependencies": {
 		"typescript": "^5.0.0"
 	}
 }
-

packages/core/src/_reset.scss

@@ -155,33 +155,3 @@
 :where(sup) {
   top: -0.5em;
 }
-
-// ── Other ───────────────────────────────────────────────────────────────
-
-:where(a) {
-  background-color: transparent;
-}
-
-:where(abbr[title]) {
-  text-decoration: underline dotted;
-}
-
-:where(code, kbd, samp, pre) {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-:where(sub, sup) {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-:where(sub) {
-  bottom: -0.25em;
-}
-
-:where(sup) {
-  top: -0.5em;
-}

packages/core/src/_tokens.scss

@@ -1,11 +1,13 @@
 @use "sass:color";
+@use "sass:map";
+@use "colors";
 
 /* Using catppuccin for now, make a theme switcher later */
 @use "../themes/catppuccin/catppuccin";
 
 @function getColor($color) {
-  $ctp-theme: map-get(catppuccin.$palette, "macchiato");
-  @return map-get($ctp-theme, $color);
+  $ctp-theme: map.get(catppuccin.$palette, "macchiato");
+  @return map.get($ctp-theme, $color);
 }
 
 /*
@@ -49,12 +51,15 @@ $msp-colors: (
   "--msp-color-bg": #{getColor("mantle")},
   "--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
   "--msp-color-bg-surface-1": #{getColor("base")},
-  "--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)},
+  "--msp-color-bg-surface-2": #{color.adjust(
+      getColor("surface0"),
+      $lightness: -2%
+    )},
   "--msp-color-bg-surface-3": #{getColor("surface1")},
 
   "--msp-color-bg-accent": #{getColor("teal")},
-  "--msp-color-bg-primary": #{getColor("teal")},
-  "--msp-color-bg-secondary": #{getColor("mauve")},
+  "--msp-color-bg-primary": #{getColor("mauve")},
+  "--msp-color-bg-secondary": #{getColor("lavender")},
   "--msp-color-bg-danger": #{getColor("red")},
   "--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)},
   "--msp-color-bg-input": #{getColor("text")},
@@ -86,6 +91,12 @@ $msp-colors: (
   "--msp-color-transparent": transparent,
 );
 
+$anim: (
+  "--msp-anim-duration-sm": 0.4s,
+  "--msp-anim-duration-md": 0.8s,
+  "--msp-anim-duration-lg": 1s,
+);
+
 // Native CSS Variables to allow overridings and usage in external stylesheets
 :root {
   @each $variable, $value in $msp-colors {
@@ -96,6 +107,10 @@ $msp-colors: (
     #{$variable}: #{$value};
   }
 
+  @each $variable, $value in $anim {
+    #{$variable}: #{$value};
+  }
+
   // ── Borders ─────────────────────────────────────────────────────────────
   --msp-border-width: 1px;
   --msp-border-color: var(--msp-color-text-transparent);

packages/core/src/_utils.scss

@@ -1,5 +1,6 @@
 @use "./tokens" as *;
 @use "./mixins";
+@use "sass:math";
 
 .msp-position-fixed {
   position: fixed;
@@ -68,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;
 }
@@ -122,10 +123,18 @@
   align-items: center;
 }
 
+.msp-justify-content-start {
+  justify-content: start !important;
+}
+
 .msp-justify-content-center {
   justify-content: center !important;
 }
 
+.msp-justify-content-end {
+  justify-content: end !important;
+}
+
 .msp-justify-content-between {
   justify-content: space-between !important;
 }
@@ -139,16 +148,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 {
@@ -214,20 +223,20 @@
 }
 @for $i from 0 through 100 {
   .msp-w-#{$i} {
-    width: percentage(calc($i / 100));
+    width: math.percentage(calc($i / 100));
   }
   .msp-h-#{$i} {
-    height: percentage(calc($i / 100));
+    height: math.percentage(calc($i / 100));
   }
 }
 
 @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
   .msp-w-#{$breakpoint}-#{$index} {
-    width: percentage(calc($index / 100));
+    width: math.percentage(calc($index / 100));
   }
 
   .msp-h-#{$breakpoint}-#{$index} {
-    height: percentage(calc($index / 100));
+    height: math.percentage(calc($index / 100));
   }
 }
 
@@ -284,7 +293,7 @@
   }
 
   .msp-gap-#{$name} {
-    --prj-gap: #{$value};
+    --msp-gap: #{$value};
   }
 }
 
@@ -305,11 +314,17 @@
 }
 
 .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 {
+  .msp-border-#{$index} {
+    border: #{$index}px var(--msp-border-style) var(--msp-border-color);
+  }
 }
 
 .msp-text-none {

packages/core/src/components/form.scss

@@ -2,6 +2,7 @@
 @use "../mixins";
 @use "sass:color";
 @use "sass:string";
+@use "sass:map";
 
 fieldset:not(.msp-fieldset-border) {
   min-width: 0;
@@ -72,7 +73,7 @@ input[type="checkbox"] {
     background-color: var(--msp-color-bg-checkbox);
     border-color: var(--msp-color-bg-checkbox);
 
-    $stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
+    $stroke-color: "%23#{string.slice(map.get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
     --msp-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
   }
 }
@@ -106,7 +107,7 @@ input[type="radio"] {
     background-color: var(--msp-color-bg-checkbox);
     border-color: var(--msp-color-bg-checkbox);
 
-    $fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
+    $fill-color: "%23#{string.slice(map.get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
     --msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e");
   }
 }

packages/core/src/style.scss

@@ -95,9 +95,11 @@ ul {
   /* Make the marker position is inside the container */
   list-style-position: inside;
   margin: 0;
+  margin-bottom: var(--msp-spacing-2);
 
   ul {
     margin-left: var(--msp-spacing-3);
+    margin-bottom: 0;
   }
 }
 
@@ -126,3 +128,10 @@ video.respect-height {
 li:not(:last-child) {
   margin-bottom: var(--msp-spacing-1);
 }
+
+:where(code, kbd, samp, pre):not([data-lang]) {
+  background-color: var(--msp-color-bg-surface-2);
+  padding: 0 var(--msp-spacing-1);
+  border-radius: var(--msp-border-radius);
+  white-space: nowrap;
+}

packages/website/.gitignore

@@ -1,24 +1,181 @@
+
+# Compiled assets managed by bun
+static/css/**/*
+static/js/**/*
+templates/ext-components/**/*
+
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
 # Logs
+
 logs
-*.log
-npm-debug.log*
+_.log
+npm-debug.log_
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 lerna-debug.log*
+.pnpm-debug.log*
 
-node_modules
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
 dist
-dist-ssr
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
 .idea
+
+# Finder (MacOS) folder config
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

packages/website/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
+
+- - -
+## @mini-strap/website-v0.1.0 - 2024-12-30
+#### Bug Fixes
+- **(components)** replace initialization of components to prevent overrides - (8cbd097) - aleidk
+- add dummy publish script for website - (20cadc8) - aleidk
+#### Build system
+- fix build setup - (8442bbb) - aleidk
+#### Features
+- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk
+- **(components)** add offcanvas component - (c47a2ef) - aleidk
+- **(components)** add the accordion component - (e0ed5a5) - aleidk
+- **(components)** add basic components - (d4a1114) - aleidk
+- **(website)** add accordion documentation - (319d56d) - aleidk
+- **(website)** add offcanvas documentation - (c0a20f8) - aleidk
+- **(website)** add content structure files - (7af58fe) - aleidk
+- **(website)** add html components imports to build script - (e9db7de) - aleidk
+- **(website)** add build script for frontend dependencies - (698294c) - aleidk
+#### Miscellaneous Chores
+- **(website)** migrate from docosaurus to zola SSG - (7e8dc4e) - aleidk
+- **(website)** add docosaurus as SSG - (85660ac) - Alexander Navarro
+- setup ci workflow - (c1c1cdb) - aleidk
+
+- - -
+
+## v0.0.0 - 2024-12-30
+#### Features
+- **(core)** add styles for vanilla tables - (cf0b401) - aleidk
+- **(core)** add styles for vanilla form elements - (e754e40) - aleidk
+
+- - -
+
+Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto).

packages/website/README.md

@@ -0,0 +1,15 @@
+# website
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.40. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

packages/website/_scripts/build.ts

@@ -0,0 +1,128 @@
+import type { BuildConfig, BunPlugin, PluginBuilder } from "bun";
+import { parseArgs } from "node:util";
+import { readdir, rm } from "node:fs/promises";
+import { join } from "node:path";
+import type { FileImporter } from "sass";
+
+import { HTMLComponents } from "@mini-strap/components";
+
+const { values } = parseArgs({
+	args: Bun.argv,
+	options: {
+		production: {
+			type: "boolean",
+			short: "p",
+			default: false,
+		},
+		filter: {
+			type: "string",
+			short: "f",
+			default: "all",
+		},
+		output: {
+			type: "string",
+			short: "o",
+			default: "static",
+		},
+	},
+	strict: true,
+	allowPositionals: true,
+});
+
+const outdir = values.output ?? "./static";
+
+const nodeModuleImporter: FileImporter<"async"> = {
+	findFileUrl(url) {
+		if (url.startsWith("@")) {
+			return new URL(import.meta.resolve(url));
+		}
+
+		return null;
+	},
+};
+
+const sassPlugin: BunPlugin = {
+	name: "Sass Loader",
+	async setup(build: PluginBuilder) {
+		const sass = await import("sass");
+		build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
+			// read and compile it with the sass compiler
+			const result = await sass.compileAsync(path, {
+				importers: [nodeModuleImporter],
+			});
+
+			return {
+				loader: "css",
+				contents: result.css,
+			};
+		});
+	},
+};
+
+const assets: BuildConfig[] = [];
+
+const filter = values.filter ?? "all";
+
+if (["all", "sass"].includes(filter)) {
+	assets.push({
+		entrypoints: ["./sass/style.scss"],
+		outdir: `${outdir}/css`,
+		naming: "[name].css",
+		plugins: [sassPlugin],
+		minify: values.production,
+
+		// On by default in Bun v1.2+
+		html: true,
+		experimentalCss: true,
+	});
+}
+
+if (["all", "js", "ts"].includes(filter)) {
+	assets.push({
+		entrypoints: ["./js/index.ts"],
+		outdir: `${outdir}/js`,
+		target: "browser",
+		splitting: values.production,
+		minify: values.production,
+	});
+}
+
+if (["all", "html"].includes(filter)) {
+	assets.push({
+		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,
+	});
+}
+
+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/_scripts/link-dependencies.ts

@@ -0,0 +1,45 @@
+#!/usr/bin/env bun
+
+import { fileURLToPath } from "url";
+import fs from "node:fs/promises";
+import { basename, normalize } from "node:path";
+
+function ignore_exist_error(fn: (...args: any[]) => Promise<void>) {
+	return async (...args: any[]) => {
+		try {
+			await fn(...args);
+		} catch (error: any) {
+			if (error.code !== "EEXIST") {
+				throw error; // Re-throw the error if it's not "file exists"
+			}
+		}
+	};
+}
+
+const mkdir = ignore_exist_error(fs.mkdir);
+const symlink = ignore_exist_error(fs.symlink);
+
+const def = await Bun.file("package.json").json();
+
+const dependencies = Object.keys(def.dependencies);
+
+for (const pkg of dependencies) {
+	const path = normalize(fileURLToPath(import.meta.resolve(pkg)));
+	const file = Bun.file(import.meta.resolve(pkg));
+	const type = file.type.split(";").at(0);
+	const filename = basename(path);
+
+	switch (type) {
+		case "text/x-scss":
+			await mkdir(`sass/${pkg}`, { recursive: true });
+			await symlink(path, `sass/${pkg}/${filename}`);
+			console.log(`${path} -> sass/${pkg}/${filename}`);
+			break;
+		case "text/javascript":
+			// console.log("es JS")
+			break;
+	}
+}
+
+console.log();
+console.log("Dependencies linked!");

packages/website/config.toml

@@ -0,0 +1,22 @@
+# The URL the site will be built for
+base_url = "https://mini-strap.alecodes.page"
+
+output_dir = "dist"
+
+# Managed by bun
+compile_sass = false
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = true
+
+taxonomies = [
+  { name = "section", feed = true }
+]
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here

packages/website/content/_index.md

@@ -0,0 +1,5 @@
++++
+
++++
+
+# mini-strap Documentation

packages/website/content/components/_index.md

@@ -0,0 +1,6 @@
++++
++++
+
+# Components
+
+Complex elements that require custom javascript to run

packages/website/content/components/accordion.md

@@ -0,0 +1,41 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# Accordion
+
+## Basic
+
+The accordion component allows to hide and show content in the page. The
+accordion is composed of the following elements:
+
+- `msp-accordion`: the main container that encapsulates multiple toggable elements.
+- `msp-accordion-item`: a single toggable element.
+- `msp-accordion-header`: this element acts as the header and responds to the `onclick` event to toggle the content.
+- `msp-accordion-collapse`: container for the content, needed to help with dynamic height and transitions.
+- `msp-accordion-content`: the content of the accordion.
+
+### Example:
+
+```html
+<ul class="msp-list-unstyle msp-accordion">
+  <li class="msp-accordion-item">
+    <a class="msp-accordion-header" href="#">ITEM 001</a>
+    <div class="msp-accordion-collapse">
+      <div class="msp-list-unstyle msp-accordion-content">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
+      </div>
+    </div>
+  </li>
+
+  <li class="msp-accordion-item">
+    <a class="msp-accordion-header" href="#">ITEM 002</a>
+    <div class="msp-accordion-collapse">
+      <div class="msp-list-unstyle msp-accordion-content">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
+      </div>
+    </div>
+  </li>
+</ul>
+```

packages/website/content/components/dropdown.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# dropdown.md

packages/website/content/components/modal.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# modal.md

packages/website/content/components/offcanvas.md

@@ -0,0 +1,76 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# Offcanvas
+
+## Basic
+
+The offcanvas component serves as a sidebar that is hidden out of view until is
+toggled via an interactive element. The offcanvas is composed of the following
+elements:
+
+- `msp-offcanvas`: the main container.
+- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more.
+- `msp-offcanvas-content`: the container for the content.
+- `msp-offcanvas-header`: top section of the content.
+- `msp-offcanvas-body`: middle section of the content.
+- `msp-offcanvas-footer`: bottom section of the content.
+
+To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an
+element and attach the `data-msp-target` attribute.
+
+### Example:
+
+```html
+<body>
+  <aside id="main-offcanvas" class="msp-offcanvas">
+    <div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
+
+    <div class="msp-offcanvas-content">
+      <div class="msp-offcanvas-body">
+        ...
+      </div>
+    </div>
+  </aside>
+
+  <main>
+    <nav>
+      <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
+    </nav>
+    <section>...</section>
+  </main>
+</body>
+```
+
+## Responsive
+
+It's possible to have the sidebar always visible and only hide the offcanvas
+when the viewport is below the brakepoint. For this add the class
+`msp-offcanvas-[breakpoint]`.
+
+Note that the toggle and backdrop are disabled when the viewport is above the brakepoint.
+
+### Example
+
+```html
+<body>
+  <aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
+    <div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
+
+    <div class="msp-offcanvas-content">
+      <div class="msp-offcanvas-body">
+        ...
+      </div>
+    </div>
+  </aside>
+
+  <main>
+    <nav>
+      <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
+    </nav>
+    <section>...</section>
+  </main>
+</body>
+```

packages/website/content/components/tabs.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# tabs.md

packages/website/content/components/tooltip.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# tooltip.md

packages/website/content/content/_index.md

@@ -0,0 +1,4 @@
++++
++++
+
+# Components

packages/website/content/content/fonts.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Content"]
++++
+
+# Buttons

packages/website/content/content/forms.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Content"]
++++
+
+# Buttons

packages/website/content/content/image.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Content"]
++++
+
+# Buttons

packages/website/content/content/table.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Content"]
++++
+
+# Buttons

packages/website/content/elements/_index.md

@@ -0,0 +1,4 @@
++++
++++
+
+foo

packages/website/content/elements/button.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Elements"]
++++
+
+# Buttons

packages/website/content/elements/card.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Elements"]
++++
+
+# Buttons

packages/website/content/elements/links.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Elements"]
++++
+
+# Buttons

packages/website/content/elements/list.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Elements"]
++++
+
+# Buttons

packages/website/content/elements/navbar.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Elements"]
++++
+
+# Buttons

packages/website/content/elements/pagination.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Elements"]
++++
+
+# Buttons

packages/website/content/layout/_index.md

@@ -0,0 +1,4 @@
++++
++++
+
+# Components

packages/website/content/layout/container.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Layout"]
++++
+
+# Buttons

packages/website/content/layout/display.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Layout"]
++++
+
+# Buttons

packages/website/content/layout/grid.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Layout"]
++++
+
+# Buttons

packages/website/content/layout/position.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Layout"]
++++
+
+# Buttons

packages/website/content/layout/responsive-helpers.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Layout"]
++++
+
+# Buttons

packages/website/content/layout/spacing.md

@@ -0,0 +1,6 @@
++++
+[taxonomies]
+section = ["Layout"]
++++
+
+# Buttons

packages/website/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

packages/website/js/index.ts

@@ -0,0 +1,3 @@
+import "@mini-strap/components/accordion/index.ts";
+import "@mini-strap/components/offcanvas/index.ts";
+console.log("hello world!");

packages/website/package.json

@@ -1,20 +1,22 @@
 {
-  "name": "mini-strap-website",
-  "private": true,
-  "version": "0.0.0",
+	"name": "website",
 	"type": "module",
 	"scripts": {
-    "dev": "vite --port 3000",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "sass-embedded": "^1.78.0",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.1"
+		"link-dependencies": "bun run _scripts/link-dependencies.ts",
+		"prebuild": "bun run _scripts/build.ts",
+		"watch-deps": "bun run --watch _scripts/build.ts",
+		"dev": "zola serve --port 3000 --fast --open",
+		"ci:publish": "echo 'dummy publish script'"
 	},
 	"dependencies": {
-    "handlebars": "^4.7.8",
-    "mini-strap-core": "workspace:*"
+		"@mini-strap/core": "workspace:*",
+		"@mini-strap/components": "workspace:*"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"sass": "^1.83.0"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
 	}
 }

packages/website/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/website/sass/@mini-strap/core/style.scss

@@ -0,0 +1 @@
+/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss

packages/website/sass/style.scss

@@ -0,0 +1,8 @@
+@use "@mini-strap/core";
+@use "@mini-strap/components/navbar/navbar.scss";
+@use "@mini-strap/components/accordion/accordion.scss";
+@use "@mini-strap/components/offcanvas/style.scss";
+
+main {
+  padding: var(--msp-spacing-3);
+}

packages/website/src/main.ts

@@ -1,16 +0,0 @@
-import "mini-strap-core";
-import render from "./render";
-
-import layout from "./templates/form.html";
-import table from "./templates/table.html";
-
-document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-  <main class="msp-container">
-    <section>
-      ${render(layout, { name: "ale" })}
-    </section>
-    <section class="msp-mb-3">
-      ${render(table, { name: "ale" })}
-    </section>
-  </main>
-`;

packages/website/src/render.ts

@@ -1,11 +0,0 @@
-import Handlebars from "handlebars";
-
-export default function (template: string, data: Record<string, unknown>) {
-  const engine = Handlebars.compile(template);
-
-  return engine(data);
-}
-
-export function mapRender(items: string[]) {
-  return items.join("\n");
-}

packages/website/src/templates/form.html

@@ -1,127 +0,0 @@
-<form>
-  <fieldset>
-    <div class="msp-mb-3">
-      <label for="exampleInputEmail1" class="">Email address</label>
-      <input
-        type="email"
-        class=""
-        id="exampleInputEmail1"
-        aria-describedby="emailHelp"
-        placeholder="user@email.com"
-      />
-      <div id="emailHelp" class="">
-        We'll never share your email with anyone else.
-      </div>
-    </div>
-    <div class="msp-mb-3">
-      <label for="exampleInputPassword1" class="">Password</label>
-      <input
-        type="password"
-        class=""
-        id="exampleInputPassword1"
-        placeholder="Secret..."
-      />
-    </div>
-    <div class="msp-mb-3">
-      <input type="checkbox" class="" id="exampleCheck1" />
-      <label class="" for="exampleCheck1">Check me out</label>
-    </div>
-
-    <div class="msp-mb-3">
-      <input
-        class="form-check-input"
-        type="radio"
-        name="flexRadioDefault"
-        id="flexRadioDefault1"
-      />
-      <label class="form-check-label" for="flexRadioDefault1">
-        Default radio
-      </label>
-    </div>
-
-    <div class="msp-mb-3">
-      <label class="form-check-label" for="flexRadioDefault1">
-        Default range
-      </label>
-      <input
-        class="form-check-input"
-        type="range"
-        name="flexRadioDefault"
-        id="flexRadioDefault1"
-      />
-    </div>
-
-    <div class="msp-mb-3">
-      <label class="" for="example-select">Select</label>
-      <select
-        id="example-select"
-        class="form-select"
-        aria-label="Default select example"
-      >
-        <option selected disabled hidden>Open this select menu</option>
-        <option value="1">One</option>
-        <option value="2">Two</option>
-        <option value="3">Three</option>
-      </select>
-    </div>
-
-    <div class="msp-mb-3">
-      <label for="formFile" class="form-label"
-        >Default file input example</label
-      >
-      <input class="form-control" type="file" id="formFile" />
-    </div>
-
-    <div class="msp-mb-3">
-      <label for="exampleColorInput" class="form-label">Color picker</label>
-      <input
-        type="color"
-        class="form-control form-control-color"
-        id="exampleColorInput"
-        value="#563d7c"
-        title="Choose your color"
-      />
-    </div>
-
-    <button type="submit" class="">Submit</button>
-  </fieldset>
-</form>
-
-<br />
-
-<form>
-  <fieldset disabled class="msp-fieldset-border">
-    <legend>Disabled fieldset example</legend>
-    <div class="msp-mb-3">
-      <label for="disabledTextInput" class="form-label">Disabled input</label>
-      <input
-        type="text"
-        id="disabledTextInput"
-        class="form-control"
-        placeholder="Disabled input"
-      />
-    </div>
-    <div class="msp-mb-3">
-      <label for="disabledSelect" class="form-label"
-        >Disabled select menu</label
-      >
-      <select id="disabledSelect" class="form-select">
-        <option>Disabled select</option>
-      </select>
-    </div>
-    <div class="msp-mb-3">
-      <div class="form-check">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          id="disabledFieldsetCheck"
-          disabled
-        />
-        <label class="form-check-label" for="disabledFieldsetCheck">
-          Can't check this
-        </label>
-      </div>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>

packages/website/src/templates/layout.html

@@ -1 +0,0 @@
-<section>{{name}}</section>

packages/website/src/templates/table.html

@@ -1,29 +0,0 @@
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col" class="msp-text-center">#</th>
-      <th scope="col">First</th>
-      <th scope="col">Last</th>
-      <th scope="col">Handle</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td colspan="2">Larry the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>

packages/website/src/vite-env.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module "*.html";
-declare module "*.md";

packages/website/templates/base.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <title>alecodes.page</title>
+    <ViewTransitions />
+
+    {% block scripts %}<script src="/js/index.js"></script>{% endblock %}
+    <link rel="stylesheet" href="/css/style.css" />
+
+  </head>
+
+  <body transition:animate="fade">
+    {% include "partials/header.html" %}
+    <main>
+      <nav class="msp-d-sm-none msp-d-flex msp-justify-content-end">
+        <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
+      </nav>
+      {% block content %}{% endblock %}
+    </main>
+  </body>
+
+</html>

packages/website/templates/index.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+{{section.content | safe}}
+
+<ul>
+  {% for sub in section.subsections %}
+  {% set sub = get_section(path=sub, metadata_only=true) %}
+  <li><a href="{{sub.permalink}}">{{sub.title | safe}}</a></li>
+  {% endfor %}
+</ul>
+{% endblock content %}

packages/website/templates/page.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+{{page.content | safe}}
+{% endblock content %}

packages/website/templates/partials/header.html

@@ -0,0 +1,31 @@
+<aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
+  <div class="msp-offcanvas-backdrop msp-offcanvas-toggle"
+       data-msp-target="#main-offcanvas"></div>
+
+  <div class="msp-offcanvas-content">
+    <div class="msp-offcanvas-body">
+      <ul class="msp-list-unstyle msp-accordion">
+        <li>
+          <a href="/">Overview</a>
+        </li>
+
+        {% for item in get_taxonomy(kind="section") | get(key="items") %}
+          <li class="msp-accordion-item">
+            <a class="msp-accordion-header" href="#">{{ item.name |
+              title
+            }}</a>
+            <div class="msp-accordion-collapse">
+              <ul class="msp-list-unstyle msp-accordion-content">
+                {% for page in item.pages %}
+                  <li class="">
+                    <a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</aside>

packages/website/templates/section.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+{{section.content | safe}}
+{% endblock content %}

packages/website/tsconfig.json

@@ -1,23 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
 
-    /* Bundler mode */
+    // Bundler mode
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
     "noEmit": true,
 
-    /* Linting */
+    // Best practices
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
 }

packages/website/vite.config.ts

@@ -1,26 +0,0 @@
-import { defineConfig } from "vite";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    // Custom plugin to load markdown files
-    {
-      name: "markdown-loader",
-      transform(code, id) {
-        if (id.slice(-3) === ".md") {
-          // For .md files, get the raw content
-          return `export default ${JSON.stringify(code)};`;
-        }
-      },
-    },
-    {
-      name: "html-loader",
-      transform(code, id) {
-        if (id.slice(-5) === ".html") {
-          // For .md files, get the raw content
-          return `export default ${JSON.stringify(code)};`;
-        }
-      },
-    },
-  ],
-});