diff --git a/.forgejo/workflows/publish.yaml b/.forgejo/workflows/publish.yaml deleted file mode 100644 index 5f1ea52..0000000 --- a/.forgejo/workflows/publish.yaml +++ /dev/null @@ -1,45 +0,0 @@ -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 deleted file mode 100644 index da42681..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,35 +0,0 @@ -# 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 dec149c..74b89ee 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/bunfig.toml b/bunfig.toml deleted file mode 100644 index 63cb7c5..0000000 --- a/bunfig.toml +++ /dev/null @@ -1,4 +0,0 @@ -[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 deleted file mode 100644 index a38f600..0000000 --- a/cog.toml +++ /dev/null @@ -1,32 +0,0 @@ -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 cd42aea..5b82e52 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,6 @@ { - "name": "@alecodes/mini-strap", - "version": "0.0.1", + "name": "mini-strap", "module": "index.ts", - "private": true, "devDependencies": { "@eslint/js": "^9.10.0", "@types/bun": "latest", @@ -16,12 +14,8 @@ "typescript": "^5.0.0" }, "scripts": { - "dev": "bun --filter '*' dev", - "ci:publish": "bun --filter '**/core' ci:publish", - "bump": "cog bump --auto --skip-untracked" + "dev": "bun --filter '*' dev" }, "type": "module", - "workspaces": [ - "packages/*" - ] + "workspaces": ["packages/*"] } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md deleted file mode 100644 index 18e7970..0000000 --- a/packages/components/CHANGELOG.md +++ /dev/null @@ -1,20 +0,0 @@ -# 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 deleted file mode 100644 index 2b7ea8c..0000000 --- a/packages/components/build.ts +++ /dev/null @@ -1,32 +0,0 @@ -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 3788988..5dcfbc8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,24 +1,12 @@ { - "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" - } + "name": "mini-strap-components", + "module": "src/components.scss", + "type": "module", + "devDependencies": { + "@types/bun": "latest" + }, + "peerDependencies": { + "typescript": "^5.0.0" + } } + diff --git a/packages/components/src/accordion/accordion.scss b/packages/components/src/accordion/accordion.scss deleted file mode 100644 index 39555c5..0000000 --- a/packages/components/src/accordion/accordion.scss +++ /dev/null @@ -1,41 +0,0 @@ -.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 deleted file mode 100644 index 348e7a7..0000000 --- a/packages/components/src/accordion/index.ts +++ /dev/null @@ -1,53 +0,0 @@ -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 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 d25e7e9..0000000 --- a/packages/components/src/navbar/navbar.html +++ /dev/null @@ -1,34 +0,0 @@ -{% 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 deleted file mode 100644 index f62025f..0000000 --- a/packages/components/src/navbar/navbar.scss +++ /dev/null @@ -1,47 +0,0 @@ -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 deleted file mode 100644 index e9461db..0000000 --- a/packages/components/src/offcanvas/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index c782035..0000000 --- a/packages/components/src/offcanvas/style.scss +++ /dev/null @@ -1,89 +0,0 @@ -@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 deleted file mode 100644 index 7d9ee35..0000000 --- a/packages/components/src/offcanvas/template.html +++ /dev/null @@ -1,51 +0,0 @@ -
    -
    - - -
    - -
    -
    - -
    -
    - - diff --git a/packages/components/src/utils.ts b/packages/components/src/utils.ts deleted file mode 100644 index 0df8cd7..0000000 --- a/packages/components/src/utils.ts +++ /dev/null @@ -1,13 +0,0 @@ -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 2e82a45..238655f 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -23,8 +23,5 @@ "noUnusedLocals": false, "noUnusedParameters": false, "noPropertyAccessFromIndexSignature": false - - // library configuration - // "baseUrl": "./src/" } } diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md deleted file mode 100644 index 8b2cab0..0000000 --- a/packages/core/CHANGELOG.md +++ /dev/null @@ -1,41 +0,0 @@ -# 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 deleted file mode 100644 index 6182e2d..0000000 --- a/packages/core/build.ts +++ /dev/null @@ -1,99 +0,0 @@ -#!/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 deleted file mode 100755 index 0c40387..0000000 Binary files a/packages/core/bun.lockb and /dev/null differ diff --git a/packages/core/package.json b/packages/core/package.json index 097ffae..dce323a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,23 +1,12 @@ { - "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" - } + "name": "mini-strap-core", + "module": "src/style.scss", + "type": "module", + "devDependencies": { + "@types/bun": "latest" + }, + "peerDependencies": { + "typescript": "^5.0.0" + } } + diff --git a/packages/core/src/_colors.scss b/packages/core/src/_colors.scss deleted file mode 100644 index e69de29..0000000 diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss index 76092a6..c4e42f8 100644 --- a/packages/core/src/_reset.scss +++ b/packages/core/src/_reset.scss @@ -155,3 +155,33 @@ :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 7ea321d..b4b9436 100644 --- a/packages/core/src/_tokens.scss +++ b/packages/core/src/_tokens.scss @@ -1,13 +1,11 @@ @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); } /* @@ -51,15 +49,12 @@ $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": #{color.adjust( - getColor("surface0"), - $lightness: -2% - )}, + "--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)}, "--msp-color-bg-surface-3": #{getColor("surface1")}, "--msp-color-bg-accent": #{getColor("teal")}, - "--msp-color-bg-primary": #{getColor("mauve")}, - "--msp-color-bg-secondary": #{getColor("lavender")}, + "--msp-color-bg-primary": #{getColor("teal")}, + "--msp-color-bg-secondary": #{getColor("mauve")}, "--msp-color-bg-danger": #{getColor("red")}, "--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)}, "--msp-color-bg-input": #{getColor("text")}, @@ -91,12 +86,6 @@ $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 { @@ -107,10 +96,6 @@ $anim: ( #{$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 86ba495..82968ee 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -1,6 +1,5 @@ @use "./tokens" as *; @use "./mixins"; -@use "sass:math"; .msp-position-fixed { position: fixed; @@ -69,29 +68,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; } @@ -123,18 +122,10 @@ 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; } @@ -148,16 +139,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 { @@ -223,20 +214,20 @@ } @for $i from 0 through 100 { .msp-w-#{$i} { - width: math.percentage(calc($i / 100)); + width: percentage(calc($i / 100)); } .msp-h-#{$i} { - height: math.percentage(calc($i / 100)); + height: percentage(calc($i / 100)); } } @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) { .msp-w-#{$breakpoint}-#{$index} { - width: math.percentage(calc($index / 100)); + width: percentage(calc($index / 100)); } .msp-h-#{$breakpoint}-#{$index} { - height: math.percentage(calc($index / 100)); + height: percentage(calc($index / 100)); } } @@ -293,7 +284,7 @@ } .msp-gap-#{$name} { - --msp-gap: #{$value}; + --prj-gap: #{$value}; } } @@ -314,17 +305,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); -} - -@each $index, $variable, $value in $spacings { - .msp-border-#{$index} { - border: #{$index}px var(--msp-border-style) var(--msp-border-color); - } + border-radius: var(--prj-border-radius); } .msp-text-none { diff --git a/packages/core/src/components/form.scss b/packages/core/src/components/form.scss index f381e27..1ad5205 100644 --- a/packages/core/src/components/form.scss +++ b/packages/core/src/components/form.scss @@ -2,7 +2,6 @@ @use "../mixins"; @use "sass:color"; @use "sass:string"; -@use "sass:map"; fieldset:not(.msp-fieldset-border) { min-width: 0; @@ -73,7 +72,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,'); } } @@ -107,7 +106,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 e05b1bd..53f7103 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -95,11 +95,9 @@ 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; } } @@ -128,10 +126,3 @@ 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 f11efde..a547bf3 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -1,181 +1,24 @@ - -# 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* -# 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 +node_modules dist +dist-ssr +*.local -# 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 +# Editor directories and files +.vscode/* +!.vscode/extensions.json .idea - -# Finder (MacOS) folder config .DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md deleted file mode 100644 index a8d8084..0000000 --- a/packages/website/CHANGELOG.md +++ /dev/null @@ -1,35 +0,0 @@ -# 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 deleted file mode 100644 index 7816149..0000000 --- a/packages/website/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# 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 deleted file mode 100644 index a49e87b..0000000 --- a/packages/website/_scripts/build.ts +++ /dev/null @@ -1,128 +0,0 @@ -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 deleted file mode 100644 index ea59160..0000000 --- a/packages/website/_scripts/link-dependencies.ts +++ /dev/null @@ -1,45 +0,0 @@ -#!/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 deleted file mode 100644 index 56d5c27..0000000 --- a/packages/website/config.toml +++ /dev/null @@ -1,22 +0,0 @@ -# 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 deleted file mode 100644 index 1e83855..0000000 --- a/packages/website/content/_index.md +++ /dev/null @@ -1,5 +0,0 @@ -+++ - -+++ - -# mini-strap Documentation diff --git a/packages/website/content/components/_index.md b/packages/website/content/components/_index.md deleted file mode 100644 index f55553b..0000000 --- a/packages/website/content/components/_index.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -+++ - -# 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 deleted file mode 100644 index 7c92c86..0000000 --- a/packages/website/content/components/accordion.md +++ /dev/null @@ -1,41 +0,0 @@ -+++ -[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 deleted file mode 100644 index c1fb188..0000000 --- a/packages/website/content/components/dropdown.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Components"] -+++ - -# dropdown.md diff --git a/packages/website/content/components/modal.md b/packages/website/content/components/modal.md deleted file mode 100644 index c4d19c5..0000000 --- a/packages/website/content/components/modal.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Components"] -+++ - -# modal.md diff --git a/packages/website/content/components/offcanvas.md b/packages/website/content/components/offcanvas.md deleted file mode 100644 index 1c398f2..0000000 --- a/packages/website/content/components/offcanvas.md +++ /dev/null @@ -1,76 +0,0 @@ -+++ -[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 deleted file mode 100644 index d256dfe..0000000 --- a/packages/website/content/components/tabs.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Components"] -+++ - -# tabs.md diff --git a/packages/website/content/components/tooltip.md b/packages/website/content/components/tooltip.md deleted file mode 100644 index f12205f..0000000 --- a/packages/website/content/components/tooltip.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Components"] -+++ - -# tooltip.md diff --git a/packages/website/content/content/_index.md b/packages/website/content/content/_index.md deleted file mode 100644 index cb14ecb..0000000 --- a/packages/website/content/content/_index.md +++ /dev/null @@ -1,4 +0,0 @@ -+++ -+++ - -# Components diff --git a/packages/website/content/content/fonts.md b/packages/website/content/content/fonts.md deleted file mode 100644 index 9577274..0000000 --- a/packages/website/content/content/fonts.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Content"] -+++ - -# Buttons diff --git a/packages/website/content/content/forms.md b/packages/website/content/content/forms.md deleted file mode 100644 index 9577274..0000000 --- a/packages/website/content/content/forms.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Content"] -+++ - -# Buttons diff --git a/packages/website/content/content/image.md b/packages/website/content/content/image.md deleted file mode 100644 index 9577274..0000000 --- a/packages/website/content/content/image.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Content"] -+++ - -# Buttons diff --git a/packages/website/content/content/table.md b/packages/website/content/content/table.md deleted file mode 100644 index 9577274..0000000 --- a/packages/website/content/content/table.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Content"] -+++ - -# Buttons diff --git a/packages/website/content/elements/_index.md b/packages/website/content/elements/_index.md deleted file mode 100644 index f0a0b6d..0000000 --- a/packages/website/content/elements/_index.md +++ /dev/null @@ -1,4 +0,0 @@ -+++ -+++ - -foo diff --git a/packages/website/content/elements/button.md b/packages/website/content/elements/button.md deleted file mode 100644 index 75847dd..0000000 --- a/packages/website/content/elements/button.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Elements"] -+++ - -# Buttons diff --git a/packages/website/content/elements/card.md b/packages/website/content/elements/card.md deleted file mode 100644 index 75847dd..0000000 --- a/packages/website/content/elements/card.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Elements"] -+++ - -# Buttons diff --git a/packages/website/content/elements/links.md b/packages/website/content/elements/links.md deleted file mode 100644 index 75847dd..0000000 --- a/packages/website/content/elements/links.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Elements"] -+++ - -# Buttons diff --git a/packages/website/content/elements/list.md b/packages/website/content/elements/list.md deleted file mode 100644 index 75847dd..0000000 --- a/packages/website/content/elements/list.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Elements"] -+++ - -# Buttons diff --git a/packages/website/content/elements/navbar.md b/packages/website/content/elements/navbar.md deleted file mode 100644 index 75847dd..0000000 --- a/packages/website/content/elements/navbar.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Elements"] -+++ - -# Buttons diff --git a/packages/website/content/elements/pagination.md b/packages/website/content/elements/pagination.md deleted file mode 100644 index 75847dd..0000000 --- a/packages/website/content/elements/pagination.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Elements"] -+++ - -# Buttons diff --git a/packages/website/content/layout/_index.md b/packages/website/content/layout/_index.md deleted file mode 100644 index cb14ecb..0000000 --- a/packages/website/content/layout/_index.md +++ /dev/null @@ -1,4 +0,0 @@ -+++ -+++ - -# Components diff --git a/packages/website/content/layout/container.md b/packages/website/content/layout/container.md deleted file mode 100644 index 72e8acf..0000000 --- a/packages/website/content/layout/container.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Layout"] -+++ - -# Buttons diff --git a/packages/website/content/layout/display.md b/packages/website/content/layout/display.md deleted file mode 100644 index 72e8acf..0000000 --- a/packages/website/content/layout/display.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Layout"] -+++ - -# Buttons diff --git a/packages/website/content/layout/grid.md b/packages/website/content/layout/grid.md deleted file mode 100644 index 72e8acf..0000000 --- a/packages/website/content/layout/grid.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Layout"] -+++ - -# Buttons diff --git a/packages/website/content/layout/position.md b/packages/website/content/layout/position.md deleted file mode 100644 index 72e8acf..0000000 --- a/packages/website/content/layout/position.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Layout"] -+++ - -# Buttons diff --git a/packages/website/content/layout/responsive-helpers.md b/packages/website/content/layout/responsive-helpers.md deleted file mode 100644 index 72e8acf..0000000 --- a/packages/website/content/layout/responsive-helpers.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Layout"] -+++ - -# Buttons diff --git a/packages/website/content/layout/spacing.md b/packages/website/content/layout/spacing.md deleted file mode 100644 index 72e8acf..0000000 --- a/packages/website/content/layout/spacing.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -[taxonomies] -section = ["Layout"] -+++ - -# Buttons diff --git a/packages/website/index.html b/packages/website/index.html new file mode 100644 index 0000000..44a9335 --- /dev/null +++ b/packages/website/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + TS + + +
    + + + diff --git a/packages/website/js/index.ts b/packages/website/js/index.ts deleted file mode 100644 index 6d5aa24..0000000 --- a/packages/website/js/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -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 3014521..2114401 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,22 +1,20 @@ { - "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" - } + "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:*" + } } diff --git a/packages/website/public/vite.svg b/packages/website/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/packages/website/public/vite.svg @@ -0,0 +1 @@ + \ 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 deleted file mode 120000 index 60be24d..0000000 --- a/packages/website/sass/@mini-strap/core/style.scss +++ /dev/null @@ -1 +0,0 @@ -/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 deleted file mode 100644 index b7c6746..0000000 --- a/packages/website/sass/style.scss +++ /dev/null @@ -1,8 +0,0 @@ -@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 new file mode 100644 index 0000000..ed88f31 --- /dev/null +++ b/packages/website/src/main.ts @@ -0,0 +1,16 @@ +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 new file mode 100644 index 0000000..23684e4 --- /dev/null +++ b/packages/website/src/render.ts @@ -0,0 +1,11 @@ +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 new file mode 100644 index 0000000..50fedf6 --- /dev/null +++ b/packages/website/src/templates/form.html @@ -0,0 +1,127 @@ +
    +
    +
    + + +
    + 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 new file mode 100644 index 0000000..f0b8800 --- /dev/null +++ b/packages/website/src/templates/layout.html @@ -0,0 +1 @@ +
    {{name}}
    diff --git a/packages/website/src/templates/table.html b/packages/website/src/templates/table.html new file mode 100644 index 0000000..14fc58d --- /dev/null +++ b/packages/website/src/templates/table.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #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 new file mode 100644 index 0000000..0dc7f4a --- /dev/null +++ b/packages/website/src/vite-env.d.ts @@ -0,0 +1,4 @@ +/// + +declare module "*.html"; +declare module "*.md"; diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html deleted file mode 100644 index 27de743..0000000 --- a/packages/website/templates/base.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - 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 deleted file mode 100644 index 85c2741..0000000 --- a/packages/website/templates/index.html +++ /dev/null @@ -1,13 +0,0 @@ -{% 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 deleted file mode 100644 index 6d86a98..0000000 --- a/packages/website/templates/page.html +++ /dev/null @@ -1,6 +0,0 @@ -{% 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 deleted file mode 100644 index 41968b2..0000000 --- a/packages/website/templates/partials/header.html +++ /dev/null @@ -1,31 +0,0 @@ - diff --git a/packages/website/templates/section.html b/packages/website/templates/section.html deleted file mode 100644 index c520de6..0000000 --- a/packages/website/templates/section.html +++ /dev/null @@ -1,6 +0,0 @@ -{% 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 deleted file mode 100644 index e69de29..0000000 diff --git a/packages/website/templates/taxonomy_single.html b/packages/website/templates/taxonomy_single.html deleted file mode 100644 index e69de29..0000000 diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 238655f..0511b9f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -1,27 +1,23 @@ { "compilerOptions": { - // Enable latest features - "lib": ["ESNext", "DOM"], - "target": "ESNext", + "target": "ES2020", + "useDefineForClassFields": true, "module": "ESNext", - "moduleDetection": "force", - "jsx": "react-jsx", - "allowJs": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, - // Bundler mode + /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, + "isolatedModules": true, + "moduleDetection": "force", "noEmit": true, - // Best practices + /* Linting */ "strict": true, - "skipLibCheck": true, - "noFallthroughCasesInSwitch": true, - - // Some stricter flags (disabled by default) - "noUnusedLocals": false, - "noUnusedParameters": false, - "noPropertyAccessFromIndexSignature": false - } + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] } diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts new file mode 100644 index 0000000..f38a931 --- /dev/null +++ b/packages/website/vite.config.ts @@ -0,0 +1,26 @@ +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)};`; + } + }, + }, + ], +});