packages/components/package.json

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

packages/components/src/accordion/accordion.scss

@@ -1,41 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,35 +1,11 @@
 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({
+const outdir = "./static";
-	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) {
@@ -59,36 +35,28 @@ const sassPlugin: BunPlugin = {
 	},
 };
 
-const assets: BuildConfig[] = [];
+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,
+		minify: true,
 
 		// 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,
+		splitting: true,
-		minify: values.production,
+		minify: true,
-	});
+	},
-}
 
-if (["all", "html"].includes(filter)) {
+	{
-	assets.push({
 		entrypoints: Object.values(HTMLComponents),
 		outdir: "./templates/ext-components",
 		target: "browser",
@@ -101,8 +69,8 @@ if (["all", "html"].includes(filter)) {
 		// On by default in Bun v1.2+
 		html: true,
 		experimentalCss: true,
-	});
+	},
-}
+];
 
 const out = await Promise.all(
 	assets.map(async (item) => {

packages/website/config.toml

@@ -9,10 +9,6 @@ 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

packages/website/content/_index.md

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

packages/website/content/components/_index.md

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

packages/website/content/components/accordion.md

@@ -1,31 +0,0 @@
-+++
-[taxonomies]
-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/content/components/dropdown.md

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

packages/website/content/components/modal.md

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

packages/website/content/components/offcanvas.md

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

packages/website/content/components/tabs.md

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

packages/website/content/components/tooltip.md

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

packages/website/content/content/_index.md

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

packages/website/content/content/fonts.md

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

packages/website/content/content/forms.md

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

packages/website/content/content/image.md

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

packages/website/content/content/table.md

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

packages/website/content/elements/_index.md

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

packages/website/content/elements/button.md

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

packages/website/content/elements/card.md

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

packages/website/content/elements/links.md

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

packages/website/content/elements/list.md

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

packages/website/content/elements/navbar.md

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

packages/website/content/elements/pagination.md

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

packages/website/content/layout/_index.md

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

packages/website/content/layout/container.md

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

packages/website/content/layout/display.md

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

packages/website/content/layout/grid.md

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

packages/website/content/layout/position.md

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

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

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

packages/website/content/layout/spacing.md

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

packages/website/js/index.ts

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

packages/website/package.json

@@ -3,9 +3,7 @@
 	"type": "module",
 	"scripts": {
 		"link-dependencies": "bun run _scripts/link-dependencies.ts",
-		"prebuild": "bun run _scripts/build.ts",
+		"dev": "zola serve --port 3000 --fast"
-		"watch-deps": "bun run --watch _scripts/build.ts",
-		"dev": "zola serve --port 3000 --fast --open"
 	},
 	"dependencies": {
 		"@mini-strap/core": "workspace:*",

packages/website/sass/style.scss

@@ -1,6 +1,4 @@
 @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,14 +8,13 @@
     <title>alecodes.page</title>
     <ViewTransitions />
 
-    {% block scripts %}<script src="/js/index.js"></script>{% endblock %}
+    <script src="/js/index.js"></script>
     <link rel="stylesheet" href="/css/style.css" />
-
   </head>
 
   <body transition:animate="fade">
-    <header class="msp-position-sticky msp-py-1 msp-py-lg-3">
+    <header class="position-sticky py-1 py-lg-3">
-      {% include "partials/header.html" %}
+      {% include "partials/navbar.html" %}
     </header>
     <main>
       {% block content %}{% endblock %}

packages/website/templates/partials/header.html

@@ -1,20 +0,0 @@
-<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="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ 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/templates/section.html

@@ -3,4 +3,10 @@
 
 {% block content %}
 {{section.content | safe}}
+
+<ul>
+  {% for page in section.pages %}
+  <li><a href="{{page.permalink}}">{{page.path | safe}}</a></li>
+  {% endfor %}
+</ul>
 {% endblock content %}