From 2019fce3344cd5440faa7e57d7badac2dbd03d0d Mon Sep 17 00:00:00 2001
From: shonen7 <83808926@qq.com>
Date: Tue, 23 Jan 2024 16:00:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BE=E7=BD=AEstar+fork=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=BAclient:load=20(#516)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/CommunityMenu.astro         |  2 +-
 src/components/home/HomeIntroduce.astro       | 32 ++---------------
 src/components/home/StarAndFork.astro         | 35 +++++++++++++++++++
 3 files changed, 38 insertions(+), 31 deletions(-)
 create mode 100644 src/components/home/StarAndFork.astro

diff --git a/src/components/common/Header/CommunityMenu.astro b/src/components/common/Header/CommunityMenu.astro
index f0bebf8c1c1..090c6a70091 100644
--- a/src/components/common/Header/CommunityMenu.astro
+++ b/src/components/common/Header/CommunityMenu.astro
@@ -225,7 +225,7 @@ const blogImgs = [
             <span class="ml-2 mt-1 text-sm text-gray-02">{t("commmon.header.contact.git")}</span>
           </a>
 
-          <div class="mr-16 hoverable">
+          <div class="mr-16 hoverable relative">
             <img
               class="tooltip hidden w-40 absolute bottom-9"
               src="https://img.alicdn.com/imgextra/i4/O1CN01ivNLl61l6i93SDfcz_!!6000000004770-0-tps-854-1102.jpg"
diff --git a/src/components/home/HomeIntroduce.astro b/src/components/home/HomeIntroduce.astro
index 1ceb3dc3e4b..e361704496c 100644
--- a/src/components/home/HomeIntroduce.astro
+++ b/src/components/home/HomeIntroduce.astro
@@ -1,19 +1,12 @@
 ---
 import { useTranslations, isChinese } from "@i18n/util";
-import Star from "../icon/Star.astro";
-import Fork from "../icon/Fork.astro";
+import StarAndFork from "./StarAndFork.astro";
 import UpRight from "../icon/UpRight.astro";
 import Button from '@components/common/Button.astro';
 import HomeBackground from "../home/HomeBackground.astro";
 
 const t = useTranslations(Astro);
 const ifzh = isChinese(Astro);
-
-const data = await fetch("https://api.github.com/repos/alibaba/nacos").then(
-  (r) => r.json(),
-);
-const { stargazers_count: startCount = 0, forks_count: forkCount = 0 } =
-  data || { stargazers_count: 0, forks_count: 0 };
 ---
 
 <home-introduce class="introduce flex flex-col justify-center items-center bg-gray-14">
@@ -27,28 +20,7 @@ const { stargazers_count: startCount = 0, forks_count: forkCount = 0 } =
     >
       {t("home.introduce.title")}
     </div>
-    <div class="shortcut flex">
-      <Button 
-        size="large"
-        class="rounded-3xl mr-4"
-        href="https://github.com/alibaba/nacos"
-        target="_blank"
-      >
-        <Star />
-        <span class="text-[0.875rem] leading-4 ml-2">{startCount}</span>
-      </Button>
-
-      <Button 
-        size="large"
-        type="primary"
-        class="rounded-3xl"
-        href="https://github.com/alibaba/nacos/fork"
-        target="_blank"
-      >
-        <Fork theme="light" />
-        <span class="ml-2">{forkCount}</span>
-      </Button>
-    </div>
+    <StarAndFork client:load/>
     <div class="notes mt-16 text-gray-07 text-xs flex justify-between">
       <div>
         <a class="mr-2.5 text-blue-03" href="https://github.com/alibaba/nacos/releases/tag/2.3.0 " target="_blank">
diff --git a/src/components/home/StarAndFork.astro b/src/components/home/StarAndFork.astro
new file mode 100644
index 00000000000..3a1d8768cca
--- /dev/null
+++ b/src/components/home/StarAndFork.astro
@@ -0,0 +1,35 @@
+---
+import Star from "../icon/Star.astro";
+import Fork from "../icon/Fork.astro";
+import Button from '@components/common/Button.astro';
+
+const data = await fetch("https://api.github.com/repos/alibaba/nacos").then(
+  (r) => r.json()
+);
+const { stargazers_count: startCount = 0, forks_count: forkCount = 0 } =
+  data || { stargazers_count: 0, forks_count: 0 };
+---
+
+<div class="shortcut flex">
+  <Button 
+    size="large"
+    class="rounded-3xl mr-4"
+    href="https://github.com/alibaba/nacos"
+    target="_blank"
+  >
+    <Star />
+    <span class="text-[0.875rem] leading-4 ml-2">{startCount}</span>
+  </Button>
+
+  <Button 
+    size="large"
+    type="primary"
+    class="rounded-3xl"
+    href="https://github.com/alibaba/nacos/fork"
+    target="_blank"
+  >
+    <Fork theme="light" />
+    <span class="ml-2">{forkCount}</span>
+  </Button>
+</div>
+  
\ No newline at end of file