diff --git a/packages/components/package.json b/packages/components/package.json index 54e0384..9bc0fe8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,26 +1,22 @@ { - "name": "@mini-strap/components", - "version": "0.0.1", - "module": "src/components.scss", - "type": "module", - "scripts": { - "ci:publish": "bun publish --production --frozen-lockfile" - }, - "exports": { - ".": "./src/components.scss", - "./OffCanvas/": { - "import": "./src/OffCanvas/", - "require": "./src/OffCanvas/" - } - }, - "devDependencies": { - "@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" - } + "name": "@mini-strap/components", + "version": "0.0.1", + "type": "module", + "scripts": { + "ci:publish": "bun publish --production --frozen-lockfile" + }, + "exports": { + ".": "./src/index.ts", + "./navbar/*": "./src/navbar/*" + }, + "devDependencies": { + "@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" + } } diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts new file mode 100644 index 0000000..04ed79b --- /dev/null +++ b/packages/components/src/index.ts @@ -0,0 +1,7 @@ +import navarHtml from "./navbar/navbar.html"; + +export const HTMLComponents = { + navbar: navarHtml, +}; + +export default {}; diff --git a/packages/components/src/navbar/navbar.html b/packages/components/src/navbar/navbar.html new file mode 100644 index 0000000..de8b69b --- /dev/null +++ b/packages/components/src/navbar/navbar.html @@ -0,0 +1 @@ +

Hello World!

diff --git a/packages/components/src/navbar/navbar.scss b/packages/components/src/navbar/navbar.scss new file mode 100644 index 0000000..a74fb9f --- /dev/null +++ b/packages/components/src/navbar/navbar.scss @@ -0,0 +1,42 @@ +nav { + width: 100%; +} + +.navbar-desktop ul { + width: fit-content; + margin-left: auto; + + .nav-item { + margin-bottom: 0; + } +} + +ul { + padding: 0; +} + +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(--prj-accent-bg); +} + +a:hover { + --border-color: var(--prj-accent-bg); + background-color: var(--prj-accent-bg); + color: var(--prj-accent-text); + border: 1px solid var(--border-color); +} diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss index 4e42303..d18d9d2 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -69,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; } @@ -140,16 +140,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 { @@ -285,7 +285,7 @@ } .msp-gap-#{$name} { - --prj-gap: #{$value}; + --msp-gap: #{$value}; } } @@ -306,11 +306,11 @@ } .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 { diff --git a/packages/website/.gitignore b/packages/website/.gitignore index 9ac1368..f11efde 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -2,6 +2,7 @@ # Compiled assets managed by bun static/css/**/* static/js/**/* +templates/ext-components/**/* # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore diff --git a/packages/website/_scripts/build.ts b/packages/website/_scripts/build.ts index a4ecb9c..2838547 100644 --- a/packages/website/_scripts/build.ts +++ b/packages/website/_scripts/build.ts @@ -1,6 +1,10 @@ import type { BuildConfig, BunPlugin, PluginBuilder } from "bun"; +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 nodeModuleImporter: FileImporter<"async"> = { @@ -51,16 +55,42 @@ const assets: BuildConfig[] = [ splitting: true, minify: true, }, + + { + 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, + }, ]; -await Promise.all( +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`); diff --git a/packages/website/templates/partials/navbar.html b/packages/website/templates/partials/navbar.html deleted file mode 100644 index 77adf91..0000000 --- a/packages/website/templates/partials/navbar.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - -