feat(website): add content structure files

packages/website/_scripts/build.ts

@@ -1,11 +1,30 @@
 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 outdir = "./static";
+const { values } = parseArgs({
+	args: Bun.argv,
+	options: {
+		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) {
@@ -35,8 +54,12 @@ 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",
@@ -46,17 +69,21 @@ const assets: BuildConfig[] = [
 		// 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: true,
 		minify: true,
-	},
+	});
+}
 
-	{
+if (["all", "html"].includes(filter)) {
+	assets.push({
 		entrypoints: Object.values(HTMLComponents),
 		outdir: "./templates/ext-components",
 		target: "browser",
@@ -69,8 +96,8 @@ const assets: BuildConfig[] = [
 		// 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,6 +9,10 @@ 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,4 +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,6 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# accordion.md

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,6 @@
++++
+[taxonomies]
+section = ["Components"]
++++
+
+# offcanvas.md

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/package.json

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

packages/website/templates/base.html

@@ -13,8 +13,8 @@
   </head>
 
   <body transition:animate="fade">
-    <header class="position-sticky py-1 py-lg-3">
-      {% include "partials/navbar.html" %}
+    <header class="msp-position-sticky msp-py-1 msp-py-lg-3">
+      {% include "partials/header.html" %}
     </header>
     <main>
       {% block content %}{% endblock %}

packages/website/templates/partials/header.html

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

packages/website/templates/section.html

@@ -3,10 +3,4 @@
 
 {% 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 %}