Merge pull request #130 from scroll-tech/language-selector

Update language picker

Author: dghelm

astro-i18next.config.ts

@@ -2,6 +2,6 @@
 export default {
   defaultLocale: "en",
   showDefaultLocale: true,
-  locales: ["en", "zh", "es"],
+  locales: ["en", "es"],
   load: ["server", "client"],
 }

public/locales/en/translation.json

@@ -48,9 +48,12 @@
       }
     },
     "NewsletterCTA": {
-      "title": "Stay updated on the latest Scroll news",
-      "placeholder": "Enter your email address",
-      "buttonText": "Sign up"
+      "title": "Stay up-to-date on the latest Scroll Developer news",
+      "text": "Roadmap updates, virtual and live events, ecosystem opportunities and more",
+      "placeholder": "your email address here",
+      "thankYouForSubscribing": "Thank you for subscribing!",
+      "correctEmail": "Please use a correct email address.",
+      "pleaseInsertEmail": "Please insert your email."
     }
   },
   "sidebar": {
@@ -152,6 +155,30 @@
       "additionalResources": "Additional Resources"
     }
   },
+  "footer": {
+    "aboutScroll": {
+      "title": "About Scroll",
+      "bugBounty": "Bug Bounty",
+      "joinUs": "Join Us",
+      "healthStatus": "Health Status",
+      "privacyPolicy": "Privacy Policy",
+      "termsAndConditions": "Terms and Conditions"
+    },
+    "resources": {
+      "title": "Resources",
+      "scrollDocsURL": "https://docs.scroll.io/",
+      "blog": "Blog",
+      "documentation": "Documentation",
+      "pressKit": "Press Kit"
+    },
+    "followUs": {
+      "title": "Follow Us"
+    }
+  },
+  "pageNotFound": {
+    "title": "Page not found",
+    "text": "We're sorry, but we couldn't find the page you were looking for."
+  },
   "notTranslated": {
     "notTranslated": "This page has not been translated yet."
   }

public/locales/es/translation.json

@@ -48,9 +48,12 @@
       }
     },
     "NewsletterCTA": {
-      "title": "Stay updated on the latest Scroll news",
-      "placeholder": "Enter your email address",
-      "buttonText": "Sign up"
+      "title": "Mantente actualizado con las más recientes noticias sobre el Desarrollo de Scroll",
+      "text": "Roadmap, actualizaciones, eventos virtuales y presenciales, oportunidades en el ecosistema y más",
+      "placeholder": "tu correo electrónico aquí",
+      "thankYouForSubscribing": "¡Gracias por suscribirte!",
+      "correctEmail": "Por favor usa un correo electrónico válido.",
+      "pleaseInsertEmail": "Por favor ingresa tu correo electrónico."
     }
   },
   "sidebar": {
@@ -152,7 +155,32 @@
       "additionalResources": "Recursos Adicionales"
     }
   },
+  "footer": {
+    "aboutScroll": {
+      "title": "Acerca de Scroll",
+      "bugBounty": "Cazarecompensas de bugs",
+      "joinUs": "Únete a nosotros",
+      "healthStatus": "Estado de servicios",
+      "privacyPolicy": "Políticas de privacidad",
+      "termsAndConditions": "Terminos y condiciones"
+    },
+    "resources": {
+      "title": "Recursos",
+      "scrollDocsURL": "https://docs.scroll.io/es",
+      "blog": "Blog",
+      "documentation": "Documentación",
+      "pressKit": "Kit de Prensa"
+    },
+    "followUs": {
+      "title": "Síguenos"
+    }
+  },
+  "pageNotFound": {
+    "title": "Página no encontrada",
+    "text": "Lo sentimos, pero no pudimos encontrar la página que buscas."
+  },
   "notTranslated": {
     "notTranslated": "Esta página no ha sido traducida aún."
-  }
+  },
+  "This email cannot be added to this list. Please enter a different email address.": "Este correo electrónico no puede ser añadido a la lista. Por favor ingresa uno diferente."
 }

