diff --git a/.forgejo/workflows/publish.yaml b/.forgejo/workflows/publish.yaml new file mode 100644 index 0000000..5f1ea52 --- /dev/null +++ b/.forgejo/workflows/publish.yaml @@ -0,0 +1,45 @@ +name: Publish package +on: + push: + branches: + - main + workflow_dispatch: +env: + NPM_TAG: ${{ github.ref == 'refs/heads/main' && 'latest' || 'next' }} + +# Variables reference: https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#about-contexts +# Syntax reference: https://forgejo.org/docs/latest/user/actions/ +jobs: + build_and_publish: + runs-on: docker + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Cache Bun dependencies + id: cache + uses: actions/cache@v4 + with: + path: ~/.bun/install/cache + key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }} + restore-keys: | + ${{ runner.os }}-bun- + + - name: Setup Bun + id: "setup_bun" + uses: oven-sh/setup-bun@v2 + + - name: Install dependencies + run: "bun install" + + - name: Bump version and publish + uses: https://github.com/cocogitto/cocogitto-action@v3.10 + env: + NPM_REGISTRY_TOKEN: ${{ secrets.NPM_TOKEN_FORGEJO }} + with: + release: true + check-latest-tag-only: true + git-user: 'Cog Bot' + git-user-email: 'cog@alecodes.page' diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..da42681 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,35 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## v0.1.1 - 2025-02-14 +### Package updates +- @mini-strap/core bumped to @mini-strap/core-v0.1.2 +### Global changes +#### Miscellaneous Chores +- update build script - (812e55e) - aleidk + +- - - + +## v0.1.0 - 2024-12-30 +### Package updates +- @mini-strap/core bumped to @mini-strap/core-v0.1.0 +- @mini-strap/components bumped to @mini-strap/components-v0.1.0 +- @mini-strap/website bumped to @mini-strap/website-v0.1.0 +### Global changes +#### Bug Fixes +- add dummy publish script for website - (20cadc8) - aleidk +#### Build system +- fix build setup - (8442bbb) - aleidk +#### Features +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk +- **(website)** add build script for frontend dependencies - (698294c) - aleidk +#### Miscellaneous Chores +- **(website)** add docosaurus as SSG - (85660ac) - Alexander Navarro +- **(website)** migrate from docosaurus to zola SSG - (7e8dc4e) - aleidk +- setup ci workflow - (c1c1cdb) - aleidk +- allow merge commits - (e75f0bb) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 74b89ee..dec149c 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/bunfig.toml b/bunfig.toml new file mode 100644 index 0000000..63cb7c5 --- /dev/null +++ b/bunfig.toml @@ -0,0 +1,4 @@ +[install.scopes] + +"@alecodes" = { token = "$NPM_REGISTRY_TOKEN", url = "https://git.alecodes.page/api/packages/alecodes/npm/" } +"@mini-strap" = { token = "$NPM_REGISTRY_TOKEN", url = "https://git.alecodes.page/api/packages/alecodes/npm/" } diff --git a/cog.toml b/cog.toml new file mode 100644 index 0000000..a38f600 --- /dev/null +++ b/cog.toml @@ -0,0 +1,32 @@ +from_latest_tag = true +ignore_merge_commits = true +disable_changelog = false +disable_bump_commit = false +tag_prefix = "v" +generate_mono_repository_global_tag = true +branch_whitelist = [] +skip_ci = "[skip ci]" +skip_untracked = false +pre_bump_hooks = [] +post_bump_hooks = ["git push", "git push origin {{version_tag}}"] +pre_package_bump_hooks = [ + "echo 'bump package {{package}} to {{version}}'", + "sed -E -i 's/(\"version\":) \"[0-9.]{5}\"/\\1 \"{{version}}\"/gi' package.json", + "bun run ci:publish", +] +post_package_bump_hooks = ["git push", "git push origin {{version_tag}}"] + +[git_hooks] + +[commit_types] + +[changelog] +path = "CHANGELOG.md" +authors = [] + +[bump_profiles] + +[packages] +"@mini-strap/core" = { path = "packages/core" } +"@mini-strap/components" = { path = "packages/components" } +"@mini-strap/website" = { path = "packages/website", public_api = false } diff --git a/package.json b/package.json index 5b82e52..cd42aea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,8 @@ { - "name": "mini-strap", + "name": "@alecodes/mini-strap", + "version": "0.0.1", "module": "index.ts", + "private": true, "devDependencies": { "@eslint/js": "^9.10.0", "@types/bun": "latest", @@ -14,8 +16,12 @@ "typescript": "^5.0.0" }, "scripts": { - "dev": "bun --filter '*' dev" + "dev": "bun --filter '*' dev", + "ci:publish": "bun --filter '**/core' ci:publish", + "bump": "cog bump --auto --skip-untracked" }, "type": "module", - "workspaces": ["packages/*"] + "workspaces": [ + "packages/*" + ] } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md new file mode 100644 index 0000000..18e7970 --- /dev/null +++ b/packages/components/CHANGELOG.md @@ -0,0 +1,20 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## @mini-strap/components-v0.1.0 - 2024-12-30 +#### Bug Fixes +- **(components)** replace initialization of components to prevent overrides - (8cbd097) - aleidk +- **(components)** properly export html components - (48cafe8) - aleidk +#### Features +- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk +- **(components)** add offcanvas component - (c47a2ef) - aleidk +- **(components)** add the accordion component - (e0ed5a5) - aleidk +- **(components)** add basic components - (d4a1114) - aleidk +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk +#### Miscellaneous Chores +- setup ci workflow - (c1c1cdb) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/packages/components/build.ts b/packages/components/build.ts new file mode 100644 index 0000000..2b7ea8c --- /dev/null +++ b/packages/components/build.ts @@ -0,0 +1,32 @@ +import { type BunPlugin } from "bun"; +import dts from "bun-plugin-dts"; +import styleLoader from "bun-style-loader"; +import * as sass from "sass"; + +const style: BunPlugin = { + name: "Sass Loader", + setup(build) { + console.log("Running SASS Plugin..."); + build.onLoad({ filter: /\.scss$/ }, async ({ path }) => { + const contents = sass.compile(path); + const css = contents.css; + + return { + loader: "file", + contents: css, + }; + }); + }, +}; + +const result = await Bun.build({ + outdir: "dist", + publicPath: "public", + format: "esm", + plugins: [style], + entrypoints: ["./src/components.scss"], +}); + +if (!result.success) { + throw new AggregateError(result.logs, "Build failed"); +} diff --git a/packages/components/package.json b/packages/components/package.json index 5dcfbc8..3788988 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,12 +1,24 @@ { - "name": "mini-strap-components", - "module": "src/components.scss", - "type": "module", - "devDependencies": { - "@types/bun": "latest" - }, - "peerDependencies": { - "typescript": "^5.0.0" - } + "name": "@mini-strap/components", + "version": "0.1.0", + "type": "module", + "scripts": { + "ci:publish": "bun publish --production --frozen-lockfile" + }, + "exports": { + ".": "./src/index.ts", + "./navbar/*": "./src/navbar/*", + "./accordion/*": "./src/accordion/*", + "./offcanvas/*": "./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/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..348e7a7 --- /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"); + } +} + +document.addEventListener("DOMContentLoaded", () => { + 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/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..d25e7e9 --- /dev/null +++ b/packages/components/src/navbar/navbar.html @@ -0,0 +1,34 @@ +{% macro navbar() %} + +{% endmacro navbar %} + + +{% macro navbar_item(href, label) %} +
  • + {{ label }} +
    • +{% endmacro navbar_item %} + +
    + + + + +
    diff --git a/packages/components/src/navbar/navbar.scss b/packages/components/src/navbar/navbar.scss new file mode 100644 index 0000000..f62025f --- /dev/null +++ b/packages/components/src/navbar/navbar.scss @@ -0,0 +1,47 @@ +nav.msp-navbar { + width: 100%; + + ul { + padding: 0; + + li { + margin-bottom: 0; + height: 100%; + } + } + + 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(--msp-color-bg-accent); + } + + a:hover { + --border-color: var(--msp-color-bg-accent); + background-color: var(--msp-color-bg-accent); + color: var(--msp-color-text-accent); + border: 1px solid var(--border-color); + } +} + +.msp-navbar-desktop ul { + width: fit-content; + margin-left: auto; + + .nav-item { + margin-bottom: 0; + } +} diff --git a/packages/components/src/offcanvas/index.ts b/packages/components/src/offcanvas/index.ts new file mode 100644 index 0000000..e9461db --- /dev/null +++ b/packages/components/src/offcanvas/index.ts @@ -0,0 +1,21 @@ +import { qs, qsa } from "../utils"; + +document.addEventListener("DOMContentLoaded", () => { + qsa(".msp-offcanvas-toggle").forEach((item) => { + item.addEventListener("click", () => { + const target = item.dataset.mspTarget; + + if (!target) { + throw new Error("No target provided"); + } + + const targetElement = qs(target); + + if (!targetElement) { + throw new Error("No target found"); + } + + targetElement.classList.toggle("show"); + }); + }); +}); diff --git a/packages/components/src/offcanvas/style.scss b/packages/components/src/offcanvas/style.scss new file mode 100644 index 0000000..c782035 --- /dev/null +++ b/packages/components/src/offcanvas/style.scss @@ -0,0 +1,89 @@ +@use "@mini-strap/core/mixins"; + +:root { + --msp-offcanvas-anim-duration: var(--msp-anim-duration-md); + --msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1); + --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19); + + --msp-offcanvas-width: 15ch; +} + +.msp-offcanvas { + position: fixed; + width: var(--msp-offcanvas-width); + height: 100vh; + top: 0; + left: -100%; + + transition: left var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-out); + + &-content { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + z-index: 5; + + background-color: var(--msp-color-bg-surface-1); + + padding: var(--msp-spacing-3); + + &-body, + &-header, + &-footer { + position: relative; + z-index: 5; + } + } + + &.show { + left: 0; + + transition: left var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-in); + + .msp-offcanvas-backdrop { + opacity: 40%; + left: 0; + + transition: + opacity var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-in), + left 0s linear; + } + } + + .msp-offcanvas-backdrop { + position: fixed; + height: 100vh; + width: 100vw; + z-index: 4; + + background-color: rgba(0, 0, 0); + opacity: 0; + + top: 0; + left: -100%; + // Delay the width transition on remove so it's desn't appear to be sliding or to be not working + transition: + opacity var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-out), + left 0s linear var(--msp-offcanvas-anim-duration); + } +} + +@include mixins.responsive using($breakpoint, $size) { + .msp-offcanvas.msp-offcanvas-#{$breakpoint} { + width: var(--msp-offcanvas-width); + left: 0; + + & ~ * { + margin-left: var(--msp-offcanvas-width); + } + + .msp-offcanvas-backdrop { + display: none !important; + } + } +} diff --git a/packages/components/src/offcanvas/template.html b/packages/components/src/offcanvas/template.html new file mode 100644 index 0000000..7d9ee35 --- /dev/null +++ b/packages/components/src/offcanvas/template.html @@ -0,0 +1,51 @@ +
    +
    + + +
    + +
    +
    + +
    +
    + + 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/components/tsconfig.json b/packages/components/tsconfig.json index 238655f..2e82a45 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -23,5 +23,8 @@ "noUnusedLocals": false, "noUnusedParameters": false, "noPropertyAccessFromIndexSignature": false + + // library configuration + // "baseUrl": "./src/" } } diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md new file mode 100644 index 0000000..8b2cab0 --- /dev/null +++ b/packages/core/CHANGELOG.md @@ -0,0 +1,41 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## @mini-strap/core-v0.1.2 - 2025-02-14 +#### Bug Fixes +- build binary of core - (e80fa61) - aleidk + +- - - + +## @mini-strap/core-v0.1.1 - 2025-02-14 +#### Miscellaneous Chores +- update build script - (812e55e) - aleidk + +- - - + +## @mini-strap/core-v0.1.0 - 2024-12-30 +#### Bug Fixes +- **(core)** update old css variables names - (9c6d935) - aleidk +- remove deprecation warnings from sass - (b452baa) - aleidk +#### Build system +- fix build setup - (8442bbb) - aleidk +#### Features +- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk +- **(components)** add offcanvas component - (c47a2ef) - aleidk +- **(components)** add basic components - (d4a1114) - aleidk +- **(website)** add offcanvas documentation - (c0a20f8) - aleidk +- **(website)** add build script for frontend dependencies - (698294c) - aleidk +#### Miscellaneous Chores +- setup ci workflow - (c1c1cdb) - aleidk + +- - - + +## v0.0.0 - 2024-12-30 +#### Features +- **(core)** add styles for vanilla tables - (cf0b401) - aleidk +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/packages/core/build.ts b/packages/core/build.ts new file mode 100644 index 0000000..6182e2d --- /dev/null +++ b/packages/core/build.ts @@ -0,0 +1,99 @@ +#!/usr/bin/env bun + +import type { BuildConfig, BunPlugin, PluginBuilder } from "bun"; +import { parseArgs } from "node:util"; +import type { FileImporter } from "sass"; + +const { values, positionals } = parseArgs({ + args: Bun.argv, + options: { + production: { + type: "boolean", + short: "p", + default: true, + }, + filter: { + type: "string", + short: "f", + default: "all", + }, + }, + strict: true, + allowPositionals: true, +}); + +const outdir = positionals.at(2); + +if (!outdir) { + throw new Error("No outdir provided!"); +} + +const nodeModuleImporter: FileImporter<"async"> = { + findFileUrl(url) { + if (url.startsWith("@")) { + return new URL(import.meta.resolve(url)); + } + + return null; + }, +}; + +const sassPlugin: BunPlugin = { + name: "Sass Loader", + async setup(build: PluginBuilder) { + const sass = await import("sass"); + build.onLoad({ filter: /\.scss$/ }, async ({ path }) => { + // read and compile it with the sass compiler + const result = await sass.compileAsync(path, { + importers: [nodeModuleImporter], + }); + + return { + loader: "css", + contents: result.css, + }; + }); + }, +}; + +const assets: BuildConfig[] = []; + +const filter = values.filter ?? "all"; + +if (["all", "sass"].includes(filter)) { + assets.push({ + entrypoints: ["./src/style.scss"], + outdir: `${outdir}/css`, + naming: "[name].css", + plugins: [sassPlugin], + 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: values.production, +// minify: values.production, +// }); +// } + +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; + }), +); + +console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`); diff --git a/packages/core/bun.lockb b/packages/core/bun.lockb new file mode 100755 index 0000000..0c40387 Binary files /dev/null and b/packages/core/bun.lockb differ diff --git a/packages/core/package.json b/packages/core/package.json index dce323a..097ffae 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,12 +1,23 @@ { - "name": "mini-strap-core", - "module": "src/style.scss", - "type": "module", - "devDependencies": { - "@types/bun": "latest" - }, - "peerDependencies": { - "typescript": "^5.0.0" - } + "name": "@mini-strap/core", + "version": "0.1.2", + "type": "module", + "exports": { + ".": "./src/style.scss", + "./mixins": "./src/_mixins.scss" + }, + "bin": { + "@mini-strap/core": "build.ts" + }, + "scripts": { + "build": "bun sass --style compressed src/style.scss dist/style.css", + "ci:publish": "bun run build && bun publish --production --frozen-lockfile --silent" + }, + "devDependencies": { + "@types/bun": "latest", + "sass": "^1.83.0" + }, + "peerDependencies": { + "typescript": "^5.0.0" + } } - diff --git a/packages/core/src/_colors.scss b/packages/core/src/_colors.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss index c4e42f8..76092a6 100644 --- a/packages/core/src/_reset.scss +++ b/packages/core/src/_reset.scss @@ -155,33 +155,3 @@ :where(sup) { top: -0.5em; } - -// ── Other ─────────────────────────────────────────────────────────────── - -:where(a) { - background-color: transparent; -} - -:where(abbr[title]) { - text-decoration: underline dotted; -} - -:where(code, kbd, samp, pre) { - font-family: monospace, monospace; - font-size: 1em; -} - -:where(sub, sup) { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -:where(sub) { - bottom: -0.25em; -} - -:where(sup) { - top: -0.5em; -} diff --git a/packages/core/src/_tokens.scss b/packages/core/src/_tokens.scss index b4b9436..7ea321d 100644 --- a/packages/core/src/_tokens.scss +++ b/packages/core/src/_tokens.scss @@ -1,11 +1,13 @@ @use "sass:color"; +@use "sass:map"; +@use "colors"; /* Using catppuccin for now, make a theme switcher later */ @use "../themes/catppuccin/catppuccin"; @function getColor($color) { - $ctp-theme: map-get(catppuccin.$palette, "macchiato"); - @return map-get($ctp-theme, $color); + $ctp-theme: map.get(catppuccin.$palette, "macchiato"); + @return map.get($ctp-theme, $color); } /* @@ -49,12 +51,15 @@ $msp-colors: ( "--msp-color-bg": #{getColor("mantle")}, "--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)}, "--msp-color-bg-surface-1": #{getColor("base")}, - "--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)}, + "--msp-color-bg-surface-2": #{color.adjust( + getColor("surface0"), + $lightness: -2% + )}, "--msp-color-bg-surface-3": #{getColor("surface1")}, "--msp-color-bg-accent": #{getColor("teal")}, - "--msp-color-bg-primary": #{getColor("teal")}, - "--msp-color-bg-secondary": #{getColor("mauve")}, + "--msp-color-bg-primary": #{getColor("mauve")}, + "--msp-color-bg-secondary": #{getColor("lavender")}, "--msp-color-bg-danger": #{getColor("red")}, "--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)}, "--msp-color-bg-input": #{getColor("text")}, @@ -86,6 +91,12 @@ $msp-colors: ( "--msp-color-transparent": transparent, ); +$anim: ( + "--msp-anim-duration-sm": 0.4s, + "--msp-anim-duration-md": 0.8s, + "--msp-anim-duration-lg": 1s, +); + // Native CSS Variables to allow overridings and usage in external stylesheets :root { @each $variable, $value in $msp-colors { @@ -96,6 +107,10 @@ $msp-colors: ( #{$variable}: #{$value}; } + @each $variable, $value in $anim { + #{$variable}: #{$value}; + } + // ── Borders ───────────────────────────────────────────────────────────── --msp-border-width: 1px; --msp-border-color: var(--msp-color-text-transparent); diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss index 82968ee..86ba495 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -1,5 +1,6 @@ @use "./tokens" as *; @use "./mixins"; +@use "sass:math"; .msp-position-fixed { position: fixed; @@ -68,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; } @@ -122,10 +123,18 @@ align-items: center; } +.msp-justify-content-start { + justify-content: start !important; +} + .msp-justify-content-center { justify-content: center !important; } +.msp-justify-content-end { + justify-content: end !important; +} + .msp-justify-content-between { justify-content: space-between !important; } @@ -139,16 +148,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 { @@ -214,20 +223,20 @@ } @for $i from 0 through 100 { .msp-w-#{$i} { - width: percentage(calc($i / 100)); + width: math.percentage(calc($i / 100)); } .msp-h-#{$i} { - height: percentage(calc($i / 100)); + height: math.percentage(calc($i / 100)); } } @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) { .msp-w-#{$breakpoint}-#{$index} { - width: percentage(calc($index / 100)); + width: math.percentage(calc($index / 100)); } .msp-h-#{$breakpoint}-#{$index} { - height: percentage(calc($index / 100)); + height: math.percentage(calc($index / 100)); } } @@ -284,7 +293,7 @@ } .msp-gap-#{$name} { - --prj-gap: #{$value}; + --msp-gap: #{$value}; } } @@ -305,11 +314,17 @@ } .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 { + .msp-border-#{$index} { + border: #{$index}px var(--msp-border-style) var(--msp-border-color); + } } .msp-text-none { diff --git a/packages/core/src/components/form.scss b/packages/core/src/components/form.scss index 1ad5205..f381e27 100644 --- a/packages/core/src/components/form.scss +++ b/packages/core/src/components/form.scss @@ -2,6 +2,7 @@ @use "../mixins"; @use "sass:color"; @use "sass:string"; +@use "sass:map"; fieldset:not(.msp-fieldset-border) { min-width: 0; @@ -72,7 +73,7 @@ input[type="checkbox"] { background-color: var(--msp-color-bg-checkbox); border-color: var(--msp-color-bg-checkbox); - $stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; + $stroke-color: "%23#{string.slice(map.get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; --msp-form-check-bg-image: url('data:image/svg+xml,'); } } @@ -106,7 +107,7 @@ input[type="radio"] { background-color: var(--msp-color-bg-checkbox); border-color: var(--msp-color-bg-checkbox); - $fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; + $fill-color: "%23#{string.slice(map.get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; --msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e"); } } diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 53f7103..e05b1bd 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -95,9 +95,11 @@ ul { /* Make the marker position is inside the container */ list-style-position: inside; margin: 0; + margin-bottom: var(--msp-spacing-2); ul { margin-left: var(--msp-spacing-3); + margin-bottom: 0; } } @@ -126,3 +128,10 @@ video.respect-height { li:not(:last-child) { margin-bottom: var(--msp-spacing-1); } + +:where(code, kbd, samp, pre):not([data-lang]) { + background-color: var(--msp-color-bg-surface-2); + padding: 0 var(--msp-spacing-1); + border-radius: var(--msp-border-radius); + white-space: nowrap; +} diff --git a/packages/website/.gitignore b/packages/website/.gitignore index a547bf3..f11efde 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -1,24 +1,181 @@ + +# Compiled assets managed by bun +static/css/**/* +static/js/**/* +templates/ext-components/**/* + +# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore + # Logs + logs -*.log -npm-debug.log* +_.log +npm-debug.log_ yarn-debug.log* yarn-error.log* -pnpm-debug.log* lerna-debug.log* +.pnpm-debug.log* -node_modules +# Caches + +.cache + +# Diagnostic reports (https://nodejs.org/api/report.html) + +report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json + +# Runtime data + +pids +_.pid +_.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover + +lib-cov + +# Coverage directory used by tools like istanbul + +coverage +*.lcov + +# nyc test coverage + +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) + +.grunt + +# Bower dependency directory (https://bower.io/) + +bower_components + +# node-waf configuration + +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) + +build/Release + +# Dependency directories + +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) + +web_modules/ + +# TypeScript cache + +*.tsbuildinfo + +# Optional npm cache directory + +.npm + +# Optional eslint cache + +.eslintcache + +# Optional stylelint cache + +.stylelintcache + +# Microbundle cache + +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history + +.node_repl_history + +# Output of 'npm pack' + +*.tgz + +# Yarn Integrity file + +.yarn-integrity + +# dotenv environment variable files + +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) + +.parcel-cache + +# Next.js build output + +.next +out + +# Nuxt.js build / generate output + +.nuxt dist -dist-ssr -*.local -# Editor directories and files -.vscode/* -!.vscode/extensions.json +# Gatsby files + +# Comment in the public line in if your project uses Gatsby and not Next.js + +# https://nextjs.org/blog/next-9-1#public-directory-support + +# public + +# vuepress build output + +.vuepress/dist + +# vuepress v2.x temp and cache directory + +.temp + +# Docusaurus cache and generated files + +.docusaurus + +# Serverless directories + +.serverless/ + +# FuseBox cache + +.fusebox/ + +# DynamoDB Local files + +.dynamodb/ + +# TernJS port file + +.tern-port + +# Stores VSCode versions used for testing VSCode extensions + +.vscode-test + +# yarn v2 + +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# IntelliJ based IDEs .idea + +# Finder (MacOS) folder config .DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md new file mode 100644 index 0000000..a8d8084 --- /dev/null +++ b/packages/website/CHANGELOG.md @@ -0,0 +1,35 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## @mini-strap/website-v0.1.0 - 2024-12-30 +#### Bug Fixes +- **(components)** replace initialization of components to prevent overrides - (8cbd097) - aleidk +- add dummy publish script for website - (20cadc8) - aleidk +#### Build system +- fix build setup - (8442bbb) - aleidk +#### Features +- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk +- **(components)** add offcanvas component - (c47a2ef) - aleidk +- **(components)** add the accordion component - (e0ed5a5) - aleidk +- **(components)** add basic components - (d4a1114) - aleidk +- **(website)** add accordion documentation - (319d56d) - aleidk +- **(website)** add offcanvas documentation - (c0a20f8) - aleidk +- **(website)** add content structure files - (7af58fe) - aleidk +- **(website)** add html components imports to build script - (e9db7de) - aleidk +- **(website)** add build script for frontend dependencies - (698294c) - aleidk +#### Miscellaneous Chores +- **(website)** migrate from docosaurus to zola SSG - (7e8dc4e) - aleidk +- **(website)** add docosaurus as SSG - (85660ac) - Alexander Navarro +- setup ci workflow - (c1c1cdb) - aleidk + +- - - + +## v0.0.0 - 2024-12-30 +#### Features +- **(core)** add styles for vanilla tables - (cf0b401) - aleidk +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/packages/website/README.md b/packages/website/README.md new file mode 100644 index 0000000..7816149 --- /dev/null +++ b/packages/website/README.md @@ -0,0 +1,15 @@ +# website + +To install dependencies: + +```bash +bun install +``` + +To run: + +```bash +bun run index.ts +``` + +This project was created using `bun init` in bun v1.1.40. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. diff --git a/packages/website/_scripts/build.ts b/packages/website/_scripts/build.ts new file mode 100644 index 0000000..a49e87b --- /dev/null +++ b/packages/website/_scripts/build.ts @@ -0,0 +1,128 @@ +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({ + 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) { + if (url.startsWith("@")) { + return new URL(import.meta.resolve(url)); + } + + return null; + }, +}; + +const sassPlugin: BunPlugin = { + name: "Sass Loader", + async setup(build: PluginBuilder) { + const sass = await import("sass"); + build.onLoad({ filter: /\.scss$/ }, async ({ path }) => { + // read and compile it with the sass compiler + const result = await sass.compileAsync(path, { + importers: [nodeModuleImporter], + }); + + return { + loader: "css", + contents: result.css, + }; + }); + }, +}; + +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, + + // 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, + minify: values.production, + }); +} + +if (["all", "html"].includes(filter)) { + assets.push({ + 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( + 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/_scripts/link-dependencies.ts b/packages/website/_scripts/link-dependencies.ts new file mode 100644 index 0000000..ea59160 --- /dev/null +++ b/packages/website/_scripts/link-dependencies.ts @@ -0,0 +1,45 @@ +#!/usr/bin/env bun + +import { fileURLToPath } from "url"; +import fs from "node:fs/promises"; +import { basename, normalize } from "node:path"; + +function ignore_exist_error(fn: (...args: any[]) => Promise) { + return async (...args: any[]) => { + try { + await fn(...args); + } catch (error: any) { + if (error.code !== "EEXIST") { + throw error; // Re-throw the error if it's not "file exists" + } + } + }; +} + +const mkdir = ignore_exist_error(fs.mkdir); +const symlink = ignore_exist_error(fs.symlink); + +const def = await Bun.file("package.json").json(); + +const dependencies = Object.keys(def.dependencies); + +for (const pkg of dependencies) { + const path = normalize(fileURLToPath(import.meta.resolve(pkg))); + const file = Bun.file(import.meta.resolve(pkg)); + const type = file.type.split(";").at(0); + const filename = basename(path); + + switch (type) { + case "text/x-scss": + await mkdir(`sass/${pkg}`, { recursive: true }); + await symlink(path, `sass/${pkg}/${filename}`); + console.log(`${path} -> sass/${pkg}/${filename}`); + break; + case "text/javascript": + // console.log("es JS") + break; + } +} + +console.log(); +console.log("Dependencies linked!"); diff --git a/packages/website/config.toml b/packages/website/config.toml new file mode 100644 index 0000000..56d5c27 --- /dev/null +++ b/packages/website/config.toml @@ -0,0 +1,22 @@ +# The URL the site will be built for +base_url = "https://mini-strap.alecodes.page" + +output_dir = "dist" + +# Managed by bun +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 +highlight_code = true + +[extra] +# Put all your custom variables here diff --git a/packages/website/content/_index.md b/packages/website/content/_index.md new file mode 100644 index 0000000..1e83855 --- /dev/null +++ b/packages/website/content/_index.md @@ -0,0 +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..7c92c86 --- /dev/null +++ b/packages/website/content/components/accordion.md @@ -0,0 +1,41 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# Accordion + +## Basic + +The accordion component allows to hide and show content in the page. The +accordion is composed of the following elements: + +- `msp-accordion`: the main container that encapsulates multiple toggable elements. +- `msp-accordion-item`: a single toggable element. +- `msp-accordion-header`: this element acts as the header and responds to the `onclick` event to toggle the content. +- `msp-accordion-collapse`: container for the content, needed to help with dynamic height and transitions. +- `msp-accordion-content`: the content of the accordion. + +### 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..1c398f2 --- /dev/null +++ b/packages/website/content/components/offcanvas.md @@ -0,0 +1,76 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# Offcanvas + +## Basic + +The offcanvas component serves as a sidebar that is hidden out of view until is +toggled via an interactive element. The offcanvas is composed of the following +elements: + +- `msp-offcanvas`: the main container. +- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more. +- `msp-offcanvas-content`: the container for the content. +- `msp-offcanvas-header`: top section of the content. +- `msp-offcanvas-body`: middle section of the content. +- `msp-offcanvas-footer`: bottom section of the content. + +To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an +element and attach the `data-msp-target` attribute. + +### Example: + +```html + + + +
    + +
    ...
    +
    + +``` + +## Responsive + +It's possible to have the sidebar always visible and only hide the offcanvas +when the viewport is below the brakepoint. For this add the class +`msp-offcanvas-[breakpoint]`. + +Note that the toggle and backdrop are disabled when the viewport is above the brakepoint. + +### Example + +```html + + + +
    + +
    ...
    +
    + +``` 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/index.html b/packages/website/index.html deleted file mode 100644 index 44a9335..0000000 --- a/packages/website/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + TS - - -
    - - - diff --git a/packages/website/js/index.ts b/packages/website/js/index.ts new file mode 100644 index 0000000..6d5aa24 --- /dev/null +++ b/packages/website/js/index.ts @@ -0,0 +1,3 @@ +import "@mini-strap/components/accordion/index.ts"; +import "@mini-strap/components/offcanvas/index.ts"; +console.log("hello world!"); diff --git a/packages/website/package.json b/packages/website/package.json index 2114401..3014521 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,20 +1,22 @@ { - "name": "mini-strap-website", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite --port 3000", - "build": "tsc && vite build", - "preview": "vite preview" - }, - "devDependencies": { - "sass-embedded": "^1.78.0", - "typescript": "^5.5.3", - "vite": "^5.4.1" - }, - "dependencies": { - "handlebars": "^4.7.8", - "mini-strap-core": "workspace:*" - } + "name": "website", + "type": "module", + "scripts": { + "link-dependencies": "bun run _scripts/link-dependencies.ts", + "prebuild": "bun run _scripts/build.ts", + "watch-deps": "bun run --watch _scripts/build.ts", + "dev": "zola serve --port 3000 --fast --open", + "ci:publish": "echo 'dummy publish script'" + }, + "dependencies": { + "@mini-strap/core": "workspace:*", + "@mini-strap/components": "workspace:*" + }, + "devDependencies": { + "@types/bun": "latest", + "sass": "^1.83.0" + }, + "peerDependencies": { + "typescript": "^5.0.0" + } } diff --git a/packages/website/public/vite.svg b/packages/website/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/packages/website/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/website/sass/@mini-strap/core/style.scss b/packages/website/sass/@mini-strap/core/style.scss new file mode 120000 index 0000000..60be24d --- /dev/null +++ b/packages/website/sass/@mini-strap/core/style.scss @@ -0,0 +1 @@ +/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss \ No newline at end of file diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss new file mode 100644 index 0000000..b7c6746 --- /dev/null +++ b/packages/website/sass/style.scss @@ -0,0 +1,8 @@ +@use "@mini-strap/core"; +@use "@mini-strap/components/navbar/navbar.scss"; +@use "@mini-strap/components/accordion/accordion.scss"; +@use "@mini-strap/components/offcanvas/style.scss"; + +main { + padding: var(--msp-spacing-3); +} diff --git a/packages/website/src/main.ts b/packages/website/src/main.ts deleted file mode 100644 index ed88f31..0000000 --- a/packages/website/src/main.ts +++ /dev/null @@ -1,16 +0,0 @@ -import "mini-strap-core"; -import render from "./render"; - -import layout from "./templates/form.html"; -import table from "./templates/table.html"; - -document.querySelector("#app")!.innerHTML = ` -
    -
    - ${render(layout, { name: "ale" })} -
    -
    - ${render(table, { name: "ale" })} -
    -
    -`; diff --git a/packages/website/src/render.ts b/packages/website/src/render.ts deleted file mode 100644 index 23684e4..0000000 --- a/packages/website/src/render.ts +++ /dev/null @@ -1,11 +0,0 @@ -import Handlebars from "handlebars"; - -export default function (template: string, data: Record) { - const engine = Handlebars.compile(template); - - return engine(data); -} - -export function mapRender(items: string[]) { - return items.join("\n"); -} diff --git a/packages/website/src/templates/form.html b/packages/website/src/templates/form.html deleted file mode 100644 index 50fedf6..0000000 --- a/packages/website/src/templates/form.html +++ /dev/null @@ -1,127 +0,0 @@ -
    -
    -
    - - -
    - We'll never share your email with anyone else. -
    -
    -
    - - -
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - - -
    -
    - -
    - -
    -
    - Disabled fieldset example -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - -
    -
    diff --git a/packages/website/src/templates/layout.html b/packages/website/src/templates/layout.html deleted file mode 100644 index f0b8800..0000000 --- a/packages/website/src/templates/layout.html +++ /dev/null @@ -1 +0,0 @@ -
    {{name}}
    diff --git a/packages/website/src/templates/table.html b/packages/website/src/templates/table.html deleted file mode 100644 index 14fc58d..0000000 --- a/packages/website/src/templates/table.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #FirstLastHandle
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    diff --git a/packages/website/src/vite-env.d.ts b/packages/website/src/vite-env.d.ts deleted file mode 100644 index 0dc7f4a..0000000 --- a/packages/website/src/vite-env.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -/// - -declare module "*.html"; -declare module "*.md"; diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html new file mode 100644 index 0000000..27de743 --- /dev/null +++ b/packages/website/templates/base.html @@ -0,0 +1,26 @@ + + + + + + + + alecodes.page + + + {% block scripts %}{% endblock %} + + + + + + {% include "partials/header.html" %} +
    + + {% block content %}{% endblock %} +
    + + + diff --git a/packages/website/templates/index.html b/packages/website/templates/index.html new file mode 100644 index 0000000..85c2741 --- /dev/null +++ b/packages/website/templates/index.html @@ -0,0 +1,13 @@ +{% extends "base.html" %} + + +{% block content %} +{{section.content | safe}} + +
      + {% for sub in section.subsections %} + {% set sub = get_section(path=sub, metadata_only=true) %} +
    • {{sub.title | safe}}
      • + {% endfor %} +
    +{% endblock content %} diff --git a/packages/website/templates/page.html b/packages/website/templates/page.html new file mode 100644 index 0000000..6d86a98 --- /dev/null +++ b/packages/website/templates/page.html @@ -0,0 +1,6 @@ +{% extends "base.html" %} + + +{% block content %} +{{page.content | safe}} +{% endblock content %} diff --git a/packages/website/templates/partials/header.html b/packages/website/templates/partials/header.html new file mode 100644 index 0000000..41968b2 --- /dev/null +++ b/packages/website/templates/partials/header.html @@ -0,0 +1,31 @@ + diff --git a/packages/website/templates/section.html b/packages/website/templates/section.html new file mode 100644 index 0000000..c520de6 --- /dev/null +++ b/packages/website/templates/section.html @@ -0,0 +1,6 @@ +{% extends "base.html" %} + + +{% 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 diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 0511b9f..238655f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -1,23 +1,27 @@ { "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, + // Enable latest features + "lib": ["ESNext", "DOM"], + "target": "ESNext", "module": "ESNext", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "skipLibCheck": true, + "moduleDetection": "force", + "jsx": "react-jsx", + "allowJs": true, - /* Bundler mode */ + // Bundler mode "moduleResolution": "bundler", "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", + "verbatimModuleSyntax": true, "noEmit": true, - /* Linting */ + // Best practices "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src"] + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false + } } diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts deleted file mode 100644 index f38a931..0000000 --- a/packages/website/vite.config.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { defineConfig } from "vite"; - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [ - // Custom plugin to load markdown files - { - name: "markdown-loader", - transform(code, id) { - if (id.slice(-3) === ".md") { - // For .md files, get the raw content - return `export default ${JSON.stringify(code)};`; - } - }, - }, - { - name: "html-loader", - transform(code, id) { - if (id.slice(-5) === ".html") { - // For .md files, get the raw content - return `export default ${JSON.stringify(code)};`; - } - }, - }, - ], -});