diff --git a/.forgejo/workflows/publish.yaml b/.forgejo/workflows/publish.yaml deleted file mode 100644 index b390a48..0000000 --- a/.forgejo/workflows/publish.yaml +++ /dev/null @@ -1,49 +0,0 @@ -name: Publish package -on: - push: - workflow_dispatch: -env: - NPM_TAG: ${{ github.ref == 'refs/heads/main' && 'latest' || 'next' }} - -# Variables reference: https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#about-contexts -# Syntax reference: https://forgejo.org/docs/latest/user/actions/ -jobs: - build_and_publish: - runs-on: docker - steps: - - name: Checkout repository - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Cache Bun dependencies - id: cache - uses: actions/cache@v4 - with: - path: ~/.bun/install/cache - key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }} - restore-keys: | - ${{ runner.os }}-bun- - - - name: Setup Bun - id: "setup_bun" - uses: oven-sh/setup-bun@v2 - - - name: 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 - 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 }}"; diff --git a/bun.lockb b/bun.lockb index 65c1471..2454e02 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/bunfig.toml b/bunfig.toml deleted file mode 100644 index 63cb7c5..0000000 --- a/bunfig.toml +++ /dev/null @@ -1,4 +0,0 @@ -[install.scopes] - -"@alecodes" = { token = "$NPM_REGISTRY_TOKEN", url = "https://git.alecodes.page/api/packages/alecodes/npm/" } -"@mini-strap" = { token = "$NPM_REGISTRY_TOKEN", url = "https://git.alecodes.page/api/packages/alecodes/npm/" } diff --git a/cog.toml b/cog.toml deleted file mode 100644 index 2066cba..0000000 --- a/cog.toml +++ /dev/null @@ -1,32 +0,0 @@ -from_latest_tag = true -ignore_merge_commits = false -disable_changelog = false -disable_bump_commit = false -tag_prefix = "v" -generate_mono_repository_global_tag = true -branch_whitelist = [] -skip_ci = "[skip ci]" -skip_untracked = false -pre_bump_hooks = [] -post_bump_hooks = [] -pre_package_bump_hooks = [ - "echo 'bump package {{package}} to {{version}}'", - "sed -E -i 's/(\"version\":) \"[0-9.]{5}\"/\\1 \"{{version}}\"/gi' package.json", - "bun run ci:publish", -] -post_package_bump_hooks = [] - -[git_hooks] - -[commit_types] - -[changelog] -path = "CHANGELOG.md" -authors = [] - -[bump_profiles] - -[packages] -"@mini-strap/core" = { path = "packages/core" } -"@mini-strap/components" = { path = "packages/components" } -"@mini-strap/website" = { path = "packages/website", public_api = false } diff --git a/package.json b/package.json index cd42aea..5b82e52 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,6 @@ { - "name": "@alecodes/mini-strap", - "version": "0.0.1", + "name": "mini-strap", "module": "index.ts", - "private": true, "devDependencies": { "@eslint/js": "^9.10.0", "@types/bun": "latest", @@ -16,12 +14,8 @@ "typescript": "^5.0.0" }, "scripts": { - "dev": "bun --filter '*' dev", - "ci:publish": "bun --filter '**/core' ci:publish", - "bump": "cog bump --auto --skip-untracked" + "dev": "bun --filter '*' dev" }, "type": "module", - "workspaces": [ - "packages/*" - ] + "workspaces": ["packages/*"] } diff --git a/packages/components/.gitignore b/packages/components/.gitignore deleted file mode 100644 index 9b1ee42..0000000 --- a/packages/components/.gitignore +++ /dev/null @@ -1,175 +0,0 @@ -# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore - -# 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 - -# 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/components/README.md b/packages/components/README.md deleted file mode 100644 index 999eaf9..0000000 --- a/packages/components/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# mini-strap-components - -To install dependencies: - -```bash -bun install -``` - -To run: - -```bash -bun run components.scss -``` - -This project was created using `bun init` in bun v1.1.27. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. diff --git a/packages/components/build.ts b/packages/components/build.ts deleted file mode 100644 index 2b7ea8c..0000000 --- a/packages/components/build.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { type BunPlugin } from "bun"; -import dts from "bun-plugin-dts"; -import styleLoader from "bun-style-loader"; -import * as sass from "sass"; - -const style: BunPlugin = { - name: "Sass Loader", - setup(build) { - console.log("Running SASS Plugin..."); - build.onLoad({ filter: /\.scss$/ }, async ({ path }) => { - const contents = sass.compile(path); - const css = contents.css; - - return { - loader: "file", - contents: css, - }; - }); - }, -}; - -const result = await Bun.build({ - outdir: "dist", - publicPath: "public", - format: "esm", - plugins: [style], - entrypoints: ["./src/components.scss"], -}); - -if (!result.success) { - throw new AggregateError(result.logs, "Build failed"); -} diff --git a/packages/components/package.json b/packages/components/package.json deleted file mode 100644 index 54e0384..0000000 --- a/packages/components/package.json +++ /dev/null @@ -1,26 +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 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/OffCanvas/template.html b/packages/components/src/OffCanvas/template.html deleted file mode 100644 index 7d9ee35..0000000 --- a/packages/components/src/OffCanvas/template.html +++ /dev/null @@ -1,51 +0,0 @@ -
-
- - -
- -
-
- -
-
- - diff --git a/packages/components/src/components.scss b/packages/components/src/components.scss deleted file mode 100644 index 5cae0db..0000000 --- a/packages/components/src/components.scss +++ /dev/null @@ -1,8 +0,0 @@ -.btn { - padding: var(--msp-spacing-1); -} - -.btn-primary { - background-color: var(--msp--primary-bg); - color: var(--msp--primary-text); -} diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json deleted file mode 100644 index 2e82a45..0000000 --- a/packages/components/tsconfig.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "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 - - // library configuration - // "baseUrl": "./src/" - } -} diff --git a/packages/core/_variables.scss b/packages/core/_variables.scss deleted file mode 100644 index a1850a7..0000000 --- a/packages/core/_variables.scss +++ /dev/null @@ -1,83 +0,0 @@ -@use "sass:color"; - -/* Using catppuccin for now, make a theme switcher later */ -@use "./themes/catppuccin/catppuccin"; - -@function getColor($color) { - $ctp-theme: map-get(catppuccin.$palette, "macchiato"); - @return map-get($ctp-theme, $color); -} - -/* -* ╭───────────────────────────────────────────────────────────╮ -* │ Mini-Strap Design Tokens │ -* ╰───────────────────────────────────────────────────────────╯ -* */ - -// ── Structure and convention ──────────────────────────────────────────── - -/* -* -* */ - -/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */ -$screen-sizes: ( - "sm": 640px, - "md": 768px, - "lg": 1024px, - "xl": 1280px, - "2xl": 1536px, -); - -$spacings: ( - 0 "--prj-spacing-0" 0, - 1 "--prj-spacing-1" 0.25rem, - 2 "--prj-spacing-2" 0.5rem, - 3 "--prj-spacing-3" 1rem, - 4 "--prj-spacing-4" 2rem, - 5 "--prj-spacing-5" 3rem -); - -$border-radius: 0.5rem; - -// Native CSS Variables to allow overridings and usage in external stylesheets -:root { - /* Variables prefixed with prj to avoid collisions */ - - /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */ - --prj-bg: #{getColor("mantle")}; - --prj-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)}; - --prj-shadow: #{getColor("crust")}; - --prj-text: #{getColor("text")}; - - --prj-surface-1: #{getColor("base")}; - --prj-surface-2: #{darken(getColor("surface0"), 2%)}; - --prj-surface-3: #{getColor("surface1")}; - --prj-surface-text: #{getColor("text")}; - - --prj-link-text: #{getColor("teal")}; - - --prj-accent-bg: #{getColor("teal")}; - --prj-accent-text: #{getColor("base")}; - - --prj-primary: #{getColor("teal")}; - --prj-primary-text: #{getColor("base")}; - - --prj-secondary: #{getColor("mauve")}; - --prj-secondary-text: #{getColor("base")}; - - --prj-danger: #{getColor("red")}; - --prj-danger-text: #{getColor("base")}; - - --prj-disabled: #{getColor("red")}; - --prj-disabled-text: rgba(#{getColor("raw")}, 0.5); - - --prj-input: #{getColor("text")}; - --prj-input-text: #{getColor("base")}; - - @each $index, $variable, $value in $spacings { - #{$variable}: #{$value}; - } - - --prj-border-radius: #{$border-radius}; -} diff --git a/packages/core/bun.lockb b/packages/core/bun.lockb deleted file mode 100755 index 0c40387..0000000 Binary files a/packages/core/bun.lockb and /dev/null differ diff --git a/packages/core/package.json b/packages/core/package.json index 379bddc..dce323a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,11 +1,7 @@ { - "name": "@mini-strap/core", - "version": "0.0.1", + "name": "mini-strap-core", "module": "src/style.scss", "type": "module", - "scripts": { - "ci:publish": "bun publish --production --frozen-lockfile --silent" - }, "devDependencies": { "@types/bun": "latest" }, @@ -13,3 +9,4 @@ "typescript": "^5.0.0" } } + diff --git a/packages/core/src/_colors.scss b/packages/core/src/_colors.scss deleted file mode 100644 index e69de29..0000000 diff --git a/packages/core/src/_mixins.scss b/packages/core/src/_mixins.scss index a986741..e5abe23 100644 --- a/packages/core/src/_mixins.scss +++ b/packages/core/src/_mixins.scss @@ -15,12 +15,3 @@ } } } - -@mixin hover-darker() { - transition: filter 0.15s ease-in-out; - filter: brightness(1); - - &:hover { - filter: brightness(0.9); - } -} diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss deleted file mode 100644 index c4e42f8..0000000 --- a/packages/core/src/_reset.scss +++ /dev/null @@ -1,187 +0,0 @@ -/* - * ╭─────────────────────────────────────────────────────────────────╮ - * │ Reset borrowed from https://github.com/kkrishguptaa/reseter.css │ - * ╰─────────────────────────────────────────────────────────────────╯ -*/ - -// ── Global ────────────────────────────────────────────────────────────── - -*, -*::before, -*::after { - box-sizing: inherit; - background-clip: inherit; - padding: 0; - margin: 0; -} - -:where(:root) { - box-sizing: border-box; - background-clip: padding-box; - line-height: 1.5; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} - -:where(main) { - display: block; -} - -:where(h1) { - font-size: 2em; - margin: 0.67em 0; -} - -:where(p + p) { - margin-top: 1rem; -} - -// ── Forms ─────────────────────────────────────────────────────────────── -:where(button, input, optgroup, select, textarea) { - line-height: inherit; - border: 1px solid currentColor; -} - -:where(button) { - overflow: visible; - text-transform: none; -} - -:where(button, [type="button"], [type="reset"], [type="submit"]) { - -webkit-appearance: button; - padding: 1px 6px; - &:not(:disabled) { - cursor: pointer; - } -} - -:where(input) { - overflow: visible; -} - -:where(input, textarea) { - padding: 1px; -} - -:where(fieldset) { - border: 1px solid currentColor; - margin: 0 2px; -} - -:where(legend) { - color: inherit; - display: table; - max-width: 100%; - white-space: normal; -} - -:where(progress) { - display: inline-block; - vertical-align: baseline; -} - -:where(select) { - text-transform: none; -} - -:where(textarea) { - overflow: auto; - vertical-align: top; -} - -:where([type="search"]) { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -:where([type="color"]) { - background: inherit; -} - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.5; -} - -::-webkit-search-decoration, -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -::-moz-focus-inner { - border: 0; -} - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -:-moz-ui-invalid { - box-shadow: none; -} - -// ── Text ──────────────────────────────────────────────────────────────── - -: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; -} - -// ── 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 3d41eaa..460d536 100644 --- a/packages/core/src/_tokens.scss +++ b/packages/core/src/_tokens.scss @@ -1,5 +1,4 @@ @use "sass:color"; -@use "colors"; /* Using catppuccin for now, make a theme switcher later */ @use "../themes/catppuccin/catppuccin"; @@ -45,61 +44,44 @@ $spacings: ( $border-radius: 0.5rem; -/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */ -$msp-colors: ( - "--msp-color-bg": #{getColor("mantle")}, - "--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)}, - "--msp-color-bg-surface-1": #{getColor("base")}, - "--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)}, - "--msp-color-bg-surface-3": #{getColor("surface1")}, - - "--msp-color-bg-accent": #{getColor("teal")}, - "--msp-color-bg-primary": #{getColor("mauve")}, - "--msp-color-bg-secondary": #{getColor("lavender")}, - "--msp-color-bg-danger": #{getColor("red")}, - "--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)}, - "--msp-color-bg-input": #{getColor("text")}, - "--msp-color-bg-checkbox": #{getColor("teal")}, - "--msp-color-bg-range": #{getColor("surface1")}, - "--msp-color-bg-btn": #{getColor("teal")}, - "--msp-color-bg-table": #{getColor("base")}, - - "--msp-color-text": #{getColor("text")}, - "--msp-color-text-transparent": #{color.scale(getColor("text"), $alpha: -50%)}, - "--msp-color-text-surface": #{getColor("text")}, - "--msp-color-text-link": #{getColor("teal")}, - "--msp-color-text-accent": #{getColor("base")}, - "--msp-color-text-primary": #{getColor("base")}, - "--msp-color-text-secondary": #{getColor("base")}, - "--msp-color-text-danger": #{getColor("base")}, - "--msp-color-text-disabled": #{color.scale(getColor("text"), $alpha: -30%)}, - "--msp-color-text-input": #{getColor("base")}, - "--msp-color-text-input-disabled": #{color.scale( - getColor("base"), - $alpha: -30% - )}, - "--msp-color-text-checkbox": #{getColor("surface1")}, - "--msp-color-text-range": #{getColor("teal")}, - "--msp-color-text-btn": #{getColor("base")}, - "--msp-color-text-table": #{getColor("text")}, - - "--msp-color-shadow": #{getColor("crust")}, - "--msp-color-transparent": transparent, -); - // Native CSS Variables to allow overridings and usage in external stylesheets :root { - @each $variable, $value in $msp-colors { - #{$variable}: #{$value}; - } + /* Variables prefixed with prj to avoid collisions */ + + /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */ + --msp-bg: #{getColor("mantle")}; + --msp-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)}; + --msp-shadow: #{getColor("crust")}; + --msp-text: #{getColor("text")}; + + --msp-surface-1: #{getColor("base")}; + --msp-surface-2: #{darken(getColor("surface0"), 2%)}; + --msp-surface-3: #{getColor("surface1")}; + --msp-surface-text: #{getColor("text")}; + + --msp-link-text: #{getColor("teal")}; + + --msp-accent-bg: #{getColor("teal")}; + --msp-accent-text: #{getColor("base")}; + + --msp-primary: #{getColor("teal")}; + --msp-primary-text: #{getColor("base")}; + + --msp-secondary: #{getColor("mauve")}; + --msp-secondary-text: #{getColor("base")}; + + --msp-danger: #{getColor("red")}; + --msp-danger-text: #{getColor("base")}; + + --msp-disabled: #{getColor("red")}; + --msp-disabled-text: rgba(#{getColor("raw")}, 0.5); + + --msp-input: #{getColor("text")}; + --msp-input-text: #{getColor("base")}; @each $index, $variable, $value in $spacings { #{$variable}: #{$value}; } - // ── Borders ───────────────────────────────────────────────────────────── - --msp-border-width: 1px; - --msp-border-color: var(--msp-color-text-transparent); - --msp-border-style: solid; - --msp-border-radius: 0.2rem; + --msp-border-radius: #{$border-radius}; } diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss index 82968ee..16045d5 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -1,33 +1,33 @@ @use "./tokens" as *; @use "./mixins"; -.msp-position-fixed { +.position-fixed { position: fixed; left: 0; top: 0; z-index: 2; } -.msp-position-sticky { +.position-sticky { position: sticky; left: 0; top: 0; z-index: 2; } -.msp-d-none { +.d-none { display: none; } -.msp-d-block { +.d-block { display: block; } -.msp-d-flex { +.d-flex { display: flex; } -.msp-visually-hidden { +.visually-hidden { height: 0; width: 0; position: absolute; @@ -35,46 +35,46 @@ } @include mixins.responsive using($breakpoint, $size) { - .msp-d-#{$breakpoint}-none { + .d-#{$breakpoint}-none { display: none; } - .msp-d-#{$breakpoint}-block { + .d-#{$breakpoint}-block { display: block; } - .msp-d-#{$breakpoint}-flex { + .d-#{$breakpoint}-flex { display: flex; } } -.msp-flex-eq > * { +.flex-eq > * { flex: 100%; } -.msp-flex-column { +.flex-column { flex-direction: column !important; } -.msp-flex-row { +.flex-row { flex-direction: row !important; } @include mixins.responsive using($breakpoint, $size) { - .msp-flex-#{$breakpoint}-column { + .flex-#{$breakpoint}-column { flex-direction: column !important; } - .msp-flex-#{$breakpoint}-row { + .flex-#{$breakpoint}-row { flex-direction: row !important; } } -.msp-hstack { +.hstack { --prj-gap: var(--prj-spacing-3); display: flex; gap: var(--prj-gap); align-items: center; } -.msp-hstack-reverse { +.hstack-reverse { --prj-gap: var(--prj-spacing-3); display: flex; gap: var(--prj-gap); @@ -82,63 +82,63 @@ flex-direction: row-reverse; } -.msp-vstack { +.vstack { --prj-gap: var(--prj-spacing-3); display: flex; gap: var(--prj-gap); flex-direction: column; } -.msp-vstack-reverse { +.vstack-reverse { --prj-gap: var(--prj-spacing-3); display: flex; flex-direction: column-reverse; } -.msp-flex-grow { +.flex-grow { flex-grow: 1; } -.msp-flex-wrap { +.flex-wrap { flex-wrap: wrap; } -.msp-flex-nowrap { +.flex-nowrap { flex-wrap: nowrap; } @include mixins.responsive using($breakpoint, $size) { - .msp-flex-#{$breakpoint}-wrap { + .flex-#{$breakpoint}-wrap { flex-wrap: wrap; } - .msp-flex-#{$breakpoint}-nowrap { + .flex-#{$breakpoint}-nowrap { flex-wrap: nowrap; } } -.msp-flex-center { +.flex-center { display: flex; justify-content: center; align-items: center; } -.msp-justify-content-center { +.justify-content-center { justify-content: center !important; } -.msp-justify-content-between { +.justify-content-between { justify-content: space-between !important; } -.msp-justify-content-around { +.justify-content-around { justify-content: space-around !important; } -.msp-align-items-center { +.align-items-center { align-items: center !important; } -.msp-grid { +.grid { --prj-gap: var(--prj-spacing-3); --prj-columns: repeat(3, 1fr); --prj-min-col-width: 150px; @@ -152,81 +152,81 @@ } @for $i from 1 through 12 { - .msp-grid-cols-#{$i} { + .grid-cols-#{$i} { @include grid-cols($i); } } @include mixins.responsive-steps(1, 12) using ($breakpoint, $index) { - .msp-grid-#{$breakpoint}-cols-#{$index} { + .grid-#{$breakpoint}-cols-#{$index} { @include grid-cols($index); } } -.msp-list-unstyle { +.list-unstyle { list-style: none; } -.msp-text-justify { +.text-justify { text-align: justify; text-justify: inter-word; } -.msp-text-start { +.text-start { text-align: start; } -.msp-text-center { +.text-center { text-align: center; } -.msp-text-end { +.text-end { text-align: end; } -.msp-align-start { +.align-start { vertical-align: start; } -.msp-align-center { +.align-center { vertical-align: middle; } -.msp-align-end { +.align-end { vertical-align: end; } -.msp-overflow-scroll { +.overflow-scroll { overflow: scroll; } -.msp-overflow-x-scroll { +.overflow-x-scroll { overflow-x: scroll; } -.msp-overflow-y-scroll { +.overflow-y-scroll { overflow-y: scroll; } -.msp-w-auto { +.w-auto { width: auto; } -.msp-h-auto { +.h-auto { height: auto; } @for $i from 0 through 100 { - .msp-w-#{$i} { + .w-#{$i} { width: percentage(calc($i / 100)); } - .msp-h-#{$i} { + .h-#{$i} { height: percentage(calc($i / 100)); } } @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) { - .msp-w-#{$breakpoint}-#{$index} { + .w-#{$breakpoint}-#{$index} { width: percentage(calc($index / 100)); } - .msp-h-#{$breakpoint}-#{$index} { + .h-#{$breakpoint}-#{$index} { height: percentage(calc($index / 100)); } } @@ -236,54 +236,54 @@ $name: "#{$breakpoint}-#{$name}"; } - .msp-m-#{$name} { + .m-#{$name} { margin: $value !important; } - .msp-mx-#{$name} { + .mx-#{$name} { margin-left: $value !important; margin-right: $value !important; } - .msp-my-#{$name} { + .my-#{$name} { margin-top: $value !important; margin-bottom: $value !important; } - .msp-mt-#{$name} { + .mt-#{$name} { margin-top: $value !important; } - .msp-mb-#{$name} { + .mb-#{$name} { margin-bottom: $value !important; } - .msp-ml-#{$name} { + .ml-#{$name} { margin-left: $value !important; } - .msp-mr-#{$name} { + .mr-#{$name} { margin-right: $value !important; } - .msp-p-#{$name} { + .p-#{$name} { padding: $value !important; } - .msp-px-#{$name} { + .px-#{$name} { padding-left: $value !important; padding-right: $value !important; } - .msp-py-#{$name} { + .py-#{$name} { padding-top: $value !important; padding-bottom: $value !important; } - .msp-pt-#{$name} { + .pt-#{$name} { padding-top: $value !important; } - .msp-pb-#{$name} { + .pb-#{$name} { padding-bottom: $value !important; } - .msp-pl-#{$name} { + .pl-#{$name} { padding-left: $value !important; } - .msp-pr-#{$name} { + .pr-#{$name} { padding-right: $value !important; } - .msp-gap-#{$name} { + .gap-#{$name} { --prj-gap: #{$value}; } } @@ -300,30 +300,30 @@ } } -.msp-shadow-0 { +.shadow-0 { box-shadow: none; } -.msp-shadow-1 { +.shadow-1 { box-shadow: 10px 10px 5px 0px var(--prj-shadow); } -.msp-border-radius { +.border-radius { border-radius: var(--prj-border-radius); } -.msp-text-none { +.text-none { text-transform: none; } -.msp-text-capitalize { +.text-capitalize { text-transform: capitalize; } -.msp-text-uppercase { +.text-uppercase { text-transform: uppercase; } -.msp-text-uppercase { +.text-uppercase { text-transform: uppercase; } -.msp-text-lowercase { +.text-lowercase { text-transform: lowercase; } diff --git a/packages/core/src/components/form.scss b/packages/core/src/components/form.scss deleted file mode 100644 index 1ad5205..0000000 --- a/packages/core/src/components/form.scss +++ /dev/null @@ -1,217 +0,0 @@ -@use "../tokens" as *; -@use "../mixins"; -@use "sass:color"; -@use "sass:string"; - -fieldset:not(.msp-fieldset-border) { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} - -fieldset.msp-fieldset-border { - padding: var(--msp-spacing-2); - margin: 0; - border-radius: var(--msp-border-radius); - border: var(--msp-border-width) var(--msp-border-style) var(--msp-color-text); -} - -label { - display: inline-block; - margin-bottom: var(--msp-spacing-1); -} - -select, -input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not( - [type="range"] - ) { - display: block; - border-radius: var(--msp-border-radius); - border: var(--msp-border-width) var(--msp-border-style) - var(--msp-border-color); - width: 100%; - background-color: var(--msp-color-bg-input); - color: var(--msp-color-text-input); - - padding: var(--msp-spacing-1); - font-size: 0.8rem; -} - -input[type="checkbox"] + label { - display: inline-block; - margin-bottom: initial; -} - -input[type="checkbox"] { - float: left; - background-color: var(--msp-color-bg-input); - - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - border-radius: var(--msp-border-radius); - border: var(--msp-border-width) var(--msp-border-style) - var(--msp-border-bg-input); - background-color: var(--msp-color-bg-input); - background-image: var(--msp-form-check-bg-image); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - - $size: 0.75rem; - - width: $size; - height: $size; - - margin-top: 0.425rem; - margin-right: var(--msp-spacing-1); - - &:checked { - background-color: var(--msp-color-bg-checkbox); - border-color: var(--msp-color-bg-checkbox); - - $stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; - --msp-form-check-bg-image: url('data:image/svg+xml,'); - } -} - -input[type="radio"] { - float: left; - background-color: var(--msp-color-bg-input); - - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - border-radius: 50%; - border: var(--msp-border-width) var(--msp-border-style) - var(--msp-border-bg-input); - background-color: var(--msp-color-bg-input); - background-image: var(--msp-form-check-bg-image); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - - $size: 0.75rem; - - width: $size; - height: $size; - - margin-top: 0.425rem; - margin-right: var(--msp-spacing-1); - - &:checked { - background-color: var(--msp-color-bg-checkbox); - border-color: var(--msp-color-bg-checkbox); - - $fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; - --msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e"); - } -} - -input[type="color"] { - display: block; - border-radius: var(--msp-border-radius); - border: var(--msp-border-width) var(--msp-border-style) - var(--msp-color-bg-input); - padding: var(--msp-spacing-1); - width: 3rem; - height: 2rem; - - background-color: var(--msp-color-bg-input); - - &::-moz-color-swatch { - padding: var(--msp-spacing-1); - border-radius: var(--msp-border-radius); - border: 0; - } -} - -input[type="range"] { - background-color: transparent; - - display: block; - width: 100%; - // color: var(--msp-color-text-input); - - border-color: transparent; - &::-moz-range-thumb { - background-color: var(--msp-color-text-range); - width: 1rem; - height: 1rem; - border-radius: 50%; - border: 0; - } - &::-moz-range-track { - background-color: var(--msp-color-bg-range); - color: transparent; - border-color: transparent; - width: 100%; - height: 0.5rem; - border-radius: var(--msp-border-radius); - } -} - -input:disabled::placeholder, -input::placeholder, -select:disabled, -option:disabled { - opacity: 1; - color: var(--msp-color-text-input-disabled); -} - -input:disabled { - background: var(--msp-color-bg-disabled); -} - -.form-control[type="file"] { - &:not(:disabled):not([readonly]) { - cursor: pointer; - } - - overflow: hidden; - - @include mixins.hover-darker; - - &.form-control::file-selector-button { - background-color: inherit; - padding-right: var(--msp-spacing-2); - margin-right: var(--msp-spacing-2); - pointer-events: none; - border-color: inherit; - border-style: solid; - border-width: 0; - border-inline-end-width: var(--msp-border-width); - border-radius: 0; - } -} - -.msp-form-text-help { - margin-top: var(--msp-spacing-1); - font-size: 0.875em; - color: var(--msp-color-text-disabled); -} - -[type="submit"]:not(:disabled), -button:not(:disabled) { - cursor: pointer; -} - -button { - display: inline-block; - padding: var(--msp-spacing-1) var(--msp-spacing-2); - background: var(--msp-color-bg-btn); - font-size: 1rem; - color: var(--msp-color-text-btn); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - border: var(--msp-border-width) var(--msp-border-style) - var(--msp-color-bg-btn); - border-radius: var(--msp-border-radius); - - @include mixins.hover-darker; -} diff --git a/packages/core/src/components/table.scss b/packages/core/src/components/table.scss deleted file mode 100644 index 1f30872..0000000 --- a/packages/core/src/components/table.scss +++ /dev/null @@ -1,37 +0,0 @@ -table { - caption-side: bottom; - border-collapse: collapse; - - width: 100%; - - tbody, - td, - tfoot, - th, - thead, - tr { - border-color: inherit; - border-style: solid; - border-width: 0; - } - - thead { - vertical-align: bottom; - th { - text-align: start; - } - } - - & > :not(caption) > * > * { - padding: var(--msp-spacing-2); - color: var(--msp-color-table-text); - background-color: var(--msp-color-bg-table); - border-bottom-width: var(--msp-border-width); - border-color: var(--msp-color-text-transparent); - box-shadow: inset 0 0 0 9999px - var( - --bs-table-bg-state, - var(--bs-table-bg-type, var(--bs-table-accent-bg)) - ); - } -} diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 53f7103..a1916b2 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -1,17 +1,14 @@ -@use "./reset"; @use "./tokens.scss" as *; @use "./utils.scss"; @use "./animations.scss"; @use "./mixins"; -@use "./components/form"; -@use "./components/table"; - // SASS variables are imported without namespace, but try to always use native // CSS variables when possible so they can be overrwritten by custom styles + html { - background-color: var(--msp-color-bg); - color: var(--msp-color-text); + background-color: var(--msp-bg); + color: var(--msp-text); /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */ font-size: calc(15px + 0.390625vw); @@ -26,8 +23,8 @@ body > main { section:not(.clean) { /* outline: 1px solid var(--msp-accent-bg); */ padding: var(--msp-spacing-3); - background-color: var(--msp-color-bg-surface-1); - box-shadow: 10px 10px 5px 0px var(--msp-color-shadow); + background-color: var(--msp-surface-1); + box-shadow: 10px 10px 5px 0px var(--msp-shadow); border-radius: var(--msp-border-radius); } @@ -88,7 +85,7 @@ p:last-child { } a { - color: var(--msp-color-text-link); + color: var(--msp-link-text); } ul { @@ -126,3 +123,49 @@ video.respect-height { li:not(:last-child) { margin-bottom: var(--msp-spacing-1); } + +.btn { + padding: var(--msp-spacing-1); +} + +.btn-primary { + background-color: var(--msp--primary-bg); + color: var(--msp--primary-text); +} + +/* Lightgallery iframe fix */ +.lg-has-iframe { + position: absolute; + top: 0; + left: 0; + .lg-object { + width: 100% !important; + height: 100% !important; + } +} + +.bg-image { + background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), + var(--bg-image); + background-position: center; + background-size: cover; + color: var(--msp-text); + + padding: var(--msp-spacing-3); + + .text { + padding: var(--msp-spacing-2); + background-color: var(--msp-bg-transparent); + + border-radius: var(--msp-border-radius); + } +} + +a { + transition: text-shadow 0.2s; + --anim-shadow-color: var(--msp-accent-bg); + + &:not(.clean):hover { + text-shadow: 1px 1px 8px var(--anim-shadow-color); + } +} diff --git a/packages/website/.gitignore b/packages/website/.gitignore index b2d6de3..a547bf3 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -1,20 +1,24 @@ -# Dependencies -/node_modules - -# Production -/build - -# Generated files -.docusaurus -.cache-loader - -# Misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/website/README.md b/packages/website/README.md deleted file mode 100644 index 0c6c2c2..0000000 --- a/packages/website/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# Website - -This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. - -### Installation - -``` -$ yarn -``` - -### Local Development - -``` -$ yarn start -``` - -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/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/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/index.html b/packages/website/index.html new file mode 100644 index 0000000..44a9335 --- /dev/null +++ b/packages/website/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + TS + + +
+ + + diff --git a/packages/website/package.json b/packages/website/package.json index 5d7b494..e0e8177 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,48 +1,19 @@ { - "name": "website", - "version": "0.0.0", + "name": "mini-strap-website", "private": true, + "version": "0.0.0", + "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" - }, - "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" + "dev": "vite --port 3000", + "build": "tsc && vite build", + "preview": "vite preview" }, "devDependencies": { - "@docusaurus/module-type-aliases": "3.6.1", - "@docusaurus/tsconfig": "3.6.1", - "@docusaurus/types": "3.6.1", - "typescript": "~5.6.2" + "sass-embedded": "^1.78.0", + "typescript": "^5.5.3", + "vite": "^5.4.1" }, - "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" + "dependencies": { + "mini-strap-core": "workspace:*" } } diff --git a/packages/website/public/vite.svg b/packages/website/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/packages/website/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/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/counter.ts b/packages/website/src/counter.ts new file mode 100644 index 0000000..09e5afd --- /dev/null +++ b/packages/website/src/counter.ts @@ -0,0 +1,9 @@ +export function setupCounter(element: HTMLButtonElement) { + let counter = 0 + const setCounter = (count: number) => { + counter = count + element.innerHTML = `count is ${counter}` + } + element.addEventListener('click', () => setCounter(counter + 1)) + setCounter(0) +} 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/main.ts b/packages/website/src/main.ts new file mode 100644 index 0000000..cc2bd2f --- /dev/null +++ b/packages/website/src/main.ts @@ -0,0 +1,24 @@ +import "mini-strap-core"; +import typescriptLogo from "./typescript.svg"; +import viteLogo from "/vite.svg"; +import { setupCounter } from "./counter.ts"; + +document.querySelector("#app")!.innerHTML = ` +
+ + + + + + +

Vite + TypeScript

+
+ +
+

+ Click on the Vite and TypeScript logos to learn more +

+
+`; + +setupCounter(document.querySelector("#counter")!); 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/src/typescript.svg b/packages/website/src/typescript.svg new file mode 100644 index 0000000..d91c910 --- /dev/null +++ b/packages/website/src/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/src/vite-env.d.ts b/packages/website/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/website/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/website/static/.nojekyll b/packages/website/static/.nojekyll deleted file mode 100644 index e69de29..0000000 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/tsconfig.json b/packages/website/tsconfig.json index 314eab8..0511b9f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -1,7 +1,23 @@ { - // This file is not used in compilation. It is here just for a nice editor experience. - "extends": "@docusaurus/tsconfig", "compilerOptions": { - "baseUrl": "." - } + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] }