diff --git a/packages/components/package.json b/packages/components/package.json index 9bc0fe8..c30bc4a 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/accordion/accordion.scss b/packages/components/src/accordion/accordion.scss new file mode 100644 index 0000000..39555c5 --- /dev/null +++ b/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,') + no-repeat center center; + background-size: contain; + + transition: transform 0.5s ease; + } + } + + &-collapse { + overflow: hidden; + height: 0; + display: none; + + transition: height 0.5s ease; + } +} diff --git a/packages/components/src/accordion/index.ts b/packages/components/src/accordion/index.ts new file mode 100644 index 0000000..9a2775c --- /dev/null +++ b/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, + ); + }); + }); +}; diff --git a/packages/components/src/utils.ts b/packages/components/src/utils.ts new file mode 100644 index 0000000..0df8cd7 --- /dev/null +++ b/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 => { + return el.querySelectorAll(query); +}; diff --git a/packages/website/_scripts/build.ts b/packages/website/_scripts/build.ts index 2838547..a49e87b 100644 --- a/packages/website/_scripts/build.ts +++ b/packages/website/_scripts/build.ts @@ -1,11 +1,35 @@ 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: { + 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) { @@ -35,28 +59,36 @@ 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: true, + 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: true, - minify: true, - }, + splitting: values.production, + minify: values.production, + }); +} - { +if (["all", "html"].includes(filter)) { + assets.push({ entrypoints: Object.values(HTMLComponents), outdir: "./templates/ext-components", target: "browser", @@ -69,8 +101,8 @@ const assets: BuildConfig[] = [ // On by default in Bun v1.2+ html: true, experimentalCss: true, - }, -]; + }); +} const out = await Promise.all( assets.map(async (item) => { diff --git a/packages/website/config.toml b/packages/website/config.toml index aa8c799..56d5c27 100644 --- a/packages/website/config.toml +++ b/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 diff --git a/packages/website/content/_index.md b/packages/website/content/_index.md index cbbe859..1e83855 100644 --- a/packages/website/content/_index.md +++ b/packages/website/content/_index.md @@ -1,4 +1,5 @@ +++ + +++ # mini-strap Documentation diff --git a/packages/website/content/components/_index.md b/packages/website/content/components/_index.md new file mode 100644 index 0000000..f55553b --- /dev/null +++ b/packages/website/content/components/_index.md @@ -0,0 +1,6 @@ ++++ ++++ + +# Components + +Complex elements that require custom javascript to run diff --git a/packages/website/content/components/accordion.md b/packages/website/content/components/accordion.md new file mode 100644 index 0000000..51987ec --- /dev/null +++ b/packages/website/content/components/accordion.md @@ -0,0 +1,31 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# accordion.md + +Example: + +```html + +``` diff --git a/packages/website/content/components/dropdown.md b/packages/website/content/components/dropdown.md new file mode 100644 index 0000000..c1fb188 --- /dev/null +++ b/packages/website/content/components/dropdown.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# dropdown.md diff --git a/packages/website/content/components/modal.md b/packages/website/content/components/modal.md new file mode 100644 index 0000000..c4d19c5 --- /dev/null +++ b/packages/website/content/components/modal.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# modal.md diff --git a/packages/website/content/components/offcanvas.md b/packages/website/content/components/offcanvas.md new file mode 100644 index 0000000..1a3f402 --- /dev/null +++ b/packages/website/content/components/offcanvas.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# offcanvas.md diff --git a/packages/website/content/components/tabs.md b/packages/website/content/components/tabs.md new file mode 100644 index 0000000..d256dfe --- /dev/null +++ b/packages/website/content/components/tabs.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# tabs.md diff --git a/packages/website/content/components/tooltip.md b/packages/website/content/components/tooltip.md new file mode 100644 index 0000000..f12205f --- /dev/null +++ b/packages/website/content/components/tooltip.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# tooltip.md diff --git a/packages/website/content/content/_index.md b/packages/website/content/content/_index.md new file mode 100644 index 0000000..cb14ecb --- /dev/null +++ b/packages/website/content/content/_index.md @@ -0,0 +1,4 @@ ++++ ++++ + +# Components diff --git a/packages/website/content/content/fonts.md b/packages/website/content/content/fonts.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/fonts.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/content/forms.md b/packages/website/content/content/forms.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/forms.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/content/image.md b/packages/website/content/content/image.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/image.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/content/table.md b/packages/website/content/content/table.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/table.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/elements/_index.md b/packages/website/content/elements/_index.md new file mode 100644 index 0000000..f0a0b6d --- /dev/null +++ b/packages/website/content/elements/_index.md @@ -0,0 +1,4 @@ ++++ ++++ + +foo diff --git a/packages/website/content/elements/button.md b/packages/website/content/elements/button.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/button.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/card.md b/packages/website/content/elements/card.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/card.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/links.md b/packages/website/content/elements/links.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/links.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/list.md b/packages/website/content/elements/list.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/list.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/navbar.md b/packages/website/content/elements/navbar.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/navbar.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/pagination.md b/packages/website/content/elements/pagination.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/pagination.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/layout/_index.md b/packages/website/content/layout/_index.md new file mode 100644 index 0000000..cb14ecb --- /dev/null +++ b/packages/website/content/layout/_index.md @@ -0,0 +1,4 @@ ++++ ++++ + +# Components diff --git a/packages/website/content/layout/container.md b/packages/website/content/layout/container.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/container.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/display.md b/packages/website/content/layout/display.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/display.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/grid.md b/packages/website/content/layout/grid.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/grid.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/position.md b/packages/website/content/layout/position.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/position.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/responsive-helpers.md b/packages/website/content/layout/responsive-helpers.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/responsive-helpers.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/spacing.md b/packages/website/content/layout/spacing.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/spacing.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/js/index.ts b/packages/website/js/index.ts index a50e789..cfe5636 100644 --- a/packages/website/js/index.ts +++ b/packages/website/js/index.ts @@ -1 +1,2 @@ +import "@mini-strap/components/accordion/index.ts"; console.log("hello world!"); diff --git a/packages/website/package.json b/packages/website/package.json index 8e34106..d0f6772 100644 --- a/packages/website/package.json +++ b/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:*", diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss index 4643c8a..94868e5 100644 --- a/packages/website/sass/style.scss +++ b/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; diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html index 782fc79..a2e6a6e 100644 --- a/packages/website/templates/base.html +++ b/packages/website/templates/base.html @@ -8,13 +8,14 @@ alecodes.page - + {% block scripts %}{% endblock %} + -
- {% include "partials/navbar.html" %} +
+ {% include "partials/header.html" %}
{% block content %}{% endblock %} diff --git a/packages/website/templates/partials/header.html b/packages/website/templates/partials/header.html new file mode 100644 index 0000000..60ca2b4 --- /dev/null +++ b/packages/website/templates/partials/header.html @@ -0,0 +1,20 @@ + diff --git a/packages/website/templates/section.html b/packages/website/templates/section.html index 882f637..c520de6 100644 --- a/packages/website/templates/section.html +++ b/packages/website/templates/section.html @@ -3,10 +3,4 @@ {% block content %} {{section.content | safe}} - - {% endblock content %} diff --git a/packages/website/templates/taxonomy_list.html b/packages/website/templates/taxonomy_list.html new file mode 100644 index 0000000..e69de29 diff --git a/packages/website/templates/taxonomy_single.html b/packages/website/templates/taxonomy_single.html new file mode 100644 index 0000000..e69de29