Spanish Translation and English Scroll Docs Fixes (Remake)

astro-i18next.config.ts

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

public/locales/en/translation.json

@@ -1,4 +1,15 @@
 {
+  "rightSidebar": {
+    "onThisPage": "On This Page",
+    "more": "More",
+    "editThisPage": "Edit this page",
+    "joinOurCommunity": "Join our community",
+    "feedback": "Feedback"
+  },
+  "ui": {
+    "whatsNext": "What's Next",
+    "readMore": "Read More"
+  },
   "landing": {
     "test": "test",
     "search": {

public/locales/es/translation.json

@@ -1,5 +1,148 @@
 {
+  "rightSidebar": {
+    "onThisPage": "En esta página",
+    "more": "Más",
+    "editThisPage": "Editar esta página",
+    "joinOurCommunity": "Únete a nuestro Discord",
+    "feedback": "Feedback"
+  },
+  "ui": {
+    "whatsNext": "¿Qué sigue?",
+    "readMore": "Leer Más"
+  },
+  "landing": {
+    "test": "test",
+    "search": {
+      "title": "Bienvenido a la Documentación de Scroll",
+      "placeholder": "Buscar Documentación de Scroll..."
+    },
+    "newUserCTA": {
+      "title": "Nuevo en Scroll y los ZK Rollups?",
+      "description": "Aprende lo básico en la Guía de Inicio"
+    },
+    "resourcesCTA": {
+      "title": "Recursos Útiles"
+    },
+    "nodesCTA": {
+      "title": "Necesitas correr tu propio Nodo de Scroll?",
+      "description": "Consulte la Guía del Operador de Nodos para obtener más información sobre la puesta en marcha y el mantenimiento de los Nodos de Scroll.",
+      "buttonText": "Guía del Operador de Nodos"
+    },
+    "TutorialsCTA": {
+      "title": "Ver tutoriales",
+      "description": "Obtenga más información sobre la tecnología que estamos construyendo. Subimos constantemente nuevos vídeos a nuestro canal de YouTube.",
+      "buttonText": "Ver tutoriales"
+    },
+    "LinksCTA": {
+      "card1": {
+        "title": "¿Necesita ayuda para integrarse?",
+        "description": "Talk to an expert once we TODO: a url"
+      },
+      "card2": {
+        "title": "Discord",
+        "description": "Únete a nuestra Comunidad"
+      },
+      "card3": {
+        "title": "TODO: Discourse",
+        "description": "Really, join the community"
+      }
+    },
+    "NewsletterCTA": {
+      "title": "Stay updated on the latest Scroll news",
+      "placeholder": "Enter your email address",
+      "buttonText": "Sign up"
+    }
+  },
+  "sidebar": {
+    "gettingStarted": {
+      "gettingStarted": "Primeros Pasos",
+      "overview": "Vista General",
+      "scrollSepoliaTestnet": "Scroll Sepolia Testnet",
+      "userGuide": "Guía de Usuario",
+      "setup": "Configuración",
+      "faucet": "Faucet",
+      "bridge": "Bridge",
+      "transferTokens": "Transferencia de Tokens",
+      "commonErrors": "Errores Comunes",
+      "rollupExplorer": "Rollup Explorer",
+      "scrollSepoliaBlockExplorer": "Scroll Sepolia Explorer",
+      "sepoliaBlockExplorer": "Sepolia Explorer",
+      "community": "Comunidad",
+      "discord": "Discord",
+      "communityForum": "Forum de la Comunidad"
+    },
+    "developers": {
+      "developers": "Desarrolladores",
+      "buildingOnScroll": "Construyendo en Scroll",
+      "developerQuickstart": "Inicio rápido para Desarrolladores",
+      "verifyingSmartContracts": "Verificando Smart Contracts",
+      "scrollContracts": "Contratos de Scroll",
+      "ethereumAndScrollDifferences": "Diferencias entre Scroll y Ethereum",
+      "l1AndL2Bridging": "L1 y L2 Bridging",
+      "ethAndErc20TokenBridge": "ETH y ERC20 Token Bridge",
+      "erc721NftBridge": "ERC721 NFT Bridge",
+      "erc1155TokenBridge": "ERC1155 Token Bridge",
+      "theScrollMessenger": "El Scroll Messenger",
+      "transactionFeesOnScroll": "Comisiones de Transacciones en Scroll",
+      "l2Fee": "Comisión L2",
+      "l1Fee": "Comisión L1",
+      "gasOracle": "Gas Oracle",
+      "future": "Futuro",
+      "guides": "Guías",
+      "contractDeploymentTutorial": "Tutorial de Despliegue de Contratos",
+      "crossChainInteraction": "Interacción Cross-chain del Scroll Messenger",
+      "bridgingERC20TokenThroughCustomGateway": "Bridging de un ERC20 a través de una Gateway Personalizada",
+      "bridgingERC721NftThroughCustomGateway": "Bridging de un ERC721 NFT a través de una Gateway Personalizada",
+      "bridgingERC1155ThroughCustomGateway": "Bridging de un ERC1155 a través de una Gateway Personalizada",
+      "estimatingGasAndTxFees": "Estimación de las Tarifas de Gas y Tx",
+      "resources": "Recursos",
+      "rollupExplorer": "Rollup Explorer",
+      "scrollSepoliaBlockExplorer": "Scroll Sepolia Explorer",
+      "sepoliaBlockExplorer": "Sepolia Explorer"
+    },
+    "technology": {
+      "introduction": "Introducción",
+      "principles": "Principios",
+      "scrollArchitecture": "Arquitectura de Scroll",
+      "overview": "Vista General",
+
+      "scrollChain": "Scroll Chain",
+      "accountsAndState": "Cuentas y Estado",
+      "blocks": "Bloques",
+      "transactions": "Transacciones",
+      "rollupProcess": "Proceso del Rollup",
+      "evmDifferencesFromEthereum": "Diferencias de EVM respecto a Ethereum",
+
+      "bridge": "Bridge",
+      "crossDomainMessaging": "Cross-Domain Messaging",
+      "depositGateways": "Gateways de Depósito",
+      "withdrawGateways": "Gateways de Retiro",
+
+      "sequencer": "Secuenciador",
+      "executionNode": "Nodo de Ejecución",
+      "rollupNode": "Nodo Rollup",
+      "zkTrie": "zkTrie",
+
+      "zkevm": "zkEVM",
+      "introToZkevm": "Intro a la zkEVM",
+      "zkevmOverview": "Vista General de la zkEVM",
+      "bridgeOverview": "Vista General del Bridge",
+      "prover": "Prover",
+      "proofGeneration": "Proof Generation",
+      "cpuProverRepo": "CPU Prover Repo"
+    },
+    "learn": {
+      "ethereumAndProtocols": "Ethereum y Protocolos",
+      "theScalabilityProblem": "El Problema de la Escalabilidad",
+      "introToRollups": "Intro a los Rollups",
+      "zeroKnowledge": "Zero Knowledge",
+      "introToZeroKnowledge": "Intro a la Zero Knowledge",
+      "polynomialCommitmentSchemes": "Esquemas de Compromiso Polinómicos",
+      "kzgCommitmentScheme": "Esquema de Compromiso KZG",
+      "additionalResources": "Recursos Adicionales"
+    }
+  },
   "notTranslated": {
-    "notTranslated": "Esta página aún no ha sido traducida."
+    "notTranslated": "Esta página no ha sido traducida aún."
   }
 }

src/components/NavCard.astro

@@ -1,4 +1,5 @@
 ---
+import i18next, { t } from "i18next"
 export type Props = {
   icon: string
   name: string
@@ -17,7 +18,7 @@ const { icon, name, content, link } = Astro.props as Props
   <span class="navs-item-title">{name}</span>
   <span class="navs-item-content">{content}</span>
   <a class="navs-item-link" href={link}>
-    Read more
+    {t("ui.readMore")}
     <span class="link-icon"></span>
   </a>
 </div>

src/components/PageContent/WhatsNext.astro

@@ -1,10 +1,11 @@
 ---
+import i18next, { t } from "i18next"
 export type Props = { content: Record<string, string> }
 const { content = {} } = Astro.props as Props
 ---
 
 <section>
-  <h4>Whats Next</h4>
+  <h4>{t("ui.whatsNext")}</h4>
   <ul class="whats-next">
     {
       Object.keys(content).map((key) => (

src/components/RightSidebar/MoreMenu.astro

@@ -1,10 +1,11 @@
 ---
+import i18next, { t } from "i18next"
 import * as CONFIG from "../../config"
 const { editHref } = Astro.props
 const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref
 ---
 
-{showMoreSection && <h2 class="heading">More</h2>}
+{showMoreSection && <h2 class="heading">{t("rightSidebar.more")}</h2>}
 <ul>
   {
     editHref && (
@@ -27,7 +28,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref
               </clipPath>
             </defs>
           </svg>
-          <span>Edit this page</span>
+          <span>{t("rightSidebar.editThisPage")}</span>
         </a>
       </li>
     )
@@ -56,7 +57,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref
               fill="currentColor"
             />
           </svg>
-          <span>Join our community</span>
+          <span>{t("rightSidebar.joinOurCommunity")}</span>
         </a>
       </li>
     )

src/components/RightSidebar/RightSidebar.astro

@@ -1,4 +1,5 @@
 ---
+import i18next, { t } from "i18next"
 import TableOfContents from "./TableOfContents"
 import MoreMenu from "./MoreMenu.astro"
 import { Feedback } from "../PageContent/Feedback"
@@ -15,7 +16,7 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
     </div>
 
     <div>
-      <h2 class="heading feedback-title">Feedback</h2>
+      <h2 class="heading feedback-title">{t("rightSidebar.feedback")}</h2>
       <div class="feedback-wrapper">
         <Feedback client:idle />
       </div>

src/components/RightSidebar/TableOfContents/index.tsx

@@ -3,6 +3,8 @@ import { useStore } from "@nanostores/preact"
 import type { FunctionalComponent } from "preact"
 import { useState, useEffect, useRef } from "preact/hooks"
 import { shouldUpdateToc } from "./tocStore"
+import i18next, { t } from "i18next"
+
 export interface Heading {
   depth: number
   text: string
@@ -79,7 +81,7 @@ const TableOfContents: FunctionalComponent<{
 
   return (
     <>
-      <h2 className="heading">On this page</h2>
+      <h2 className="heading">{t("rightSidebar.onThisPage")}</h2>
       <ul ref={tableOfContents}>
         {headings
           .filter(({ depth }) => depth > 1 && depth < 4)

src/config/menu.ts

@@ -27,4 +27,14 @@ export const MENU: MenuItems = {
     { text: "技术", link: "/zh/technology", section: "technology" },
     { text: "学习", link: "/zh/learn", section: "learn" },
   ],
+  es: [
+    {
+      text: "¿Cómo empezar?",
+      link: "/es/getting-started/overview",
+      section: "gettingStarted",
+    },
+    { text: "Desarrolladores", link: "/es/developers", section: "developers" },
+    { text: "Tecnología", link: "/es/technology", section: "technology" },
+    { text: "Aprende", link: "/es/learn", section: "learn" },
+  ],
 }

src/config/sidebar.ts

@@ -62,7 +62,7 @@ export const getSidebar = () => {
     ],
     developers: [
       {
-        section: "Developers",
+        section: t("sidebar.developers.developers"),
         contents: [
           { title: t("sidebar.developers.buildingOnScroll"), url: formatUrl("developers") },
           { title: t("sidebar.developers.developerQuickstart"), url: formatUrl("developers/developer-quickstart") },
@@ -125,7 +125,7 @@ export const getSidebar = () => {
         ],
       },
       {
-        section: "Guides",
+        section: t("sidebar.developers.guides"),
         contents: [
           {
             title: t("sidebar.developers.contractDeploymentTutorial"),
@@ -154,7 +154,7 @@ export const getSidebar = () => {
         ],
       },
       {
-        section: "Resources",
+        section: t("sidebar.developers.resources"),
         contents: [
           { title: t("sidebar.developers.rollupExplorer"), url: "https://scroll.io/rollupscan" },
           { title: t("sidebar.developers.scrollSepoliaBlockExplorer"), url: "https://sepolia-blockscout.scroll.io/" },
@@ -164,8 +164,8 @@ export const getSidebar = () => {
     ],
     technology: [
       {
-        section: "Overview",
-        contents: [{ title: t("Scroll Architecture"), url: formatUrl("technology") }],
+        section: t("sidebar.technology.overview"),
+        contents: [{ title: t("sidebar.technology.scrollArchitecture"), url: formatUrl("technology") }],
       },
       {
         section: t("sidebar.technology.scrollChain"),