diff --git a/bun.lockb b/bun.lockb
index dec149c..66e0077 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/components/package.json b/packages/components/package.json
index 1b172f0..54e0384 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,24 +1,26 @@
{
- "name": "@mini-strap/components",
- "version": "0.0.1",
- "type": "module",
- "scripts": {
- "ci:publish": "bun publish --production --frozen-lockfile"
- },
- "exports": {
- ".": "./src/index.ts",
- "./navbar/*": "./src/navbar/*",
- "./accordion/*": "./src/accordion/*",
- "./offcanvas/*": "./src/offcanvas/*"
- },
- "devDependencies": {
- "@types/bun": "latest",
- "bun-plugin-dts": "^0.2.3",
- "bun-style-loader": "^0.4.0",
- "sass": "^1.79.2",
- "sass-embedded": "^1.79.1"
- },
- "peerDependencies": {
- "typescript": "^5.0.0"
- }
+ "name": "@mini-strap/components",
+ "version": "0.0.1",
+ "module": "src/components.scss",
+ "type": "module",
+ "scripts": {
+ "ci:publish": "bun publish --production --frozen-lockfile"
+ },
+ "exports": {
+ ".": "./src/components.scss",
+ "./OffCanvas/": {
+ "import": "./src/OffCanvas/",
+ "require": "./src/OffCanvas/"
+ }
+ },
+ "devDependencies": {
+ "@types/bun": "latest",
+ "bun-plugin-dts": "^0.2.3",
+ "bun-style-loader": "^0.4.0",
+ "sass": "^1.79.2",
+ "sass-embedded": "^1.79.1"
+ },
+ "peerDependencies": {
+ "typescript": "^5.0.0"
+ }
}
diff --git a/packages/components/src/OffCanvas/style.scss b/packages/components/src/OffCanvas/style.scss
new file mode 100644
index 0000000..75abef1
--- /dev/null
+++ b/packages/components/src/OffCanvas/style.scss
@@ -0,0 +1,59 @@
+.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/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/accordion/accordion.scss b/packages/components/src/accordion/accordion.scss
deleted file mode 100644
index 39555c5..0000000
--- a/packages/components/src/accordion/accordion.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.msp-accordion {
- // background-color: red;
-
- &-item.msp-accordion-show {
- .msp-accordion-header::after {
- transform: rotate(180deg);
- }
- }
- &-header {
- cursor: pointer;
- position: relative;
-
- &::after {
- display: inline-block;
- position: absolute;
- top: 50%;
- right: 0;
-
- transform: rotate(0deg);
- translate: 110% -50%;
-
- content: "";
- width: 1em;
- height: 1em;
- // TODO: change SVG of the arrow
- background: url('data:image/svg+xml;utf8, ')
- no-repeat center center;
- background-size: contain;
-
- transition: transform 0.5s ease;
- }
- }
-
- &-collapse {
- overflow: hidden;
- height: 0;
- display: none;
-
- transition: height 0.5s ease;
- }
-}
diff --git a/packages/components/src/accordion/index.ts b/packages/components/src/accordion/index.ts
deleted file mode 100644
index 348e7a7..0000000
--- a/packages/components/src/accordion/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { qs, qsa } from "../utils";
-
-enum AccordionState {
- Open = 1,
- Closed = 2,
-}
-
-function waitAndHideCollapse(e: TransitionEvent) {
- if (!e.target) return;
-
- const el = e.target as HTMLElement;
- el.style.display = "none";
- el.removeEventListener("transitionend", waitAndHideCollapse);
-}
-
-function toggleAccordion(item: HTMLElement, state: AccordionState) {
- const collapse = qs(".msp-accordion-collapse", item);
-
- if (!collapse) throw new Error("Collapse element not found");
-
- if (state === AccordionState.Closed) {
- collapse.style.height = "0px";
- collapse
- .closest(".msp-accordion-item")
- ?.classList.remove("msp-accordion-show");
-
- collapse.addEventListener("transitionend", waitAndHideCollapse);
- } else if (state === AccordionState.Open) {
- collapse.style.display = "block";
-
- const height = qs(".msp-accordion-content", collapse)?.offsetHeight;
- if (height == null) throw new Error("Content element not found");
-
- collapse.style.height = `${height}px`;
- collapse
- .closest(".msp-accordion-item")
- ?.classList.add("msp-accordion-show");
- }
-}
-
-document.addEventListener("DOMContentLoaded", () => {
- qsa(".msp-accordion-item").forEach((item) => {
- qs(".msp-accordion-header", item)?.addEventListener("click", (e) => {
- e.preventDefault();
- toggleAccordion(
- item,
- item.classList.contains("msp-accordion-show")
- ? AccordionState.Closed
- : AccordionState.Open,
- );
- });
- });
-});
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
deleted file mode 100644
index 04ed79b..0000000
--- a/packages/components/src/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import navarHtml from "./navbar/navbar.html";
-
-export const HTMLComponents = {
- navbar: navarHtml,
-};
-
-export default {};
diff --git a/packages/components/src/navbar/navbar.html b/packages/components/src/navbar/navbar.html
deleted file mode 100644
index d25e7e9..0000000
--- a/packages/components/src/navbar/navbar.html
+++ /dev/null
@@ -1,34 +0,0 @@
-{% macro navbar() %}
-
-
- {% for i in range(end=3) %}{% endfor %}
-
-
-{% endmacro navbar %}
-
-
-{% macro navbar_item(href, label) %}
-
- {{ label }}
-
-{% endmacro navbar_item %}
-
-
-
-
-
-
- {
- links.map((link) => (
-
- {link.text}
-
- ))
- }
-
-
-
-
-
-
-
diff --git a/packages/components/src/navbar/navbar.scss b/packages/components/src/navbar/navbar.scss
deleted file mode 100644
index f62025f..0000000
--- a/packages/components/src/navbar/navbar.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-nav.msp-navbar {
- width: 100%;
-
- ul {
- padding: 0;
-
- li {
- margin-bottom: 0;
- height: 100%;
- }
- }
-
- li > a {
- padding: 0.25rem 0.5rem;
- }
-
- a {
- --boder-color: transparent;
- border: 1px solid transparent;
- border-radius: 4px;
- text-decoration: none;
-
- transition:
- background-color 200ms,
- color 200ms;
- }
-
- a.active {
- border: 1px solid var(--msp-color-bg-accent);
- }
-
- a:hover {
- --border-color: var(--msp-color-bg-accent);
- background-color: var(--msp-color-bg-accent);
- color: var(--msp-color-text-accent);
- border: 1px solid var(--border-color);
- }
-}
-
-.msp-navbar-desktop ul {
- width: fit-content;
- margin-left: auto;
-
- .nav-item {
- margin-bottom: 0;
- }
-}
diff --git a/packages/components/src/offcanvas/index.ts b/packages/components/src/offcanvas/index.ts
deleted file mode 100644
index e9461db..0000000
--- a/packages/components/src/offcanvas/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { qs, qsa } from "../utils";
-
-document.addEventListener("DOMContentLoaded", () => {
- qsa(".msp-offcanvas-toggle").forEach((item) => {
- item.addEventListener("click", () => {
- const target = item.dataset.mspTarget;
-
- if (!target) {
- throw new Error("No target provided");
- }
-
- const targetElement = qs(target);
-
- if (!targetElement) {
- throw new Error("No target found");
- }
-
- targetElement.classList.toggle("show");
- });
- });
-});
diff --git a/packages/components/src/offcanvas/style.scss b/packages/components/src/offcanvas/style.scss
deleted file mode 100644
index c782035..0000000
--- a/packages/components/src/offcanvas/style.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-@use "@mini-strap/core/mixins";
-
-:root {
- --msp-offcanvas-anim-duration: var(--msp-anim-duration-md);
- --msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1);
- --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
-
- --msp-offcanvas-width: 15ch;
-}
-
-.msp-offcanvas {
- position: fixed;
- width: var(--msp-offcanvas-width);
- height: 100vh;
- top: 0;
- left: -100%;
-
- transition: left var(--msp-offcanvas-anim-duration)
- var(--msp-offcanvas-anim-curve-out);
-
- &-content {
- position: relative;
- overflow: hidden;
- width: 100%;
- height: 100%;
- z-index: 5;
-
- background-color: var(--msp-color-bg-surface-1);
-
- padding: var(--msp-spacing-3);
-
- &-body,
- &-header,
- &-footer {
- position: relative;
- z-index: 5;
- }
- }
-
- &.show {
- left: 0;
-
- transition: left var(--msp-offcanvas-anim-duration)
- var(--msp-offcanvas-anim-curve-in);
-
- .msp-offcanvas-backdrop {
- opacity: 40%;
- left: 0;
-
- transition:
- opacity var(--msp-offcanvas-anim-duration)
- var(--msp-offcanvas-anim-curve-in),
- left 0s linear;
- }
- }
-
- .msp-offcanvas-backdrop {
- position: fixed;
- height: 100vh;
- width: 100vw;
- z-index: 4;
-
- background-color: rgba(0, 0, 0);
- opacity: 0;
-
- top: 0;
- left: -100%;
- // Delay the width transition on remove so it's desn't appear to be sliding or to be not working
- transition:
- opacity var(--msp-offcanvas-anim-duration)
- var(--msp-offcanvas-anim-curve-out),
- left 0s linear var(--msp-offcanvas-anim-duration);
- }
-}
-
-@include mixins.responsive using($breakpoint, $size) {
- .msp-offcanvas.msp-offcanvas-#{$breakpoint} {
- width: var(--msp-offcanvas-width);
- left: 0;
-
- & ~ * {
- margin-left: var(--msp-offcanvas-width);
- }
-
- .msp-offcanvas-backdrop {
- display: none !important;
- }
- }
-}
diff --git a/packages/components/src/utils.ts b/packages/components/src/utils.ts
deleted file mode 100644
index 0df8cd7..0000000
--- a/packages/components/src/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const qs = (
- query: string,
- el: Element | Document = document,
-): HTMLElement | null => {
- return el.querySelector(query);
-};
-
-export const qsa = (
- query: string,
- el: Element | Document = document,
-): NodeListOf => {
- return el.querySelectorAll(query);
-};
diff --git a/packages/core/package.json b/packages/core/package.json
index 751adda..4c14d3c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,11 +1,8 @@
{
"name": "@mini-strap/core",
"version": "0.0.1",
+ "module": "src/style.scss",
"type": "module",
- "exports": {
- ".": "./src/style.scss",
- "./mixins": "./src/_mixins.scss"
- },
"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 76092a6..c4e42f8 100644
--- a/packages/core/src/_reset.scss
+++ b/packages/core/src/_reset.scss
@@ -155,3 +155,33 @@
:where(sup) {
top: -0.5em;
}
+
+// ── Other ───────────────────────────────────────────────────────────────
+
+:where(a) {
+ background-color: transparent;
+}
+
+:where(abbr[title]) {
+ text-decoration: underline dotted;
+}
+
+:where(code, kbd, samp, pre) {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+:where(sub, sup) {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+:where(sub) {
+ bottom: -0.25em;
+}
+
+:where(sup) {
+ top: -0.5em;
+}
diff --git a/packages/core/src/_tokens.scss b/packages/core/src/_tokens.scss
index 7ea321d..8655783 100644
--- a/packages/core/src/_tokens.scss
+++ b/packages/core/src/_tokens.scss
@@ -91,12 +91,6 @@ $msp-colors: (
"--msp-color-transparent": transparent,
);
-$anim: (
- "--msp-anim-duration-sm": 0.4s,
- "--msp-anim-duration-md": 0.8s,
- "--msp-anim-duration-lg": 1s,
-);
-
// Native CSS Variables to allow overridings and usage in external stylesheets
:root {
@each $variable, $value in $msp-colors {
@@ -107,10 +101,6 @@ $anim: (
#{$variable}: #{$value};
}
- @each $variable, $value in $anim {
- #{$variable}: #{$value};
- }
-
// ── Borders ─────────────────────────────────────────────────────────────
--msp-border-width: 1px;
--msp-border-color: var(--msp-color-text-transparent);
diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss
index 86ba495..d7032e7 100644
--- a/packages/core/src/_utils.scss
+++ b/packages/core/src/_utils.scss
@@ -69,29 +69,29 @@
}
.msp-hstack {
- --msp-gap: var(--msp-spacing-3);
+ --prj-gap: var(--prj-spacing-3);
display: flex;
- gap: var(--msp-gap);
+ gap: var(--prj-gap);
align-items: center;
}
.msp-hstack-reverse {
- --msp-gap: var(--msp-spacing-3);
+ --prj-gap: var(--prj-spacing-3);
display: flex;
- gap: var(--msp-gap);
+ gap: var(--prj-gap);
align-items: center;
flex-direction: row-reverse;
}
.msp-vstack {
- --msp-gap: var(--msp-spacing-3);
+ --prj-gap: var(--prj-spacing-3);
display: flex;
- gap: var(--msp-gap);
+ gap: var(--prj-gap);
flex-direction: column;
}
.msp-vstack-reverse {
- --msp-gap: var(--msp-spacing-3);
+ --prj-gap: var(--prj-spacing-3);
display: flex;
flex-direction: column-reverse;
}
@@ -123,18 +123,10 @@
align-items: center;
}
-.msp-justify-content-start {
- justify-content: start !important;
-}
-
.msp-justify-content-center {
justify-content: center !important;
}
-.msp-justify-content-end {
- justify-content: end !important;
-}
-
.msp-justify-content-between {
justify-content: space-between !important;
}
@@ -148,16 +140,16 @@
}
.msp-grid {
- --msp-gap: var(--msp-spacing-3);
- --msp-columns: repeat(3, 1fr);
- --msp-min-col-width: 150px;
+ --prj-gap: var(--prj-spacing-3);
+ --prj-columns: repeat(3, 1fr);
+ --prj-min-col-width: 150px;
display: grid;
- grid-template-columns: var(--msp-columns);
- gap: var(--msp-gap);
+ grid-template-columns: var(--prj-columns);
+ gap: var(--prj-gap);
}
@mixin grid-cols($amount) {
- --msp-columns: repeat(#{$amount}, minmax(var(--msp-min-col-width), 1fr));
+ --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
}
@for $i from 1 through 12 {
@@ -293,7 +285,7 @@
}
.msp-gap-#{$name} {
- --msp-gap: #{$value};
+ --prj-gap: #{$value};
}
}
@@ -314,17 +306,11 @@
}
.msp-shadow-1 {
- box-shadow: 10px 10px 5px 0px var(--msp-shadow);
+ box-shadow: 10px 10px 5px 0px var(--prj-shadow);
}
.msp-border-radius {
- border-radius: var(--msp-border-radius);
-}
-
-@each $index, $variable, $value in $spacings {
- .msp-border-#{$index} {
- border: #{$index}px var(--msp-border-style) var(--msp-border-color);
- }
+ border-radius: var(--prj-border-radius);
}
.msp-text-none {
diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
index e05b1bd..53f7103 100644
--- a/packages/core/src/style.scss
+++ b/packages/core/src/style.scss
@@ -95,11 +95,9 @@ ul {
/* Make the marker position is inside the container */
list-style-position: inside;
margin: 0;
- margin-bottom: var(--msp-spacing-2);
ul {
margin-left: var(--msp-spacing-3);
- margin-bottom: 0;
}
}
@@ -128,10 +126,3 @@ video.respect-height {
li:not(:last-child) {
margin-bottom: var(--msp-spacing-1);
}
-
-:where(code, kbd, samp, pre):not([data-lang]) {
- background-color: var(--msp-color-bg-surface-2);
- padding: 0 var(--msp-spacing-1);
- border-radius: var(--msp-border-radius);
- white-space: nowrap;
-}
diff --git a/packages/website/.gitignore b/packages/website/.gitignore
index f11efde..b2d6de3 100644
--- a/packages/website/.gitignore
+++ b/packages/website/.gitignore
@@ -1,181 +1,20 @@
+# Dependencies
+/node_modules
-# Compiled assets managed by bun
-static/css/**/*
-static/js/**/*
-templates/ext-components/**/*
+# Production
+/build
-# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+# Generated files
+.docusaurus
+.cache-loader
-# 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
+# Misc
+.DS_Store
+.env.local
.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
-
-# 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
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/website/README.md b/packages/website/README.md
index 7816149..0c6c2c2 100644
--- a/packages/website/README.md
+++ b/packages/website/README.md
@@ -1,15 +1,41 @@
-# website
+# Website
-To install dependencies:
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-```bash
-bun install
+### Installation
+
+```
+$ yarn
```
-To run:
+### Local Development
-```bash
-bun run index.ts
+```
+$ yarn start
```
-This project was created using `bun init` in bun v1.1.40. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+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.
diff --git a/packages/website/_scripts/build.ts b/packages/website/_scripts/build.ts
deleted file mode 100644
index a49e87b..0000000
--- a/packages/website/_scripts/build.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { BuildConfig, BunPlugin, PluginBuilder } from "bun";
-import { parseArgs } from "node:util";
-import { readdir, rm } from "node:fs/promises";
-import { join } from "node:path";
-import type { FileImporter } from "sass";
-
-import { HTMLComponents } from "@mini-strap/components";
-
-const { values } = parseArgs({
- args: Bun.argv,
- options: {
- production: {
- type: "boolean",
- short: "p",
- default: false,
- },
- filter: {
- type: "string",
- short: "f",
- default: "all",
- },
- output: {
- type: "string",
- short: "o",
- default: "static",
- },
- },
- strict: true,
- allowPositionals: true,
-});
-
-const outdir = values.output ?? "./static";
-
-const nodeModuleImporter: FileImporter<"async"> = {
- findFileUrl(url) {
- if (url.startsWith("@")) {
- return new URL(import.meta.resolve(url));
- }
-
- return null;
- },
-};
-
-const sassPlugin: BunPlugin = {
- name: "Sass Loader",
- async setup(build: PluginBuilder) {
- const sass = await import("sass");
- build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
- // read and compile it with the sass compiler
- const result = await sass.compileAsync(path, {
- importers: [nodeModuleImporter],
- });
-
- return {
- loader: "css",
- contents: result.css,
- };
- });
- },
-};
-
-const assets: BuildConfig[] = [];
-
-const filter = values.filter ?? "all";
-
-if (["all", "sass"].includes(filter)) {
- assets.push({
- entrypoints: ["./sass/style.scss"],
- outdir: `${outdir}/css`,
- naming: "[name].css",
- plugins: [sassPlugin],
- minify: values.production,
-
- // On by default in Bun v1.2+
- html: true,
- experimentalCss: true,
- });
-}
-
-if (["all", "js", "ts"].includes(filter)) {
- assets.push({
- entrypoints: ["./js/index.ts"],
- outdir: `${outdir}/js`,
- target: "browser",
- splitting: values.production,
- minify: values.production,
- });
-}
-
-if (["all", "html"].includes(filter)) {
- assets.push({
- entrypoints: Object.values(HTMLComponents),
- outdir: "./templates/ext-components",
- target: "browser",
- naming: {
- // default values
- entry: "[name].[ext]",
- asset: "[name].[ext]",
- chunk: "[name]-[hash].[ext]",
- },
- // On by default in Bun v1.2+
- html: true,
- experimentalCss: true,
- });
-}
-
-const out = await Promise.all(
- assets.map(async (item) => {
- const result = await Bun.build(item);
-
- if (!result.success) {
- throw new AggregateError(result.logs, "Build failed");
- }
-
- return result;
- }),
-);
-
-async function deleteJsFiles(folder: string) {
- const files = await readdir(folder);
- const jsFiles = files.filter((file) => file.endsWith(".js"));
-
- await Promise.all(jsFiles.map((file) => rm(join(folder, file))));
-}
-
-await deleteJsFiles("./templates/ext-components");
-
-console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`);
diff --git a/packages/website/_scripts/link-dependencies.ts b/packages/website/_scripts/link-dependencies.ts
deleted file mode 100644
index ea59160..0000000
--- a/packages/website/_scripts/link-dependencies.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-#!/usr/bin/env bun
-
-import { fileURLToPath } from "url";
-import fs from "node:fs/promises";
-import { basename, normalize } from "node:path";
-
-function ignore_exist_error(fn: (...args: any[]) => Promise) {
- return async (...args: any[]) => {
- try {
- await fn(...args);
- } catch (error: any) {
- if (error.code !== "EEXIST") {
- throw error; // Re-throw the error if it's not "file exists"
- }
- }
- };
-}
-
-const mkdir = ignore_exist_error(fs.mkdir);
-const symlink = ignore_exist_error(fs.symlink);
-
-const def = await Bun.file("package.json").json();
-
-const dependencies = Object.keys(def.dependencies);
-
-for (const pkg of dependencies) {
- const path = normalize(fileURLToPath(import.meta.resolve(pkg)));
- const file = Bun.file(import.meta.resolve(pkg));
- const type = file.type.split(";").at(0);
- const filename = basename(path);
-
- switch (type) {
- case "text/x-scss":
- await mkdir(`sass/${pkg}`, { recursive: true });
- await symlink(path, `sass/${pkg}/${filename}`);
- console.log(`${path} -> sass/${pkg}/${filename}`);
- break;
- case "text/javascript":
- // console.log("es JS")
- break;
- }
-}
-
-console.log();
-console.log("Dependencies linked!");
diff --git a/packages/website/blog/2019-05-28-first-blog-post.md b/packages/website/blog/2019-05-28-first-blog-post.md
new file mode 100644
index 0000000..d3032ef
--- /dev/null
+++ b/packages/website/blog/2019-05-28-first-blog-post.md
@@ -0,0 +1,12 @@
+---
+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
new file mode 100644
index 0000000..eb4435d
--- /dev/null
+++ b/packages/website/blog/2019-05-29-long-blog-post.md
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 0000000..0c4b4a4
--- /dev/null
+++ b/packages/website/blog/2021-08-01-mdx-blog-post.mdx
@@ -0,0 +1,24 @@
+---
+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
+ alert('button clicked!')}>Click me!
+```
+
+ alert('button clicked!')}>Click me!
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
new file mode 100644
index 0000000..11bda09
Binary files /dev/null and b/packages/website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg differ
diff --git a/packages/website/blog/2021-08-26-welcome/index.md b/packages/website/blog/2021-08-26-welcome/index.md
new file mode 100644
index 0000000..349ea07
--- /dev/null
+++ b/packages/website/blog/2021-08-26-welcome/index.md
@@ -0,0 +1,29 @@
+---
+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:
+
+
+
+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
new file mode 100644
index 0000000..8bfa5c7
--- /dev/null
+++ b/packages/website/blog/authors.yml
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 0000000..bfaa778
--- /dev/null
+++ b/packages/website/blog/tags.yml
@@ -0,0 +1,19 @@
+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
deleted file mode 100644
index 56d5c27..0000000
--- a/packages/website/config.toml
+++ /dev/null
@@ -1,22 +0,0 @@
-# The URL the site will be built for
-base_url = "https://mini-strap.alecodes.page"
-
-output_dir = "dist"
-
-# Managed by bun
-compile_sass = false
-
-# Whether to build a search index to be used later on by a JavaScript library
-build_search_index = true
-
-taxonomies = [
- { name = "section", feed = true }
-]
-
-[markdown]
-# Whether to do syntax highlighting
-# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
-highlight_code = true
-
-[extra]
-# Put all your custom variables here
diff --git a/packages/website/content/_index.md b/packages/website/content/_index.md
deleted file mode 100644
index 1e83855..0000000
--- a/packages/website/content/_index.md
+++ /dev/null
@@ -1,5 +0,0 @@
-+++
-
-+++
-
-# mini-strap Documentation
diff --git a/packages/website/content/components/_index.md b/packages/website/content/components/_index.md
deleted file mode 100644
index f55553b..0000000
--- a/packages/website/content/components/_index.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-+++
-
-# Components
-
-Complex elements that require custom javascript to run
diff --git a/packages/website/content/components/accordion.md b/packages/website/content/components/accordion.md
deleted file mode 100644
index 7c92c86..0000000
--- a/packages/website/content/components/accordion.md
+++ /dev/null
@@ -1,41 +0,0 @@
-+++
-[taxonomies]
-section = ["Components"]
-+++
-
-# Accordion
-
-## Basic
-
-The accordion component allows to hide and show content in the page. The
-accordion is composed of the following elements:
-
-- `msp-accordion`: the main container that encapsulates multiple toggable elements.
-- `msp-accordion-item`: a single toggable element.
-- `msp-accordion-header`: this element acts as the header and responds to the `onclick` event to toggle the content.
-- `msp-accordion-collapse`: container for the content, needed to help with dynamic height and transitions.
-- `msp-accordion-content`: the content of the accordion.
-
-### Example:
-
-```html
-
-
-
-
-
- Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
-
-
-
-
-
-
-
-
- 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
deleted file mode 100644
index c1fb188..0000000
--- a/packages/website/content/components/dropdown.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Components"]
-+++
-
-# dropdown.md
diff --git a/packages/website/content/components/modal.md b/packages/website/content/components/modal.md
deleted file mode 100644
index c4d19c5..0000000
--- a/packages/website/content/components/modal.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Components"]
-+++
-
-# modal.md
diff --git a/packages/website/content/components/offcanvas.md b/packages/website/content/components/offcanvas.md
deleted file mode 100644
index 1c398f2..0000000
--- a/packages/website/content/components/offcanvas.md
+++ /dev/null
@@ -1,76 +0,0 @@
-+++
-[taxonomies]
-section = ["Components"]
-+++
-
-# Offcanvas
-
-## Basic
-
-The offcanvas component serves as a sidebar that is hidden out of view until is
-toggled via an interactive element. The offcanvas is composed of the following
-elements:
-
-- `msp-offcanvas`: the main container.
-- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more.
-- `msp-offcanvas-content`: the container for the content.
-- `msp-offcanvas-header`: top section of the content.
-- `msp-offcanvas-body`: middle section of the content.
-- `msp-offcanvas-footer`: bottom section of the content.
-
-To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an
-element and attach the `data-msp-target` attribute.
-
-### Example:
-
-```html
-
-
-
-
-
- Toggle
-
-
-
-
-```
-
-## 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
-
-
-
-
-
- Toggle
-
-
-
-
-```
diff --git a/packages/website/content/components/tabs.md b/packages/website/content/components/tabs.md
deleted file mode 100644
index d256dfe..0000000
--- a/packages/website/content/components/tabs.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Components"]
-+++
-
-# tabs.md
diff --git a/packages/website/content/components/tooltip.md b/packages/website/content/components/tooltip.md
deleted file mode 100644
index f12205f..0000000
--- a/packages/website/content/components/tooltip.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Components"]
-+++
-
-# tooltip.md
diff --git a/packages/website/content/content/_index.md b/packages/website/content/content/_index.md
deleted file mode 100644
index cb14ecb..0000000
--- a/packages/website/content/content/_index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-+++
-+++
-
-# Components
diff --git a/packages/website/content/content/fonts.md b/packages/website/content/content/fonts.md
deleted file mode 100644
index 9577274..0000000
--- a/packages/website/content/content/fonts.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Content"]
-+++
-
-# Buttons
diff --git a/packages/website/content/content/forms.md b/packages/website/content/content/forms.md
deleted file mode 100644
index 9577274..0000000
--- a/packages/website/content/content/forms.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Content"]
-+++
-
-# Buttons
diff --git a/packages/website/content/content/image.md b/packages/website/content/content/image.md
deleted file mode 100644
index 9577274..0000000
--- a/packages/website/content/content/image.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Content"]
-+++
-
-# Buttons
diff --git a/packages/website/content/content/table.md b/packages/website/content/content/table.md
deleted file mode 100644
index 9577274..0000000
--- a/packages/website/content/content/table.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Content"]
-+++
-
-# Buttons
diff --git a/packages/website/content/elements/_index.md b/packages/website/content/elements/_index.md
deleted file mode 100644
index f0a0b6d..0000000
--- a/packages/website/content/elements/_index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-+++
-+++
-
-foo
diff --git a/packages/website/content/elements/button.md b/packages/website/content/elements/button.md
deleted file mode 100644
index 75847dd..0000000
--- a/packages/website/content/elements/button.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Elements"]
-+++
-
-# Buttons
diff --git a/packages/website/content/elements/card.md b/packages/website/content/elements/card.md
deleted file mode 100644
index 75847dd..0000000
--- a/packages/website/content/elements/card.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Elements"]
-+++
-
-# Buttons
diff --git a/packages/website/content/elements/links.md b/packages/website/content/elements/links.md
deleted file mode 100644
index 75847dd..0000000
--- a/packages/website/content/elements/links.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Elements"]
-+++
-
-# Buttons
diff --git a/packages/website/content/elements/list.md b/packages/website/content/elements/list.md
deleted file mode 100644
index 75847dd..0000000
--- a/packages/website/content/elements/list.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Elements"]
-+++
-
-# Buttons
diff --git a/packages/website/content/elements/navbar.md b/packages/website/content/elements/navbar.md
deleted file mode 100644
index 75847dd..0000000
--- a/packages/website/content/elements/navbar.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Elements"]
-+++
-
-# Buttons
diff --git a/packages/website/content/elements/pagination.md b/packages/website/content/elements/pagination.md
deleted file mode 100644
index 75847dd..0000000
--- a/packages/website/content/elements/pagination.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Elements"]
-+++
-
-# Buttons
diff --git a/packages/website/content/layout/_index.md b/packages/website/content/layout/_index.md
deleted file mode 100644
index cb14ecb..0000000
--- a/packages/website/content/layout/_index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-+++
-+++
-
-# Components
diff --git a/packages/website/content/layout/container.md b/packages/website/content/layout/container.md
deleted file mode 100644
index 72e8acf..0000000
--- a/packages/website/content/layout/container.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Layout"]
-+++
-
-# Buttons
diff --git a/packages/website/content/layout/display.md b/packages/website/content/layout/display.md
deleted file mode 100644
index 72e8acf..0000000
--- a/packages/website/content/layout/display.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Layout"]
-+++
-
-# Buttons
diff --git a/packages/website/content/layout/grid.md b/packages/website/content/layout/grid.md
deleted file mode 100644
index 72e8acf..0000000
--- a/packages/website/content/layout/grid.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Layout"]
-+++
-
-# Buttons
diff --git a/packages/website/content/layout/position.md b/packages/website/content/layout/position.md
deleted file mode 100644
index 72e8acf..0000000
--- a/packages/website/content/layout/position.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Layout"]
-+++
-
-# Buttons
diff --git a/packages/website/content/layout/responsive-helpers.md b/packages/website/content/layout/responsive-helpers.md
deleted file mode 100644
index 72e8acf..0000000
--- a/packages/website/content/layout/responsive-helpers.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Layout"]
-+++
-
-# Buttons
diff --git a/packages/website/content/layout/spacing.md b/packages/website/content/layout/spacing.md
deleted file mode 100644
index 72e8acf..0000000
--- a/packages/website/content/layout/spacing.md
+++ /dev/null
@@ -1,6 +0,0 @@
-+++
-[taxonomies]
-section = ["Layout"]
-+++
-
-# Buttons
diff --git a/packages/website/docs/intro.md b/packages/website/docs/intro.md
new file mode 100644
index 0000000..45e8604
--- /dev/null
+++ b/packages/website/docs/intro.md
@@ -0,0 +1,47 @@
+---
+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
new file mode 100644
index 0000000..2e6db55
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/_category_.json
@@ -0,0 +1,8 @@
+{
+ "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
new file mode 100644
index 0000000..04771a0
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/congratulations.md
@@ -0,0 +1,23 @@
+---
+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
new file mode 100644
index 0000000..550ae17
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/create-a-blog-post.md
@@ -0,0 +1,34 @@
+---
+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
new file mode 100644
index 0000000..c22fe29
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/create-a-document.md
@@ -0,0 +1,57 @@
+---
+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
new file mode 100644
index 0000000..20e2ac3
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/create-a-page.md
@@ -0,0 +1,43 @@
+---
+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
new file mode 100644
index 0000000..1c50ee0
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/deploy-your-site.md
@@ -0,0 +1,31 @@
+---
+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
new file mode 100644
index 0000000..35e0082
--- /dev/null
+++ b/packages/website/docs/tutorial-basics/markdown-features.mdx
@@ -0,0 +1,152 @@
+---
+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
+
+```
+
+
+
+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
+
+```
+
+## 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
new file mode 100644
index 0000000..a8ffcc1
--- /dev/null
+++ b/packages/website/docs/tutorial-extras/_category_.json
@@ -0,0 +1,7 @@
+{
+ "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
new file mode 100644
index 0000000..97e4164
Binary files /dev/null and b/packages/website/docs/tutorial-extras/img/docsVersionDropdown.png differ
diff --git a/packages/website/docs/tutorial-extras/img/localeDropdown.png b/packages/website/docs/tutorial-extras/img/localeDropdown.png
new file mode 100644
index 0000000..e257edc
Binary files /dev/null and b/packages/website/docs/tutorial-extras/img/localeDropdown.png differ
diff --git a/packages/website/docs/tutorial-extras/manage-docs-versions.md b/packages/website/docs/tutorial-extras/manage-docs-versions.md
new file mode 100644
index 0000000..ccda0b9
--- /dev/null
+++ b/packages/website/docs/tutorial-extras/manage-docs-versions.md
@@ -0,0 +1,55 @@
+---
+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:
+
+
+
+## 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
new file mode 100644
index 0000000..b5a644a
--- /dev/null
+++ b/packages/website/docs/tutorial-extras/translate-your-site.md
@@ -0,0 +1,88 @@
+---
+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:
+
+
+
+## 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
new file mode 100644
index 0000000..344c456
--- /dev/null
+++ b/packages/website/docusaurus.config.ts
@@ -0,0 +1,143 @@
+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
deleted file mode 100644
index 6d5aa24..0000000
--- a/packages/website/js/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import "@mini-strap/components/accordion/index.ts";
-import "@mini-strap/components/offcanvas/index.ts";
-console.log("hello world!");
diff --git a/packages/website/package.json b/packages/website/package.json
index d0f6772..dfc8c36 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,21 +1,45 @@
{
"name": "website",
- "type": "module",
+ "version": "0.0.0",
+ "private": true,
"scripts": {
- "link-dependencies": "bun run _scripts/link-dependencies.ts",
- "prebuild": "bun run _scripts/build.ts",
- "watch-deps": "bun run --watch _scripts/build.ts",
- "dev": "zola serve --port 3000 --fast --open"
+ "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"
},
"dependencies": {
- "@mini-strap/core": "workspace:*",
- "@mini-strap/components": "workspace:*"
+ "@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"
},
"devDependencies": {
- "@types/bun": "latest",
- "sass": "^1.83.0"
+ "@docusaurus/module-type-aliases": "3.6.1",
+ "@docusaurus/tsconfig": "3.6.1",
+ "@docusaurus/types": "3.6.1",
+ "typescript": "~5.6.2"
},
- "peerDependencies": {
- "typescript": "^5.0.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"
}
}
diff --git a/packages/website/sass/@mini-strap/core/style.scss b/packages/website/sass/@mini-strap/core/style.scss
deleted file mode 120000
index 60be24d..0000000
--- a/packages/website/sass/@mini-strap/core/style.scss
+++ /dev/null
@@ -1 +0,0 @@
-/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss
\ No newline at end of file
diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss
deleted file mode 100644
index b7c6746..0000000
--- a/packages/website/sass/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "@mini-strap/core";
-@use "@mini-strap/components/navbar/navbar.scss";
-@use "@mini-strap/components/accordion/accordion.scss";
-@use "@mini-strap/components/offcanvas/style.scss";
-
-main {
- padding: var(--msp-spacing-3);
-}
diff --git a/packages/website/sidebars.ts b/packages/website/sidebars.ts
new file mode 100644
index 0000000..2897139
--- /dev/null
+++ b/packages/website/sidebars.ts
@@ -0,0 +1,33 @@
+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
new file mode 100644
index 0000000..50a9e6f
--- /dev/null
+++ b/packages/website/src/components/HomepageFeatures/index.tsx
@@ -0,0 +1,70 @@
+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
new file mode 100644
index 0000000..b248eb2
--- /dev/null
+++ b/packages/website/src/components/HomepageFeatures/styles.module.css
@@ -0,0 +1,11 @@
+.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
new file mode 100644
index 0000000..2bc6a4c
--- /dev/null
+++ b/packages/website/src/css/custom.css
@@ -0,0 +1,30 @@
+/**
+ * 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
new file mode 100644
index 0000000..9f71a5d
--- /dev/null
+++ b/packages/website/src/pages/index.module.css
@@ -0,0 +1,23 @@
+/**
+ * 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
new file mode 100644
index 0000000..400a3e1
--- /dev/null
+++ b/packages/website/src/pages/index.tsx
@@ -0,0 +1,43 @@
+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 (
+
+ );
+}
+
+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
new file mode 100644
index 0000000..9756c5b
--- /dev/null
+++ b/packages/website/src/pages/markdown-page.md
@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.
diff --git a/packages/website/templates/taxonomy_list.html b/packages/website/static/.nojekyll
similarity index 100%
rename from packages/website/templates/taxonomy_list.html
rename to packages/website/static/.nojekyll
diff --git a/packages/website/static/img/docusaurus-social-card.jpg b/packages/website/static/img/docusaurus-social-card.jpg
new file mode 100644
index 0000000..ffcb448
Binary files /dev/null and b/packages/website/static/img/docusaurus-social-card.jpg differ
diff --git a/packages/website/static/img/docusaurus.png b/packages/website/static/img/docusaurus.png
new file mode 100644
index 0000000..f458149
Binary files /dev/null and b/packages/website/static/img/docusaurus.png differ
diff --git a/packages/website/static/img/favicon.ico b/packages/website/static/img/favicon.ico
new file mode 100644
index 0000000..c01d54b
Binary files /dev/null and b/packages/website/static/img/favicon.ico differ
diff --git a/packages/website/static/img/logo.svg b/packages/website/static/img/logo.svg
new file mode 100644
index 0000000..9db6d0d
--- /dev/null
+++ b/packages/website/static/img/logo.svg
@@ -0,0 +1 @@
+
\ 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
new file mode 100644
index 0000000..af961c4
--- /dev/null
+++ b/packages/website/static/img/undraw_docusaurus_mountain.svg
@@ -0,0 +1,171 @@
+
+ Easy to Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/static/img/undraw_docusaurus_react.svg b/packages/website/static/img/undraw_docusaurus_react.svg
new file mode 100644
index 0000000..94b5cf0
--- /dev/null
+++ b/packages/website/static/img/undraw_docusaurus_react.svg
@@ -0,0 +1,170 @@
+
+ Powered by React
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/static/img/undraw_docusaurus_tree.svg b/packages/website/static/img/undraw_docusaurus_tree.svg
new file mode 100644
index 0000000..d9161d3
--- /dev/null
+++ b/packages/website/static/img/undraw_docusaurus_tree.svg
@@ -0,0 +1,40 @@
+
+ Focus on What Matters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html
deleted file mode 100644
index 27de743..0000000
--- a/packages/website/templates/base.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
-
- alecodes.page
-
-
- {% block scripts %}{% endblock %}
-
-
-
-
-
- {% include "partials/header.html" %}
-
-
- Toggle
-
- {% block content %}{% endblock %}
-
-
-
-
diff --git a/packages/website/templates/index.html b/packages/website/templates/index.html
deleted file mode 100644
index 85c2741..0000000
--- a/packages/website/templates/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% extends "base.html" %}
-
-
-{% block content %}
-{{section.content | safe}}
-
-
- {% for sub in section.subsections %}
- {% set sub = get_section(path=sub, metadata_only=true) %}
- {{sub.title | safe}}
- {% endfor %}
-
-{% endblock content %}
diff --git a/packages/website/templates/page.html b/packages/website/templates/page.html
deleted file mode 100644
index 6d86a98..0000000
--- a/packages/website/templates/page.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends "base.html" %}
-
-
-{% block content %}
-{{page.content | safe}}
-{% endblock content %}
diff --git a/packages/website/templates/partials/header.html b/packages/website/templates/partials/header.html
deleted file mode 100644
index 41968b2..0000000
--- a/packages/website/templates/partials/header.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
-
-
- Overview
-
-
- {% for item in get_taxonomy(kind="section") | get(key="items") %}
-
-
-
-
- {% endfor %}
-
-
-
-
diff --git a/packages/website/templates/section.html b/packages/website/templates/section.html
deleted file mode 100644
index c520de6..0000000
--- a/packages/website/templates/section.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends "base.html" %}
-
-
-{% block content %}
-{{section.content | safe}}
-{% endblock content %}
diff --git a/packages/website/templates/taxonomy_single.html b/packages/website/templates/taxonomy_single.html
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json
index 238655f..314eab8 100644
--- a/packages/website/tsconfig.json
+++ b/packages/website/tsconfig.json
@@ -1,27 +1,7 @@
{
+ // This file is not used in compilation. It is here just for a nice editor experience.
+ "extends": "@docusaurus/tsconfig",
"compilerOptions": {
- // 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
+ "baseUrl": "."
}
}