feat(components): add the accordion component

packages/components/package.json

@@ -7,7 +7,8 @@
 	},
 	"exports": {
 		".": "./src/index.ts",
-		"./navbar/*": "./src/navbar/*"
+		"./navbar/*": "./src/navbar/*",
+		"./accordion/*": "./src/accordion/*"
 	},
 	"devDependencies": {
 		"@types/bun": "latest",

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");
+	}
+}
+
+window.onload = () => {
+	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/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/website/_scripts/build.ts

@@ -9,6 +9,11 @@ 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",
@@ -64,7 +69,7 @@ if (["all", "sass"].includes(filter)) {
 		outdir: `${outdir}/css`,
 		naming: "[name].css",
 		plugins: [sassPlugin],
-		minify: true,
+		minify: values.production,
 
 		// On by default in Bun v1.2+
 		html: true,
@@ -77,8 +82,8 @@ if (["all", "js", "ts"].includes(filter)) {
 		entrypoints: ["./js/index.ts"],
 		outdir: `${outdir}/js`,
 		target: "browser",
-		splitting: true,
+		splitting: values.production,
-		minify: true,
+		minify: values.production,
 	});
 }
 

packages/website/content/components/accordion.md

@@ -4,3 +4,28 @@ section = ["Components"]
 +++
 
 # accordion.md
+
+Example:
+
+```html
+<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>
+```

packages/website/js/index.ts

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

packages/website/sass/style.scss

@@ -1,4 +1,6 @@
 @use "@mini-strap/core";
+@use "@mini-strap/components/navbar/navbar.scss";
+@use "@mini-strap/components/accordion/accordion.scss";
 
 html {
   // background-color: red;

packages/website/templates/base.html

@@ -8,8 +8,9 @@
     <title>alecodes.page</title>
     <ViewTransitions />
 
-    <script src="/js/index.js"></script>
+    {% block scripts %}<script src="/js/index.js"></script>{% endblock %}
     <link rel="stylesheet" href="/css/style.css" />
+
   </head>
 
   <body transition:animate="fade">

packages/website/templates/partials/header.html

@@ -1,18 +1,20 @@
-<ul>
+<ul class="msp-list-unstyle msp-accordion">
   <li>
     <a href="/">Overview</a>
   </li>
 
   {% for item in get_taxonomy(kind="section") | get(key="items") %}
-    <li>
+    <li class="msp-accordion-item">
-      <a href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
+      <a class="msp-accordion-header" href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
-      <ul class="msp-d-none">
+      <div class="msp-accordion-collapse">
+        <ul class="msp-list-unstyle msp-accordion-content">
           {% for page in item.pages %}
-          <li>
+            <li class="">
               <a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
             </li>
           {% endfor %}
         </ul>
+      </div>
     </li>
   {% endfor %}
 </ul>