diff --git a/astro-i18next.config.ts b/astro-i18next.config.ts index 2b3e6b322..a118d1132 100644 --- a/astro-i18next.config.ts +++ b/astro-i18next.config.ts @@ -2,6 +2,6 @@ export default { defaultLocale: "en", showDefaultLocale: true, - locales: ["en", "zh", "es"], + locales: ["en", "es"], load: ["server", "client"], } diff --git a/src/components/Header/LanguageSelector/LanguageSelector.astro b/src/components/Header/LanguageSelector/LanguageSelector.astro index b50e313fe..c34f94314 100644 --- a/src/components/Header/LanguageSelector/LanguageSelector.astro +++ b/src/components/Header/LanguageSelector/LanguageSelector.astro @@ -9,7 +9,7 @@ const supportedLanguages = i18next.languages const { pathname } = Astro.url -const { showFlag = false, languageMapping, ...attributes } = Astro.props +const { showFlag = false, languageMapping } = Astro.props const { dark } = Astro.props const getLabel = (language) => { @@ -67,10 +67,6 @@ const getLabel = (language) => { position: relative; } - .language-selector.dark { - --black-100: #fff; - --orange-500: #fff; - } .language-selector:hover .options-modal { display: flex; } @@ -84,14 +80,15 @@ const getLabel = (language) => { .current-language { width: 100px; border-radius: 5px; - border: 1px solid var(--black-100); + border-width: 1px; + border-style: solid; display: flex; height: 36px; padding: 0 12px; justify-content: space-between; align-items: center; cursor: pointer; - color: var(--black-100); + @apply text-black dark:text-white border-black dark:border-white; } .options-list { @@ -101,7 +98,8 @@ const getLabel = (language) => { letter-spacing: 0.14px; padding: 4px 12px; border-radius: 5px; - border: 1px solid var(--black-100); + border-width: 1px; + border-style: solid; overflow: hidden; cursor: pointer; transition: height 0.3s ease; @@ -109,7 +107,7 @@ const getLabel = (language) => { justify-content: center; align-items: center; flex-direction: column; - background: var(--white-100); + @apply bg-pure-white dark:bg-black border-black dark:border-white; } .options-list li { @@ -119,7 +117,7 @@ const getLabel = (language) => { align-items: center; flex-direction: row; padding: 8px 0px; - color: var(--black-100); + @apply text-black dark:text-white; } .options-list li svg, diff --git a/src/pages/es/home/ConnectUs.astro b/src/pages/es/home/ConnectUs.astro new file mode 100644 index 000000000..7b0f46139 --- /dev/null +++ b/src/pages/es/home/ConnectUs.astro @@ -0,0 +1,152 @@ +--- +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: DiscordSvg, + name: "Join our Discord", + content: "Connect with other Scroll developers and users.", + link: "https://discord.gg/scroll", + }, + { + icon: ForumSvg, + name: "Community Forum", + content: "Discuss and propose changes to Scroll’s core protocols.", + link: "http://community.scroll.io/", + }, + { + icon: ContributeSvg, + name: "Contribute to Scroll", + content: "Build with other developers.", + link: "https://github.com/scroll-tech/contribute-to-scroll", + }, +] +--- + +
+ +
+ { + mediaList.map(({ icon, name, content, link }) => ( + +
+ + + + + + +
+ + {name} + {content} + + )) + } +
+
+ + diff --git a/src/pages/es/home/Navigate.astro b/src/pages/es/home/Navigate.astro new file mode 100644 index 000000000..765074a6e --- /dev/null +++ b/src/pages/es/home/Navigate.astro @@ -0,0 +1,63 @@ +--- +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: StartSvg, + name: "Getting started", + content: "Bridge into Scroll and explore our dApp Ecosystem.", + link: "/en/getting-started/overview", + }, + { + icon: DevelopSvg, + name: "Developers", + content: "Dive into Scroll’s developer documentation.", + link: "/en/developers", + }, + { + icon: TechnologySvg, + name: "Technology", + content: "An overview of Scroll’s zkEVM Architecture.", + link: "/en/technology", + }, + { + icon: LearnSvg, + name: "Learn", + content: "An introduction to the world of ZK and Scalability.", + link: "/en/learn", + }, +] +--- + +
+ +
+ {navList.map(({ icon, name, content, link }) => )} +
+
+ + diff --git a/src/pages/es/home/QuickStart.astro b/src/pages/es/home/QuickStart.astro new file mode 100644 index 000000000..5c13bf51e --- /dev/null +++ b/src/pages/es/home/QuickStart.astro @@ -0,0 +1,111 @@ +--- +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: 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" }, +] +--- + +
+ +
+ { + toolList.map(({ icon, name, quickstartAnchor, color }) => ( + +
+ {color ? : {name}} +
+ {name} + + )) + } +
+
+ + diff --git a/src/pages/es/home/index.astro b/src/pages/es/home/index.astro new file mode 100644 index 000000000..a9a587cef --- /dev/null +++ b/src/pages/es/home/index.astro @@ -0,0 +1,61 @@ +--- +import { changeLanguage } from "i18next" +import HomeLayout from "../../../layouts/HomeLayout.astro" +import Search from "../../../components/HomeSearch" +import QuickStart from "./QuickStart.astro" +import Navigate from "./Navigate.astro" +import ConnectUs from "./ConnectUs.astro" + +changeLanguage("es") +--- + + +
+
+

