Compare commits
No commits in common. "main" and "v0.0.0" have entirely different histories.
83 changed files with 353 additions and 1593 deletions
|
|
@ -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'
|
|
||||||
35
CHANGELOG.md
35
CHANGELOG.md
|
|
@ -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).
|
|
||||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -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/" }
|
|
||||||
32
cog.toml
32
cog.toml
|
|
@ -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 }
|
|
||||||
12
package.json
12
package.json
|
|
@ -1,8 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@alecodes/mini-strap",
|
"name": "mini-strap",
|
||||||
"version": "0.0.1",
|
|
||||||
"module": "index.ts",
|
"module": "index.ts",
|
||||||
"private": true,
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.10.0",
|
"@eslint/js": "^9.10.0",
|
||||||
"@types/bun": "latest",
|
"@types/bun": "latest",
|
||||||
|
|
@ -16,12 +14,8 @@
|
||||||
"typescript": "^5.0.0"
|
"typescript": "^5.0.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "bun --filter '*' dev",
|
"dev": "bun --filter '*' dev"
|
||||||
"ci:publish": "bun --filter '**/core' ci:publish",
|
|
||||||
"bump": "cog bump --auto --skip-untracked"
|
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"workspaces": [
|
"workspaces": ["packages/*"]
|
||||||
"packages/*"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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).
|
|
||||||
|
|
@ -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");
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "@mini-strap/components",
|
"name": "mini-strap-components",
|
||||||
"version": "0.1.0",
|
"module": "src/components.scss",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"devDependencies": {
|
||||||
"ci:publish": "bun publish --production --frozen-lockfile"
|
"@types/bun": "latest"
|
||||||
},
|
},
|
||||||
"exports": {
|
"peerDependencies": {
|
||||||
".": "./src/index.ts",
|
"typescript": "^5.0.0"
|
||||||
"./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"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,<svg fill="%23000000" viewBox="0 0 24 24" id="down-arrow-circle" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path id="secondary" d="M12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Zm2.83,10.5-2.14,3.12a.82.82,0,0,1-1.38,0L9.17,13.5A1,1,0,0,1,9.86,12h4.28A1,1,0,0,1,14.83,13.5Z" style="fill: %232ca9bc; stroke-width: 2;"></path><path id="primary" d="M12,7v5m.69,4.63,2.14-3.13a1,1,0,0,0-.69-1.5H9.86a1,1,0,0,0-.69,1.5l2.14,3.12A.82.82,0,0,0,12.69,16.63ZM12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Z" style="fill: none; stroke: %23000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>')
|
|
||||||
no-repeat center center;
|
|
||||||
background-size: contain;
|
|
||||||
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-collapse {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 0;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
transition: height 0.5s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import navarHtml from "./navbar/navbar.html";
|
|
||||||
|
|
||||||
export const HTMLComponents = {
|
|
||||||
navbar: navarHtml,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {};
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
{% macro navbar() %}
|
|
||||||
<nav class="msp-navbar msp-navbar-desktop msp-d-none msp-d-lg-block msp-container">
|
|
||||||
<ul class="msp-list-unstyle msp-hstack">
|
|
||||||
{% for i in range(end=3) %}{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{% endmacro navbar %}
|
|
||||||
|
|
||||||
|
|
||||||
{% macro navbar_item(href, label) %}
|
|
||||||
<li class="msp-nav-item">
|
|
||||||
<a class="msp-nav-link active" href="{{ href }}">{{ label }}</a>
|
|
||||||
</li>
|
|
||||||
{% endmacro navbar_item %}
|
|
||||||
|
|
||||||
<div class="msp-text-end msp-d-lg-none">
|
|
||||||
<OffCanvasBtn />
|
|
||||||
<OffCanvas>
|
|
||||||
<nav class="msp-navbar msp-navbar-mobile">
|
|
||||||
<ul class="msp-list-unstyle msp-text-start">
|
|
||||||
{
|
|
||||||
links.map((link) => (
|
|
||||||
<li class="msp-nav-item msp-mb-3">
|
|
||||||
<a class="msp-nav-link" href={link.href}>{link.text}</a>
|
|
||||||
</li>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
<li class="msp-nav-item mb-3">
|
|
||||||
<LangSelector />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</OffCanvas>
|
|
||||||
</div>
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<div id="mobile-nav" class="off-canvas">
|
|
||||||
<div class="off-canvas-content" transition:persist>
|
|
||||||
<button class="off-canvas-toggle" data-target="#mobile-nav">
|
|
||||||
<svg
|
|
||||||
width="40px"
|
|
||||||
height="40px"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="#ffffff"
|
|
||||||
>
|
|
||||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
||||||
<g
|
|
||||||
id="SVGRepo_tracerCarrier"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
></g>
|
|
||||||
<g id="SVGRepo_iconCarrier">
|
|
||||||
<path
|
|
||||||
fill="#cad3f5"
|
|
||||||
d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
|
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="off-canvas-backdrop off-canvas-toggle"
|
|
||||||
data-target="#mobile-nav"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener("astro:page-load", () => {
|
|
||||||
document.querySelectorAll <
|
|
||||||
HTMLElement >
|
|
||||||
".off-canvas-toggle".forEach((btn) =>
|
|
||||||
btn.addEventListener("click", () => {
|
|
||||||
const { target } = btn.dataset;
|
|
||||||
|
|
||||||
if (!target) return;
|
|
||||||
|
|
||||||
document.querySelector(target)?.classList.toggle("active");
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -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<HTMLElement> => {
|
|
||||||
return el.querySelectorAll(query);
|
|
||||||
};
|
|
||||||
|
|
@ -23,8 +23,5 @@
|
||||||
"noUnusedLocals": false,
|
"noUnusedLocals": false,
|
||||||
"noUnusedParameters": false,
|
"noUnusedParameters": false,
|
||||||
"noPropertyAccessFromIndexSignature": false
|
"noPropertyAccessFromIndexSignature": false
|
||||||
|
|
||||||
// library configuration
|
|
||||||
// "baseUrl": "./src/"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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).
|
|
||||||
|
|
@ -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`);
|
|
||||||
Binary file not shown.
|
|
@ -1,23 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "@mini-strap/core",
|
"name": "mini-strap-core",
|
||||||
"version": "0.1.2",
|
"module": "src/style.scss",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"exports": {
|
"devDependencies": {
|
||||||
".": "./src/style.scss",
|
"@types/bun": "latest"
|
||||||
"./mixins": "./src/_mixins.scss"
|
},
|
||||||
},
|
"peerDependencies": {
|
||||||
"bin": {
|
"typescript": "^5.0.0"
|
||||||
"@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"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -155,3 +155,33 @@
|
||||||
:where(sup) {
|
:where(sup) {
|
||||||
top: -0.5em;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
@use "sass:color";
|
@use "sass:color";
|
||||||
@use "sass:map";
|
|
||||||
@use "colors";
|
|
||||||
|
|
||||||
/* Using catppuccin for now, make a theme switcher later */
|
/* Using catppuccin for now, make a theme switcher later */
|
||||||
@use "../themes/catppuccin/catppuccin";
|
@use "../themes/catppuccin/catppuccin";
|
||||||
|
|
||||||
@function getColor($color) {
|
@function getColor($color) {
|
||||||
$ctp-theme: map.get(catppuccin.$palette, "macchiato");
|
$ctp-theme: map-get(catppuccin.$palette, "macchiato");
|
||||||
@return map.get($ctp-theme, $color);
|
@return map-get($ctp-theme, $color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -51,15 +49,12 @@ $msp-colors: (
|
||||||
"--msp-color-bg": #{getColor("mantle")},
|
"--msp-color-bg": #{getColor("mantle")},
|
||||||
"--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
|
"--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
|
||||||
"--msp-color-bg-surface-1": #{getColor("base")},
|
"--msp-color-bg-surface-1": #{getColor("base")},
|
||||||
"--msp-color-bg-surface-2": #{color.adjust(
|
"--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)},
|
||||||
getColor("surface0"),
|
|
||||||
$lightness: -2%
|
|
||||||
)},
|
|
||||||
"--msp-color-bg-surface-3": #{getColor("surface1")},
|
"--msp-color-bg-surface-3": #{getColor("surface1")},
|
||||||
|
|
||||||
"--msp-color-bg-accent": #{getColor("teal")},
|
"--msp-color-bg-accent": #{getColor("teal")},
|
||||||
"--msp-color-bg-primary": #{getColor("mauve")},
|
"--msp-color-bg-primary": #{getColor("teal")},
|
||||||
"--msp-color-bg-secondary": #{getColor("lavender")},
|
"--msp-color-bg-secondary": #{getColor("mauve")},
|
||||||
"--msp-color-bg-danger": #{getColor("red")},
|
"--msp-color-bg-danger": #{getColor("red")},
|
||||||
"--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)},
|
"--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)},
|
||||||
"--msp-color-bg-input": #{getColor("text")},
|
"--msp-color-bg-input": #{getColor("text")},
|
||||||
|
|
@ -91,12 +86,6 @@ $msp-colors: (
|
||||||
"--msp-color-transparent": transparent,
|
"--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
|
// Native CSS Variables to allow overridings and usage in external stylesheets
|
||||||
:root {
|
:root {
|
||||||
@each $variable, $value in $msp-colors {
|
@each $variable, $value in $msp-colors {
|
||||||
|
|
@ -107,10 +96,6 @@ $anim: (
|
||||||
#{$variable}: #{$value};
|
#{$variable}: #{$value};
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $variable, $value in $anim {
|
|
||||||
#{$variable}: #{$value};
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Borders ─────────────────────────────────────────────────────────────
|
// ── Borders ─────────────────────────────────────────────────────────────
|
||||||
--msp-border-width: 1px;
|
--msp-border-width: 1px;
|
||||||
--msp-border-color: var(--msp-color-text-transparent);
|
--msp-border-color: var(--msp-color-text-transparent);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
@use "./tokens" as *;
|
@use "./tokens" as *;
|
||||||
@use "./mixins";
|
@use "./mixins";
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
.msp-position-fixed {
|
.msp-position-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -69,29 +68,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-hstack {
|
.msp-hstack {
|
||||||
--msp-gap: var(--msp-spacing-3);
|
--prj-gap: var(--prj-spacing-3);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--msp-gap);
|
gap: var(--prj-gap);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-hstack-reverse {
|
.msp-hstack-reverse {
|
||||||
--msp-gap: var(--msp-spacing-3);
|
--prj-gap: var(--prj-spacing-3);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--msp-gap);
|
gap: var(--prj-gap);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-vstack {
|
.msp-vstack {
|
||||||
--msp-gap: var(--msp-spacing-3);
|
--prj-gap: var(--prj-spacing-3);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--msp-gap);
|
gap: var(--prj-gap);
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-vstack-reverse {
|
.msp-vstack-reverse {
|
||||||
--msp-gap: var(--msp-spacing-3);
|
--prj-gap: var(--prj-spacing-3);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
}
|
}
|
||||||
|
|
@ -123,18 +122,10 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-justify-content-start {
|
|
||||||
justify-content: start !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msp-justify-content-center {
|
.msp-justify-content-center {
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-justify-content-end {
|
|
||||||
justify-content: end !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msp-justify-content-between {
|
.msp-justify-content-between {
|
||||||
justify-content: space-between !important;
|
justify-content: space-between !important;
|
||||||
}
|
}
|
||||||
|
|
@ -148,16 +139,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-grid {
|
.msp-grid {
|
||||||
--msp-gap: var(--msp-spacing-3);
|
--prj-gap: var(--prj-spacing-3);
|
||||||
--msp-columns: repeat(3, 1fr);
|
--prj-columns: repeat(3, 1fr);
|
||||||
--msp-min-col-width: 150px;
|
--prj-min-col-width: 150px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: var(--msp-columns);
|
grid-template-columns: var(--prj-columns);
|
||||||
gap: var(--msp-gap);
|
gap: var(--prj-gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin grid-cols($amount) {
|
@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 {
|
@for $i from 1 through 12 {
|
||||||
|
|
@ -223,20 +214,20 @@
|
||||||
}
|
}
|
||||||
@for $i from 0 through 100 {
|
@for $i from 0 through 100 {
|
||||||
.msp-w-#{$i} {
|
.msp-w-#{$i} {
|
||||||
width: math.percentage(calc($i / 100));
|
width: percentage(calc($i / 100));
|
||||||
}
|
}
|
||||||
.msp-h-#{$i} {
|
.msp-h-#{$i} {
|
||||||
height: math.percentage(calc($i / 100));
|
height: percentage(calc($i / 100));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
|
@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
|
||||||
.msp-w-#{$breakpoint}-#{$index} {
|
.msp-w-#{$breakpoint}-#{$index} {
|
||||||
width: math.percentage(calc($index / 100));
|
width: percentage(calc($index / 100));
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-h-#{$breakpoint}-#{$index} {
|
.msp-h-#{$breakpoint}-#{$index} {
|
||||||
height: math.percentage(calc($index / 100));
|
height: percentage(calc($index / 100));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -293,7 +284,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-gap-#{$name} {
|
.msp-gap-#{$name} {
|
||||||
--msp-gap: #{$value};
|
--prj-gap: #{$value};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -314,17 +305,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-shadow-1 {
|
.msp-shadow-1 {
|
||||||
box-shadow: 10px 10px 5px 0px var(--msp-shadow);
|
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.msp-border-radius {
|
.msp-border-radius {
|
||||||
border-radius: var(--msp-border-radius);
|
border-radius: var(--prj-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 {
|
.msp-text-none {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
@use "../mixins";
|
@use "../mixins";
|
||||||
@use "sass:color";
|
@use "sass:color";
|
||||||
@use "sass:string";
|
@use "sass:string";
|
||||||
@use "sass:map";
|
|
||||||
|
|
||||||
fieldset:not(.msp-fieldset-border) {
|
fieldset:not(.msp-fieldset-border) {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
@ -73,7 +72,7 @@ input[type="checkbox"] {
|
||||||
background-color: var(--msp-color-bg-checkbox);
|
background-color: var(--msp-color-bg-checkbox);
|
||||||
border-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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
|
--msp-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -107,7 +106,7 @@ input[type="radio"] {
|
||||||
background-color: var(--msp-color-bg-checkbox);
|
background-color: var(--msp-color-bg-checkbox);
|
||||||
border-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");
|
--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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -95,11 +95,9 @@ ul {
|
||||||
/* Make the marker position is inside the container */
|
/* Make the marker position is inside the container */
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: var(--msp-spacing-2);
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-left: var(--msp-spacing-3);
|
margin-left: var(--msp-spacing-3);
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -128,10 +126,3 @@ video.respect-height {
|
||||||
li:not(:last-child) {
|
li:not(:last-child) {
|
||||||
margin-bottom: var(--msp-spacing-1);
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
185
packages/website/.gitignore
vendored
185
packages/website/.gitignore
vendored
|
|
@ -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
|
||||||
|
|
||||||
logs
|
logs
|
||||||
_.log
|
*.log
|
||||||
npm-debug.log_
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
lerna-debug.log*
|
lerna-debug.log*
|
||||||
.pnpm-debug.log*
|
|
||||||
|
|
||||||
# Caches
|
node_modules
|
||||||
|
|
||||||
.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
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
# Gatsby files
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
!.vscode/extensions.json
|
||||||
|
|
||||||
# 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
|
.idea
|
||||||
|
|
||||||
# Finder (MacOS) folder config
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
|
||||||
|
|
@ -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).
|
|
||||||
|
|
@ -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.
|
|
||||||
|
|
@ -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`);
|
|
||||||
|
|
@ -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<void>) {
|
|
||||||
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!");
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
+++
|
|
||||||
|
|
||||||
+++
|
|
||||||
|
|
||||||
# mini-strap Documentation
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Components
|
|
||||||
|
|
||||||
Complex elements that require custom javascript to run
|
|
||||||
|
|
@ -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
|
|
||||||
<ul class="msp-list-unstyle msp-accordion">
|
|
||||||
<li class="msp-accordion-item">
|
|
||||||
<a class="msp-accordion-header" href="#">ITEM 001</a>
|
|
||||||
<div class="msp-accordion-collapse">
|
|
||||||
<div class="msp-list-unstyle msp-accordion-content">
|
|
||||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="msp-accordion-item">
|
|
||||||
<a class="msp-accordion-header" href="#">ITEM 002</a>
|
|
||||||
<div class="msp-accordion-collapse">
|
|
||||||
<div class="msp-list-unstyle msp-accordion-content">
|
|
||||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Components"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# dropdown.md
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Components"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# modal.md
|
|
||||||
|
|
@ -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
|
|
||||||
<body>
|
|
||||||
<aside id="main-offcanvas" class="msp-offcanvas">
|
|
||||||
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
|
|
||||||
|
|
||||||
<div class="msp-offcanvas-content">
|
|
||||||
<div class="msp-offcanvas-body">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<nav>
|
|
||||||
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
|
|
||||||
</nav>
|
|
||||||
<section>...</section>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
|
||||||
<body>
|
|
||||||
<aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
|
|
||||||
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
|
|
||||||
|
|
||||||
<div class="msp-offcanvas-content">
|
|
||||||
<div class="msp-offcanvas-body">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<nav>
|
|
||||||
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
|
|
||||||
</nav>
|
|
||||||
<section>...</section>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
```
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Components"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# tabs.md
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Components"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# tooltip.md
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
+++
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Components
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Content"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Content"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Content"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Content"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
+++
|
|
||||||
+++
|
|
||||||
|
|
||||||
foo
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Elements"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Elements"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Elements"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Elements"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Elements"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Elements"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
+++
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Components
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Layout"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Layout"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Layout"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Layout"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Layout"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
+++
|
|
||||||
[taxonomies]
|
|
||||||
section = ["Layout"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
13
packages/website/index.html
Normal file
13
packages/website/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import "@mini-strap/components/accordion/index.ts";
|
|
||||||
import "@mini-strap/components/offcanvas/index.ts";
|
|
||||||
console.log("hello world!");
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
{
|
{
|
||||||
"name": "website",
|
"name": "mini-strap-website",
|
||||||
"type": "module",
|
"private": true,
|
||||||
"scripts": {
|
"version": "0.0.0",
|
||||||
"link-dependencies": "bun run _scripts/link-dependencies.ts",
|
"type": "module",
|
||||||
"prebuild": "bun run _scripts/build.ts",
|
"scripts": {
|
||||||
"watch-deps": "bun run --watch _scripts/build.ts",
|
"dev": "vite --port 3000",
|
||||||
"dev": "zola serve --port 3000 --fast --open",
|
"build": "tsc && vite build",
|
||||||
"ci:publish": "echo 'dummy publish script'"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"devDependencies": {
|
||||||
"@mini-strap/core": "workspace:*",
|
"sass-embedded": "^1.78.0",
|
||||||
"@mini-strap/components": "workspace:*"
|
"typescript": "^5.5.3",
|
||||||
},
|
"vite": "^5.4.1"
|
||||||
"devDependencies": {
|
},
|
||||||
"@types/bun": "latest",
|
"dependencies": {
|
||||||
"sass": "^1.83.0"
|
"handlebars": "^4.7.8",
|
||||||
},
|
"mini-strap-core": "workspace:*"
|
||||||
"peerDependencies": {
|
}
|
||||||
"typescript": "^5.0.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
packages/website/public/vite.svg
Normal file
1
packages/website/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1 +0,0 @@
|
||||||
/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
16
packages/website/src/main.ts
Normal file
16
packages/website/src/main.ts
Normal file
|
|
@ -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<HTMLDivElement>("#app")!.innerHTML = `
|
||||||
|
<main class="msp-container">
|
||||||
|
<section>
|
||||||
|
${render(layout, { name: "ale" })}
|
||||||
|
</section>
|
||||||
|
<section class="msp-mb-3">
|
||||||
|
${render(table, { name: "ale" })}
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/website/src/render.ts
Normal file
11
packages/website/src/render.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import Handlebars from "handlebars";
|
||||||
|
|
||||||
|
export default function (template: string, data: Record<string, unknown>) {
|
||||||
|
const engine = Handlebars.compile(template);
|
||||||
|
|
||||||
|
return engine(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function mapRender(items: string[]) {
|
||||||
|
return items.join("\n");
|
||||||
|
}
|
||||||
127
packages/website/src/templates/form.html
Normal file
127
packages/website/src/templates/form.html
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label for="exampleInputEmail1" class="">Email address</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
class=""
|
||||||
|
id="exampleInputEmail1"
|
||||||
|
aria-describedby="emailHelp"
|
||||||
|
placeholder="user@email.com"
|
||||||
|
/>
|
||||||
|
<div id="emailHelp" class="">
|
||||||
|
We'll never share your email with anyone else.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label for="exampleInputPassword1" class="">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
class=""
|
||||||
|
id="exampleInputPassword1"
|
||||||
|
placeholder="Secret..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<input type="checkbox" class="" id="exampleCheck1" />
|
||||||
|
<label class="" for="exampleCheck1">Check me out</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
name="flexRadioDefault"
|
||||||
|
id="flexRadioDefault1"
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="flexRadioDefault1">
|
||||||
|
Default radio
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label class="form-check-label" for="flexRadioDefault1">
|
||||||
|
Default range
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="range"
|
||||||
|
name="flexRadioDefault"
|
||||||
|
id="flexRadioDefault1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label class="" for="example-select">Select</label>
|
||||||
|
<select
|
||||||
|
id="example-select"
|
||||||
|
class="form-select"
|
||||||
|
aria-label="Default select example"
|
||||||
|
>
|
||||||
|
<option selected disabled hidden>Open this select menu</option>
|
||||||
|
<option value="1">One</option>
|
||||||
|
<option value="2">Two</option>
|
||||||
|
<option value="3">Three</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label for="formFile" class="form-label"
|
||||||
|
>Default file input example</label
|
||||||
|
>
|
||||||
|
<input class="form-control" type="file" id="formFile" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label for="exampleColorInput" class="form-label">Color picker</label>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
class="form-control form-control-color"
|
||||||
|
id="exampleColorInput"
|
||||||
|
value="#563d7c"
|
||||||
|
title="Choose your color"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<fieldset disabled class="msp-fieldset-border">
|
||||||
|
<legend>Disabled fieldset example</legend>
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label for="disabledTextInput" class="form-label">Disabled input</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="disabledTextInput"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Disabled input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<label for="disabledSelect" class="form-label"
|
||||||
|
>Disabled select menu</label
|
||||||
|
>
|
||||||
|
<select id="disabledSelect" class="form-select">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="msp-mb-3">
|
||||||
|
<div class="form-check">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="disabledFieldsetCheck"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="disabledFieldsetCheck">
|
||||||
|
Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
1
packages/website/src/templates/layout.html
Normal file
1
packages/website/src/templates/layout.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<section>{{name}}</section>
|
||||||
29
packages/website/src/templates/table.html
Normal file
29
packages/website/src/templates/table.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="msp-text-center">#</th>
|
||||||
|
<th scope="col">First</th>
|
||||||
|
<th scope="col">Last</th>
|
||||||
|
<th scope="col">Handle</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td colspan="2">Larry the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
4
packages/website/src/vite-env.d.ts
vendored
Normal file
4
packages/website/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module "*.html";
|
||||||
|
declare module "*.md";
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="description" content="Astro description" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<title>alecodes.page</title>
|
|
||||||
<ViewTransitions />
|
|
||||||
|
|
||||||
{% block scripts %}<script src="/js/index.js"></script>{% endblock %}
|
|
||||||
<link rel="stylesheet" href="/css/style.css" />
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body transition:animate="fade">
|
|
||||||
{% include "partials/header.html" %}
|
|
||||||
<main>
|
|
||||||
<nav class="msp-d-sm-none msp-d-flex msp-justify-content-end">
|
|
||||||
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
|
|
||||||
</nav>
|
|
||||||
{% block content %}{% endblock %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
{{section.content | safe}}
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{% for sub in section.subsections %}
|
|
||||||
{% set sub = get_section(path=sub, metadata_only=true) %}
|
|
||||||
<li><a href="{{sub.permalink}}">{{sub.title | safe}}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% endblock content %}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
{{page.content | safe}}
|
|
||||||
{% endblock content %}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
|
|
||||||
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle"
|
|
||||||
data-msp-target="#main-offcanvas"></div>
|
|
||||||
|
|
||||||
<div class="msp-offcanvas-content">
|
|
||||||
<div class="msp-offcanvas-body">
|
|
||||||
<ul class="msp-list-unstyle msp-accordion">
|
|
||||||
<li>
|
|
||||||
<a href="/">Overview</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{% for item in get_taxonomy(kind="section") | get(key="items") %}
|
|
||||||
<li class="msp-accordion-item">
|
|
||||||
<a class="msp-accordion-header" href="#">{{ item.name |
|
|
||||||
title
|
|
||||||
}}</a>
|
|
||||||
<div class="msp-accordion-collapse">
|
|
||||||
<ul class="msp-list-unstyle msp-accordion-content">
|
|
||||||
{% for page in item.pages %}
|
|
||||||
<li class="">
|
|
||||||
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
{{section.content | safe}}
|
|
||||||
{% endblock content %}
|
|
||||||
|
|
@ -1,27 +1,23 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
// Enable latest features
|
"target": "ES2020",
|
||||||
"lib": ["ESNext", "DOM"],
|
"useDefineForClassFields": true,
|
||||||
"target": "ESNext",
|
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleDetection": "force",
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"jsx": "react-jsx",
|
"skipLibCheck": true,
|
||||||
"allowJs": true,
|
|
||||||
|
|
||||||
// Bundler mode
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"verbatimModuleSyntax": true,
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
|
|
||||||
// Best practices
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"skipLibCheck": true,
|
"noUnusedLocals": true,
|
||||||
"noFallthroughCasesInSwitch": true,
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
// Some stricter flags (disabled by default)
|
},
|
||||||
"noUnusedLocals": false,
|
"include": ["src"]
|
||||||
"noUnusedParameters": false,
|
|
||||||
"noPropertyAccessFromIndexSignature": false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
26
packages/website/vite.config.ts
Normal file
26
packages/website/vite.config.ts
Normal file
|
|
@ -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)};`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue