fix: 设置star+fork组件为client:load (nacos-group#516)

Tinie13 · Jan 23, 2024 · 2019fce · 2019fce
1 parent cbcf57b
commit 2019fce
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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>
+