Remaining updates from the dopped branch.

public/locales/en/translation.json

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

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/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"),