HBASE-30312 Update website to ReactRouter v8

hbase-website/README.md

@@ -59,9 +59,9 @@ Legacy documentation is preserved for those users who have old bookmarked links
 
 Before you begin, ensure you have the following installed:
 
-- **Node.js version 22** - JavaScript runtime (like the JVM for Java)
+- **Node.js version 24** - JavaScript runtime (like the JVM for Java)
   - Download from [nodejs.org](https://nodejs.org/)
-  - Verify installation: `node --version` (should show v22.12+)
+  - Verify installation: `node --version` (should show v24.18.1+)
 
 - **NPM** - Node Package Manager (like Maven for Java)
   - Comes bundled with Node.js
@@ -254,13 +254,14 @@ The ESLint configuration includes a custom rule (`custom/no-react-router-link`)
 
 #### 1. Install Dependencies
 
-Think of this as `mvn install`:
+Install the exact dependency versions recorded in `package-lock.json`:
 
 ```bash
-npm install
+npm ci
 ```
 
-This downloads all required packages from npm (similar to Maven Central).
+This is the right command when you are working with the existing dependency set. It removes any existing `node_modules/` directory and recreates it from `package-lock.json`, so local installs match CI and Maven site generation.
+Use `npm install` only when you intentionally add, remove, or update dependencies and need to update `package.json` or `package-lock.json`.
 
 #### 2. Generate Developers and Config Data
 
@@ -453,12 +454,13 @@ When you run `mvn site`, the website module automatically:
    - Removes `node_modules/` directory
    - Ensures a fresh build environment
 
-2. **Installs Node.js v22.20.0 and npm 11.6.2** (if not already available)
+2. **Installs Node.js v24.18.1 and npm 11.6.2** (if not already available)
    - Installed to `target/` directory
    - Does not affect your system Node/npm installation
 
-3. **Runs `npm install`** to install all dependencies
-   - Reads from `package.json`
+3. **Runs `npm ci`** to install all dependencies
+   - Reads exact dependency versions from `package-lock.json`
+   - Removes and recreates `node_modules/`
    - Installs to `node_modules/`
 
 4. **Extracts developers data** from the parent `pom.xml`

hbase-website/app/components/docs/layout/docs/index.tsx

@@ -58,7 +58,8 @@ export interface DocsLayoutProps extends BaseLayoutProps {
 }
 
 interface SidebarOptions
-  extends ComponentProps<"aside">,
+  extends
+    ComponentProps<"aside">,
     Pick<ComponentProps<typeof Sidebar>, "defaultOpenLevel" | "prefetch"> {
   enabled?: boolean;
   component?: ReactNode;

hbase-website/app/components/docs/layout/docs/page/client.tsx

@@ -29,8 +29,8 @@ import {
 } from "react";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "fumadocs-core/link";
-import { useI18n } from "fumadocs-ui/contexts/i18n";
 import { useTreeContext, useTreePath } from "fumadocs-ui/contexts/tree";
+import { T } from "@fuma-translate/react";
 import type * as PageTree from "fumadocs-core/page-tree";
 import { usePathname } from "fumadocs-core/framework";
 import { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
@@ -101,7 +101,6 @@ export function PageTOCPopover({ className, children, ...rest }: ComponentProps<
 }
 
 export function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<"button">) {
-  const { text } = useI18n();
   const { open } = use(TocPopoverContext)!;
   const items = useTOCItems();
   const active = useActiveAnchor();
@@ -134,7 +133,7 @@ export function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<"b
             showItem && "pointer-events-none -translate-y-full opacity-0"
           )}
         >
-          {path?.name ?? text.toc}
+          {path?.name ?? <T text="On this page" note="table of contents" />}
         </span>
         <span
           className={cn(
@@ -223,7 +222,6 @@ export function PageLastUpdate({
   date: value,
   ...props
 }: Omit<ComponentProps<"p">, "children"> & { date: Date }) {
-  const { text } = useI18n();
   const [date, setDate] = useState("");
 
   useEffect(() => {
@@ -233,7 +231,7 @@ export function PageLastUpdate({
 
   return (
     <p {...props} className={cn("text-fd-muted-foreground text-sm", props.className)}>
-      {text.lastUpdate} {date}
+      <T text="Last updated on" note="page footer" /> {date}
     </p>
   );
 }
@@ -283,7 +281,6 @@ export function PageFooter({ items, children, className, ...props }: FooterProps
 }
 
 function FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {
-  const { text } = useI18n();
   const Icon = index === 0 ? ChevronLeft : ChevronRight;
 
   return (
@@ -304,7 +301,12 @@ function FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {
         <p>{item.name}</p>
       </div>
       <p className="text-fd-muted-foreground truncate">
-        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}
+        {item.description ??
+          (index === 0 ? (
+            <T text="Previous Page" note="pagination" />
+          ) : (
+            <T text="Next Page" note="pagination" />
+          ))}
       </p>
     </Link>
   );

hbase-website/app/components/docs/layout/docs/page/index.tsx

@@ -19,7 +19,7 @@
 import type { ComponentProps, ReactNode } from "react";
 import { buttonVariants } from "../../../../../ui/button";
 import { Edit, Text } from "lucide-react";
-import { I18nLabel } from "fumadocs-ui/contexts/i18n";
+import { T } from "@fuma-translate/react";
 import {
   type BreadcrumbProps,
   type FooterProps,
@@ -176,7 +176,7 @@ export function DocsPage({
               className="text-fd-muted-foreground inline-flex items-center gap-1.5 text-sm"
             >
               <Text className="size-4" />
-              <I18nLabel label="toc" />
+              <T text="On this page" note="table of contents" />
             </h3>
             <TOCScrollArea>
               {tocOptions.style === "clerk" ? <TocClerk.TOCItems /> : <TocDefault.TOCItems />}
@@ -206,7 +206,7 @@ export function EditOnGitHub(props: ComponentProps<"a">) {
       {props.children ?? (
         <>
           <Edit className="size-3.5" />
-          <I18nLabel label="editOnGithub" />
+          <T text="Edit on GitHub" note="edit page" />
         </>
       )}
     </a>

hbase-website/app/components/docs/layout/language-toggle.tsx

@@ -18,6 +18,7 @@
 
 import type { ComponentProps } from "react";
 import { useI18n } from "fumadocs-ui/contexts/i18n";
+import { T, useTranslations } from "@fuma-translate/react";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover";
 import { buttonVariants } from "../../../ui/button";
 import { cn } from "@/lib/utils";
@@ -26,12 +27,13 @@ export type LanguageSelectProps = ComponentProps<"button">;
 
 export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
   const context = useI18n();
+  const t = useTranslations();
   if (!context.locales) throw new Error("Missing `<I18nProvider />`");
 
   return (
     <Popover>
       <PopoverTrigger
-        aria-label={context.text.chooseLanguage}
+        aria-label={t("Choose a language", { note: "language switcher" })}
         {...props}
         className={cn(
           buttonVariants({
@@ -45,7 +47,7 @@ export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
       </PopoverTrigger>
       <PopoverContent className="flex flex-col overflow-x-hidden p-0">
         <p className="text-fd-muted-foreground mb-1 p-2 text-xs font-medium">
-          {context.text.chooseLanguage}
+          <T text="Choose a language" note="language switcher" />
         </p>
         {context.locales.map((item) => (
           <button

hbase-website/app/components/docs/layout/link-item.tsx

@@ -105,11 +105,7 @@ export interface CustomItemType extends Filterable {
 }
 
 export type LinkItemType =
-  | MainItemType
-  | IconItemType
-  | ButtonItemType
-  | MenuItemType
-  | CustomItemType;
+  MainItemType | IconItemType | ButtonItemType | MenuItemType | CustomItemType;
 
 export function LinkItem({
   ref,

hbase-website/app/components/docs/layout/search-toggle.tsx

@@ -19,7 +19,7 @@
 import type { ComponentProps } from "react";
 import { Search } from "lucide-react";
 import { useSearchContext } from "fumadocs-ui/contexts/search";
-import { useI18n } from "fumadocs-ui/contexts/i18n";
+import { T } from "@fuma-translate/react";
 import { type ButtonProps, buttonVariants } from "../../../ui/button";
 import { cn } from "@/lib/utils";
 
@@ -64,7 +64,6 @@ export function LargeSearchToggle({
   hideIfDisabled?: boolean;
 }) {
   const { enabled, hotKey, setOpenSearch } = useSearchContext();
-  const { text } = useI18n();
   if (hideIfDisabled && !enabled) return null;
 
   return (
@@ -81,7 +80,7 @@ export function LargeSearchToggle({
       }}
     >
       <Search className="size-4" />
-      {text.search}
+      <T text="Search" note="search trigger" />
       <div className="ms-auto inline-flex gap-0.5">
         {hotKey.map((k, i) => (
           <kbd key={i} className="bg-fd-background rounded-md border px-1.5">

hbase-website/app/components/docs/search/create-from-source.ts

@@ -25,7 +25,7 @@ import {
 } from "fumadocs-core/search/server";
 import { PathUtils } from "fumadocs-core/source";
 import type { Language } from "@orama/orama";
-import type { LoaderConfig, LoaderOutput, Page } from "fumadocs-core/source";
+import type { LoaderConfig, LoaderOutput } from "fumadocs-core/source";
 import type { I18nConfig } from "fumadocs-core/i18n";
 import { findPath } from "fumadocs-core/page-tree";
 import type { StructuredData } from "fumadocs-core/mdx-plugins";
@@ -35,12 +35,12 @@ type Awaitable<T> = T | Promise<T>;
 function defaultBuildIndex<C extends LoaderConfig>(
   source: LoaderOutput<C>,
   tag?: (pageUrl: string) => string
-) {
+): (page: C["page"]) => Promise<AdvancedIndex> {
   function isBreadcrumbItem(item: unknown): item is string {
     return typeof item === "string" && item.length > 0;
   }
 
-  return async (page: Page): Promise<AdvancedIndex> => {
+  return async (page) => {
     let breadcrumbs: string[] | undefined;
     let structuredData: StructuredData | undefined;
 
@@ -90,10 +90,9 @@ function defaultBuildIndex<C extends LoaderConfig>(
 interface Options<C extends LoaderConfig> extends Omit<AdvancedOptions, "indexes"> {
   localeMap?: {
     [K in C["i18n"] extends I18nConfig<infer Languages> ? Languages : string]?:
-      | Partial<AdvancedOptions>
-      | Language;
+      Partial<AdvancedOptions> | Language;
   };
-  buildIndex?: (page: Page<C["source"]["pageData"]>) => Awaitable<AdvancedIndex>;
+  buildIndex?: (page: C["page"]) => Awaitable<AdvancedIndex>;
   tag?: (pageUrl: string) => string;
 }
 

hbase-website/app/components/docs/toc/clerk.tsx

@@ -19,13 +19,12 @@
 import * as Primitive from "fumadocs-core/toc";
 import { type ComponentProps, useEffect, useRef, useState } from "react";
 import { TocThumb, useTOCItems } from "./index";
-import { useI18n } from "fumadocs-ui/contexts/i18n";
+import { T } from "@fuma-translate/react";
 import { cn, mergeRefs } from "@/lib/utils";
 
 export function TOCItems({ ref, className, ...props }: ComponentProps<"div">) {
   const containerRef = useRef<HTMLDivElement>(null);
   const items = useTOCItems();
-  const { text } = useI18n();
 
   const [svg, setSvg] = useState<{
     path: string;
@@ -79,7 +78,7 @@ export function TOCItems({ ref, className, ...props }: ComponentProps<"div">) {
   if (items.length === 0)
     return (
       <div className="bg-fd-card text-fd-muted-foreground rounded-lg border p-3 text-xs">
-        {text.tocNoHeadings}
+        <T text="No Headings" note="table of contents" />
       </div>
     );
 

hbase-website/app/components/docs/toc/default.tsx

@@ -16,21 +16,20 @@
 // limitations under the License.
 //
 
-import { useI18n } from "fumadocs-ui/contexts/i18n";
 import { type ComponentProps, useRef } from "react";
 import { TocThumb, useTOCItems } from "./index";
 import * as Primitive from "fumadocs-core/toc";
+import { T } from "@fuma-translate/react";
 import { cn, mergeRefs } from "@/lib/utils";
 
 export function TOCItems({ ref, className, ...props }: ComponentProps<"div">) {
   const containerRef = useRef<HTMLDivElement>(null);
   const items = useTOCItems();
-  const { text } = useI18n();
 
   if (items.length === 0)
     return (
       <div className="bg-fd-card text-fd-muted-foreground rounded-lg border p-3 text-xs">
-        {text.tocNoHeadings}
+        <T text="No Headings" note="table of contents" />
       </div>
     );
 

hbase-website/app/components/docs/toc/index.tsx

@@ -56,7 +56,7 @@ export function TOCScrollArea({ ref, className, ...props }: ComponentProps<"div"
     <div
       ref={mergeRefs(viewRef, ref)}
       className={cn(
-        "relative ms-px min-h-0 overflow-auto mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3 text-sm [scrollbar-width:none]",
+        "relative ms-px min-h-0 [scrollbar-width:none] overflow-auto mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3 text-sm",
         className
       )}
       {...props}

hbase-website/app/components/links.ts

@@ -167,13 +167,7 @@ export const asfLinks: LinkType[] = [
 ];
 
 type DocumentationOptions =
-  | "ref"
-  | "refPdf"
-  | "refPdfOld"
-  | "userApi"
-  | "userApiTest"
-  | "devApi"
-  | "devApiTest";
+  "ref" | "refPdf" | "refPdfOld" | "userApi" | "userApiTest" | "devApi" | "devApiTest";
 
 const documentationOptionLabels: Record<DocumentationOptions, string> = {
   ref: "Reference Guide",

hbase-website/app/pages/_docs/docs/_mdx/(multi-page)/performance.mdx

@@ -64,9 +64,9 @@ Are all the network interfaces functioning correctly? Are you sure? See the Trou
 
 The [CAP Theorem](http://en.wikipedia.org/wiki/CAP_theorem) states that a distributed system can maintain two out of the following three characteristics:
 
-- **_C_**onsistency — all nodes see the same data.
-- **_A_**vailability — every request receives a response about whether it succeeded or failed.
-- **_P_**artition tolerance — the system continues to operate even if some of its components become unavailable to the others.
+- ***C***onsistency — all nodes see the same data.
+- ***A***vailability — every request receives a response about whether it succeeded or failed.
+- ***P***artition tolerance — the system continues to operate even if some of its components become unavailable to the others.
 
 HBase favors consistency and partition tolerance, where a decision has to be made. Coda Hale explains why partition tolerance is so important, in [http://codahale.com/you-cant-sacrifice-partition-tolerance/](http://codahale.com/you-cant-sacrifice-partition-tolerance/).
 

hbase-website/app/pages/_docs/docs/index.tsx

@@ -27,7 +27,7 @@ import {
 } from "@/components/docs/layout/docs/page";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import type * as PageTree from "fumadocs-core/page-tree";
-import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import type { BaseLayoutProps } from "@/components/docs/layout/shared";
 import { useParams } from "react-router";
 import { useEffect } from "react";
 import { getPageTreePeers } from "fumadocs-core/page-tree";

hbase-website/app/root.tsx

@@ -83,7 +83,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <body className="font-base">
         <ThemeProvider defaultTheme="light">
           {children}
-
           <ScrollRestoration />
           <Scripts />
         </ThemeProvider>