diff --git a/packages/components/package.json b/packages/components/package.json index 9bc0fe8..54e0384 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,22 +1,26 @@ { - "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" - } + "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" + } } diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts deleted file mode 100644 index 04ed79b..0000000 --- a/packages/components/src/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -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 deleted file mode 100644 index de8b69b..0000000 --- a/packages/components/src/navbar/navbar.html +++ /dev/null @@ -1 +0,0 @@ -

Hello World!

diff --git a/packages/components/src/navbar/navbar.scss b/packages/components/src/navbar/navbar.scss deleted file mode 100644 index a74fb9f..0000000 --- a/packages/components/src/navbar/navbar.scss +++ /dev/null @@ -1,42 +0,0 @@ -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 d18d9d2..4e42303 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -69,29 +69,29 @@ } .msp-hstack { - --msp-gap: var(--msp-spacing-3); + --prj-gap: var(--prj-spacing-3); display: flex; - gap: var(--msp-gap); + gap: var(--prj-gap); align-items: center; } .msp-hstack-reverse { - --msp-gap: var(--msp-spacing-3); + --prj-gap: var(--prj-spacing-3); display: flex; - gap: var(--msp-gap); + gap: var(--prj-gap); align-items: center; flex-direction: row-reverse; } .msp-vstack { - --msp-gap: var(--msp-spacing-3); + --prj-gap: var(--prj-spacing-3); display: flex; - gap: var(--msp-gap); + gap: var(--prj-gap); flex-direction: column; } .msp-vstack-reverse { - --msp-gap: var(--msp-spacing-3); + --prj-gap: var(--prj-spacing-3); display: flex; flex-direction: column-reverse; } @@ -140,16 +140,16 @@ } .msp-grid { - --msp-gap: var(--msp-spacing-3); - --msp-columns: repeat(3, 1fr); - --msp-min-col-width: 150px; + --prj-gap: var(--prj-spacing-3); + --prj-columns: repeat(3, 1fr); + --prj-min-col-width: 150px; display: grid; - grid-template-columns: var(--msp-columns); - gap: var(--msp-gap); + grid-template-columns: var(--prj-columns); + gap: var(--prj-gap); } @mixin grid-cols($amount) { - --msp-columns: repeat(#{$amount}, minmax(var(--msp-min-col-width), 1fr)); + --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr)); } @for $i from 1 through 12 { @@ -285,7 +285,7 @@ } .msp-gap-#{$name} { - --msp-gap: #{$value}; + --prj-gap: #{$value}; } } @@ -306,11 +306,11 @@ } .msp-shadow-1 { - box-shadow: 10px 10px 5px 0px var(--msp-shadow); + box-shadow: 10px 10px 5px 0px var(--prj-shadow); } .msp-border-radius { - border-radius: var(--msp-border-radius); + border-radius: var(--prj-border-radius); } @each $index, $variable, $value in $spacings { diff --git a/packages/website/.gitignore b/packages/website/.gitignore index f11efde..9ac1368 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -2,7 +2,6 @@ # 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 2838547..a4ecb9c 100644 --- a/packages/website/_scripts/build.ts +++ b/packages/website/_scripts/build.ts @@ -1,10 +1,6 @@ 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"> = { @@ -55,42 +51,16 @@ 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, - }, ]; -const out = await Promise.all( +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 new file mode 100644 index 0000000..77adf91 --- /dev/null +++ b/packages/website/templates/partials/navbar.html @@ -0,0 +1,93 @@ + + + + +