diff --git a/.forgejo/workflows/publish.yaml b/.forgejo/workflows/publish.yaml index d2ead27..5f1ea52 100644 --- a/.forgejo/workflows/publish.yaml +++ b/.forgejo/workflows/publish.yaml @@ -34,21 +34,12 @@ jobs: - name: Install dependencies run: "bun install" - - name: Setup Cog - uses: https://github.com/eshepelyuk/cocogitto-diya@v1 - with: - release: false - git-user: 'Cog Bot' - git-user-email: 'cog@alecodes.page' - - - name: Create release - id: bump + - name: Bump version and publish + uses: https://github.com/cocogitto/cocogitto-action@v3.10 env: NPM_REGISTRY_TOKEN: ${{ secrets.NPM_TOKEN_FORGEJO }} - run: "cog bump --auto" - - - name: Summary - run: | - echo "Bun executable chache found: ${{ steps.setup_bun.outputs.cache-hit }}"; - echo "Bun dependencies chache found: ${{ steps.cache.outputs.cache-hit }}"; - echo "Package published: ${{ steps.publish.outputs.version }}"; + with: + release: true + check-latest-tag-only: true + git-user: 'Cog Bot' + git-user-email: 'cog@alecodes.page' diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..da42681 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,35 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## v0.1.1 - 2025-02-14 +### Package updates +- @mini-strap/core bumped to @mini-strap/core-v0.1.2 +### Global changes +#### Miscellaneous Chores +- update build script - (812e55e) - aleidk + +- - - + +## v0.1.0 - 2024-12-30 +### Package updates +- @mini-strap/core bumped to @mini-strap/core-v0.1.0 +- @mini-strap/components bumped to @mini-strap/components-v0.1.0 +- @mini-strap/website bumped to @mini-strap/website-v0.1.0 +### Global changes +#### Bug Fixes +- add dummy publish script for website - (20cadc8) - aleidk +#### Build system +- fix build setup - (8442bbb) - aleidk +#### Features +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk +- **(website)** add build script for frontend dependencies - (698294c) - aleidk +#### Miscellaneous Chores +- **(website)** add docosaurus as SSG - (85660ac) - Alexander Navarro +- **(website)** migrate from docosaurus to zola SSG - (7e8dc4e) - aleidk +- setup ci workflow - (c1c1cdb) - aleidk +- allow merge commits - (e75f0bb) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 66e0077..dec149c 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/cog.toml b/cog.toml index 5c6d532..a38f600 100644 --- a/cog.toml +++ b/cog.toml @@ -8,13 +8,13 @@ branch_whitelist = [] skip_ci = "[skip ci]" skip_untracked = false pre_bump_hooks = [] -post_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 = [] +post_package_bump_hooks = ["git push", "git push origin {{version_tag}}"] [git_hooks] diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md new file mode 100644 index 0000000..18e7970 --- /dev/null +++ b/packages/components/CHANGELOG.md @@ -0,0 +1,20 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## @mini-strap/components-v0.1.0 - 2024-12-30 +#### Bug Fixes +- **(components)** replace initialization of components to prevent overrides - (8cbd097) - aleidk +- **(components)** properly export html components - (48cafe8) - aleidk +#### Features +- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk +- **(components)** add offcanvas component - (c47a2ef) - aleidk +- **(components)** add the accordion component - (e0ed5a5) - aleidk +- **(components)** add basic components - (d4a1114) - aleidk +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk +#### Miscellaneous Chores +- setup ci workflow - (c1c1cdb) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/packages/components/package.json b/packages/components/package.json index 54e0384..3788988 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,26 +1,24 @@ { - "name": "@mini-strap/components", - "version": "0.0.1", - "module": "src/components.scss", - "type": "module", - "scripts": { - "ci:publish": "bun publish --production --frozen-lockfile" - }, - "exports": { - ".": "./src/components.scss", - "./OffCanvas/": { - "import": "./src/OffCanvas/", - "require": "./src/OffCanvas/" - } - }, - "devDependencies": { - "@types/bun": "latest", - "bun-plugin-dts": "^0.2.3", - "bun-style-loader": "^0.4.0", - "sass": "^1.79.2", - "sass-embedded": "^1.79.1" - }, - "peerDependencies": { - "typescript": "^5.0.0" - } + "name": "@mini-strap/components", + "version": "0.1.0", + "type": "module", + "scripts": { + "ci:publish": "bun publish --production --frozen-lockfile" + }, + "exports": { + ".": "./src/index.ts", + "./navbar/*": "./src/navbar/*", + "./accordion/*": "./src/accordion/*", + "./offcanvas/*": "./src/offcanvas/*" + }, + "devDependencies": { + "@types/bun": "latest", + "bun-plugin-dts": "^0.2.3", + "bun-style-loader": "^0.4.0", + "sass": "^1.79.2", + "sass-embedded": "^1.79.1" + }, + "peerDependencies": { + "typescript": "^5.0.0" + } } diff --git a/packages/components/src/OffCanvas/style.scss b/packages/components/src/OffCanvas/style.scss deleted file mode 100644 index 75abef1..0000000 --- a/packages/components/src/OffCanvas/style.scss +++ /dev/null @@ -1,59 +0,0 @@ -.off-canvas { - .off-canvas-content { - overflow: hidden; - position: fixed; - height: 100vh; - z-index: 5; - - background-color: var(--prj-bg); - - top: 0; - right: 0; - left: 100%; - - padding: var(--prj-spacing-3); - - transition: left 0.4s ease-in-out; - } - - &.active .off-canvas-content { - left: 50%; - } - - .off-canvas-backdrop { - position: fixed; - height: 100vh; - z-index: 4; - - background-color: rgba(0, 0, 0); - opacity: 0; - - top: 0; - right: 0; - left: 100%; - - padding: var(--prj-spacing-3); - - // Delay the left transition on remove so it's desn't appear to be sliding or to be not working - transition: - opacity 0.8s ease, - left 0s linear 1s; - } - - &.active .off-canvas-backdrop { - left: 0%; - opacity: 40%; - transition: - opacity 0.8s ease, - left 0s linear; - } -} - -button.off-canvas-toggle { - width: 40px; - height: 40px; - padding: 0; - border: none; - background: none; - cursor: pointer; -} diff --git a/packages/components/src/accordion/accordion.scss b/packages/components/src/accordion/accordion.scss new file mode 100644 index 0000000..39555c5 --- /dev/null +++ b/packages/components/src/accordion/accordion.scss @@ -0,0 +1,41 @@ +.msp-accordion { + // background-color: red; + + &-item.msp-accordion-show { + .msp-accordion-header::after { + transform: rotate(180deg); + } + } + &-header { + cursor: pointer; + position: relative; + + &::after { + display: inline-block; + position: absolute; + top: 50%; + right: 0; + + transform: rotate(0deg); + translate: 110% -50%; + + content: ""; + width: 1em; + height: 1em; + // TODO: change SVG of the arrow + background: url('data:image/svg+xml;utf8,') + no-repeat center center; + background-size: contain; + + transition: transform 0.5s ease; + } + } + + &-collapse { + overflow: hidden; + height: 0; + display: none; + + transition: height 0.5s ease; + } +} diff --git a/packages/components/src/accordion/index.ts b/packages/components/src/accordion/index.ts new file mode 100644 index 0000000..348e7a7 --- /dev/null +++ b/packages/components/src/accordion/index.ts @@ -0,0 +1,53 @@ +import { qs, qsa } from "../utils"; + +enum AccordionState { + Open = 1, + Closed = 2, +} + +function waitAndHideCollapse(e: TransitionEvent) { + if (!e.target) return; + + const el = e.target as HTMLElement; + el.style.display = "none"; + el.removeEventListener("transitionend", waitAndHideCollapse); +} + +function toggleAccordion(item: HTMLElement, state: AccordionState) { + const collapse = qs(".msp-accordion-collapse", item); + + if (!collapse) throw new Error("Collapse element not found"); + + if (state === AccordionState.Closed) { + collapse.style.height = "0px"; + collapse + .closest(".msp-accordion-item") + ?.classList.remove("msp-accordion-show"); + + collapse.addEventListener("transitionend", waitAndHideCollapse); + } else if (state === AccordionState.Open) { + collapse.style.display = "block"; + + const height = qs(".msp-accordion-content", collapse)?.offsetHeight; + if (height == null) throw new Error("Content element not found"); + + collapse.style.height = `${height}px`; + collapse + .closest(".msp-accordion-item") + ?.classList.add("msp-accordion-show"); + } +} + +document.addEventListener("DOMContentLoaded", () => { + qsa(".msp-accordion-item").forEach((item) => { + qs(".msp-accordion-header", item)?.addEventListener("click", (e) => { + e.preventDefault(); + toggleAccordion( + item, + item.classList.contains("msp-accordion-show") + ? AccordionState.Closed + : AccordionState.Open, + ); + }); + }); +}); diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts new file mode 100644 index 0000000..04ed79b --- /dev/null +++ b/packages/components/src/index.ts @@ -0,0 +1,7 @@ +import navarHtml from "./navbar/navbar.html"; + +export const HTMLComponents = { + navbar: navarHtml, +}; + +export default {}; diff --git a/packages/components/src/navbar/navbar.html b/packages/components/src/navbar/navbar.html new file mode 100644 index 0000000..d25e7e9 --- /dev/null +++ b/packages/components/src/navbar/navbar.html @@ -0,0 +1,34 @@ +{% macro navbar() %} + +{% endmacro navbar %} + + +{% macro navbar_item(href, label) %} +
  • + {{ label }} +
    • +{% endmacro navbar_item %} + +
    + + + + +
    diff --git a/packages/components/src/navbar/navbar.scss b/packages/components/src/navbar/navbar.scss new file mode 100644 index 0000000..f62025f --- /dev/null +++ b/packages/components/src/navbar/navbar.scss @@ -0,0 +1,47 @@ +nav.msp-navbar { + width: 100%; + + ul { + padding: 0; + + li { + margin-bottom: 0; + height: 100%; + } + } + + li > a { + padding: 0.25rem 0.5rem; + } + + a { + --boder-color: transparent; + border: 1px solid transparent; + border-radius: 4px; + text-decoration: none; + + transition: + background-color 200ms, + color 200ms; + } + + a.active { + border: 1px solid var(--msp-color-bg-accent); + } + + a:hover { + --border-color: var(--msp-color-bg-accent); + background-color: var(--msp-color-bg-accent); + color: var(--msp-color-text-accent); + border: 1px solid var(--border-color); + } +} + +.msp-navbar-desktop ul { + width: fit-content; + margin-left: auto; + + .nav-item { + margin-bottom: 0; + } +} diff --git a/packages/components/src/offcanvas/index.ts b/packages/components/src/offcanvas/index.ts new file mode 100644 index 0000000..e9461db --- /dev/null +++ b/packages/components/src/offcanvas/index.ts @@ -0,0 +1,21 @@ +import { qs, qsa } from "../utils"; + +document.addEventListener("DOMContentLoaded", () => { + qsa(".msp-offcanvas-toggle").forEach((item) => { + item.addEventListener("click", () => { + const target = item.dataset.mspTarget; + + if (!target) { + throw new Error("No target provided"); + } + + const targetElement = qs(target); + + if (!targetElement) { + throw new Error("No target found"); + } + + targetElement.classList.toggle("show"); + }); + }); +}); diff --git a/packages/components/src/offcanvas/style.scss b/packages/components/src/offcanvas/style.scss new file mode 100644 index 0000000..c782035 --- /dev/null +++ b/packages/components/src/offcanvas/style.scss @@ -0,0 +1,89 @@ +@use "@mini-strap/core/mixins"; + +:root { + --msp-offcanvas-anim-duration: var(--msp-anim-duration-md); + --msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1); + --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19); + + --msp-offcanvas-width: 15ch; +} + +.msp-offcanvas { + position: fixed; + width: var(--msp-offcanvas-width); + height: 100vh; + top: 0; + left: -100%; + + transition: left var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-out); + + &-content { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + z-index: 5; + + background-color: var(--msp-color-bg-surface-1); + + padding: var(--msp-spacing-3); + + &-body, + &-header, + &-footer { + position: relative; + z-index: 5; + } + } + + &.show { + left: 0; + + transition: left var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-in); + + .msp-offcanvas-backdrop { + opacity: 40%; + left: 0; + + transition: + opacity var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-in), + left 0s linear; + } + } + + .msp-offcanvas-backdrop { + position: fixed; + height: 100vh; + width: 100vw; + z-index: 4; + + background-color: rgba(0, 0, 0); + opacity: 0; + + top: 0; + left: -100%; + // Delay the width transition on remove so it's desn't appear to be sliding or to be not working + transition: + opacity var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-out), + left 0s linear var(--msp-offcanvas-anim-duration); + } +} + +@include mixins.responsive using($breakpoint, $size) { + .msp-offcanvas.msp-offcanvas-#{$breakpoint} { + width: var(--msp-offcanvas-width); + left: 0; + + & ~ * { + margin-left: var(--msp-offcanvas-width); + } + + .msp-offcanvas-backdrop { + display: none !important; + } + } +} diff --git a/packages/components/src/OffCanvas/template.html b/packages/components/src/offcanvas/template.html similarity index 100% rename from packages/components/src/OffCanvas/template.html rename to packages/components/src/offcanvas/template.html diff --git a/packages/components/src/utils.ts b/packages/components/src/utils.ts new file mode 100644 index 0000000..0df8cd7 --- /dev/null +++ b/packages/components/src/utils.ts @@ -0,0 +1,13 @@ +export const qs = ( + query: string, + el: Element | Document = document, +): HTMLElement | null => { + return el.querySelector(query); +}; + +export const qsa = ( + query: string, + el: Element | Document = document, +): NodeListOf => { + return el.querySelectorAll(query); +}; diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md new file mode 100644 index 0000000..8b2cab0 --- /dev/null +++ b/packages/core/CHANGELOG.md @@ -0,0 +1,41 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## @mini-strap/core-v0.1.2 - 2025-02-14 +#### Bug Fixes +- build binary of core - (e80fa61) - aleidk + +- - - + +## @mini-strap/core-v0.1.1 - 2025-02-14 +#### Miscellaneous Chores +- update build script - (812e55e) - aleidk + +- - - + +## @mini-strap/core-v0.1.0 - 2024-12-30 +#### Bug Fixes +- **(core)** update old css variables names - (9c6d935) - aleidk +- remove deprecation warnings from sass - (b452baa) - aleidk +#### Build system +- fix build setup - (8442bbb) - aleidk +#### Features +- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk +- **(components)** add offcanvas component - (c47a2ef) - aleidk +- **(components)** add basic components - (d4a1114) - aleidk +- **(website)** add offcanvas documentation - (c0a20f8) - aleidk +- **(website)** add build script for frontend dependencies - (698294c) - aleidk +#### Miscellaneous Chores +- setup ci workflow - (c1c1cdb) - aleidk + +- - - + +## v0.0.0 - 2024-12-30 +#### Features +- **(core)** add styles for vanilla tables - (cf0b401) - aleidk +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/packages/core/build.ts b/packages/core/build.ts new file mode 100644 index 0000000..6182e2d --- /dev/null +++ b/packages/core/build.ts @@ -0,0 +1,99 @@ +#!/usr/bin/env bun + +import type { BuildConfig, BunPlugin, PluginBuilder } from "bun"; +import { parseArgs } from "node:util"; +import type { FileImporter } from "sass"; + +const { values, positionals } = parseArgs({ + args: Bun.argv, + options: { + production: { + type: "boolean", + short: "p", + default: true, + }, + filter: { + type: "string", + short: "f", + default: "all", + }, + }, + strict: true, + allowPositionals: true, +}); + +const outdir = positionals.at(2); + +if (!outdir) { + throw new Error("No outdir provided!"); +} + +const nodeModuleImporter: FileImporter<"async"> = { + findFileUrl(url) { + if (url.startsWith("@")) { + return new URL(import.meta.resolve(url)); + } + + return null; + }, +}; + +const sassPlugin: BunPlugin = { + name: "Sass Loader", + async setup(build: PluginBuilder) { + const sass = await import("sass"); + build.onLoad({ filter: /\.scss$/ }, async ({ path }) => { + // read and compile it with the sass compiler + const result = await sass.compileAsync(path, { + importers: [nodeModuleImporter], + }); + + return { + loader: "css", + contents: result.css, + }; + }); + }, +}; + +const assets: BuildConfig[] = []; + +const filter = values.filter ?? "all"; + +if (["all", "sass"].includes(filter)) { + assets.push({ + entrypoints: ["./src/style.scss"], + outdir: `${outdir}/css`, + naming: "[name].css", + plugins: [sassPlugin], + minify: values.production, + + // On by default in Bun v1.2+ + html: true, + experimentalCss: true, + }); +} + +// if (["all", "js", "ts"].includes(filter)) { +// assets.push({ +// entrypoints: ["./js/index.ts"], +// outdir: `${outdir}/js`, +// target: "browser", +// splitting: values.production, +// minify: values.production, +// }); +// } + +await Promise.all( + assets.map(async (item) => { + const result = await Bun.build(item); + + if (!result.success) { + throw new AggregateError(result.logs, "Build failed"); + } + + return result; + }), +); + +console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`); diff --git a/packages/core/package.json b/packages/core/package.json index 4c14d3c..097ffae 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,8 +1,14 @@ { "name": "@mini-strap/core", - "version": "0.0.1", - "module": "src/style.scss", + "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" diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss index c4e42f8..76092a6 100644 --- a/packages/core/src/_reset.scss +++ b/packages/core/src/_reset.scss @@ -155,33 +155,3 @@ :where(sup) { top: -0.5em; } - -// ── Other ─────────────────────────────────────────────────────────────── - -:where(a) { - background-color: transparent; -} - -:where(abbr[title]) { - text-decoration: underline dotted; -} - -:where(code, kbd, samp, pre) { - font-family: monospace, monospace; - font-size: 1em; -} - -:where(sub, sup) { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -:where(sub) { - bottom: -0.25em; -} - -:where(sup) { - top: -0.5em; -} diff --git a/packages/core/src/_tokens.scss b/packages/core/src/_tokens.scss index 8655783..7ea321d 100644 --- a/packages/core/src/_tokens.scss +++ b/packages/core/src/_tokens.scss @@ -91,6 +91,12 @@ $msp-colors: ( "--msp-color-transparent": transparent, ); +$anim: ( + "--msp-anim-duration-sm": 0.4s, + "--msp-anim-duration-md": 0.8s, + "--msp-anim-duration-lg": 1s, +); + // Native CSS Variables to allow overridings and usage in external stylesheets :root { @each $variable, $value in $msp-colors { @@ -101,6 +107,10 @@ $msp-colors: ( #{$variable}: #{$value}; } + @each $variable, $value in $anim { + #{$variable}: #{$value}; + } + // ── Borders ───────────────────────────────────────────────────────────── --msp-border-width: 1px; --msp-border-color: var(--msp-color-text-transparent); diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss index d7032e7..86ba495 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -69,29 +69,29 @@ } .msp-hstack { - --prj-gap: var(--prj-spacing-3); + --msp-gap: var(--msp-spacing-3); display: flex; - gap: var(--prj-gap); + gap: var(--msp-gap); align-items: center; } .msp-hstack-reverse { - --prj-gap: var(--prj-spacing-3); + --msp-gap: var(--msp-spacing-3); display: flex; - gap: var(--prj-gap); + gap: var(--msp-gap); align-items: center; flex-direction: row-reverse; } .msp-vstack { - --prj-gap: var(--prj-spacing-3); + --msp-gap: var(--msp-spacing-3); display: flex; - gap: var(--prj-gap); + gap: var(--msp-gap); flex-direction: column; } .msp-vstack-reverse { - --prj-gap: var(--prj-spacing-3); + --msp-gap: var(--msp-spacing-3); display: flex; flex-direction: column-reverse; } @@ -123,10 +123,18 @@ align-items: center; } +.msp-justify-content-start { + justify-content: start !important; +} + .msp-justify-content-center { justify-content: center !important; } +.msp-justify-content-end { + justify-content: end !important; +} + .msp-justify-content-between { justify-content: space-between !important; } @@ -140,16 +148,16 @@ } .msp-grid { - --prj-gap: var(--prj-spacing-3); - --prj-columns: repeat(3, 1fr); - --prj-min-col-width: 150px; + --msp-gap: var(--msp-spacing-3); + --msp-columns: repeat(3, 1fr); + --msp-min-col-width: 150px; display: grid; - grid-template-columns: var(--prj-columns); - gap: var(--prj-gap); + grid-template-columns: var(--msp-columns); + gap: var(--msp-gap); } @mixin grid-cols($amount) { - --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr)); + --msp-columns: repeat(#{$amount}, minmax(var(--msp-min-col-width), 1fr)); } @for $i from 1 through 12 { @@ -285,7 +293,7 @@ } .msp-gap-#{$name} { - --prj-gap: #{$value}; + --msp-gap: #{$value}; } } @@ -306,11 +314,17 @@ } .msp-shadow-1 { - box-shadow: 10px 10px 5px 0px var(--prj-shadow); + box-shadow: 10px 10px 5px 0px var(--msp-shadow); } .msp-border-radius { - border-radius: var(--prj-border-radius); + border-radius: var(--msp-border-radius); +} + +@each $index, $variable, $value in $spacings { + .msp-border-#{$index} { + border: #{$index}px var(--msp-border-style) var(--msp-border-color); + } } .msp-text-none { diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 53f7103..e05b1bd 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -95,9 +95,11 @@ ul { /* Make the marker position is inside the container */ list-style-position: inside; margin: 0; + margin-bottom: var(--msp-spacing-2); ul { margin-left: var(--msp-spacing-3); + margin-bottom: 0; } } @@ -126,3 +128,10 @@ video.respect-height { li:not(:last-child) { margin-bottom: var(--msp-spacing-1); } + +:where(code, kbd, samp, pre):not([data-lang]) { + background-color: var(--msp-color-bg-surface-2); + padding: 0 var(--msp-spacing-1); + border-radius: var(--msp-border-radius); + white-space: nowrap; +} diff --git a/packages/website/.gitignore b/packages/website/.gitignore index b2d6de3..f11efde 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -1,20 +1,181 @@ -# Dependencies -/node_modules -# Production -/build +# Compiled assets managed by bun +static/css/**/* +static/js/**/* +templates/ext-components/**/* -# Generated files -.docusaurus -.cache-loader +# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore -# Misc -.DS_Store -.env.local +# Logs + +logs +_.log +npm-debug.log_ +yarn-debug.log* +yarn-error.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 -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# parcel-bundler cache (https://parceljs.org/) + +.parcel-cache + +# Next.js build output + +.next +out + +# Nuxt.js build / generate output + +.nuxt +dist + +# Gatsby files + +# Comment in the public line in if your project uses Gatsby and not Next.js + +# https://nextjs.org/blog/next-9-1#public-directory-support + +# public + +# vuepress build output + +.vuepress/dist + +# vuepress v2.x temp and cache directory + +.temp + +# Docusaurus cache and generated files + +.docusaurus + +# Serverless directories + +.serverless/ + +# FuseBox cache + +.fusebox/ + +# DynamoDB Local files + +.dynamodb/ + +# TernJS port file + +.tern-port + +# Stores VSCode versions used for testing VSCode extensions + +.vscode-test + +# yarn v2 + +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# IntelliJ based IDEs +.idea + +# Finder (MacOS) folder config +.DS_Store diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md new file mode 100644 index 0000000..a8d8084 --- /dev/null +++ b/packages/website/CHANGELOG.md @@ -0,0 +1,35 @@ +# Changelog +All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. + +- - - +## @mini-strap/website-v0.1.0 - 2024-12-30 +#### Bug Fixes +- **(components)** replace initialization of components to prevent overrides - (8cbd097) - aleidk +- add dummy publish script for website - (20cadc8) - aleidk +#### Build system +- fix build setup - (8442bbb) - aleidk +#### Features +- **(components)** allow to only hide offcanvas on breakpoint - (37a1551) - aleidk +- **(components)** add offcanvas component - (c47a2ef) - aleidk +- **(components)** add the accordion component - (e0ed5a5) - aleidk +- **(components)** add basic components - (d4a1114) - aleidk +- **(website)** add accordion documentation - (319d56d) - aleidk +- **(website)** add offcanvas documentation - (c0a20f8) - aleidk +- **(website)** add content structure files - (7af58fe) - aleidk +- **(website)** add html components imports to build script - (e9db7de) - aleidk +- **(website)** add build script for frontend dependencies - (698294c) - aleidk +#### Miscellaneous Chores +- **(website)** migrate from docosaurus to zola SSG - (7e8dc4e) - aleidk +- **(website)** add docosaurus as SSG - (85660ac) - Alexander Navarro +- setup ci workflow - (c1c1cdb) - aleidk + +- - - + +## v0.0.0 - 2024-12-30 +#### Features +- **(core)** add styles for vanilla tables - (cf0b401) - aleidk +- **(core)** add styles for vanilla form elements - (e754e40) - aleidk + +- - - + +Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto). \ No newline at end of file diff --git a/packages/website/README.md b/packages/website/README.md index 0c6c2c2..7816149 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -1,41 +1,15 @@ -# Website +# website -This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. +To install dependencies: -### Installation - -``` -$ yarn +```bash +bun install ``` -### Local Development +To run: -``` -$ yarn start +```bash +bun run index.ts ``` -This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. - -### Build - -``` -$ yarn build -``` - -This command generates static content into the `build` directory and can be served using any static contents hosting service. - -### Deployment - -Using SSH: - -``` -$ USE_SSH=true yarn deploy -``` - -Not using SSH: - -``` -$ GIT_USER= yarn deploy -``` - -If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. +This project was created using `bun init` in bun v1.1.40. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. diff --git a/packages/website/_scripts/build.ts b/packages/website/_scripts/build.ts new file mode 100644 index 0000000..a49e87b --- /dev/null +++ b/packages/website/_scripts/build.ts @@ -0,0 +1,128 @@ +import type { BuildConfig, BunPlugin, PluginBuilder } from "bun"; +import { parseArgs } from "node:util"; +import { readdir, rm } from "node:fs/promises"; +import { join } from "node:path"; +import type { FileImporter } from "sass"; + +import { HTMLComponents } from "@mini-strap/components"; + +const { values } = parseArgs({ + args: Bun.argv, + options: { + production: { + type: "boolean", + short: "p", + default: false, + }, + filter: { + type: "string", + short: "f", + default: "all", + }, + output: { + type: "string", + short: "o", + default: "static", + }, + }, + strict: true, + allowPositionals: true, +}); + +const outdir = values.output ?? "./static"; + +const nodeModuleImporter: FileImporter<"async"> = { + findFileUrl(url) { + if (url.startsWith("@")) { + return new URL(import.meta.resolve(url)); + } + + return null; + }, +}; + +const sassPlugin: BunPlugin = { + name: "Sass Loader", + async setup(build: PluginBuilder) { + const sass = await import("sass"); + build.onLoad({ filter: /\.scss$/ }, async ({ path }) => { + // read and compile it with the sass compiler + const result = await sass.compileAsync(path, { + importers: [nodeModuleImporter], + }); + + return { + loader: "css", + contents: result.css, + }; + }); + }, +}; + +const assets: BuildConfig[] = []; + +const filter = values.filter ?? "all"; + +if (["all", "sass"].includes(filter)) { + assets.push({ + entrypoints: ["./sass/style.scss"], + outdir: `${outdir}/css`, + naming: "[name].css", + plugins: [sassPlugin], + minify: values.production, + + // On by default in Bun v1.2+ + html: true, + experimentalCss: true, + }); +} + +if (["all", "js", "ts"].includes(filter)) { + assets.push({ + entrypoints: ["./js/index.ts"], + outdir: `${outdir}/js`, + target: "browser", + splitting: values.production, + minify: values.production, + }); +} + +if (["all", "html"].includes(filter)) { + assets.push({ + entrypoints: Object.values(HTMLComponents), + outdir: "./templates/ext-components", + target: "browser", + naming: { + // default values + entry: "[name].[ext]", + asset: "[name].[ext]", + chunk: "[name]-[hash].[ext]", + }, + // On by default in Bun v1.2+ + html: true, + experimentalCss: true, + }); +} + +const out = await Promise.all( + assets.map(async (item) => { + const result = await Bun.build(item); + + if (!result.success) { + throw new AggregateError(result.logs, "Build failed"); + } + + return result; + }), +); + +async function deleteJsFiles(folder: string) { + const files = await readdir(folder); + const jsFiles = files.filter((file) => file.endsWith(".js")); + + await Promise.all(jsFiles.map((file) => rm(join(folder, file)))); +} + +await deleteJsFiles("./templates/ext-components"); + +console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`); diff --git a/packages/website/_scripts/link-dependencies.ts b/packages/website/_scripts/link-dependencies.ts new file mode 100644 index 0000000..ea59160 --- /dev/null +++ b/packages/website/_scripts/link-dependencies.ts @@ -0,0 +1,45 @@ +#!/usr/bin/env bun + +import { fileURLToPath } from "url"; +import fs from "node:fs/promises"; +import { basename, normalize } from "node:path"; + +function ignore_exist_error(fn: (...args: any[]) => Promise) { + return async (...args: any[]) => { + try { + await fn(...args); + } catch (error: any) { + if (error.code !== "EEXIST") { + throw error; // Re-throw the error if it's not "file exists" + } + } + }; +} + +const mkdir = ignore_exist_error(fs.mkdir); +const symlink = ignore_exist_error(fs.symlink); + +const def = await Bun.file("package.json").json(); + +const dependencies = Object.keys(def.dependencies); + +for (const pkg of dependencies) { + const path = normalize(fileURLToPath(import.meta.resolve(pkg))); + const file = Bun.file(import.meta.resolve(pkg)); + const type = file.type.split(";").at(0); + const filename = basename(path); + + switch (type) { + case "text/x-scss": + await mkdir(`sass/${pkg}`, { recursive: true }); + await symlink(path, `sass/${pkg}/${filename}`); + console.log(`${path} -> sass/${pkg}/${filename}`); + break; + case "text/javascript": + // console.log("es JS") + break; + } +} + +console.log(); +console.log("Dependencies linked!"); diff --git a/packages/website/blog/2019-05-28-first-blog-post.md b/packages/website/blog/2019-05-28-first-blog-post.md deleted file mode 100644 index d3032ef..0000000 --- a/packages/website/blog/2019-05-28-first-blog-post.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -slug: first-blog-post -title: First Blog Post -authors: [slorber, yangshun] -tags: [hola, docusaurus] ---- - -Lorem ipsum dolor sit amet... - - - -...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/packages/website/blog/2019-05-29-long-blog-post.md b/packages/website/blog/2019-05-29-long-blog-post.md deleted file mode 100644 index eb4435d..0000000 --- a/packages/website/blog/2019-05-29-long-blog-post.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -slug: long-blog-post -title: Long Blog Post -authors: yangshun -tags: [hello, docusaurus] ---- - -This is the summary of a very long blog post, - -Use a `` comment to limit blog post size in the list view. - - - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/packages/website/blog/2021-08-01-mdx-blog-post.mdx b/packages/website/blog/2021-08-01-mdx-blog-post.mdx deleted file mode 100644 index 0c4b4a4..0000000 --- a/packages/website/blog/2021-08-01-mdx-blog-post.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -slug: mdx-blog-post -title: MDX Blog Post -authors: [slorber] -tags: [docusaurus] ---- - -Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). - -:::tip - -Use the power of React to create interactive blog posts. - -::: - -{/* truncate */} - -For example, use JSX to create an interactive button: - -```js - -``` - - diff --git a/packages/website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/packages/website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg deleted file mode 100644 index 11bda09..0000000 Binary files a/packages/website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg and /dev/null differ diff --git a/packages/website/blog/2021-08-26-welcome/index.md b/packages/website/blog/2021-08-26-welcome/index.md deleted file mode 100644 index 349ea07..0000000 --- a/packages/website/blog/2021-08-26-welcome/index.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -slug: welcome -title: Welcome -authors: [slorber, yangshun] -tags: [facebook, hello, docusaurus] ---- - -[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). - -Here are a few tips you might find useful. - - - -Simply add Markdown files (or folders) to the `blog` directory. - -Regular blog authors can be added to `authors.yml`. - -The blog post date can be extracted from filenames, such as: - -- `2019-05-30-welcome.md` -- `2019-05-30-welcome/index.md` - -A blog post folder can be convenient to co-locate blog post images: - -![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg) - -The blog supports tags as well! - -**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. diff --git a/packages/website/blog/authors.yml b/packages/website/blog/authors.yml deleted file mode 100644 index 8bfa5c7..0000000 --- a/packages/website/blog/authors.yml +++ /dev/null @@ -1,23 +0,0 @@ -yangshun: - name: Yangshun Tay - title: Front End Engineer @ Facebook - url: https://github.com/yangshun - image_url: https://github.com/yangshun.png - page: true - socials: - x: yangshunz - github: yangshun - -slorber: - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png - page: - # customize the url of the author page at /blog/authors/ - permalink: '/all-sebastien-lorber-articles' - socials: - x: sebastienlorber - linkedin: sebastienlorber - github: slorber - newsletter: https://thisweekinreact.com diff --git a/packages/website/blog/tags.yml b/packages/website/blog/tags.yml deleted file mode 100644 index bfaa778..0000000 --- a/packages/website/blog/tags.yml +++ /dev/null @@ -1,19 +0,0 @@ -facebook: - label: Facebook - permalink: /facebook - description: Facebook tag description - -hello: - label: Hello - permalink: /hello - description: Hello tag description - -docusaurus: - label: Docusaurus - permalink: /docusaurus - description: Docusaurus tag description - -hola: - label: Hola - permalink: /hola - description: Hola tag description diff --git a/packages/website/config.toml b/packages/website/config.toml new file mode 100644 index 0000000..56d5c27 --- /dev/null +++ b/packages/website/config.toml @@ -0,0 +1,22 @@ +# The URL the site will be built for +base_url = "https://mini-strap.alecodes.page" + +output_dir = "dist" + +# Managed by bun +compile_sass = false + +# Whether to build a search index to be used later on by a JavaScript library +build_search_index = true + +taxonomies = [ + { name = "section", feed = true } +] + +[markdown] +# Whether to do syntax highlighting +# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola +highlight_code = true + +[extra] +# Put all your custom variables here diff --git a/packages/website/content/_index.md b/packages/website/content/_index.md new file mode 100644 index 0000000..1e83855 --- /dev/null +++ b/packages/website/content/_index.md @@ -0,0 +1,5 @@ ++++ + ++++ + +# mini-strap Documentation diff --git a/packages/website/content/components/_index.md b/packages/website/content/components/_index.md new file mode 100644 index 0000000..f55553b --- /dev/null +++ b/packages/website/content/components/_index.md @@ -0,0 +1,6 @@ ++++ ++++ + +# Components + +Complex elements that require custom javascript to run diff --git a/packages/website/content/components/accordion.md b/packages/website/content/components/accordion.md new file mode 100644 index 0000000..7c92c86 --- /dev/null +++ b/packages/website/content/components/accordion.md @@ -0,0 +1,41 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# Accordion + +## Basic + +The accordion component allows to hide and show content in the page. The +accordion is composed of the following elements: + +- `msp-accordion`: the main container that encapsulates multiple toggable elements. +- `msp-accordion-item`: a single toggable element. +- `msp-accordion-header`: this element acts as the header and responds to the `onclick` event to toggle the content. +- `msp-accordion-collapse`: container for the content, needed to help with dynamic height and transitions. +- `msp-accordion-content`: the content of the accordion. + +### Example: + +```html +
      +
    • + ITEM 001 +
      +
      + Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla. +
      +
      +
      • + +
    • + ITEM 002 +
      +
      + Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla. +
      +
      +
      • +
    +``` diff --git a/packages/website/content/components/dropdown.md b/packages/website/content/components/dropdown.md new file mode 100644 index 0000000..c1fb188 --- /dev/null +++ b/packages/website/content/components/dropdown.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# dropdown.md diff --git a/packages/website/content/components/modal.md b/packages/website/content/components/modal.md new file mode 100644 index 0000000..c4d19c5 --- /dev/null +++ b/packages/website/content/components/modal.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# modal.md diff --git a/packages/website/content/components/offcanvas.md b/packages/website/content/components/offcanvas.md new file mode 100644 index 0000000..1c398f2 --- /dev/null +++ b/packages/website/content/components/offcanvas.md @@ -0,0 +1,76 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# Offcanvas + +## Basic + +The offcanvas component serves as a sidebar that is hidden out of view until is +toggled via an interactive element. The offcanvas is composed of the following +elements: + +- `msp-offcanvas`: the main container. +- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more. +- `msp-offcanvas-content`: the container for the content. +- `msp-offcanvas-header`: top section of the content. +- `msp-offcanvas-body`: middle section of the content. +- `msp-offcanvas-footer`: bottom section of the content. + +To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an +element and attach the `data-msp-target` attribute. + +### Example: + +```html + + + +
    + +
    ...
    +
    + +``` + +## Responsive + +It's possible to have the sidebar always visible and only hide the offcanvas +when the viewport is below the brakepoint. For this add the class +`msp-offcanvas-[breakpoint]`. + +Note that the toggle and backdrop are disabled when the viewport is above the brakepoint. + +### Example + +```html + + + +
    + +
    ...
    +
    + +``` diff --git a/packages/website/content/components/tabs.md b/packages/website/content/components/tabs.md new file mode 100644 index 0000000..d256dfe --- /dev/null +++ b/packages/website/content/components/tabs.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# tabs.md diff --git a/packages/website/content/components/tooltip.md b/packages/website/content/components/tooltip.md new file mode 100644 index 0000000..f12205f --- /dev/null +++ b/packages/website/content/components/tooltip.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Components"] ++++ + +# tooltip.md diff --git a/packages/website/content/content/_index.md b/packages/website/content/content/_index.md new file mode 100644 index 0000000..cb14ecb --- /dev/null +++ b/packages/website/content/content/_index.md @@ -0,0 +1,4 @@ ++++ ++++ + +# Components diff --git a/packages/website/content/content/fonts.md b/packages/website/content/content/fonts.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/fonts.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/content/forms.md b/packages/website/content/content/forms.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/forms.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/content/image.md b/packages/website/content/content/image.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/image.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/content/table.md b/packages/website/content/content/table.md new file mode 100644 index 0000000..9577274 --- /dev/null +++ b/packages/website/content/content/table.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Content"] ++++ + +# Buttons diff --git a/packages/website/content/elements/_index.md b/packages/website/content/elements/_index.md new file mode 100644 index 0000000..f0a0b6d --- /dev/null +++ b/packages/website/content/elements/_index.md @@ -0,0 +1,4 @@ ++++ ++++ + +foo diff --git a/packages/website/content/elements/button.md b/packages/website/content/elements/button.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/button.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/card.md b/packages/website/content/elements/card.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/card.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/links.md b/packages/website/content/elements/links.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/links.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/list.md b/packages/website/content/elements/list.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/list.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/navbar.md b/packages/website/content/elements/navbar.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/navbar.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/elements/pagination.md b/packages/website/content/elements/pagination.md new file mode 100644 index 0000000..75847dd --- /dev/null +++ b/packages/website/content/elements/pagination.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Elements"] ++++ + +# Buttons diff --git a/packages/website/content/layout/_index.md b/packages/website/content/layout/_index.md new file mode 100644 index 0000000..cb14ecb --- /dev/null +++ b/packages/website/content/layout/_index.md @@ -0,0 +1,4 @@ ++++ ++++ + +# Components diff --git a/packages/website/content/layout/container.md b/packages/website/content/layout/container.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/container.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/display.md b/packages/website/content/layout/display.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/display.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/grid.md b/packages/website/content/layout/grid.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/grid.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/position.md b/packages/website/content/layout/position.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/position.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/responsive-helpers.md b/packages/website/content/layout/responsive-helpers.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/responsive-helpers.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/content/layout/spacing.md b/packages/website/content/layout/spacing.md new file mode 100644 index 0000000..72e8acf --- /dev/null +++ b/packages/website/content/layout/spacing.md @@ -0,0 +1,6 @@ ++++ +[taxonomies] +section = ["Layout"] ++++ + +# Buttons diff --git a/packages/website/docs/intro.md b/packages/website/docs/intro.md deleted file mode 100644 index 45e8604..0000000 --- a/packages/website/docs/intro.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Tutorial Intro - -Let's discover **Docusaurus in less than 5 minutes**. - -## Getting Started - -Get started by **creating a new site**. - -Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. - -### What you'll need - -- [Node.js](https://nodejs.org/en/download/) version 18.0 or above: - - When installing Node.js, you are recommended to check all checkboxes related to dependencies. - -## Generate a new site - -Generate a new Docusaurus site using the **classic template**. - -The classic template will automatically be added to your project after you run the command: - -```bash -npm init docusaurus@latest my-website classic -``` - -You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor. - -The command also installs all necessary dependencies you need to run Docusaurus. - -## Start your site - -Run the development server: - -```bash -cd my-website -npm run start -``` - -The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there. - -The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. - -Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. diff --git a/packages/website/docs/tutorial-basics/_category_.json b/packages/website/docs/tutorial-basics/_category_.json deleted file mode 100644 index 2e6db55..0000000 --- a/packages/website/docs/tutorial-basics/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Tutorial - Basics", - "position": 2, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important Docusaurus concepts." - } -} diff --git a/packages/website/docs/tutorial-basics/congratulations.md b/packages/website/docs/tutorial-basics/congratulations.md deleted file mode 100644 index 04771a0..0000000 --- a/packages/website/docs/tutorial-basics/congratulations.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -sidebar_position: 6 ---- - -# Congratulations! - -You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. - -Docusaurus has **much more to offer**! - -Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**. - -Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) - -## What's next? - -- Read the [official documentation](https://docusaurus.io/) -- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config) -- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration) -- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) -- Add a [search bar](https://docusaurus.io/docs/search) -- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) -- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) diff --git a/packages/website/docs/tutorial-basics/create-a-blog-post.md b/packages/website/docs/tutorial-basics/create-a-blog-post.md deleted file mode 100644 index 550ae17..0000000 --- a/packages/website/docs/tutorial-basics/create-a-blog-post.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Create a Blog Post - -Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... - -## Create your first Post - -Create a file at `blog/2021-02-28-greetings.md`: - -```md title="blog/2021-02-28-greetings.md" ---- -slug: greetings -title: Greetings! -authors: - - name: Joel Marcey - title: Co-creator of Docusaurus 1 - url: https://github.com/JoelMarcey - image_url: https://github.com/JoelMarcey.png - - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png -tags: [greetings] ---- - -Congratulations, you have made your first post! - -Feel free to play around and edit this post as much as you like. -``` - -A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings). diff --git a/packages/website/docs/tutorial-basics/create-a-document.md b/packages/website/docs/tutorial-basics/create-a-document.md deleted file mode 100644 index c22fe29..0000000 --- a/packages/website/docs/tutorial-basics/create-a-document.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Create a Document - -Documents are **groups of pages** connected through: - -- a **sidebar** -- **previous/next navigation** -- **versioning** - -## Create your first Doc - -Create a Markdown file at `docs/hello.md`: - -```md title="docs/hello.md" -# Hello - -This is my **first Docusaurus document**! -``` - -A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello). - -## Configure the Sidebar - -Docusaurus automatically **creates a sidebar** from the `docs` folder. - -Add metadata to customize the sidebar label and position: - -```md title="docs/hello.md" {1-4} ---- -sidebar_label: 'Hi!' -sidebar_position: 3 ---- - -# Hello - -This is my **first Docusaurus document**! -``` - -It is also possible to create your sidebar explicitly in `sidebars.js`: - -```js title="sidebars.js" -export default { - tutorialSidebar: [ - 'intro', - // highlight-next-line - 'hello', - { - type: 'category', - label: 'Tutorial', - items: ['tutorial-basics/create-a-document'], - }, - ], -}; -``` diff --git a/packages/website/docs/tutorial-basics/create-a-page.md b/packages/website/docs/tutorial-basics/create-a-page.md deleted file mode 100644 index 20e2ac3..0000000 --- a/packages/website/docs/tutorial-basics/create-a-page.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Create a Page - -Add **Markdown or React** files to `src/pages` to create a **standalone page**: - -- `src/pages/index.js` → `localhost:3000/` -- `src/pages/foo.md` → `localhost:3000/foo` -- `src/pages/foo/bar.js` → `localhost:3000/foo/bar` - -## Create your first React Page - -Create a file at `src/pages/my-react-page.js`: - -```jsx title="src/pages/my-react-page.js" -import React from 'react'; -import Layout from '@theme/Layout'; - -export default function MyReactPage() { - return ( - -

    My React page

    -

    This is a React page

    -     - ); -} -``` - -A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page). - -## Create your first Markdown Page - -Create a file at `src/pages/my-markdown-page.md`: - -```mdx title="src/pages/my-markdown-page.md" -# My Markdown page - -This is a Markdown page -``` - -A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page). diff --git a/packages/website/docs/tutorial-basics/deploy-your-site.md b/packages/website/docs/tutorial-basics/deploy-your-site.md deleted file mode 100644 index 1c50ee0..0000000 --- a/packages/website/docs/tutorial-basics/deploy-your-site.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_position: 5 ---- - -# Deploy your site - -Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). - -It builds your site as simple **static HTML, JavaScript and CSS files**. - -## Build your site - -Build your site **for production**: - -```bash -npm run build -``` - -The static files are generated in the `build` folder. - -## Deploy your site - -Test your production build locally: - -```bash -npm run serve -``` - -The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/). - -You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). diff --git a/packages/website/docs/tutorial-basics/markdown-features.mdx b/packages/website/docs/tutorial-basics/markdown-features.mdx deleted file mode 100644 index 35e0082..0000000 --- a/packages/website/docs/tutorial-basics/markdown-features.mdx +++ /dev/null @@ -1,152 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Markdown Features - -Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**. - -## Front Matter - -Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): - -```text title="my-doc.md" -// highlight-start ---- -id: my-doc-id -title: My document title -description: My document description -slug: /my-custom-url ---- -// highlight-end - -## Markdown heading - -Markdown text with [links](./hello.md) -``` - -## Links - -Regular Markdown links are supported, using url paths or relative file paths. - -```md -Let's see how to [Create a page](/create-a-page). -``` - -```md -Let's see how to [Create a page](./create-a-page.md). -``` - -**Result:** Let's see how to [Create a page](./create-a-page.md). - -## Images - -Regular Markdown images are supported. - -You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`): - -```md -![Docusaurus logo](/img/docusaurus.png) -``` - -![Docusaurus logo](/img/docusaurus.png) - -You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them: - -```md -![Docusaurus logo](./img/docusaurus.png) -``` - -## Code Blocks - -Markdown code blocks are supported with Syntax highlighting. - -````md -```jsx title="src/components/HelloDocusaurus.js" -function HelloDocusaurus() { - return

    Hello, Docusaurus!

    ; -} -``` -```` - -```jsx title="src/components/HelloDocusaurus.js" -function HelloDocusaurus() { - return

    Hello, Docusaurus!

    ; -} -``` - -## Admonitions - -Docusaurus has a special syntax to create admonitions and callouts: - -```md -:::tip My tip - -Use this awesome feature option - -::: - -:::danger Take care - -This action is dangerous - -::: -``` - -:::tip My tip - -Use this awesome feature option - -::: - -:::danger Take care - -This action is dangerous - -::: - -## MDX and React Components - -[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: - -```jsx -export const Highlight = ({children, color}) => ( - { - alert(`You clicked the color ${color} with label ${children}`) - }}> - {children} - -); - -This is Docusaurus green ! - -This is Facebook blue ! -``` - -export const Highlight = ({children, color}) => ( - { - alert(`You clicked the color ${color} with label ${children}`); - }}> - {children} - -); - -This is Docusaurus green ! - -This is Facebook blue ! diff --git a/packages/website/docs/tutorial-extras/_category_.json b/packages/website/docs/tutorial-extras/_category_.json deleted file mode 100644 index a8ffcc1..0000000 --- a/packages/website/docs/tutorial-extras/_category_.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "label": "Tutorial - Extras", - "position": 3, - "link": { - "type": "generated-index" - } -} diff --git a/packages/website/docs/tutorial-extras/img/docsVersionDropdown.png b/packages/website/docs/tutorial-extras/img/docsVersionDropdown.png deleted file mode 100644 index 97e4164..0000000 Binary files a/packages/website/docs/tutorial-extras/img/docsVersionDropdown.png and /dev/null differ diff --git a/packages/website/docs/tutorial-extras/img/localeDropdown.png b/packages/website/docs/tutorial-extras/img/localeDropdown.png deleted file mode 100644 index e257edc..0000000 Binary files a/packages/website/docs/tutorial-extras/img/localeDropdown.png and /dev/null differ diff --git a/packages/website/docs/tutorial-extras/manage-docs-versions.md b/packages/website/docs/tutorial-extras/manage-docs-versions.md deleted file mode 100644 index ccda0b9..0000000 --- a/packages/website/docs/tutorial-extras/manage-docs-versions.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Manage Docs Versions - -Docusaurus can manage multiple versions of your docs. - -## Create a docs version - -Release a version 1.0 of your project: - -```bash -npm run docusaurus docs:version 1.0 -``` - -The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created. - -Your docs now have 2 versions: - -- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs -- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs** - -## Add a Version Dropdown - -To navigate seamlessly across versions, add a version dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -export default { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: 'docsVersionDropdown', - }, - // highlight-end - ], - }, - }, -}; -``` - -The docs version dropdown appears in your navbar: - -![Docs Version Dropdown](./img/docsVersionDropdown.png) - -## Update an existing version - -It is possible to edit versioned docs in their respective folder: - -- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello` -- `docs/hello.md` updates `http://localhost:3000/docs/next/hello` diff --git a/packages/website/docs/tutorial-extras/translate-your-site.md b/packages/website/docs/tutorial-extras/translate-your-site.md deleted file mode 100644 index b5a644a..0000000 --- a/packages/website/docs/tutorial-extras/translate-your-site.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Translate your site - -Let's translate `docs/intro.md` to French. - -## Configure i18n - -Modify `docusaurus.config.js` to add support for the `fr` locale: - -```js title="docusaurus.config.js" -export default { - i18n: { - defaultLocale: 'en', - locales: ['en', 'fr'], - }, -}; -``` - -## Translate a doc - -Copy the `docs/intro.md` file to the `i18n/fr` folder: - -```bash -mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ - -cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md -``` - -Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. - -## Start your localized site - -Start your site on the French locale: - -```bash -npm run start -- --locale fr -``` - -Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated. - -:::caution - -In development, you can only use one locale at a time. - -::: - -## Add a Locale Dropdown - -To navigate seamlessly across languages, add a locale dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -export default { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: 'localeDropdown', - }, - // highlight-end - ], - }, - }, -}; -``` - -The locale dropdown now appears in your navbar: - -![Locale Dropdown](./img/localeDropdown.png) - -## Build your localized site - -Build your site for a specific locale: - -```bash -npm run build -- --locale fr -``` - -Or build your site to include all the locales at once: - -```bash -npm run build -``` diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts deleted file mode 100644 index 344c456..0000000 --- a/packages/website/docusaurus.config.ts +++ /dev/null @@ -1,143 +0,0 @@ -import {themes as prismThemes} from 'prism-react-renderer'; -import type {Config} from '@docusaurus/types'; -import type * as Preset from '@docusaurus/preset-classic'; - -// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...) - -const config: Config = { - title: 'My Site', - tagline: 'Dinosaurs are cool', - favicon: 'img/favicon.ico', - - // Set the production url of your site here - url: 'https://your-docusaurus-site.example.com', - // Set the // pathname under which your site is served - // For GitHub pages deployment, it is often '//' - baseUrl: '/', - - // GitHub pages deployment config. - // If you aren't using GitHub pages, you don't need these. - organizationName: 'facebook', // Usually your GitHub org/user name. - projectName: 'docusaurus', // Usually your repo name. - - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', - - // Even if you don't use internationalization, you can use this field to set - // useful metadata like html lang. For example, if your site is Chinese, you - // may want to replace "en" with "zh-Hans". - i18n: { - defaultLocale: 'en', - locales: ['en'], - }, - - presets: [ - [ - 'classic', - { - docs: { - sidebarPath: './sidebars.ts', - // Please change this to your repo. - // Remove this to remove the "edit this page" links. - editUrl: - 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', - }, - blog: { - showReadingTime: true, - feedOptions: { - type: ['rss', 'atom'], - xslt: true, - }, - // Please change this to your repo. - // Remove this to remove the "edit this page" links. - editUrl: - 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', - // Useful options to enforce blogging best practices - onInlineTags: 'warn', - onInlineAuthors: 'warn', - onUntruncatedBlogPosts: 'warn', - }, - theme: { - customCss: './src/css/custom.css', - }, - } satisfies Preset.Options, - ], - ], - - themeConfig: { - // Replace with your project's social card - image: 'img/docusaurus-social-card.jpg', - navbar: { - title: 'My Site', - logo: { - alt: 'My Site Logo', - src: 'img/logo.svg', - }, - items: [ - { - type: 'docSidebar', - sidebarId: 'tutorialSidebar', - position: 'left', - label: 'Tutorial', - }, - {to: '/blog', label: 'Blog', position: 'left'}, - { - href: 'https://github.com/facebook/docusaurus', - label: 'GitHub', - position: 'right', - }, - ], - }, - footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '/docs/intro', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'X', - href: 'https://x.com/docusaurus', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Blog', - to: '/blog', - }, - { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, - }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, - }, - } satisfies Preset.ThemeConfig, -}; - -export default config; diff --git a/packages/website/js/index.ts b/packages/website/js/index.ts new file mode 100644 index 0000000..6d5aa24 --- /dev/null +++ b/packages/website/js/index.ts @@ -0,0 +1,3 @@ +import "@mini-strap/components/accordion/index.ts"; +import "@mini-strap/components/offcanvas/index.ts"; +console.log("hello world!"); diff --git a/packages/website/package.json b/packages/website/package.json index dfc8c36..3014521 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,45 +1,22 @@ { "name": "website", - "version": "0.0.0", - "private": true, + "type": "module", "scripts": { - "docusaurus": "docusaurus", - "dev": "docusaurus start", - "start": "docusaurus start", - "build": "docusaurus build", - "swizzle": "docusaurus swizzle", - "deploy": "docusaurus deploy", - "clear": "docusaurus clear", - "serve": "docusaurus serve", - "write-translations": "docusaurus write-translations", - "write-heading-ids": "docusaurus write-heading-ids", - "typecheck": "tsc", - "ci:publish": "docusaurus build" + "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": { - "@docusaurus/core": "3.6.1", - "@docusaurus/preset-classic": "3.6.1", - "@mdx-js/react": "^3.0.0", - "clsx": "^2.0.0", - "prism-react-renderer": "^2.3.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "@mini-strap/core": "workspace:*", + "@mini-strap/components": "workspace:*" }, "devDependencies": { - "@docusaurus/module-type-aliases": "3.6.1", - "@docusaurus/tsconfig": "3.6.1", - "@docusaurus/types": "3.6.1", - "typescript": "~5.6.2" + "@types/bun": "latest", + "sass": "^1.83.0" }, - "browserslist": { - "production": [">0.5%", "not dead", "not op_mini all"], - "development": [ - "last 3 chrome version", - "last 3 firefox version", - "last 5 safari version" - ] - }, - "engines": { - "node": ">=18.0" + "peerDependencies": { + "typescript": "^5.0.0" } } diff --git a/packages/website/sass/@mini-strap/core/style.scss b/packages/website/sass/@mini-strap/core/style.scss new file mode 120000 index 0000000..60be24d --- /dev/null +++ b/packages/website/sass/@mini-strap/core/style.scss @@ -0,0 +1 @@ +/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss \ No newline at end of file diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss new file mode 100644 index 0000000..b7c6746 --- /dev/null +++ b/packages/website/sass/style.scss @@ -0,0 +1,8 @@ +@use "@mini-strap/core"; +@use "@mini-strap/components/navbar/navbar.scss"; +@use "@mini-strap/components/accordion/accordion.scss"; +@use "@mini-strap/components/offcanvas/style.scss"; + +main { + padding: var(--msp-spacing-3); +} diff --git a/packages/website/sidebars.ts b/packages/website/sidebars.ts deleted file mode 100644 index 2897139..0000000 --- a/packages/website/sidebars.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; - -// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...) - -/** - * Creating a sidebar enables you to: - - create an ordered group of docs - - render a sidebar for each doc of that group - - provide next/previous navigation - - The sidebars can be generated from the filesystem, or explicitly defined here. - - Create as many sidebars as you want. - */ -const sidebars: SidebarsConfig = { - // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], - - // But you can create a sidebar manually - /* - tutorialSidebar: [ - 'intro', - 'hello', - { - type: 'category', - label: 'Tutorial', - items: ['tutorial-basics/create-a-document'], - }, - ], - */ -}; - -export default sidebars; diff --git a/packages/website/src/components/HomepageFeatures/index.tsx b/packages/website/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 50a9e6f..0000000 --- a/packages/website/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import clsx from 'clsx'; -import Heading from '@theme/Heading'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, -]; - -function Feature({title, Svg, description}: FeatureItem) { - return ( -
    -
    - -
    -
    - {title} -

    {description}

    -
    -
    - ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
    -
    -
    - {FeatureList.map((props, idx) => ( - - ))} -
    -
    -
    - ); -} diff --git a/packages/website/src/components/HomepageFeatures/styles.module.css b/packages/website/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2..0000000 --- a/packages/website/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css deleted file mode 100644 index 2bc6a4c..0000000 --- a/packages/website/src/css/custom.css +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ -:root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); -} - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} diff --git a/packages/website/src/pages/index.module.css b/packages/website/src/pages/index.module.css deleted file mode 100644 index 9f71a5d..0000000 --- a/packages/website/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx deleted file mode 100644 index 400a3e1..0000000 --- a/packages/website/src/pages/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import Heading from '@theme/Heading'; - -import styles from './index.module.css'; - -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
    -
    - - {siteConfig.title} - -

    {siteConfig.tagline}

    -
    - - Docusaurus Tutorial - 5min ⏱️ - -
    -
    -
    - ); -} - -export default function Home(): JSX.Element { - const {siteConfig} = useDocusaurusContext(); - return ( - - -
    - -
    -     - ); -} diff --git a/packages/website/src/pages/markdown-page.md b/packages/website/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b..0000000 --- a/packages/website/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages. diff --git a/packages/website/static/img/docusaurus-social-card.jpg b/packages/website/static/img/docusaurus-social-card.jpg deleted file mode 100644 index ffcb448..0000000 Binary files a/packages/website/static/img/docusaurus-social-card.jpg and /dev/null differ diff --git a/packages/website/static/img/docusaurus.png b/packages/website/static/img/docusaurus.png deleted file mode 100644 index f458149..0000000 Binary files a/packages/website/static/img/docusaurus.png and /dev/null differ diff --git a/packages/website/static/img/favicon.ico b/packages/website/static/img/favicon.ico deleted file mode 100644 index c01d54b..0000000 Binary files a/packages/website/static/img/favicon.ico and /dev/null differ diff --git a/packages/website/static/img/logo.svg b/packages/website/static/img/logo.svg deleted file mode 100644 index 9db6d0d..0000000 --- a/packages/website/static/img/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/website/static/img/undraw_docusaurus_mountain.svg b/packages/website/static/img/undraw_docusaurus_mountain.svg deleted file mode 100644 index af961c4..0000000 --- a/packages/website/static/img/undraw_docusaurus_mountain.svg +++ /dev/null @@ -1,171 +0,0 @@ - - Easy to Use - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/website/static/img/undraw_docusaurus_react.svg b/packages/website/static/img/undraw_docusaurus_react.svg deleted file mode 100644 index 94b5cf0..0000000 --- a/packages/website/static/img/undraw_docusaurus_react.svg +++ /dev/null @@ -1,170 +0,0 @@ - - Powered by React - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/website/static/img/undraw_docusaurus_tree.svg b/packages/website/static/img/undraw_docusaurus_tree.svg deleted file mode 100644 index d9161d3..0000000 --- a/packages/website/static/img/undraw_docusaurus_tree.svg +++ /dev/null @@ -1,40 +0,0 @@ - - Focus on What Matters - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html new file mode 100644 index 0000000..27de743 --- /dev/null +++ b/packages/website/templates/base.html @@ -0,0 +1,26 @@ + + + + + + + + alecodes.page + + + {% block scripts %}{% endblock %} + + + + + + {% include "partials/header.html" %} +
    + + {% block content %}{% endblock %} +
    + + + diff --git a/packages/website/templates/index.html b/packages/website/templates/index.html new file mode 100644 index 0000000..85c2741 --- /dev/null +++ b/packages/website/templates/index.html @@ -0,0 +1,13 @@ +{% extends "base.html" %} + + +{% block content %} +{{section.content | safe}} + +
      + {% for sub in section.subsections %} + {% set sub = get_section(path=sub, metadata_only=true) %} +
    • {{sub.title | safe}}
      • + {% endfor %} +
    +{% endblock content %} diff --git a/packages/website/templates/page.html b/packages/website/templates/page.html new file mode 100644 index 0000000..6d86a98 --- /dev/null +++ b/packages/website/templates/page.html @@ -0,0 +1,6 @@ +{% extends "base.html" %} + + +{% block content %} +{{page.content | safe}} +{% endblock content %} diff --git a/packages/website/templates/partials/header.html b/packages/website/templates/partials/header.html new file mode 100644 index 0000000..41968b2 --- /dev/null +++ b/packages/website/templates/partials/header.html @@ -0,0 +1,31 @@ + diff --git a/packages/website/templates/section.html b/packages/website/templates/section.html new file mode 100644 index 0000000..c520de6 --- /dev/null +++ b/packages/website/templates/section.html @@ -0,0 +1,6 @@ +{% extends "base.html" %} + + +{% block content %} +{{section.content | safe}} +{% endblock content %} diff --git a/packages/website/static/.nojekyll b/packages/website/templates/taxonomy_list.html similarity index 100% rename from packages/website/static/.nojekyll rename to packages/website/templates/taxonomy_list.html diff --git a/packages/website/templates/taxonomy_single.html b/packages/website/templates/taxonomy_single.html new file mode 100644 index 0000000..e69de29 diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 314eab8..238655f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -1,7 +1,27 @@ { - // This file is not used in compilation. It is here just for a nice editor experience. - "extends": "@docusaurus/tsconfig", "compilerOptions": { - "baseUrl": "." + // Enable latest features + "lib": ["ESNext", "DOM"], + "target": "ESNext", + "module": "ESNext", + "moduleDetection": "force", + "jsx": "react-jsx", + "allowJs": true, + + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false } }