Welcome to
Scroll Documentation

+ +
+
+
+
+ + + +
+
+ + + diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro index bb9bbe32f..19a6738a1 100644 --- a/src/pages/es/index.astro +++ b/src/pages/es/index.astro @@ -3,4 +3,4 @@ import i18next, { changeLanguage } from "i18next" changeLanguage("es") --- - + diff --git a/src/pages/zh/home/ConnectUs.astro b/src/pages/zh/home/ConnectUs.astro new file mode 100644 index 000000000..7b0f46139 --- /dev/null +++ b/src/pages/zh/home/ConnectUs.astro @@ -0,0 +1,152 @@ +--- +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: DiscordSvg, + name: "Join our Discord", + content: "Connect with other Scroll developers and users.", + link: "https://discord.gg/scroll", + }, + { + icon: ForumSvg, + name: "Community Forum", + content: "Discuss and propose changes to Scroll’s core protocols.", + link: "http://community.scroll.io/", + }, + { + icon: ContributeSvg, + name: "Contribute to Scroll", + content: "Build with other developers.", + link: "https://github.com/scroll-tech/contribute-to-scroll", + }, +] +--- + +
+ +
+ { + mediaList.map(({ icon, name, content, link }) => ( + +
+ + + + + + +
+ + {name} + {content} + + )) + } +
+
+ + diff --git a/src/pages/zh/home/Navigate.astro b/src/pages/zh/home/Navigate.astro new file mode 100644 index 000000000..765074a6e --- /dev/null +++ b/src/pages/zh/home/Navigate.astro @@ -0,0 +1,63 @@ +--- +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: StartSvg, + name: "Getting started", + content: "Bridge into Scroll and explore our dApp Ecosystem.", + link: "/en/getting-started/overview", + }, + { + icon: DevelopSvg, + name: "Developers", + content: "Dive into Scroll’s developer documentation.", + link: "/en/developers", + }, + { + icon: TechnologySvg, + name: "Technology", + content: "An overview of Scroll’s zkEVM Architecture.", + link: "/en/technology", + }, + { + icon: LearnSvg, + name: "Learn", + content: "An introduction to the world of ZK and Scalability.", + link: "/en/learn", + }, +] +--- + +
+ +
+ {navList.map(({ icon, name, content, link }) => )} +
+
+ + diff --git a/src/pages/zh/home/QuickStart.astro b/src/pages/zh/home/QuickStart.astro new file mode 100644 index 000000000..5c13bf51e --- /dev/null +++ b/src/pages/zh/home/QuickStart.astro @@ -0,0 +1,111 @@ +--- +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: 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" }, +] +--- + +
+ +
+ { + toolList.map(({ icon, name, quickstartAnchor, color }) => ( + +
+ {color ? : {name}} +
+ {name} + + )) + } +
+
+ + diff --git a/src/pages/zh/home/index.astro b/src/pages/zh/home/index.astro new file mode 100644 index 000000000..d0bdb9582 --- /dev/null +++ b/src/pages/zh/home/index.astro @@ -0,0 +1,61 @@ +--- +import { changeLanguage } from "i18next" +import HomeLayout from "../../../layouts/HomeLayout.astro" +import Search from "../../../components/HomeSearch" +import QuickStart from "./QuickStart.astro" +import Navigate from "./Navigate.astro" +import ConnectUs from "./ConnectUs.astro" + +changeLanguage("zh") +--- + + +
+
+

Welcome to
Scroll Documentation

+ +
+
+
+
+ + + +
+
+ + +