From e05e48103309367a44bc1099d0fd28a8ad546854 Mon Sep 17 00:00:00 2001 From: holybasil Date: Tue, 21 Nov 2023 12:46:51 +0800 Subject: [PATCH 1/7] fix: home page --- astro.config.ts | 5 + package-lock.json | 541 +++++++++++++++++- package.json | 3 +- public/svgs/Foundry.svg | 6 +- .../assets/svgs}/footer/arrow-right.svg | 2 +- .../assets/svgs}/footer/subscribe.svg | 4 +- .../assets/svgs/home}/Contribute.svg | 2 +- .../svgs => src/assets/svgs/home}/Discord.svg | 8 +- .../assets/svgs/home}/EthersJS.svg | 2 +- .../svgs => src/assets/svgs/home}/Forum.svg | 10 +- .../assets/svgs/home}/home-develop.svg | 4 +- .../assets/svgs/home}/home-learn.svg | 10 +- .../assets/svgs/home}/home-link-arrow.svg | 2 +- .../assets/svgs/home}/home-link.svg | 2 +- .../assets/svgs/home}/home-start.svg | 2 +- .../assets/svgs/home}/home-technology.svg | 2 +- .../Footer/Subscribe/EmailInput.module.css | 14 +- .../Footer/Subscribe/EmailInput.tsx | 22 +- src/components/Footer/Subscribe/Subscribe.tsx | 16 +- src/components/Header/Header.astro | 5 +- src/components/NavCard.astro | 24 +- src/env.d.ts | 4 + .../landing/components/SectionHeader.tsx | 6 +- src/layouts/HomeLayout.astro | 11 + src/pages/en/home/ConnectUs.astro | 31 +- src/pages/en/home/Navigate.astro | 12 +- src/pages/en/home/QuickStart.astro | 27 +- src/pages/en/home/index.astro | 9 +- .../design-system/components/typography.css | 4 +- tailwind.config.cjs | 18 +- tsconfig.json | 1 + 31 files changed, 709 insertions(+), 100 deletions(-) rename {public/images => src/assets/svgs}/footer/arrow-right.svg (80%) rename {public/images => src/assets/svgs}/footer/subscribe.svg (93%) rename {public/svgs => src/assets/svgs/home}/Contribute.svg (95%) rename {public/svgs => src/assets/svgs/home}/Discord.svg (91%) rename {public/svgs => src/assets/svgs/home}/EthersJS.svg (94%) rename {public/svgs => src/assets/svgs/home}/Forum.svg (90%) rename {public/svgs => src/assets/svgs/home}/home-develop.svg (98%) rename {public/svgs => src/assets/svgs/home}/home-learn.svg (77%) rename {public/svgs => src/assets/svgs/home}/home-link-arrow.svg (83%) rename {public/svgs => src/assets/svgs/home}/home-link.svg (96%) rename {public/svgs => src/assets/svgs/home}/home-start.svg (96%) rename {public/svgs => src/assets/svgs/home}/home-technology.svg (98%) diff --git a/astro.config.ts b/astro.config.ts index 61447a66c..00e9a466b 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -1,6 +1,7 @@ import { defineConfig } from "astro/config" import preact from "@astrojs/preact" import react from "@astrojs/react" +import svgr from "vite-plugin-svgr" import astroI18next from "astro-i18next" import { astroCallouts, asideAutoImport } from "./integrations/astro-callouts" import { solidityRemixCode, codeSampleAutoImport } from "./integrations/solidity-remix" @@ -32,6 +33,7 @@ export default defineConfig({ preact({ compat: true, }), + sitemap({ changefreq: "daily", }), @@ -47,6 +49,9 @@ export default defineConfig({ }), astroI18next(), ], + vite: { + plugins: [svgr()], + }, markdown: { drafts: true, remarkPlugins: [remarkMath, remarkGfm], diff --git a/package-lock.json b/package-lock.json index df6108cac..887e13883 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,8 @@ "solhint-plugin-prettier": "^0.0.5", "tsconfig-paths": "^4.1.0", "typescript": "^4.8.4", - "unist-util-remove": "^3.1.0" + "unist-util-remove": "^3.1.0", + "vite-plugin-svgr": "^4.2.0" } }, "node_modules/@algolia/cache-browser-local-storage": { @@ -2887,6 +2888,34 @@ "@proload/core": "^0.3.2" } }, + "node_modules/@rollup/pluginutils": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz", + "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/@scure/base": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz", @@ -3053,6 +3082,219 @@ "antlr4ts": "^0.5.0-alpha.4" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, "node_modules/@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -7017,6 +7259,22 @@ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.5.tgz", "integrity": "sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==" }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/dot-case/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + }, "node_modules/dotenv": { "version": "16.0.3", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", @@ -12415,6 +12673,21 @@ "get-func-name": "^2.0.0" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/lower-case/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + }, "node_modules/lru_map": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz", @@ -14096,6 +14369,22 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/no-case/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + }, "node_modules/node-abi": { "version": "3.40.0", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.40.0.tgz", @@ -17201,6 +17490,22 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/snake-case/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + }, "node_modules/solc": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.3.tgz", @@ -18513,6 +18818,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true + }, "node_modules/sync-request": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/sync-request/-/sync-request-6.1.0.tgz", @@ -19940,6 +20251,20 @@ } } }, + "node_modules/vite-plugin-svgr": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz", + "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.5", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + }, + "peerDependencies": { + "vite": "^2.6.0 || 3 || 4 || 5" + } + }, "node_modules/vitefu": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz", @@ -22403,6 +22728,25 @@ "tsm": "^2.1.4" } }, + "@rollup/pluginutils": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz", + "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==", + "dev": true, + "requires": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "dependencies": { + "estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + } + } + }, "@scure/base": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz", @@ -22529,6 +22873,113 @@ "antlr4ts": "^0.5.0-alpha.4" } }, + "@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "requires": {} + }, + "@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "requires": {} + }, + "@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "requires": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + } + }, + "@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "requires": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + } + }, + "@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "requires": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + } + }, + "@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "requires": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + } + }, "@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -25619,6 +26070,24 @@ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.5.tgz", "integrity": "sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==" }, + "dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + } + } + }, "dotenv": { "version": "16.0.3", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", @@ -29563,6 +30032,23 @@ "get-func-name": "^2.0.0" } }, + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + } + } + }, "lru_map": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz", @@ -30733,6 +31219,24 @@ "@types/nlcst": "^1.0.0" } }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + } + } + }, "node-abi": { "version": "3.40.0", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.40.0.tgz", @@ -32979,6 +33483,24 @@ } } }, + "snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + } + } + }, "solc": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.3.tgz", @@ -33987,6 +34509,12 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true + }, "sync-request": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/sync-request/-/sync-request-6.1.0.tgz", @@ -35011,6 +35539,17 @@ "rollup": "^3.21.0" } }, + "vite-plugin-svgr": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz", + "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^5.0.5", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + } + }, "vitefu": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz", diff --git a/package.json b/package.json index 5d4044955..805e9d4e9 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,8 @@ "solhint-plugin-prettier": "^0.0.5", "tsconfig-paths": "^4.1.0", "typescript": "^4.8.4", - "unist-util-remove": "^3.1.0" + "unist-util-remove": "^3.1.0", + "vite-plugin-svgr": "^4.2.0" }, "lint-staged": { "*.{css,md,yml,yaml,astro}": "prettier --write", diff --git a/public/svgs/Foundry.svg b/public/svgs/Foundry.svg index e9bf9381a..40d265b8e 100644 --- a/public/svgs/Foundry.svg +++ b/public/svgs/Foundry.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/public/images/footer/arrow-right.svg b/src/assets/svgs/footer/arrow-right.svg similarity index 80% rename from public/images/footer/arrow-right.svg rename to src/assets/svgs/footer/arrow-right.svg index a759efe4b..ef0c9aa02 100644 --- a/public/images/footer/arrow-right.svg +++ b/src/assets/svgs/footer/arrow-right.svg @@ -1,3 +1,3 @@ - + diff --git a/public/images/footer/subscribe.svg b/src/assets/svgs/footer/subscribe.svg similarity index 93% rename from public/images/footer/subscribe.svg rename to src/assets/svgs/footer/subscribe.svg index cc34dafd4..5f3b0e8ad 100644 --- a/public/images/footer/subscribe.svg +++ b/src/assets/svgs/footer/subscribe.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/svgs/Contribute.svg b/src/assets/svgs/home/Contribute.svg similarity index 95% rename from public/svgs/Contribute.svg rename to src/assets/svgs/home/Contribute.svg index 800f46c24..3b8b155c4 100644 --- a/public/svgs/Contribute.svg +++ b/src/assets/svgs/home/Contribute.svg @@ -1,6 +1,6 @@ - + diff --git a/public/svgs/Discord.svg b/src/assets/svgs/home/Discord.svg similarity index 91% rename from public/svgs/Discord.svg rename to src/assets/svgs/home/Discord.svg index bacb0fa41..41c4a450d 100644 --- a/public/svgs/Discord.svg +++ b/src/assets/svgs/home/Discord.svg @@ -1,8 +1,8 @@ - - - - + + + + diff --git a/public/svgs/EthersJS.svg b/src/assets/svgs/home/EthersJS.svg similarity index 94% rename from public/svgs/EthersJS.svg rename to src/assets/svgs/home/EthersJS.svg index ce96f60b9..16876c770 100644 --- a/public/svgs/EthersJS.svg +++ b/src/assets/svgs/home/EthersJS.svg @@ -1,3 +1,3 @@ - + diff --git a/public/svgs/Forum.svg b/src/assets/svgs/home/Forum.svg similarity index 90% rename from public/svgs/Forum.svg rename to src/assets/svgs/home/Forum.svg index af16e21de..02f9f2c9a 100644 --- a/public/svgs/Forum.svg +++ b/src/assets/svgs/home/Forum.svg @@ -1,9 +1,9 @@ - - - - - + + + + + diff --git a/public/svgs/home-develop.svg b/src/assets/svgs/home/home-develop.svg similarity index 98% rename from public/svgs/home-develop.svg rename to src/assets/svgs/home/home-develop.svg index 4a3e57090..5e22bd9e2 100644 --- a/public/svgs/home-develop.svg +++ b/src/assets/svgs/home/home-develop.svg @@ -1,6 +1,6 @@ - - + + diff --git a/public/svgs/home-learn.svg b/src/assets/svgs/home/home-learn.svg similarity index 77% rename from public/svgs/home-learn.svg rename to src/assets/svgs/home/home-learn.svg index 005a03d7b..b2ed73cba 100644 --- a/public/svgs/home-learn.svg +++ b/src/assets/svgs/home/home-learn.svg @@ -1,9 +1,9 @@ - - - - - + + + + + diff --git a/public/svgs/home-link-arrow.svg b/src/assets/svgs/home/home-link-arrow.svg similarity index 83% rename from public/svgs/home-link-arrow.svg rename to src/assets/svgs/home/home-link-arrow.svg index e87c0359d..ca96bd3c0 100644 --- a/public/svgs/home-link-arrow.svg +++ b/src/assets/svgs/home/home-link-arrow.svg @@ -1,6 +1,6 @@ - + diff --git a/public/svgs/home-link.svg b/src/assets/svgs/home/home-link.svg similarity index 96% rename from public/svgs/home-link.svg rename to src/assets/svgs/home/home-link.svg index c6edbf8d2..1b7c31566 100644 --- a/public/svgs/home-link.svg +++ b/src/assets/svgs/home/home-link.svg @@ -1,6 +1,6 @@ - + diff --git a/public/svgs/home-start.svg b/src/assets/svgs/home/home-start.svg similarity index 96% rename from public/svgs/home-start.svg rename to src/assets/svgs/home/home-start.svg index ef7bbeaee..f99f76403 100644 --- a/public/svgs/home-start.svg +++ b/src/assets/svgs/home/home-start.svg @@ -1,3 +1,3 @@ - + diff --git a/public/svgs/home-technology.svg b/src/assets/svgs/home/home-technology.svg similarity index 98% rename from public/svgs/home-technology.svg rename to src/assets/svgs/home/home-technology.svg index fff50c2de..9187e8e33 100644 --- a/public/svgs/home-technology.svg +++ b/src/assets/svgs/home/home-technology.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/Footer/Subscribe/EmailInput.module.css b/src/components/Footer/Subscribe/EmailInput.module.css index 5cb898d2b..107b40bc4 100644 --- a/src/components/Footer/Subscribe/EmailInput.module.css +++ b/src/components/Footer/Subscribe/EmailInput.module.css @@ -11,7 +11,6 @@ width: 48px; height: 100%; position: absolute; - background-color: #1f1f1f; border-radius: 10px; z-index: 1; top: 0; @@ -19,12 +18,12 @@ transition: width 0.5s ease; overflow: hidden; cursor: default; + @apply bg-black; } .iconButton { width: 54px; height: 100%; - color: #fff; display: inline-flex; align-items: center; justify-content: center; @@ -47,6 +46,7 @@ border-radius: 50%; overflow: visible; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + @apply text-white; } .iconButton img { @@ -57,13 +57,12 @@ .success { font-size: 16px; font-weight: 600; - color: #fff; - background-color: #1f1f1f; border-radius: 10px; border-left: none; text-align: center; flex: 1; line-height: 54px; + @apply text-white bg-black; } .inputBase { @@ -71,16 +70,11 @@ font-weight: 600; height: 100%; width: 100%; - color: #000; - background-color: #fff; border-radius: 10px; border: 1px solid #000; border-left: none; text-align: center; -} - -.inputBase::placeholder { - color: #dcdcdc; + @apply text-black bg-pure-white border-black; } @media (min-width: 50em) { diff --git a/src/components/Footer/Subscribe/EmailInput.tsx b/src/components/Footer/Subscribe/EmailInput.tsx index b3e586002..8905a6049 100644 --- a/src/components/Footer/Subscribe/EmailInput.tsx +++ b/src/components/Footer/Subscribe/EmailInput.tsx @@ -1,5 +1,7 @@ -import React, { useState } from "react" +import React from "react" import styles from "./EmailInput.module.css" +import ArrowSvg from "~/assets/svgs/footer/arrow-right.svg?react" +import { clsx } from "~/lib" const EmailInput = (props) => { const { end, onClick, onEnter, ...restProps } = props @@ -13,21 +15,29 @@ const EmailInput = (props) => { return (
- -
Thank you for subscribing!
+
Thank you for subscribing!
) diff --git a/src/components/Footer/Subscribe/Subscribe.tsx b/src/components/Footer/Subscribe/Subscribe.tsx index 3ec79e912..6ab9d9824 100644 --- a/src/components/Footer/Subscribe/Subscribe.tsx +++ b/src/components/Footer/Subscribe/Subscribe.tsx @@ -1,5 +1,8 @@ +// import React from "react" import { useState, useEffect } from "preact/hooks" import MailchimpSubscribe from "react-mailchimp-subscribe" +import SubscribeSvg from "~/assets/svgs/footer/subscribe.svg?react" +import { clsx } from "~/lib" import EmailInput from "./EmailInput.tsx" import styles from "./Subscribe.module.css" @@ -7,7 +10,7 @@ import styles from "./Subscribe.module.css" const url = "https://gmail.us14.list-manage.com/subscribe/post?u=3b1d822eb27b2fa64d82d430b&id=0b4603244e" const isValidEmail = (email: string): boolean => { - const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ return emailRegex.test(email) } @@ -37,12 +40,17 @@ export default function Subscribe() { } return ( -
+
- + + + +
Stay up-to-date on the latest Scroll Developer news
-
Roadmap updates, virtual and live events, ecosystem opportunities and more
+
+ Roadmap updates, virtual and live events, ecosystem opportunities and more +
diff --git a/src/pages/en/home/ConnectUs.astro b/src/pages/en/home/ConnectUs.astro index 481c3f349..7b0f46139 100644 --- a/src/pages/en/home/ConnectUs.astro +++ b/src/pages/en/home/ConnectUs.astro @@ -1,21 +1,25 @@ --- import SectionHeader from "~/components/SectionHeader/index.astro" +import LinkArrowSvg from "~/assets/svgs/home/home-link-arrow.svg?raw" +import DiscordSvg from "~/assets/svgs/home/Discord.svg?raw" +import ForumSvg from "~/assets/svgs/home/Forum.svg?raw" +import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw" const mediaList = [ { - icon: "/svgs/Discord.svg", + icon: DiscordSvg, name: "Join our Discord", content: "Connect with other Scroll developers and users.", link: "https://discord.gg/scroll", }, { - icon: "/svgs/Forum.svg", + icon: ForumSvg, name: "Community Forum", content: "Discuss and propose changes to Scroll’s core protocols.", link: "http://community.scroll.io/", }, { - icon: "/svgs/Contribute.svg", + icon: ContributeSvg, name: "Contribute to Scroll", content: "Build with other developers.", link: "https://github.com/scroll-tech/contribute-to-scroll", @@ -33,11 +37,12 @@ const mediaList = [ mediaList.map(({ icon, name, content, link }) => (
- - + + + + + +
{name} @@ -66,12 +71,11 @@ const mediaList = [ display: flex; flex-direction: column; align-items: flex-start; - - background-color: #fff0dd; + @apply bg-normal dark:bg-dark-normal; } .media-item:hover { - background-color: #ffdeb5; + @apply bg-highlight dark:bg-dark-highlight; } .media-item-header { @@ -85,15 +89,16 @@ const mediaList = [ .media-item-link { width: 23px; height: 23px; - background: url(/svgs/home-link-arrow.svg) center no-repeat; background-size: contain; align-self: flex-end; + @apply text-black dark:text-white; } .media-item-icon { - display: inline-block; + display: inline-flex; width: 35px; height: 35px; + align-items: center; } .media-item-title { font-size: 22px; diff --git a/src/pages/en/home/Navigate.astro b/src/pages/en/home/Navigate.astro index f28700965..765074a6e 100644 --- a/src/pages/en/home/Navigate.astro +++ b/src/pages/en/home/Navigate.astro @@ -1,28 +1,32 @@ --- import NavCard from "~/components/NavCard.astro" +import StartSvg from "~/assets/svgs/home/home-start.svg?raw" +import DevelopSvg from "~/assets/svgs/home/home-develop.svg?raw" +import TechnologySvg from "~/assets/svgs/home/home-technology.svg?raw" +import LearnSvg from "~/assets/svgs/home/home-learn.svg?raw" import SectionHeader from "~/components/SectionHeader/index.astro" const navList = [ { - icon: "/svgs/home-start.svg", + icon: StartSvg, name: "Getting started", content: "Bridge into Scroll and explore our dApp Ecosystem.", link: "/en/getting-started/overview", }, { - icon: "/svgs/home-develop.svg", + icon: DevelopSvg, name: "Developers", content: "Dive into Scroll’s developer documentation.", link: "/en/developers", }, { - icon: "/svgs/home-technology.svg", + icon: TechnologySvg, name: "Technology", content: "An overview of Scroll’s zkEVM Architecture.", link: "/en/technology", }, { - icon: "/svgs/home-learn.svg", + icon: LearnSvg, name: "Learn", content: "An introduction to the world of ZK and Scalability.", link: "/en/learn", diff --git a/src/pages/en/home/QuickStart.astro b/src/pages/en/home/QuickStart.astro index 309400ad1..5c13bf51e 100644 --- a/src/pages/en/home/QuickStart.astro +++ b/src/pages/en/home/QuickStart.astro @@ -1,10 +1,18 @@ --- import SectionHeader from "~/components/SectionHeader/index.astro" +import EtherSvg from "~/assets/svgs/home/EthersJS.svg?raw" + const toolList = [ { icon: "/svgs/Hardhat.svg", name: "Hardhat", link: "https://hardhat.org/", quickstartAnchor: "hardhat" }, { icon: "/svgs/Foundry.svg", name: "Foundry", link: "https://getfoundry.sh/", quickstartAnchor: "foundry" }, { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" }, - { icon: "/svgs/EthersJS.svg", name: "EthersJS", link: "https://ethers.org/", quickstartAnchor: "ethersjs" }, + { + icon: EtherSvg, + color: "text-[#2A4B78] dark:text-white", + name: "EthersJS", + link: "https://ethers.org/", + quickstartAnchor: "ethersjs", + }, { icon: "/svgs/Brownie.svg", name: "Brownie", link: "https://github.com/eth-brownie", quickstartAnchor: "brownie" }, { icon: "/svgs/Truffle.svg", name: "Truffle", link: "https://trufflesuite.com/", quickstartAnchor: "truffle" }, ] @@ -17,10 +25,10 @@ const toolList = [ />
{ - toolList.map(({ icon, name, quickstartAnchor }) => ( - -
- {name} + toolList.map(({ icon, name, quickstartAnchor, color }) => ( + +
+ {color ? : {name}}
{name} @@ -49,10 +57,14 @@ const toolList = [ justify-content: center; align-items: center; border-radius: 50%; - background-color: #fff0dd; + @apply bg-normal dark:bg-dark-normal; } .tools-item figure:hover { - background-color: #ffdeb5; + @apply dark:bg-dark-highlight; + } + + .tools-item figure svg { + width: 80% !important; } .tools-item span { font-size: 20px; @@ -68,7 +80,6 @@ const toolList = [ justify-content: center; align-items: center; border-radius: 50%; - background-color: #fff0dd; } .tools-item figure img { diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro index 8023732a0..82ab038c1 100644 --- a/src/pages/en/home/index.astro +++ b/src/pages/en/home/index.astro @@ -10,13 +10,13 @@ changeLanguage("en") --- -
+
-

Welcome to
Scroll Documentation

+

Welcome to
Scroll Documentation

-
+
@@ -28,7 +28,6 @@ changeLanguage("en") diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro index d26ad856c..bf1a550e8 100644 --- a/src/components/RightSidebar/RightSidebar.astro +++ b/src/components/RightSidebar/RightSidebar.astro @@ -45,7 +45,7 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props width: 280px; /* width: 250px; */ max-height: 100%; - /* @apply pt-doc; */ + @apply bg-white dark:bg-dark-normal; } .sidebar-nav-inner > * { margin-top: 1rem; diff --git a/src/components/ToggleElement.astro b/src/components/ToggleElement.astro index 4e6c61234..e2a53d2b5 100644 --- a/src/components/ToggleElement.astro +++ b/src/components/ToggleElement.astro @@ -7,7 +7,9 @@ const anchorHash = anchor.replace(/\s+/g, "-") ---
- +
@@ -46,9 +48,9 @@ const anchorHash = anchor.replace(/\s+/g, "-") border-radius: 27px; border: 1px solid #dadada; overflow: hidden; - color: var(--color-text-primary); font-weight: 600; padding-left: 0.3rem; + @apply text-black dark:text-white border-primary dark:border-dark-primary; } details:hover { @@ -89,7 +91,6 @@ const anchorHash = anchor.replace(/\s+/g, "-") } summary::before { - content: ""; display: inline-block; font-size: 0.75em; transform: rotate(-90deg); @@ -97,8 +98,9 @@ const anchorHash = anchor.replace(/\s+/g, "-") margin-right: 1rem; height: 10px; width: 10px; - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNC45OTk3NiA2QzQuNzY4MSA2IDQuNTUwMjkgNS45MDc3NCA0LjM4NjQ0IDUuNzQwMTlMMC4yNTM0NTEgMS41MTM4N0MtMC4wODQ0ODM2IDEuMTY4MDIgLTAuMDg0NDgzNiAwLjYwNTY2IDAuMjUzNDUxIDAuMjU5ODExQzAuNDE3Mjk4IDAuMDkyMjY0MiAwLjYzNTExNSAwIDAuODY2NzcgMEMxLjA5ODQzIDAgMS4zMTYyNCAwLjA5MjI2NDIgMS40ODAwOSAwLjI1OTgxMUw1LjAwMDAzIDMuODU5MjVMOC41MTk3IDAuMjU5ODExQzguNjgzNTUgMC4wOTIyNjQyIDguOTAxMzcgMCA5LjEzMzAyIDBDOS4zNjQ2OCAwIDkuNTgyNDkgMC4wOTIyNjQyIDkuNzQ2MzQgMC4yNTk4MTFDMTAuMDg0NiAwLjYwNTY2IDEwLjA4NDYgMS4xNjgzIDkuNzQ2MzQgMS41MTM4N0w1LjYxMzM1IDUuNzQwMTlDNS40NDk1MSA1LjkwNzc0IDUuMjMxNjkgNiA1LjAwMDAzIDZINC45OTk3NloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=) - center / contain no-repeat; + background-position: center; + background-size: contain; + background-repeat: no-repeat; } details[open] summary::before { transform: rotate(0deg); diff --git a/src/content/docs/en/learn/index.mdx b/src/content/docs/en/learn/index.mdx index 55b8184ed..ade566b4d 100644 --- a/src/content/docs/en/learn/index.mdx +++ b/src/content/docs/en/learn/index.mdx @@ -7,6 +7,8 @@ excerpt: "Learn more about Ethereum scalability and zero knowledge cryptography. --- import NavCard from "../../../../components/NavCard.astro" +import TechnologySvg from "../../../../assets/svgs/home/home-technology.svg?raw" +import LearnSvg from "../../../../assets/svgs/home/home-learn.svg?raw" Scroll pulls together research and engineering from Blockchain Protocols and Zero Knowledge Cryptography. If you want to dive deeper, keep reading and check out the additional resources. @@ -14,13 +16,13 @@ Want to see a specific topic covered? Create [an issue](https://github.com/scrol
+ + +
+ +
+ +
+