mirror of
https://github.com/Gitlawb/openclaude.git
synced 2026-05-02 15:22:30 +00:00
Feat/web landing refresh (#958)
* feat(web): openclaude landing — runs anywhere, uses anything A new marketing site for openclaude under web/, plus the minimal root infrastructure to build, ignore, and gate it without affecting the published npm package. Landing page (web/) - Vite + React 19 with monospace gitlawb typography (sf mono / fira code). - Hero: pill, two-line wordmark "runs anywhere. / uses anything.", copy-to-clipboard install command, github cta. - Six feature rows in hermes-style "title — sentence" format on hairline dividers (any model, real tools, profiles per repo, streaming, gateway routing, editor + server modes). - Install block: same copyable command + three numbered steps. - One-line footer with brand, version, gitlawb link, and license. - Light theme is the default with a no-flash bootstrap script and a ☀ / ☾ toggle persisted to localStorage. - New orange terminal-face logo at 36px in the nav. - Body wash: dual orange radial gradients for warmth on both themes. Root infra - web/ excluded from npm publish via .npmignore (belt-and-suspenders alongside the existing files whitelist). - web/ excluded from docker context (.dockerignore). - web:dev / web:build / web:preview / web:typecheck scripts in package.json that delegate via --cwd web (no root deps added). - web typecheck + build added to the pr-checks workflow. - web/dist/ and web/*.tsbuildinfo ignored. Co-Authored-By: OpenClaude <openclaude@gitlawb.com> * added vercel in .gitignore --------- Co-authored-by: OpenClaude <openclaude@gitlawb.com>
This commit is contained in:
Kevin Codex
GitHub
@@ -1,5 +1,6 @@
|
||||
node_modules
|
||||
dist
|
||||
web
|
||||
.git
|
||||
.gitignore
|
||||
.env
|
||||
|
||||
@@ -58,3 +58,29 @@ jobs:
|
||||
|
||||
- name: Provider recommendation tests
|
||||
run: npm run test:provider-recommendation
|
||||
|
||||
web:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Check out repository
|
||||
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
|
||||
with:
|
||||
node-version: 22
|
||||
|
||||
- name: Set up Bun
|
||||
uses: oven-sh/setup-bun@4bc047ad259df6fc24a6c9b0f9a0cb08cf17fbe5 # v2.0.1
|
||||
with:
|
||||
bun-version: 1.3.11
|
||||
|
||||
- name: Install web dependencies
|
||||
run: bun install --cwd web --frozen-lockfile
|
||||
|
||||
- name: Typecheck web
|
||||
run: bun run --cwd web typecheck
|
||||
|
||||
- name: Build web
|
||||
run: bun run --cwd web build
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
node_modules/
|
||||
dist/
|
||||
*.tsbuildinfo
|
||||
web/dist/
|
||||
web/*.tsbuildinfo
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
# npm publish only ships what the `files` field in package.json allows.
|
||||
# This .npmignore is a safety net: if `files` is ever removed or expanded,
|
||||
# nothing in this list can be published.
|
||||
|
||||
# Marketing / landing site — never ship with the CLI package.
|
||||
web/
|
||||
@@ -33,6 +33,10 @@
|
||||
"dev:grpc": "bun run scripts/start-grpc.ts",
|
||||
"dev:grpc:cli": "bun run scripts/grpc-cli.ts",
|
||||
"start": "node dist/cli.mjs",
|
||||
"web:dev": "bun run --cwd web dev",
|
||||
"web:build": "bun run --cwd web build",
|
||||
"web:preview": "bun run --cwd web preview",
|
||||
"web:typecheck": "bun run --cwd web typecheck",
|
||||
"test": "bun test",
|
||||
"test:coverage": "bun test --coverage --coverage-reporter=lcov --coverage-dir=coverage --max-concurrency=1 && bun run scripts/render-coverage-heatmap.ts",
|
||||
"test:coverage:ui": "bun run scripts/render-coverage-heatmap.ts",
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.vercel
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
{
|
||||
"lockfileVersion": 1,
|
||||
"configVersion": 1,
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "openclaude-web",
|
||||
"dependencies": {
|
||||
"@types/react": "19.2.14",
|
||||
"@types/react-dom": "19.2.3",
|
||||
"@vitejs/plugin-react": "6.0.1",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"typescript": "6.0.3",
|
||||
"vite": "8.0.10",
|
||||
},
|
||||
},
|
||||
},
|
||||
"packages": {
|
||||
"@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
|
||||
|
||||
"@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
|
||||
|
||||
"@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
|
||||
|
||||
"@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
|
||||
|
||||
"@oxc-project/types": ["@oxc-project/types@0.127.0", "", {}, "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ=="],
|
||||
|
||||
"@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.17", "", { "os": "android", "cpu": "arm64" }, "sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ=="],
|
||||
|
||||
"@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.17", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw=="],
|
||||
|
||||
"@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.17", "", { "os": "darwin", "cpu": "x64" }, "sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw=="],
|
||||
|
||||
"@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.17", "", { "os": "freebsd", "cpu": "x64" }, "sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw=="],
|
||||
|
||||
"@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17", "", { "os": "linux", "cpu": "arm" }, "sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ=="],
|
||||
|
||||
"@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q=="],
|
||||
|
||||
"@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg=="],
|
||||
|
||||
"@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17", "", { "os": "linux", "cpu": "ppc64" }, "sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA=="],
|
||||
|
||||
"@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17", "", { "os": "linux", "cpu": "s390x" }, "sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA=="],
|
||||
|
||||
"@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.17", "", { "os": "linux", "cpu": "x64" }, "sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA=="],
|
||||
|
||||
"@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.17", "", { "os": "linux", "cpu": "x64" }, "sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw=="],
|
||||
|
||||
"@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.17", "", { "os": "none", "cpu": "arm64" }, "sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA=="],
|
||||
|
||||
"@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.17", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA=="],
|
||||
|
||||
"@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17", "", { "os": "win32", "cpu": "arm64" }, "sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA=="],
|
||||
|
||||
"@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.17", "", { "os": "win32", "cpu": "x64" }, "sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg=="],
|
||||
|
||||
"@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.7", "", {}, "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA=="],
|
||||
|
||||
"@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
|
||||
|
||||
"@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
|
||||
|
||||
"@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
|
||||
|
||||
"@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.1", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.7" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ=="],
|
||||
|
||||
"csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
|
||||
|
||||
"detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
|
||||
|
||||
"fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
|
||||
|
||||
"fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
|
||||
|
||||
"lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
|
||||
|
||||
"lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
|
||||
|
||||
"lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
|
||||
|
||||
"lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
|
||||
|
||||
"lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
|
||||
|
||||
"lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
|
||||
|
||||
"lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
|
||||
|
||||
"lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
|
||||
|
||||
"lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
|
||||
|
||||
"lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
|
||||
|
||||
"lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
|
||||
|
||||
"lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
|
||||
|
||||
"nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
|
||||
|
||||
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
|
||||
|
||||
"picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
|
||||
|
||||
"postcss": ["postcss@8.5.12", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA=="],
|
||||
|
||||
"react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
|
||||
|
||||
"react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
|
||||
|
||||
"rolldown": ["rolldown@1.0.0-rc.17", "", { "dependencies": { "@oxc-project/types": "=0.127.0", "@rolldown/pluginutils": "1.0.0-rc.17" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.17", "@rolldown/binding-darwin-arm64": "1.0.0-rc.17", "@rolldown/binding-darwin-x64": "1.0.0-rc.17", "@rolldown/binding-freebsd-x64": "1.0.0-rc.17", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.17", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.17", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.17", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.17", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.17", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.17", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.17", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.17", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.17", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.17", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.17" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA=="],
|
||||
|
||||
"scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
|
||||
|
||||
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
|
||||
|
||||
"tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
|
||||
|
||||
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
|
||||
|
||||
"typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
|
||||
|
||||
"vite": ["vite@8.0.10", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.10", "rolldown": "1.0.0-rc.17", "tinyglobby": "^0.2.16" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw=="],
|
||||
|
||||
"rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.17", "", {}, "sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg=="],
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="description" content="openclaude — runs anywhere, uses anything. open source, model-neutral, terminal-first. by gitlawb." />
|
||||
<meta name="theme-color" content="#fafaf7" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta property="og:title" content="openclaude — runs anywhere, uses anything" />
|
||||
<meta property="og:description" content="not a chatbot wrapper or another ide plugin. an open coding agent that runs in your terminal, talks to any model, and keeps every change reviewable." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="openclaude" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="openclaude — runs anywhere, uses anything" />
|
||||
<meta name="twitter:description" content="not a chatbot wrapper or another ide plugin. open coding agents in your terminal, on any model." />
|
||||
<title>openclaude — runs anywhere, uses anything</title>
|
||||
<link rel="icon" type="image/png" href="/openclaude.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap" />
|
||||
<script>
|
||||
// Theme bootstrap — runs before paint to prevent flash.
|
||||
// Default is light; user toggle is honored via localStorage.
|
||||
(function () {
|
||||
try {
|
||||
var stored = localStorage.getItem('openclaude-theme');
|
||||
var theme = stored === 'dark' || stored === 'light' ? stored : 'light';
|
||||
document.documentElement.dataset.theme = theme;
|
||||
document.documentElement.style.colorScheme = theme;
|
||||
} catch (_) {
|
||||
document.documentElement.dataset.theme = 'light';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "openclaude-web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react": "19.2.14",
|
||||
"@types/react-dom": "19.2.3",
|
||||
"@vitejs/plugin-react": "6.0.1",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"typescript": "6.0.3",
|
||||
"vite": "8.0.10"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
+196
@@ -0,0 +1,196 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import './styles.css'
|
||||
import { features, installCommand, navLinks } from './content'
|
||||
|
||||
type Theme = 'light' | 'dark'
|
||||
|
||||
function readInitialTheme(): Theme {
|
||||
if (typeof document === 'undefined') return 'light'
|
||||
const attr = document.documentElement.dataset.theme
|
||||
if (attr === 'light' || attr === 'dark') return attr
|
||||
return 'light'
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [theme, setTheme] = useState<Theme>(readInitialTheme)
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.dataset.theme = theme
|
||||
document.documentElement.style.colorScheme = theme
|
||||
try {
|
||||
localStorage.setItem('openclaude-theme', theme)
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
}, [theme])
|
||||
|
||||
const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'))
|
||||
|
||||
return (
|
||||
<div className="site-shell">
|
||||
<header className="site-header">
|
||||
<nav className="nav" aria-label="primary">
|
||||
<a className="brand" href="/" aria-label="openclaude home">
|
||||
<img src="/openclaude.png" alt="" />
|
||||
<span>openclaude</span>
|
||||
<span className="ver">v0.7</span>
|
||||
</a>
|
||||
<div className="nav-right">
|
||||
<div className="nav-links">
|
||||
{navLinks.map(l => (
|
||||
<a key={l.href} href={l.href}>{l.label}</a>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="theme-toggle"
|
||||
onClick={toggleTheme}
|
||||
aria-label={`switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
|
||||
title={`switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
|
||||
>
|
||||
{theme === 'dark' ? '☀' : '☾'}
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="nav-rule" aria-hidden="true" />
|
||||
</header>
|
||||
|
||||
<main className="shell-main">
|
||||
<Hero />
|
||||
|
||||
<section id="features" className="features" aria-labelledby="features-heading">
|
||||
<div className="section-head">
|
||||
<p className="eyebrow">// features</p>
|
||||
<h2 id="features-heading">built for agents that ship code.</h2>
|
||||
</div>
|
||||
<ul className="feature-list">
|
||||
{features.map(f => (
|
||||
<li key={f.title} className="feature-row">
|
||||
<h3>{f.title}</h3>
|
||||
<p>— {f.body}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="install" className="install-block" aria-labelledby="install-heading">
|
||||
<div className="section-head">
|
||||
<p className="eyebrow">// install</p>
|
||||
<h2 id="install-heading">one line. then write a task.</h2>
|
||||
</div>
|
||||
<div className="install-grid">
|
||||
<CopyableCommand command={installCommand} />
|
||||
<ol className="install-steps">
|
||||
<li>
|
||||
<span className="step-num">01</span>
|
||||
<div>
|
||||
<strong>install</strong>
|
||||
<p>requires node ≥ 20.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span className="step-num">02</span>
|
||||
<div>
|
||||
<strong>start</strong>
|
||||
<p>run <code>openclaude</code> in any repo.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span className="step-num">03</span>
|
||||
<div>
|
||||
<strong>pick a provider</strong>
|
||||
<p>type <code>/provider</code> to wire openai, ollama, gemini, or a gateway.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="footer">
|
||||
<div className="footer-line">
|
||||
<span className="brand">
|
||||
<img src="/openclaude.png" alt="" />
|
||||
<span>openclaude</span>
|
||||
<span className="ver">v0.7.0</span>
|
||||
</span>
|
||||
<span className="sep">|</span>
|
||||
<a href="https://gitlawb.com">gitlawb ↗</a>
|
||||
<span className="sep">|</span>
|
||||
<a href="https://github.com/Gitlawb/openclaude/blob/main/LICENSE">license</a>
|
||||
<span className="sep">·</span>
|
||||
<span>{new Date().getFullYear()}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<section className="hero" aria-labelledby="hero-heading">
|
||||
<div className="hero-eyebrow">
|
||||
<span className="dot" aria-hidden="true" />
|
||||
open source · gitlawb-aligned · model-neutral
|
||||
</div>
|
||||
|
||||
<h1 id="hero-heading" className="hero-title">
|
||||
runs anywhere.<br />
|
||||
uses anything.
|
||||
</h1>
|
||||
|
||||
<p className="hero-sub">
|
||||
not a chatbot wrapper or another ide plugin. an open coding agent that runs in your
|
||||
terminal, talks to any model, and keeps every change reviewable.
|
||||
</p>
|
||||
|
||||
<div className="hero-cta">
|
||||
<CopyableCommand command={installCommand} variant="hero" />
|
||||
<a className="button button-ghost" href="https://github.com/Gitlawb/openclaude">
|
||||
view on github →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p className="hero-foot">
|
||||
works with openai, gemini, codex, ollama, lm studio, litellm, and 200+ models.
|
||||
</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function CopyableCommand({
|
||||
command,
|
||||
variant,
|
||||
}: {
|
||||
command: string
|
||||
variant?: 'hero'
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const onCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(command)
|
||||
setCopied(true)
|
||||
window.setTimeout(() => setCopied(false), 1400)
|
||||
} catch {
|
||||
/* clipboard unavailable */
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
className={['copy-cmd', variant === 'hero' ? 'copy-cmd-hero' : ''].filter(Boolean).join(' ')}
|
||||
aria-label={`copy install command: ${command}`}
|
||||
>
|
||||
<span className="copy-prefix">$</span>
|
||||
<span className="copy-text">{command}</span>
|
||||
<span className="copy-icon" aria-hidden="true">
|
||||
{copied ? '✓ copied' : 'copy'}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,35 @@
|
||||
export const installCommand = 'npm install -g @gitlawb/openclaude'
|
||||
|
||||
export const features = [
|
||||
{
|
||||
title: 'any model, one terminal',
|
||||
body: 'local ollama, openai-compatible apis, gemini, codex, github models — switch with one command, no rewrites.',
|
||||
},
|
||||
{
|
||||
title: 'real tools, not just chat',
|
||||
body: 'bash, file edits, grep, glob, mcp servers, slash commands — wired into the agent loop, not bolted on.',
|
||||
},
|
||||
{
|
||||
title: 'profiles per repo',
|
||||
body: 'save model, base url, auth, and runtime defaults to .openclaude-profile.json so every clone boots the same way.',
|
||||
},
|
||||
{
|
||||
title: 'streaming, not batch',
|
||||
body: 'watch the agent think, call tools, and produce diffs live. no opaque background jobs.',
|
||||
},
|
||||
{
|
||||
title: 'routes through a gateway',
|
||||
body: 'plug into litellm, openrouter, or an internal proxy for policy, cost control, and failover.',
|
||||
},
|
||||
{
|
||||
title: 'editor and server modes',
|
||||
body: 'vs code extension and a grpc server so external systems can drive the same loop.',
|
||||
},
|
||||
] as const
|
||||
|
||||
export const navLinks = [
|
||||
{ href: '#features', label: 'features' },
|
||||
{ href: '#install', label: 'install' },
|
||||
{ href: 'https://github.com/Gitlawb/openclaude', label: 'github' },
|
||||
{ href: 'https://gitlawb.com/node/repos/z6MkqDnb/openclaude', label: 'gitlawb' },
|
||||
] as const
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,530 @@
|
||||
/* ── reset + tokens ───────────────────────────────────────────────────── */
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--max: 960px;
|
||||
|
||||
/* shared brand */
|
||||
--accent: #ff7a1a;
|
||||
--accent-2: #ffb15f;
|
||||
--accent-soft: rgba(255, 122, 26, 0.14);
|
||||
--accent-line: rgba(255, 122, 26, 0.40);
|
||||
|
||||
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace;
|
||||
font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11';
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ── light theme (default) ────────────────────────────────────────────── */
|
||||
:root,
|
||||
:root[data-theme='light'] {
|
||||
color-scheme: light;
|
||||
--bg: #fbfaf7;
|
||||
--bg-elev: rgba(251, 250, 247, 0.88);
|
||||
--bg-soft: rgba(255, 122, 26, 0.05);
|
||||
--ink: #1a1208;
|
||||
--ink-2: rgba(26, 18, 8, 0.88);
|
||||
--muted: rgba(26, 18, 8, 0.64);
|
||||
--quiet: rgba(26, 18, 8, 0.46);
|
||||
--line: rgba(26, 18, 8, 0.10);
|
||||
--line-strong: rgba(255, 122, 26, 0.30);
|
||||
--hero-glow: rgba(255, 122, 26, 0.28);
|
||||
--hero-wash: rgba(255, 122, 26, 0.18);
|
||||
--hero-wash-2: rgba(255, 177, 95, 0.10);
|
||||
--copy-bg: #ffffff;
|
||||
--selection-fg: #ffffff;
|
||||
--scroll-thumb: #d8c9bc;
|
||||
}
|
||||
|
||||
/* ── dark theme ───────────────────────────────────────────────────────── */
|
||||
:root[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
--bg: #000000;
|
||||
--bg-elev: rgba(0, 0, 0, 0.85);
|
||||
--bg-soft: rgba(255, 255, 255, 0.025);
|
||||
--ink: #ffffff;
|
||||
--ink-2: rgba(255, 255, 255, 0.82);
|
||||
--muted: rgba(255, 255, 255, 0.55);
|
||||
--quiet: rgba(255, 255, 255, 0.38);
|
||||
--line: rgba(255, 255, 255, 0.10);
|
||||
--line-strong: rgba(255, 255, 255, 0.20);
|
||||
--hero-glow: rgba(255, 122, 26, 0.22);
|
||||
--hero-wash: rgba(255, 122, 26, 0.16);
|
||||
--hero-wash-2: rgba(255, 122, 26, 0.06);
|
||||
--copy-bg: rgba(0, 0, 0, 0.5);
|
||||
--selection-fg: #120804;
|
||||
--scroll-thumb: #3a2615;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: var(--bg);
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 78% -4%, var(--hero-wash), transparent 420px),
|
||||
radial-gradient(circle at 12% 18%, var(--hero-wash-2), transparent 360px),
|
||||
var(--bg);
|
||||
color: var(--ink);
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 3px; height: 3px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
|
||||
::selection { background: var(--accent); color: var(--selection-fg); }
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
a:hover { color: var(--ink); }
|
||||
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 1px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
button { font: inherit; }
|
||||
code, pre { font-family: inherit; }
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
|
||||
/* ── shell ────────────────────────────────────────────────────────────── */
|
||||
|
||||
.site-shell { overflow: hidden; }
|
||||
|
||||
.nav,
|
||||
.shell-main,
|
||||
.footer {
|
||||
width: min(100% - 2.5rem, var(--max));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.nav, .shell-main, .footer {
|
||||
width: min(100% - 1.5rem, var(--max));
|
||||
}
|
||||
}
|
||||
|
||||
/* ── header ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
background: var(--bg-elev);
|
||||
backdrop-filter: blur(14px);
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav .brand img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.nav .brand {
|
||||
font-size: 0.95rem;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.nav .brand img { width: 30px; height: 30px; }
|
||||
.nav .brand { font-size: 0.85rem; }
|
||||
}
|
||||
|
||||
.nav-rule {
|
||||
width: min(100% - 2.5rem, var(--max));
|
||||
margin: 0 auto;
|
||||
border-top: 1px dashed var(--line);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--ink);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand .ver {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--quiet);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.nav-links a:hover { color: var(--ink); }
|
||||
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--bg-soft);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1;
|
||||
transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.nav-right { gap: 0.85rem; }
|
||||
.nav-links { gap: 1rem; }
|
||||
.nav-links a { font-size: 0.72rem; }
|
||||
}
|
||||
|
||||
/* ── shared atoms ─────────────────────────────────────────────────────── */
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.85rem;
|
||||
color: var(--accent);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0 1.05rem;
|
||||
border: 1px solid transparent;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.button-ghost {
|
||||
border-color: var(--line-strong);
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
}
|
||||
.button-ghost:hover {
|
||||
border-color: var(--ink);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
max-width: 38rem;
|
||||
margin: 0 auto 2.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: clamp(1.6rem, 3vw, 2.1rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
/* ── hero ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: clamp(4rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5.5rem);
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: 1px solid var(--accent-line);
|
||||
background: var(--bg-soft);
|
||||
color: var(--ink-2);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.hero-eyebrow .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
font-size: clamp(2.4rem, 6vw, 4.4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--ink);
|
||||
text-shadow: 0 0 28px var(--hero-glow);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
max-width: 36rem;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: clamp(0.95rem, 1.4vw, 1.05rem);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.hero-foot {
|
||||
margin: 0.6rem 0 0;
|
||||
color: var(--quiet);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ── copyable command ─────────────────────────────────────────────────── */
|
||||
|
||||
.copy-cmd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
height: 44px;
|
||||
padding: 0 0.95rem;
|
||||
border: 1px solid var(--accent-line);
|
||||
background: var(--copy-bg);
|
||||
color: var(--ink);
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 24px -16px var(--accent-soft);
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.copy-cmd:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 10px 28px -14px var(--accent-soft);
|
||||
}
|
||||
|
||||
.copy-cmd-hero {
|
||||
height: 48px;
|
||||
padding: 0 1.1rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.copy-prefix { color: var(--accent); font-weight: 500; }
|
||||
.copy-text { color: var(--ink-2); }
|
||||
.copy-icon {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--quiet);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── features ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.features {
|
||||
padding: clamp(3rem, 8vh, 5rem) 0;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.32fr) 1fr;
|
||||
gap: 1.5rem;
|
||||
padding: 1.4rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.feature-row h3 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.feature-row p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.feature-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.4rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
.feature-row p { font-size: 0.85rem; }
|
||||
}
|
||||
|
||||
/* ── install block ────────────────────────────────────────────────────── */
|
||||
|
||||
.install-block {
|
||||
padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 6rem);
|
||||
}
|
||||
|
||||
.install-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
max-width: 36rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.install-grid .copy-cmd {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.install-steps {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.install-steps li {
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.step-num {
|
||||
color: var(--accent);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.18em;
|
||||
padding-top: 0.18rem;
|
||||
}
|
||||
|
||||
.install-steps strong {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--ink);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.install-steps p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.install-steps code {
|
||||
padding: 0.05rem 0.35rem;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 122, 26, 0.06);
|
||||
color: var(--accent-2);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* ── footer ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.footer {
|
||||
padding: 2rem 0 2.5rem;
|
||||
border-top: 1px dashed var(--line);
|
||||
}
|
||||
|
||||
.footer-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--quiet);
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.footer-line .brand {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.footer-line .sep {
|
||||
color: var(--line-strong);
|
||||
}
|
||||
|
||||
.footer-line a {
|
||||
color: var(--muted);
|
||||
}
|
||||
.footer-line a:hover { color: var(--ink); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
declare module '*.css'
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2023",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2023"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src", "vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user