src/components/Footer/Footer.astro

@@ -0,0 +1,10 @@
+---
+import Subscribe from "./Subscribe/Subscribe.tsx"
+import PureFooter from "./PureFooter/PureFooter.tsx"
+import i18next from "i18next"
+---
+
+<div>
+  <Subscribe client:idle lang={i18next.language} />
+  <PureFooter />
+</div>

src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "preact/hooks"
 import { aboutList, mediaList, resourceList } from "../helper.tsx"
 import styles from "./PureFooter.module.css"
+import { t } from "i18next"
 
 const Footer = () => {
   return (
@@ -9,28 +10,28 @@ const Footer = () => {
         <img src="/scroll-white.svg" style={{ width: "80px" }} />
       </a>
       <div className={styles.about}>
-        <p className={styles.title}>About Scroll</p>
+        <p className={styles.title}>{ t("footer.aboutScroll.title") }</p>
         <ul>
           {aboutList.map((item) => (
             <li key={item.name} className={styles.content}>
-              <a href={item.href}>{item.name}</a>
+              <a href={item.href}>{t(item.name)}</a>
             </li>
           ))}
         </ul>
       </div>
       <div className={styles.resource}>
-        <p className={styles.title}>Resources</p>
+        <p className={styles.title}>{ t("footer.resources.title") }</p>
         <ul>
           {resourceList.map((item) => (
             <li key={item.name} className={styles.content}>
-              <a href={item.href}>{item.name}</a>
+              <a href={item.href}>{t(item.name)}</a>
             </li>
           ))}
         </ul>
       </div>
 
       <div className={styles.follow}>
-        <p className={styles.title}>Follow Us</p>
+        <p className={styles.title}>{ t("footer.followUs.title") }</p>
         <div>
           {mediaList.map((item) => (
             <a external href={item.href} key={item.name} target="_blank">
@@ -39,8 +40,6 @@ const Footer = () => {
           ))}
         </div>
       </div>
-
-      <p className={styles.version}>© Version 1.0.0 Scroll Ltd 2023</p>
     </div>
   )
 }

src/components/Footer/PureFooter/PureFooter.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import styles from "./EmailInput.module.css"
 import ArrowSvg from "~/assets/svgs/footer/arrow-right.svg?react"
 import { clsx } from "~/lib"
+import { t } from "i18next"
 
 const EmailInput = (props) => {
   const { end, onClick, onEnter, ...restProps } = props
@@ -23,7 +24,7 @@ const EmailInput = (props) => {
         <button className={clsx(styles.iconButton, "dark:text-black")} onClick={onClick} disabled={end}>
           <ArrowSvg></ArrowSvg>
         </button>
-        <div className={clsx(styles.success, "dark:text-black", "dark:bg-white")}>Thank you for subscribing!</div>
+        <div className={clsx(styles.success, "dark:text-black", "dark:bg-white")}>{ t("landing.NewsletterCTA.thankYouForSubscribing") }</div>
       </div>
       <input
         placeholder="your email address here"

src/components/Footer/Subscribe/EmailInput.tsx

@@ -3,6 +3,7 @@ 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 i18next, { changeLanguage, t } from "i18next"
 
 import EmailInput from "./EmailInput.tsx"
 import styles from "./Subscribe.module.css"
@@ -14,21 +15,23 @@ const isValidEmail = (email: string): boolean => {
   return emailRegex.test(email)
 }
 
-export default function Subscribe() {
+export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
 
+  i18next.changeLanguage(props.lang)
+
   useEffect(() => {
     setCustomMessage("")
     setEmailValid(isValidEmail(email))
   }, [email])
 
   const handleSubmit = (subscribe) => {
     if (!email) {
-      setCustomMessage("Please insert your email.")
+      setCustomMessage(t("landing.NewsletterCTA.pleaseInsertEmail"))
     } else if (!emailValid) {
-      setCustomMessage("Please use a correct email address.")
+      setCustomMessage(t("landing.NewsletterCTA.correctEmail"))
     } else {
       subscribe({ EMAIL: email })
       setEmail("")
@@ -47,9 +50,9 @@ export default function Subscribe() {
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>Stay up-to-date on the latest Scroll Developer news</div>
+          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
           <div className={styles.subscribeText}>
-            Roadmap updates, virtual and live events, ecosystem opportunities and more
+          { t("landing.NewsletterCTA.text") }
           </div>
         </div>
         <MailchimpSubscribe
@@ -62,11 +65,11 @@ export default function Subscribe() {
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder="your email address here"
+                placeholder= { t("landing.NewsletterCTA.placeholder") }
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}
-              {status === "error" && <div className={styles.errorMessage}>{message}</div>}
+              {status === "error" && <div className={styles.errorMessage}>{t(message)}</div>}
             </div>
           )}
         />

src/components/Footer/Subscribe/Subscribe.tsx

@@ -23,38 +23,38 @@ const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
 
 export const aboutList = [
   {
-    name: "Bug Bounty",
+    name: "footer.aboutScroll.bugBounty",
     href: "https://immunefi.com/bounty/scroll/",
   },
   {
-    name: "Join Us",
+    name: "footer.aboutScroll.joinUs",
     href: "https://jobs.lever.co/ScrollFoundation",
   },
   {
-    name: "Health Status",
+    name: "footer.aboutScroll.healthStatus",
     href: "https://status.scroll.io/",
   },
   {
-    name: "Privacy Policy",
+    name: "footer.aboutScroll.privacyPolicy",
     href: "https://scroll.io/privacy-policy",
   },
   {
-    name: "Terms and Conditions",
+    name: "footer.aboutScroll.termsAndConditions",
     href: "https://scroll.io/terms-and-conditions",
   },
 ]
 
 export const resourceList = [
   {
-    name: "Blog",
+    name: "footer.resources.blog",
     href: "https://scroll.io/blog",
   },
   {
-    name: "Documentation",
+    name: "footer.resources.documentation",
     href: "https://docs.scroll.io/",
   },
   {
-    name: "Press Kit",
+    name: "footer.resources.pressKit",
     href: "https://scrollzkp.notion.site/Scroll-Rebrand-Assets-5bb83465f56f40989c4f772b39ed3a06",
   },
 ]

src/components/Footer/helper.tsx

@@ -76,8 +76,10 @@ const section = frontmatter?.section ?? ""
             </div>
           )
         }
-        <ThemeModeToggle client:only="preact" dark={dark} />
-        <LanguageSelector class="language-selector" />
+        <span class="theme-item">
+          <ThemeModeToggle client:only="preact" dark={dark} />
+        </span>
+        <LanguageSelector class="language-selector" dark={dark} />
         <a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
           <span
             class={clsx(
@@ -113,6 +115,7 @@ const section = frontmatter?.section ?? ""
     padding-top: 7px;
     @apply text-black dark:text-white;
     color: var(--textColor);
+    white-space: nowrap;
   }
   .nav-link:hover {
     @apply text-link;
@@ -243,4 +246,33 @@ const section = frontmatter?.section ?? ""
       grid-template-columns: minmax(230px, 1fr) 5fr;
     }
   }
+
+  /* Very Hacky way to make Spanish not break at narrow screens */
+
+  @media (max-width: 72em) and (min-width: 50em) {
+    .queryResults {
+      grid-template-columns: 1fr !important;
+    }
+
+    .search-item,
+    .github-url {
+      display: none;
+    }
+  }
+
+  @media (max-width: 62em) and (min-width: 50em) {
+    .theme-item {
+      display: none;
+    }
+  }
+
+  @media (max-width: 58em) and (min-width: 50em) {
+    .tools {
+      transform: scale(0.85);
+    }
+
+    .navbar {
+      gap: 25px;
+    }
+  }
 </style>