diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b88033e9..c16bb30b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1400,13 +1400,15 @@ importers: '@types/styled-components': ^5.1.26 clsx: ^1.2.1 docusaurus-plugin-image-zoom: ^0.1.1 + docusaurus-plugin-less: ^2.0.2 file-loader: ^6.2.0 fs-extra: ^10.1.0 glob: ^7.2.3 + less: ^4.1.3 + less-loader: ^10.2.0 prism-react-renderer: ^1.3.5 react: ^17.0.2 react-dom: ^17.0.2 - styled-components: ^5.3.6 ts-node: ^10.9.1 typescript: ^4.9.5 url-loader: ^4.1.1 @@ -1418,11 +1420,11 @@ importers: '@svgr/webpack': 5.5.0 clsx: 1.2.1 docusaurus-plugin-image-zoom: 0.1.1 + docusaurus-plugin-less: 2.0.2_cry5vv7wixxq3wqbwkikkfe4le file-loader: 6.2.0 prism-react-renderer: 1.3.5_react@17.0.2 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 - styled-components: 5.3.6_sfoxds7t5ydpegc3knd667wn6m url-loader: 4.1.1_file-loader@6.2.0 devDependencies: '@docusaurus/module-type-aliases': 2.3.1_sfoxds7t5ydpegc3knd667wn6m @@ -1435,6 +1437,8 @@ importers: '@types/styled-components': 5.1.26 fs-extra: 10.1.0 glob: 7.2.3 + less: 4.1.3 + less-loader: 10.2.0_less@4.1.3 ts-node: 10.9.1_typescript@4.9.5 typescript: 4.9.5 @@ -7409,7 +7413,7 @@ packages: peerDependencies: react: '*' dependencies: - '@types/react': 17.0.53 + '@types/react': 18.0.26 prop-types: 15.8.1 react: 17.0.2 @@ -15654,6 +15658,7 @@ packages: dependencies: webpack: 5.75.0_webpack-cli@4.10.0 webpack-cli: 4.10.0_hdfrwtmlewz4o7kkfxfrhnzu24 + dev: true /@webpack-cli/info/1.5.0_webpack-cli@4.10.0: resolution: {integrity: sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==} @@ -15662,6 +15667,7 @@ packages: dependencies: envinfo: 7.8.1 webpack-cli: 4.10.0_hdfrwtmlewz4o7kkfxfrhnzu24 + dev: true /@webpack-cli/serve/1.7.0_ud4agclah7rahur6ntojouq57y: resolution: {integrity: sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==} @@ -15674,6 +15680,7 @@ packages: dependencies: webpack-cli: 4.10.0_hdfrwtmlewz4o7kkfxfrhnzu24 webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue + dev: true /@xobotyi/scrollbar-width/1.9.5: resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==} @@ -17138,7 +17145,7 @@ packages: babel-plugin-syntax-jsx: 6.18.0 lodash: 4.17.21 picomatch: 2.3.1 - styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba + styled-components: 5.3.6_sfoxds7t5ydpegc3knd667wn6m /babel-plugin-syntax-jsx/6.18.0: resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==} @@ -19158,7 +19165,6 @@ packages: resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==} dependencies: is-what: 3.14.1 - dev: true /copy-anything/3.0.3: resolution: {integrity: sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==} @@ -19210,7 +19216,7 @@ packages: normalize-path: 3.0.0 schema-utils: 4.0.0 serialize-javascript: 6.0.1 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /core-js-compat/3.28.0: resolution: {integrity: sha512-myzPgE7QodMg4nnd3K1TDoES/nADRStM8Gpz0D6nhkwbmwEnE0ZGJgoWsvQ722FR8D7xS0n0LV556RcEicjTyg==} @@ -20615,6 +20621,18 @@ packages: medium-zoom: 1.0.8 dev: false + /docusaurus-plugin-less/2.0.2_cry5vv7wixxq3wqbwkikkfe4le: + resolution: {integrity: sha512-ez6WSSvGS8HoJslYHeG5SflyShWvHFXeTTHXPBd3H1T3zgq9wp6wD7scXm+rXyyfhFhP5VNiIqhYB78z4OLjwg==} + peerDependencies: + '@docusaurus/core': '>=2.0.0-beta.9' + less: '>=4.0.0' + less-loader: '>=10.0.0' + dependencies: + '@docusaurus/core': 2.3.1_jgxnvbe4faw3ohf4h6p42qq6oy + less: 4.1.3 + less-loader: 10.2.0_less@4.1.3 + dev: false + /dom-accessibility-api/0.5.14: resolution: {integrity: sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==} dev: true @@ -21042,6 +21060,7 @@ packages: resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==} engines: {node: '>=4'} hasBin: true + dev: true /eol/0.9.1: resolution: {integrity: sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==} @@ -21053,7 +21072,6 @@ packages: requiresBuild: true dependencies: prr: 1.0.1 - dev: true /error-ex/1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} @@ -22211,6 +22229,7 @@ packages: /fastest-levenshtein/1.0.16: resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} engines: {node: '>= 4.9.1'} + dev: true /fastest-stable-stringify/2.0.2: resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==} @@ -22364,7 +22383,7 @@ packages: dependencies: loader-utils: 2.0.4 schema-utils: 3.1.1 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /file-selector/0.5.0: resolution: {integrity: sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==} @@ -24072,7 +24091,7 @@ packages: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /htmlparser2/6.1.0: resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==} @@ -24391,7 +24410,6 @@ packages: engines: {node: '>=0.10.0'} hasBin: true requiresBuild: true - dev: true optional: true /image-size/1.0.2: @@ -24440,6 +24458,7 @@ packages: dependencies: pkg-dir: 4.2.0 resolve-cwd: 3.0.0 + dev: true /imurmurhash/0.1.4: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} @@ -25390,7 +25409,6 @@ packages: /is-what/3.14.1: resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==} - dev: true /is-what/4.1.8: resolution: {integrity: sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==} @@ -26722,6 +26740,16 @@ packages: flush-write-stream: 1.1.1 dev: true + /less-loader/10.2.0_less@4.1.3: + resolution: {integrity: sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==} + engines: {node: '>= 12.13.0'} + peerDependencies: + less: ^3.5.0 || ^4.0.0 + webpack: ^5.0.0 + dependencies: + klona: 2.0.6 + less: 4.1.3 + /less-loader/10.2.0_less@4.1.3+webpack@5.75.0: resolution: {integrity: sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==} engines: {node: '>= 12.13.0'} @@ -26769,7 +26797,6 @@ packages: source-map: 0.6.1 transitivePeerDependencies: - supports-color - dev: true /leven/2.1.0: resolution: {integrity: sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==} @@ -28086,7 +28113,7 @@ packages: webpack: ^5.0.0 dependencies: schema-utils: 4.0.0 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /mini-star/1.3.1: resolution: {integrity: sha512-u9Rw8mPZibaAkEVXBsOQJ1irAURTgjqdKoITFd24+KxIGVXCDK+RYR8KjKRF99VLaCbK6TwTqiJ6iNsqq0G+wA==} @@ -29019,7 +29046,6 @@ packages: sax: 1.2.4 transitivePeerDependencies: - supports-color - dev: true optional: true /negotiator/0.6.3: @@ -30155,7 +30181,6 @@ packages: /parse-node-version/1.0.1: resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==} engines: {node: '>= 0.10'} - dev: true /parse-numeric-range/1.3.0: resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==} @@ -31865,7 +31890,6 @@ packages: /prr/1.0.1: resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} - dev: true /psl/1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} @@ -34054,6 +34078,7 @@ packages: engines: {node: '>= 0.10'} dependencies: resolve: 1.22.1 + dev: true /rechoir/0.8.0: resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==} @@ -34620,6 +34645,7 @@ packages: engines: {node: '>=8'} dependencies: resolve-from: 5.0.0 + dev: true /resolve-dir/1.0.1: resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==} @@ -34640,6 +34666,7 @@ packages: /resolve-from/5.0.0: resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==} engines: {node: '>=8'} + dev: true /resolve-global/1.0.0: resolution: {integrity: sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==} @@ -36522,6 +36549,7 @@ packages: react-is: 18.2.0 shallowequal: 1.1.0 supports-color: 5.5.0 + dev: false /styled-components/5.3.6_mdz3marskokvq6744hhidi3r5a: resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==} @@ -36590,7 +36618,6 @@ packages: react-dom: 17.0.2_react@17.0.2 shallowequal: 1.1.0 supports-color: 5.5.0 - dev: false /styled-system/5.1.5: resolution: {integrity: sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==} @@ -37170,7 +37197,7 @@ packages: schema-utils: 3.1.1 serialize-javascript: 6.0.1 terser: 5.16.5 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /terser/4.8.1: resolution: {integrity: sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==} @@ -38885,7 +38912,7 @@ packages: loader-utils: 2.0.4 mime-types: 2.1.35 schema-utils: 3.1.1 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /url-parse-lax/3.0.0: resolution: {integrity: sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==} @@ -39520,6 +39547,7 @@ packages: webpack-bundle-analyzer: 4.8.0 webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue webpack-merge: 5.8.0 + dev: true /webpack-dev-middleware/3.7.3_webpack@4.46.0: resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==} @@ -39546,7 +39574,7 @@ packages: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.0.0 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /webpack-dev-server/4.11.1_pda42hcaj7d62cr262fr632kue: resolution: {integrity: sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==} @@ -39595,6 +39623,7 @@ packages: - debug - supports-color - utf-8-validate + dev: true /webpack-dev-server/4.11.1_webpack@5.75.0: resolution: {integrity: sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==} @@ -39875,6 +39904,7 @@ packages: - '@swc/core' - esbuild - uglify-js + dev: true /webpackbar/5.0.2_webpack@5.75.0: resolution: {integrity: sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==} @@ -39886,7 +39916,7 @@ packages: consola: 2.15.3 pretty-time: 1.1.0 std-env: 3.3.2 - webpack: 5.75.0_webpack-cli@4.10.0 + webpack: 5.75.0 /websocket-driver/0.7.4: resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==} diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index a4b29cdd..ce17b601 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -122,5 +122,8 @@ module.exports = { locales: ['en', 'zh-Hans'], }, presets: [['@docusaurus/preset-classic', presetClassicOptions]], - plugins: [require.resolve('docusaurus-plugin-image-zoom')], + plugins: [ + require.resolve('docusaurus-plugin-image-zoom'), + require.resolve('docusaurus-plugin-less'), + ], }; diff --git a/website/package.json b/website/package.json index 970ae934..58209140 100644 --- a/website/package.json +++ b/website/package.json @@ -24,11 +24,11 @@ "@svgr/webpack": "^5.5.0", "clsx": "^1.2.1", "docusaurus-plugin-image-zoom": "^0.1.1", + "docusaurus-plugin-less": "^2.0.2", "file-loader": "^6.2.0", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", - "styled-components": "^5.3.6", "url-loader": "^4.1.1" }, "browserslist": { @@ -54,6 +54,8 @@ "@types/styled-components": "^5.1.26", "fs-extra": "^10.1.0", "glob": "^7.2.3", + "less": "^4.1.3", + "less-loader": "^10.2.0", "ts-node": "^10.9.1", "typescript": "^4.9.5" } diff --git a/website/src/components/HomepageHeader.less b/website/src/components/HomepageHeader.less new file mode 100644 index 00000000..dd7d4415 --- /dev/null +++ b/website/src/components/HomepageHeader.less @@ -0,0 +1,71 @@ +.homepage-header { + padding: 4rem 1rem 0; + + @media (min-width: 997px) { + font-size: 3.75rem; + height: 540px; + padding-top: 0; + padding-bottom: 0; + } + + .main { + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + max-width: 80rem; + + @media (min-width: 997px) { + flex-direction: row; + } + + .header { + flex: 1; + text-align: center; + + @media (min-width: 997px) { + text-align: left; + } + + .title { + margin-bottom: 24px; + font-size: 2.25rem; + line-height: 1; + font-weight: 700; + + @media (min-width: 997px) { + font-size: 3.75rem; + } + } + + .desc { + font-size: 1rem; + line-height: 1.5rem; + color: rgb(153, 153, 153); + font-size: 0.875rem; + line-height: 1.25rem; + + @media (min-width: 997px) { + font-size: 1rem; + line-height: 1.5rem; + max-width: 32rem; + } + } + + .btns { + margin-bottom: 32px; + display: flex; + flex-direction: column; + gap: 1rem; + + @media (min-width: 997px) { + flex-direction: row; + } + } + } + + .screenshot { + flex: 1; + } + } +} diff --git a/website/src/components/HomepageHeader.tsx b/website/src/components/HomepageHeader.tsx index 2044c79c..6d9f9904 100644 --- a/website/src/components/HomepageHeader.tsx +++ b/website/src/components/HomepageHeader.tsx @@ -1,89 +1,17 @@ import React from 'react'; import Link from '@docusaurus/Link'; import Head from '@docusaurus/Head'; -import styled from 'styled-components'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Translate from '@docusaurus/Translate'; import { useColorMode } from '@docusaurus/theme-common'; - -const Root = styled.div` - padding: 4rem 1rem 0; - - @media (min-width: 997px) { - font-size: 3.75rem; - height: 540px; - padding-top: 0; - padding-bottom: 0; - } - - .main { - margin: auto; - display: flex; - flex-direction: column; - align-items: center; - max-width: 80rem; - - @media (min-width: 997px) { - flex-direction: row; - } - - .header { - flex: 1; - text-align: center; - - @media (min-width: 997px) { - text-align: left; - } - - .title { - margin-bottom: 24px; - font-size: 2.25rem; - line-height: 1; - font-weight: 700; - - @media (min-width: 997px) { - font-size: 3.75rem; - } - } - - .desc { - font-size: 1rem; - line-height: 1.5rem; - color: rgb(153, 153, 153); - font-size: 0.875rem; - line-height: 1.25rem; - - @media (min-width: 997px) { - font-size: 1rem; - line-height: 1.5rem; - max-width: 32rem; - } - } - - .btns { - margin-bottom: 32px; - display: flex; - flex-direction: column; - gap: 1rem; - - @media (min-width: 997px) { - flex-direction: row; - } - } - } - - .screenshot { - flex: 1; - } - } -`; +import './HomepageHeader.less'; export const HomepageHeader: React.FC = React.memo(() => { const { siteConfig } = useDocusaurusContext(); const { colorMode } = useColorMode(); return ( - +
@@ -114,7 +42,7 @@ export const HomepageHeader: React.FC = React.memo(() => { Preview of Tailchat
- + ); }); HomepageHeader.displayName = 'HomepageHeader';