diff --git a/css/build.ts b/css/build.ts index 009c52c..d1cf96a 100644 --- a/css/build.ts +++ b/css/build.ts @@ -103,15 +103,28 @@ async function generateIndexTs() { } async function generateCSS() { + let bundle = ""; + for (const variant of variants) { await mkdir(`./dist/${variant}`, { recursive: true }); for (const toggle of files) { const css = await generateToggleVariantCSS(toggle, variant); + if (variant === "all") bundle += css + "\n"; await writeFile(`./dist/${variant}/${toggle}.css`, css); await generateTSExport(toggle, variant, css); } } + const compiledBundle = new TextDecoder().decode( + transform({ + code: new TextEncoder().encode(bundle), + filename: "bundle.css", + minify: true, + }).code + ); + + await writeFile(`./dist/bundle.css`, compiledBundle); + await generateIndexTs(); } diff --git a/css/src/utils.scss b/css/src/utils.scss index a085a9f..033f1ed 100644 --- a/css/src/utils.scss +++ b/css/src/utils.scss @@ -43,6 +43,7 @@ } } @else { #{$toggledClass}:not(label).theme-toggle, + #{$globalToggleClass} .theme-toggle:not(#{$untoggledClass}):not(label), .theme-toggle input[type="checkbox"]:checked ~ { .theme-toggle__#{$name} { @content; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d67c678..f737c7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -402,6 +402,9 @@ importers: '@astrojs/starlight': specifier: ^0.21.5 version: 0.21.5(astro@4.7.0) + '@astrojs/starlight-tailwind': + specifier: ^2.0.2 + version: 2.0.2(@astrojs/starlight@0.21.5)(@astrojs/tailwind@5.1.0)(tailwindcss@3.4.3) '@astrojs/tailwind': specifier: ^5.1.0 version: 5.1.0(astro@4.7.0)(tailwindcss@3.4.3) @@ -427,6 +430,45 @@ importers: specifier: ^5.4.5 version: 5.4.5 + website4: + dependencies: + '@astrojs/check': + specifier: ^0.5.10 + version: 0.5.10(prettier@3.2.5)(typescript@5.4.5) + '@astrojs/preact': + specifier: ^3.2.0 + version: 3.2.0(@babel/core@7.24.4)(preact@10.21.0)(vite@4.5.2) + '@astrojs/tailwind': + specifier: ^5.1.0 + version: 5.1.0(astro@4.7.0)(tailwindcss@3.4.3) + '@material/material-color-utilities': + specifier: ^0.2.0 + version: 0.2.7 + '@theme-toggles/css': + specifier: workspace:* + version: link:../css + '@theme-toggles/svgs': + specifier: workspace:* + version: link:../svgs + astro: + specifier: ^4.7.0 + version: 4.7.0(typescript@5.4.5) + preact: + specifier: ^10.21.0 + version: 10.21.0 + prettier: + specifier: ^3.2.5 + version: 3.2.5 + shiki: + specifier: ^1.4.0 + version: 1.4.0 + tailwindcss: + specifier: ^3.4.3 + version: 3.4.3 + typescript: + specifier: ^5.4.5 + version: 5.4.5 + packages: /@aashutoshrathi/word-wrap@1.2.6: @@ -657,7 +699,7 @@ packages: remark-parse: 11.0.0 remark-rehype: 11.1.0 remark-smartypants: 2.1.0 - shiki: 1.3.0 + shiki: 1.4.0 unified: 11.0.4 unist-util-remove-position: 5.0.0 unist-util-visit: 5.0.0 @@ -693,6 +735,26 @@ packages: - supports-color dev: false + /@astrojs/preact@3.2.0(@babel/core@7.24.4)(preact@10.21.0)(vite@4.5.2): + resolution: {integrity: sha512-p49NO/EgMbO5tCugFYXPQVAJelww46hXt947uGjXC8IchslS4MNqj4lH0ZzNGeeK1hRKXovz7/LK6AXJgMxleA==} + engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0} + peerDependencies: + preact: ^10.6.5 + dependencies: + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.4) + '@preact/preset-vite': 2.8.2(@babel/core@7.24.4)(preact@10.21.0)(vite@4.5.2) + '@preact/signals': 1.2.3(preact@10.21.0) + babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.24.4) + preact: 10.21.0 + preact-render-to-string: 6.3.1(preact@10.21.0) + preact-ssr-prepass: 1.2.1(preact@10.21.0) + transitivePeerDependencies: + - '@babel/core' + - supports-color + - vite + dev: false + /@astrojs/prism@3.1.0: resolution: {integrity: sha512-Z9IYjuXSArkAUx3N6xj6+Bnvx8OdUSHA8YoOgyepp3+zJmtVYJIl/I18GozdJVW1p5u/CNpl3Km7/gwTJK85cw==} engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0} @@ -708,6 +770,18 @@ packages: zod: 3.22.4 dev: false + /@astrojs/starlight-tailwind@2.0.2(@astrojs/starlight@0.21.5)(@astrojs/tailwind@5.1.0)(tailwindcss@3.4.3): + resolution: {integrity: sha512-XJccwk6VLeQZuGQwoiLZLNAPCn2fQobtl10Ra2c2yDLjdYEActcqy0eidZbouAwGlbS9I0iJogeGjHQJ2Casjg==} + peerDependencies: + '@astrojs/starlight': '>=0.9.0' + '@astrojs/tailwind': ^5.0.0 + tailwindcss: ^3.3.3 + dependencies: + '@astrojs/starlight': 0.21.5(astro@4.7.0) + '@astrojs/tailwind': 5.1.0(astro@4.7.0)(tailwindcss@3.4.3) + tailwindcss: 3.4.3 + dev: false + /@astrojs/starlight@0.21.5(astro@4.7.0): resolution: {integrity: sha512-cvftxu7DM4C25KGSxqyIk81DiQGX0zx9s5sfmprd1kKQK1h/MQXaRVDCpJrK4SjrgWtpG1UoKLJZBgD5w4k9kw==} peerDependencies: @@ -2755,6 +2829,16 @@ packages: '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9) dev: true + /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.4): + resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.24.4 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) + dev: false + /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9): resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} engines: {node: '>=6.9.0'} @@ -3622,7 +3706,6 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/android-arm64@0.19.12: @@ -3657,7 +3740,6 @@ packages: cpu: [arm] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/android-arm@0.19.12: @@ -3692,7 +3774,6 @@ packages: cpu: [x64] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/android-x64@0.19.12: @@ -3727,7 +3808,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: true optional: true /@esbuild/darwin-arm64@0.19.12: @@ -3762,7 +3842,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: true optional: true /@esbuild/darwin-x64@0.19.12: @@ -3797,7 +3876,6 @@ packages: cpu: [arm64] os: [freebsd] requiresBuild: true - dev: true optional: true /@esbuild/freebsd-arm64@0.19.12: @@ -3832,7 +3910,6 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: true optional: true /@esbuild/freebsd-x64@0.19.12: @@ -3867,7 +3944,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-arm64@0.19.12: @@ -3902,7 +3978,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-arm@0.19.12: @@ -3937,7 +4012,6 @@ packages: cpu: [ia32] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-ia32@0.19.12: @@ -3972,7 +4046,6 @@ packages: cpu: [loong64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-loong64@0.19.12: @@ -4007,7 +4080,6 @@ packages: cpu: [mips64el] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-mips64el@0.19.12: @@ -4042,7 +4114,6 @@ packages: cpu: [ppc64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-ppc64@0.19.12: @@ -4077,7 +4148,6 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-riscv64@0.19.12: @@ -4112,7 +4182,6 @@ packages: cpu: [s390x] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-s390x@0.19.12: @@ -4147,7 +4216,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-x64@0.19.12: @@ -4182,7 +4250,6 @@ packages: cpu: [x64] os: [netbsd] requiresBuild: true - dev: true optional: true /@esbuild/netbsd-x64@0.19.12: @@ -4217,7 +4284,6 @@ packages: cpu: [x64] os: [openbsd] requiresBuild: true - dev: true optional: true /@esbuild/openbsd-x64@0.19.12: @@ -4252,7 +4318,6 @@ packages: cpu: [x64] os: [sunos] requiresBuild: true - dev: true optional: true /@esbuild/sunos-x64@0.19.12: @@ -4287,7 +4352,6 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: true optional: true /@esbuild/win32-arm64@0.19.12: @@ -4322,7 +4386,6 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true - dev: true optional: true /@esbuild/win32-ia32@0.19.12: @@ -4357,7 +4420,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: true optional: true /@esbuild/win32-x64@0.19.12: @@ -4452,7 +4514,7 @@ packages: resolution: {integrity: sha512-LWgttQTUrIPE1X+Lya1qFWiX47tH2AS2hkbj/cZoWkdiSjn6zUvtTypK/2Xn6Rgn6z6ClzpgHvkXRqFn7nAB4A==} dependencies: '@expressive-code/core': 0.33.5 - shiki: 1.3.0 + shiki: 1.4.0 dev: false /@expressive-code/plugin-text-markers@0.33.5: @@ -6352,6 +6414,77 @@ packages: resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==} dev: true + /@preact/preset-vite@2.8.2(@babel/core@7.24.4)(preact@10.21.0)(vite@4.5.2): + resolution: {integrity: sha512-m3tl+M8IO8jgiHnk+7LSTFl8axdPXloewi7iGVLdmCwf34XOzEUur0bZVewW4DUbUipFjTS2CXu27+5f/oexBA==} + peerDependencies: + '@babel/core': 7.x + vite: 2.x || 3.x || 4.x || 5.x + dependencies: + '@babel/core': 7.24.4 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.4) + '@prefresh/vite': 2.4.5(preact@10.21.0)(vite@4.5.2) + '@rollup/pluginutils': 4.2.1 + babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.24.4) + debug: 4.3.4 + kolorist: 1.8.0 + magic-string: 0.30.5 + node-html-parser: 6.1.13 + resolve: 1.22.8 + source-map: 0.7.4 + stack-trace: 1.0.0-pre2 + vite: 4.5.2(@types/node@18.19.17)(sass@1.71.1) + transitivePeerDependencies: + - preact + - supports-color + dev: false + + /@preact/signals-core@1.6.0: + resolution: {integrity: sha512-O/XGxwP85h1F7+ouqTMOIZ3+V1whfaV9ToIVcuyGriD4JkSD00cQo54BKdqjvBJxbenvp7ynfqRHEwI6e+NIhw==} + dev: false + + /@preact/signals@1.2.3(preact@10.21.0): + resolution: {integrity: sha512-M2DXse3Wi8HwjI1d2vQWOLJ3lHogvqTsJYvl4ofXRXgMFQzJ7kmlZvlt5i8x5S5VwgZu0ghru4HkLqOoFfU2JQ==} + peerDependencies: + preact: 10.x + dependencies: + '@preact/signals-core': 1.6.0 + preact: 10.21.0 + dev: false + + /@prefresh/babel-plugin@0.5.1: + resolution: {integrity: sha512-uG3jGEAysxWoyG3XkYfjYHgaySFrSsaEb4GagLzYaxlydbuREtaX+FTxuIidp241RaLl85XoHg9Ej6E4+V1pcg==} + dev: false + + /@prefresh/core@1.5.2(preact@10.21.0): + resolution: {integrity: sha512-A/08vkaM1FogrCII5PZKCrygxSsc11obExBScm3JF1CryK2uDS3ZXeni7FeKCx1nYdUkj4UcJxzPzc1WliMzZA==} + peerDependencies: + preact: ^10.0.0 + dependencies: + preact: 10.21.0 + dev: false + + /@prefresh/utils@1.2.0: + resolution: {integrity: sha512-KtC/fZw+oqtwOLUFM9UtiitB0JsVX0zLKNyRTA332sqREqSALIIQQxdUCS1P3xR/jT1e2e8/5rwH6gdcMLEmsQ==} + dev: false + + /@prefresh/vite@2.4.5(preact@10.21.0)(vite@4.5.2): + resolution: {integrity: sha512-iForDVJ2M8gQYnm5pHumvTEJjGGc7YNYC0GVKnHFL+GvFfKHfH9Rpq67nUAzNbjuLEpqEOUuQVQajMazWu2ZNQ==} + peerDependencies: + preact: ^10.4.0 + vite: '>=2.0.0' + dependencies: + '@babel/core': 7.24.4 + '@prefresh/babel-plugin': 0.5.1 + '@prefresh/core': 1.5.2(preact@10.21.0) + '@prefresh/utils': 1.2.0 + '@rollup/pluginutils': 4.2.1 + preact: 10.21.0 + vite: 4.5.2(@types/node@18.19.17)(sass@1.71.1) + transitivePeerDependencies: + - supports-color + dev: false + /@radix-ui/number@1.0.1: resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} dependencies: @@ -6887,6 +7020,14 @@ packages: '@babel/runtime': 7.23.9 dev: true + /@rollup/pluginutils@4.2.1: + resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} + engines: {node: '>= 8.0.0'} + dependencies: + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: false + /@rollup/rollup-android-arm-eabi@4.17.0: resolution: {integrity: sha512-nNvLvC2fjC+3+bHYN9uaGF3gcyy7RHGZhtl8TB/kINj9hiOQza8kWJGZh47GRPMrqeseO8U+Z8ElDMCZlWBdHA==} cpu: [arm] @@ -7023,6 +7164,10 @@ packages: resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==} dev: false + /@shikijs/core@1.4.0: + resolution: {integrity: sha512-CxpKLntAi64h3j+TwWqVIQObPTED0FyXLHTTh3MKXtqiQNn2JGcMQQ362LftDbc9kYbDtrksNMNoVmVXzKFYUQ==} + dev: false + /@sigstore/bundle@1.1.0: resolution: {integrity: sha512-PFutXEy0SmQxYI4texPw3dd2KewuNqv7OuK1ZFtY2fM754yhvG2KdgwIhRnoEE2uHdtdGNQ8s0lb94dW9sELog==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -8445,10 +8590,10 @@ packages: dependencies: '@babel/core': 7.24.4 '@babel/generator': 7.24.4 - '@babel/parser': 7.23.9 + '@babel/parser': 7.24.4 '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) '@babel/preset-env': 7.23.9(@babel/core@7.24.4) - '@babel/traverse': 7.23.9 + '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 '@storybook/csf': 0.0.2--canary.4566f4d.1 '@storybook/mdx1-csf': 0.0.1(@babel/core@7.24.4) @@ -9678,7 +9823,6 @@ packages: resolution: {integrity: sha512-SzyGKgwPzuWp2SHhlpXKzCX0pIOfcI4V2eF37nNBJOhwlegQ83omtVQ1XxZpDE06V/d6AQvfQdPfnw0tRC//Ng==} dependencies: undici-types: 5.26.5 - dev: true /@types/node@20.12.7: resolution: {integrity: sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==} @@ -11655,6 +11799,14 @@ packages: - supports-color dev: true + /babel-plugin-transform-hook-names@1.0.2(@babel/core@7.24.4): + resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==} + peerDependencies: + '@babel/core': ^7.12.10 + dependencies: + '@babel/core': 7.24.4 + dev: false + /bach@1.2.0: resolution: {integrity: sha512-bZOOfCb3gXBXbTFXq3OZtGR88LwGeJvzu6szttaIzymOTS4ZttBNOWSv7aLZja2EMycKtRYV0Oa8SNKH/zkxvg==} engines: {node: '>= 0.10'} @@ -13231,7 +13383,6 @@ packages: domhandler: 5.0.3 domutils: 3.1.0 nth-check: 2.1.1 - dev: true /css-selector-parser@3.0.5: resolution: {integrity: sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g==} @@ -13264,7 +13415,6 @@ packages: /css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} - dev: true /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} @@ -13782,7 +13932,6 @@ packages: domelementtype: 2.3.0 domhandler: 5.0.3 entities: 4.5.0 - dev: true /dom-walk@0.1.2: resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==} @@ -13795,7 +13944,6 @@ packages: /domelementtype@2.3.0: resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} - dev: true /domhandler@4.3.1: resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==} @@ -13809,7 +13957,6 @@ packages: engines: {node: '>= 4'} dependencies: domelementtype: 2.3.0 - dev: true /domutils@2.8.0: resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==} @@ -13825,7 +13972,6 @@ packages: dom-serializer: 2.0.0 domelementtype: 2.3.0 domhandler: 5.0.3 - dev: true /dot-case@3.0.4: resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} @@ -14360,7 +14506,6 @@ packages: '@esbuild/win32-arm64': 0.18.20 '@esbuild/win32-ia32': 0.18.20 '@esbuild/win32-x64': 0.18.20 - dev: true /esbuild@0.19.12: resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} @@ -14938,7 +15083,7 @@ packages: resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==} engines: {node: '>=8.3.0'} dependencies: - '@babel/traverse': 7.23.9 + '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 c8: 7.14.0 transitivePeerDependencies: @@ -15012,6 +15157,10 @@ packages: '@types/unist': 3.0.2 dev: false + /estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + dev: false + /estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} dependencies: @@ -17067,7 +17216,6 @@ packages: /he@1.2.0: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true - dev: true /header-case@2.0.4: resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==} @@ -17426,7 +17574,6 @@ packages: /immutable@4.3.5: resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==} - dev: true /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} @@ -18225,7 +18372,7 @@ packages: engines: {node: '>=8'} dependencies: '@babel/core': 7.24.4 - '@babel/parser': 7.23.9 + '@babel/parser': 7.24.4 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 semver: 6.3.1 @@ -18678,6 +18825,10 @@ packages: engines: {node: '>= 8'} dev: true + /kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + dev: false + /language-subtag-registry@0.3.22: resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==} @@ -19312,6 +19463,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: false + /magic-string@0.30.5: + resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + dev: false + /magic-string@0.30.7: resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==} engines: {node: '>=12'} @@ -21316,6 +21474,13 @@ packages: - supports-color dev: true + /node-html-parser@6.1.13: + resolution: {integrity: sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==} + dependencies: + css-select: 5.1.0 + he: 1.2.0 + dev: false + /node-int64@0.4.0: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} dev: true @@ -22938,6 +23103,27 @@ packages: source-map-js: 1.2.0 dev: false + /preact-render-to-string@6.3.1(preact@10.21.0): + resolution: {integrity: sha512-NQ28WrjLtWY6lKDlTxnFpKHZdpjfF+oE6V4tZ0rTrunHrtZp6Dm0oFrcJalt/5PNeqJz4j1DuZDS0Y6rCBoqDA==} + peerDependencies: + preact: '>=10' + dependencies: + preact: 10.21.0 + pretty-format: 3.8.0 + dev: false + + /preact-ssr-prepass@1.2.1(preact@10.21.0): + resolution: {integrity: sha512-bLgbUfy8nL+PZghAPpyk9MF+cmXjdwEnxYPaJBmwbzFQqzIz8dQVBqjwB60RqZ9So/vIf6BRfHCiwFGuMCyfbQ==} + peerDependencies: + preact: '>=10 || ^10.0.0-beta.0 || ^10.0.0-alpha.0' + dependencies: + preact: 10.21.0 + dev: false + + /preact@10.21.0: + resolution: {integrity: sha512-aQAIxtzWEwH8ou+OovWVSVNlFImL7xUCwJX3YMqA3U8iKCNC34999fFOnWjYNsylgfPgMexpbk7WYOLtKr/mxg==} + dev: false + /prebuild-install@7.1.2: resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==} engines: {node: '>=10'} @@ -23028,6 +23214,10 @@ packages: react-is: 18.2.0 dev: true + /pretty-format@3.8.0: + resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==} + dev: false + /pretty-hrtime@1.0.3: resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} engines: {node: '>= 0.8'} @@ -24285,7 +24475,6 @@ packages: hasBin: true optionalDependencies: fsevents: 2.3.3 - dev: true /rollup@4.17.0: resolution: {integrity: sha512-wZJSn0WMtWrxhYKQRt5Z6GIXlziOoMDFmbHmRfL3v+sBTAshx2DBq1AfMArB7eIjF63r4ocn2ZTAyUptg/7kmQ==} @@ -24440,7 +24629,6 @@ packages: chokidar: 3.6.0 immutable: 4.3.5 source-map-js: 1.2.0 - dev: true /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} @@ -24770,6 +24958,12 @@ packages: '@shikijs/core': 1.3.0 dev: false + /shiki@1.4.0: + resolution: {integrity: sha512-5WIn0OL8PWm7JhnTwRWXniy6eEDY234mRrERVlFa646V2ErQqwIFd2UML7e0Pq9eqSKLoMa3Ke+xbsF+DAuy+Q==} + dependencies: + '@shikijs/core': 1.4.0 + dev: false + /side-channel@1.0.5: resolution: {integrity: sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==} engines: {node: '>= 0.4'} @@ -25072,6 +25266,11 @@ packages: resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==} dev: true + /stack-trace@1.0.0-pre2: + resolution: {integrity: sha512-2ztBJRek8IVofG9DBJqdy2N5kulaacX30Nz7xmkYF6ale9WBVmIy6mFBchvGX7Vx/MyjBhx+Rcxqrj+dbOnQ6A==} + engines: {node: '>=16'} + dev: false + /stackframe@1.3.4: resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==} dev: true @@ -27284,7 +27483,6 @@ packages: sass: 1.71.1 optionalDependencies: fsevents: 2.3.3 - dev: true /vite@5.2.10: resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index d351718..dbb9016 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,6 +2,7 @@ packages: - "packages/*" - "website" - "website3" + - "website4" - "configs/*" - "svgs" - "css" diff --git a/website3/astro.config.mjs b/website3/astro.config.mjs index 4c15d8c..6c2ad65 100644 --- a/website3/astro.config.mjs +++ b/website3/astro.config.mjs @@ -7,22 +7,25 @@ import tailwind from "@astrojs/tailwind"; export default defineConfig({ integrations: [starlight({ title: 'My Docs', + customCss: [ + './src/tailwind.css', + ], social: { github: 'https://github.com/withastro/starlight' }, sidebar: [{ label: 'Guides', items: [ - // Each item here is one entry in the navigation menu. - { - label: 'Example Guide', - link: '/guides/example/' - }] + // Each item here is one entry in the navigation menu. + { + label: 'Example Guide', + link: '/guides/example/' + }] }, { label: 'Reference', autogenerate: { directory: 'reference' } }] - }), tailwind()] + }), tailwind({ applyBaseStyles: false, })] }); \ No newline at end of file diff --git a/website3/package.json b/website3/package.json index 71db7f8..60be16c 100644 --- a/website3/package.json +++ b/website3/package.json @@ -12,6 +12,7 @@ "dependencies": { "@astrojs/check": "^0.5.10", "@astrojs/starlight": "^0.21.5", + "@astrojs/starlight-tailwind": "^2.0.2", "@astrojs/tailwind": "^5.1.0", "@theme-toggles/css": "workspace:*", "@theme-toggles/svgs": "workspace:*", diff --git a/website3/src/components/htmlCode.astro b/website3/src/components/htmlCode.astro index ecec08d..8553d00 100644 --- a/website3/src/components/htmlCode.astro +++ b/website3/src/components/htmlCode.astro @@ -1,59 +1,103 @@ --- +import * as SVGs from "@theme-toggles/svgs"; +import * as CSS from "@theme-toggles/css"; +import { format } from "prettier"; -import * as SVGs from "@theme-toggles/svgs" -import * as CSS from "@theme-toggles/css" -import {format} from "prettier" +import { Code, TabItem, Tabs } from "@astrojs/starlight/components"; +import { getButtonHTML } from "../generators/html"; -import { Code, TabItem, Tabs } from '@astrojs/starlight/components' -import { getButtonHTML } from "../generators/html" - -type Toggle = keyof typeof SVGs +type Toggle = keyof typeof SVGs; interface Props { - toggle: Toggle - type: "html" | "react" - variant: "base" | "checkbox" + toggle: Toggle; + type: "html" | "react"; + variant: "base" | "checkbox"; } +const { toggle, type, variant } = Astro.props; -const { toggle, type, variant } = Astro.props - -const lang = type === "html" ? "html" : "tsx" +const lang = type === "html" ? "html" : "tsx"; -const cssSelector = toggle + variant.charAt(0).toUpperCase() + variant.slice(1) +const cssSelector = toggle + variant.charAt(0).toUpperCase() + variant.slice(1); -const css = await format(CSS[cssSelector as keyof typeof CSS], { parser: "css" }) +const css = await format(CSS[cssSelector as keyof typeof CSS], { + parser: "css", +}); -let code = "" +let code = ""; if (type === "html") { switch (variant) { case "base": - code = await getButtonHTML(toggle) - break + code = await getButtonHTML(toggle); + break; case "checkbox": - code = await getButtonHTML(toggle) - break + code = await getButtonHTML(toggle); + break; } } - --- -
+ + + - + - - + - + - \ No newline at end of file + + + + diff --git a/website3/src/components/togglePreview.astro b/website3/src/components/togglePreview.astro new file mode 100644 index 0000000..e69de29 diff --git a/website3/src/tailwind.css b/website3/src/tailwind.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/website3/src/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/website3/tailwind.config.mjs b/website3/tailwind.config.mjs index 19f0614..c821b8c 100644 --- a/website3/tailwind.config.mjs +++ b/website3/tailwind.config.mjs @@ -1,8 +1,17 @@ +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; + /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { - extend: {}, + extend: { + colors: { + accent: colors.indigo, + // Your preferred gray scale. Zinc is closest to Starlight’s defaults. + gray: colors.zinc, + }, + }, }, - plugins: [], + plugins: [starlightPlugin()], } diff --git a/website4/.gitignore b/website4/.gitignore new file mode 100644 index 0000000..016b59e --- /dev/null +++ b/website4/.gitignore @@ -0,0 +1,24 @@ +# build output +dist/ + +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/website4/README.md b/website4/README.md new file mode 100644 index 0000000..1db3fb3 --- /dev/null +++ b/website4/README.md @@ -0,0 +1,54 @@ +# Astro Starter Kit: Basics + +```sh +npm create astro@latest -- --template basics +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) + +> πŸ§‘β€πŸš€ **Seasoned astronaut?** Delete this file. Have fun! + +![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554) + +## πŸš€ Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +/ +β”œβ”€β”€ public/ +β”‚ └── favicon.svg +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ components/ +β”‚ β”‚ └── Card.astro +β”‚ β”œβ”€β”€ layouts/ +β”‚ β”‚ └── Layout.astro +β”‚ └── pages/ +β”‚ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :------------------------ | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:4321` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | + +## πŸ‘€ Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/website4/astro.config.mjs b/website4/astro.config.mjs new file mode 100644 index 0000000..8b56799 --- /dev/null +++ b/website4/astro.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from 'astro/config'; +import preact from "@astrojs/preact"; + +import tailwind from "@astrojs/tailwind"; + +// https://astro.build/config +export default defineConfig({ + integrations: [preact(), tailwind()] +}); \ No newline at end of file diff --git a/website4/package.json b/website4/package.json new file mode 100644 index 0000000..2666ca6 --- /dev/null +++ b/website4/package.json @@ -0,0 +1,25 @@ +{ + "name": "website4", + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro check && astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/check": "^0.5.10", + "@astrojs/preact": "^3.2.0", + "@astrojs/tailwind": "^5.1.0", + "@theme-toggles/css": "workspace:*", + "@theme-toggles/svgs": "workspace:*", + "astro": "^4.7.0", + "preact": "^10.21.0", + "prettier": "^3.2.5", + "shiki": "^1.4.0", + "tailwindcss": "^3.4.3", + "typescript": "^5.4.5" + } +} \ No newline at end of file diff --git a/website4/public/favicon.svg b/website4/public/favicon.svg new file mode 100644 index 0000000..f157bd1 --- /dev/null +++ b/website4/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/website4/src/components/Card.astro b/website4/src/components/Card.astro new file mode 100644 index 0000000..bd6d597 --- /dev/null +++ b/website4/src/components/Card.astro @@ -0,0 +1,61 @@ +--- +interface Props { + title: string; + body: string; + href: string; +} + +const { href, title, body } = Astro.props; +--- + +
  • + +

    + {title} + → +

    +

    + {body} +

    +     +
    • + diff --git a/website4/src/components/Footer.astro b/website4/src/components/Footer.astro new file mode 100644 index 0000000..df89005 --- /dev/null +++ b/website4/src/components/Footer.astro @@ -0,0 +1,33 @@ + diff --git a/website4/src/components/Navbar.astro b/website4/src/components/Navbar.astro new file mode 100644 index 0000000..358fc0c --- /dev/null +++ b/website4/src/components/Navbar.astro @@ -0,0 +1,174 @@ +--- +import ThemeToggle from "./ThemeToggle.astro"; + +const pathname = new URL(Astro.request.url).pathname; +const currentPath = pathname.slice(1); + +interface NavLink { + href: string; + label: string; +} + +const navLinks: NavLink[] = [ + { href: "/", label: "Toggles" }, + { href: "/docs", label: "Documentation" }, + { href: "https://github.com/AlfieJones/theme-toggles", label: "GitHub" }, +]; +--- + +
    + + + +
    + + + + diff --git a/website4/src/components/ThemeToggle.astro b/website4/src/components/ThemeToggle.astro new file mode 100644 index 0000000..7ad7c87 --- /dev/null +++ b/website4/src/components/ThemeToggle.astro @@ -0,0 +1,58 @@ + + + diff --git a/website4/src/components/ToggleCode.tsx b/website4/src/components/ToggleCode.tsx new file mode 100644 index 0000000..b12e0b2 --- /dev/null +++ b/website4/src/components/ToggleCode.tsx @@ -0,0 +1,59 @@ +import { codeToHtml } from 'shiki' +import { useEffect, useRef, useState } from 'preact/hooks' +import { getCSS, getHTML } from '../generators' + +export type Framework = 'html' | 'react' + +export function ToggleCode({ framework, toggleName }: { framework: Framework, toggleName: string }) { + const [html, setHTML] = useState("") + const [css, setCSS] = useState("") + const [component, setComponent] = useState<"button" | "div" | "checkbox">("button") + + const mountedRef = useRef(false) + + + useEffect(() => { + + mountedRef.current = true + + console.log("HI") + + const getCode = async () => { + + const [rawCode, rawCSS] = await Promise.all([ + getHTML(toggleName, component, framework), + getCSS(toggleName, component) + ]) + + + + const [highlightedHTML, highlightedCSS] = await Promise.all([ + codeToHtml(rawCode, { + lang: 'html', + theme: 'dark-plus' + }), + codeToHtml(rawCSS, { + lang: 'css', + theme: 'dark-plus' + }) + ]) + + if (mountedRef.current) { + setHTML(highlightedHTML) + setCSS(highlightedCSS) + } + } + + getCode() + + return () => { + mountedRef.current = false + } + }, [framework]) + + return ( +
    +
    +
    + ) +} \ No newline at end of file diff --git a/website4/src/env.d.ts b/website4/src/env.d.ts new file mode 100644 index 0000000..acef35f --- /dev/null +++ b/website4/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/website4/src/generators/html.ts b/website4/src/generators/html.ts new file mode 100644 index 0000000..ac41a0c --- /dev/null +++ b/website4/src/generators/html.ts @@ -0,0 +1,32 @@ +import { formatHTML } from "./utils"; +import * as Toggles from "@theme-toggles/svgs"; + +type ToggleName = keyof typeof Toggles; + +export function getButtonHTML(toggleName: ToggleName): Promise { + const svg = Toggles[toggleName]; + + const html = ` + `; + + return formatHTML(html); +} + +export function getDivHTML(toggleName: ToggleName): Promise { + const svg = Toggles[toggleName]; + + const html = ` +
    + Toggle theme + ${svg} +
    `; + + return formatHTML(html); +} diff --git a/website4/src/generators/index.ts b/website4/src/generators/index.ts new file mode 100644 index 0000000..518d3a1 --- /dev/null +++ b/website4/src/generators/index.ts @@ -0,0 +1,16 @@ +import { getButtonHTML } from "./html"; + +export function getHTML( + toggleName: string, + component: "button" | "div" | "checkbox", + framework: "html" | "react" +) { + return getButtonHTML(toggleName as any); +} + +export function getCSS( + toggleName: string, + component: "button" | "div" | "checkbox" +) { + return ".button { background-color: red; }"; +} diff --git a/website4/src/generators/react.ts b/website4/src/generators/react.ts new file mode 100644 index 0000000..e69de29 diff --git a/website4/src/generators/utils.ts b/website4/src/generators/utils.ts new file mode 100644 index 0000000..8b0c297 --- /dev/null +++ b/website4/src/generators/utils.ts @@ -0,0 +1,28 @@ +import { format } from "prettier/standalone"; +import htmlParser from 'prettier/plugins/html' +import tsParser from 'prettier/plugins/typescript' + +export const formatHTML = (html: string) => { + return format(html, { + parser: "html", + htmlWhitespaceSensitivity: "ignore", + plugins: [htmlParser], + }); +}; + +export const formatTSX = (tsx: string) => { + return format(tsx, { + parser: "typescript", + semi: false, + singleQuote: true, + plugins: [tsParser], + }); +}; + +export const formatJSX = (jsx: string) => { + return format(jsx, { + parser: "babel", + semi: false, + singleQuote: true, + }); +}; diff --git a/website4/src/layouts/Layout.astro b/website4/src/layouts/Layout.astro new file mode 100644 index 0000000..5912091 --- /dev/null +++ b/website4/src/layouts/Layout.astro @@ -0,0 +1,31 @@ +--- +import Footer from '../components/Footer.astro'; +import Navbar from '../components/Navbar.astro'; +import '@theme-toggles/css/dist/bundle.css'; + +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + + + +