From 11febfbd275462fbf44cd3557162aaeedcc115bf Mon Sep 17 00:00:00 2001
From: anshumancanrock <anshu.1239.as@gmail.com>
Date: Wed, 5 Aug 2026 10:28:53 +0530
Subject: [PATCH] fix: hoist useBaseUrl calls to follow Rules of Hooks

Signed-off-by: anshumancanrock <anshu.1239.as@gmail.com>
---
 src/pages/case-studies.js              |  5 ++--
 src/pages/index.js                     | 38 ++++++++++++++------------
 src/theme/BlogPostItem/Header/index.js |  7 ++---
 src/theme/Footer/index.js              | 23 ++++++++--------
 4 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/pages/case-studies.js b/src/pages/case-studies.js
index 2538323a3..2e5465ba0 100644
--- a/src/pages/case-studies.js
+++ b/src/pages/case-studies.js
@@ -1,6 +1,6 @@
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import useBaseUrl from "@docusaurus/useBaseUrl";
+import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
 import caseStudies from "../data/caseStudies";
 import styles from "./case-studies.module.css";
 
@@ -16,6 +16,7 @@ function formatDate(date, locale) {
 
 export default function CaseStudiesPage() {
   const { i18n } = useDocusaurusContext();
+  const { withBaseUrl } = useBaseUrlUtils();
   const isZh = i18n.currentLocale === "zh";
   const t = (item) => (isZh ? item.zh : item.en);
 
@@ -48,7 +49,7 @@ export default function CaseStudiesPage() {
                   <div className={styles.logoBox}>
                     <img
                       className={styles.logo}
-                      src={useBaseUrl(logo)}
+                      src={withBaseUrl(logo)}
                       alt={displayName}
                       loading="lazy"
                     />
diff --git a/src/pages/index.js b/src/pages/index.js
index ce7866f4f..8e17945c2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useCallback, useState } from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
-import useBaseUrl from "@docusaurus/useBaseUrl";
+import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -373,14 +373,15 @@ function RuntimeLaneCard({ lane, locale }) {
 
 export default function Home() {
   const { i18n } = useDocusaurusContext();
+  const { withBaseUrl } = useBaseUrlUtils();
   const isZh = i18n.currentLocale === "zh";
   const [starsCount, setStarsCount] = useState(3100);
   // Static: Docker Hub's API sends no CORS header, so it cannot be read from the browser.
   const dockerPulls = 325000;
-  const kubernetesLogo = useBaseUrl("img/kubernetes-logo.svg");
-  const hamiLogo = useBaseUrl("img/hami-graph-color.svg");
-  const hamiHorizontalLogoLight = useBaseUrl("img/hami-horizontal-color-black.svg");
-  const hamiHorizontalLogoDark = useBaseUrl("img/hami-horizontal-color-white.svg");
+  const kubernetesLogo = withBaseUrl("img/kubernetes-logo.svg");
+  const hamiLogo = withBaseUrl("img/hami-graph-color.svg");
+  const hamiHorizontalLogoLight = withBaseUrl("img/hami-horizontal-color-black.svg");
+  const hamiHorizontalLogoDark = withBaseUrl("img/hami-horizontal-color-white.svg");
   const contributorsCount = useCountUp(500);
   const contributorCountries = useCountUp(27);
   const starsCountDisplay = useCountUp(starsCount);
@@ -494,11 +495,14 @@ export default function Home() {
                 <div className={styles.heroActions}>
                   <Link
                     className="button button--primary button--lg"
-                    to={useBaseUrl("/docs/get-started/deploy-with-helm")}
+                    to={withBaseUrl("/docs/get-started/deploy-with-helm")}
                   >
                     {isZh ? "快速开始" : "Quick Start"}
                   </Link>
-                  <Link className="button button--outline button--lg" to={useBaseUrl("/community")}>
+                  <Link
+                    className="button button--outline button--lg"
+                    to={withBaseUrl("/community")}
+                  >
                     {isZh ? "加入社区" : "Join Community"}
                   </Link>
                 </div>
@@ -521,7 +525,7 @@ export default function Home() {
                           <div key={item.key} className={styles.ecoLogoChip}>
                             {item.logo ? (
                               <img
-                                src={useBaseUrl(item.logo)}
+                                src={withBaseUrl(item.logo)}
                                 alt={pickLocalizedOrRaw(i18n.currentLocale, item.label)}
                               />
                             ) : (
@@ -542,7 +546,7 @@ export default function Home() {
                             {heroSchedulerEcosystem.map((item) => (
                               <div key={item.key} className={styles.ecoLogoChip}>
                                 <img
-                                  src={useBaseUrl(item.logo)}
+                                  src={withBaseUrl(item.logo)}
                                   alt={pickLocalizedOrRaw(i18n.currentLocale, item.label)}
                                 />
                               </div>
@@ -624,13 +628,13 @@ export default function Home() {
                         <div className={styles.observabilityLogoRow}>
                           <div className={styles.ecoLogoChip}>
                             <img
-                              src={useBaseUrl("img/ecosystem/prometheus.svg")}
+                              src={withBaseUrl("img/ecosystem/prometheus.svg")}
                               alt="Prometheus"
                             />
                           </div>
                           <div className={styles.ecoLogoChip}>
                             <img
-                              src={useBaseUrl("img/ecosystem/opentelemetry.svg")}
+                              src={withBaseUrl("img/ecosystem/opentelemetry.svg")}
                               alt="OpenTelemetry"
                             />
                           </div>
@@ -649,7 +653,7 @@ export default function Home() {
                         {heroDeviceEcosystem.map((item) => (
                           <div key={item.key} className={styles.ecoLogoChip}>
                             <img
-                              src={useBaseUrl(item.logo)}
+                              src={withBaseUrl(item.logo)}
                               alt={pickLocalizedOrRaw(i18n.currentLocale, item.label)}
                             />
                           </div>
@@ -672,14 +676,14 @@ export default function Home() {
               <div className={styles.cncfFeatureMedia}>
                 <div className={styles.cncfLogoBox}>
                   <img
-                    src={useBaseUrl("img/cncf-color.svg")}
+                    src={withBaseUrl("img/cncf-color.svg")}
                     alt="CNCF logo"
                     className={styles.cncfFeatureLogoLight}
                   />
                 </div>
                 <div className={styles.cnaiLogoBox}>
                   <img
-                    src={useBaseUrl("img/ecosystem/cnai.svg")}
+                    src={withBaseUrl("img/ecosystem/cnai.svg")}
                     alt="CNAI Landscape logo"
                     className={styles.cnaiLogo}
                   />
@@ -860,7 +864,7 @@ export default function Home() {
                       rel="noopener noreferrer"
                       className="adopter-card-link"
                     >
-                      {vendor.logo && <img src={useBaseUrl(vendor.logo)} alt={vendor.name} />}
+                      {vendor.logo && <img src={withBaseUrl(vendor.logo)} alt={vendor.name} />}
                     </a>
                   </li>
                 ))}
@@ -868,7 +872,7 @@ export default function Home() {
             </div>
             <Link
               className={clsx(styles.inlineLink, styles.supportDocsLink)}
-              to={useBaseUrl("/docs/userguide/device-supported")}
+              to={withBaseUrl("/docs/userguide/device-supported")}
             >
               {isZh ? "查看完整设备支持列表 →" : "View full supported devices list →"}
             </Link>
@@ -1032,7 +1036,7 @@ export default function Home() {
               >
                 {isZh ? "给 HAMi 点个 Star" : "Star HAMi on GitHub"}
               </a>
-              <Link className={clsx("button", "button--outline")} to={useBaseUrl("/community")}>
+              <Link className={clsx("button", "button--outline")} to={withBaseUrl("/community")}>
                 {isZh ? "加入社区" : "Join Community"}
               </Link>
             </div>
diff --git a/src/theme/BlogPostItem/Header/index.js b/src/theme/BlogPostItem/Header/index.js
index 1b746fd7b..fa928157b 100644
--- a/src/theme/BlogPostItem/Header/index.js
+++ b/src/theme/BlogPostItem/Header/index.js
@@ -31,6 +31,7 @@ export default function BlogPostItemHeader() {
   const { metadata, frontMatter, isBlogPostPage } = useBlogPost();
   const { i18n } = useDocusaurusContext();
   const cover = frontMatter.cover;
+  const coverUrl = useBaseUrl(cover || "");
   const fallbackLabel = (
     <Translate
       id="theme.hami.blog.meta.unknownAuthor"
@@ -44,11 +45,7 @@ export default function BlogPostItemHeader() {
     <header>
       {isBlogPostPage && cover && (
         <div className={styles.coverWrap}>
-          <img
-            className={styles.cover}
-            src={useBaseUrl(cover)}
-            alt={frontMatter.title || metadata.title}
-          />
+          <img className={styles.cover} src={coverUrl} alt={frontMatter.title || metadata.title} />
         </div>
       )}
       <BlogPostItemHeaderTitle />
diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js
index c8cbdd474..183e8250d 100644
--- a/src/theme/Footer/index.js
+++ b/src/theme/Footer/index.js
@@ -84,12 +84,12 @@ function Footer() {
   const { i18n } = useDocusaurusContext();
   const [isWechatModalOpen, setIsWechatModalOpen] = useState(false);
   const [isWechatOfficialOpen, setIsWechatOfficialOpen] = useState(false);
-
-  if (!footer) {
-    return null;
-  }
-
-  const { copyright, links, logo, style } = footer;
+  const cncfLogoLight = useBaseUrl("img/cncf-color.svg");
+  const cncfLogoDark = useBaseUrl("img/cncf-white.svg");
+  const wechatGroupQr = useBaseUrl("img/community/wechat-assistant-qr.jpg");
+  const wechatOfficialQr = useBaseUrl("img/community/wechat-official-account-qr.jpg");
+  const cncfLogo = colorMode === "dark" ? cncfLogoDark : cncfLogoLight;
+  const isZh = i18n.currentLocale === "zh";
 
   useEffect(() => {
     if (i18n.currentLocale !== "zh") {
@@ -119,6 +119,11 @@ function Footer() {
     return () => document.removeEventListener("click", onFooterLinkClick, true);
   }, [i18n.currentLocale]);
 
+  if (!footer) {
+    return null;
+  }
+
+  const { copyright, links, logo, style } = footer;
   const zhOnlyLabels = new Set(["WeChat Group", "WeChat Official Account"]);
   const adjustedLinks =
     i18n.currentLocale === "zh"
@@ -167,12 +172,6 @@ function Footer() {
   }));
   const footerLinks =
     iconizedLinks && iconizedLinks.length > 0 ? <FooterLinks links={iconizedLinks} /> : null;
-  const isZh = i18n.currentLocale === "zh";
-  const cncfLogoLight = useBaseUrl("img/cncf-color.svg");
-  const cncfLogoDark = useBaseUrl("img/cncf-white.svg");
-  const cncfLogo = colorMode === "dark" ? cncfLogoDark : cncfLogoLight;
-  const wechatGroupQr = useBaseUrl("img/community/wechat-assistant-qr.jpg");
-  const wechatOfficialQr = useBaseUrl("img/community/wechat-official-account-qr.jpg");
 
   return (
     <>