优化访问量组件

Author: neveler

src/components/react/HitsInfo.tsx

@@ -2,43 +2,63 @@ import React from "react";
 
 export type Props = {
   tag: string;
-  label: string;
   today: string;
   total: string;
+  ok: string;
+  error: string;
+  loading: string;
 };
 
+type State = "ok" | "error" | "loading";
+
 type Data = {
   today: string;
   total: string;
 };
 
-const HitsInfo: React.FC<Props> = ({ tag, label, today: todayLabel, total: totalLabel }) => {
+const HitsInfo: React.FC<Props> = ({
+  tag,
+  today: todayLabel,
+  total: totalLabel,
+  ok,
+  error,
+  loading,
+}) => {
+  const [state, setState] = React.useState<State>("loading");
   const [data, setData] = React.useState<Data | null>(null);
   React.useEffect(() => {
     const hitsUrl = new URL("https://hits.zkitefly.eu.org");
     hitsUrl.searchParams.set("tag", tag);
 
     fetch(hitsUrl, { method: "HEAD" })
-      .then(async (response) => {
-        if (response.status !== 200) return;
-        const { headers } = response;
-        const total = headers.get("X-Total-Hits");
-        const today = headers.get("X-Today-Hits");
-        if (total !== null && today !== null) {
-          setData({ total, today });
+      .then((response) => {
+        if (response.status === 200) {
+          const { headers } = response;
+          const total = headers.get("X-Total-Hits");
+          const today = headers.get("X-Today-Hits");
+          if (total !== null && today !== null) {
+            setData({ total, today });
+            setState("ok");
+            return;
+          }
         }
+        setState("error");
       })
-      .catch(() => {});
+      .catch(() => {
+        setState("error");
+      });
   }, []);
 
-  if (!data) return <></>;
+  if (data === null) {
+    return <>{state === "ok" ? ok : state === "error" ? error : loading}</>;
+  }
 
   return (
-    <div className="hits">
-      <strong>{label}</strong> <span title={todayLabel}>{data.today}</span>
+    <>
+      <span title={todayLabel}>{data.today}</span>
       {" / "}
       <span title={totalLabel}>{data.total}</span>
-    </div>
+    </>
   );
 };
 

src/components/starlight/PageTitle.astro

@@ -35,20 +35,25 @@ const clientVars = autoRedirect ?? { delay: 0, href: "" };
 <DefaultPageTitle />
 
 <div class="info">
+  <div class="hits">
+    <strong>{Astro.locals.t("page.hits.label")}</strong>
+    <HitsInfo
+      tag={tag}
+      today={Astro.locals.t("page.hits.today")}
+      total={Astro.locals.t("page.hits.total")}
+      ok={Astro.locals.t("page.hits.ok")}
+      error={Astro.locals.t("page.hits.error")}
+      loading={Astro.locals.t("page.hits.loading")}
+      client:only="react"
+    />
+  </div>
   {
     showContributors && (
       <div class="contributors">
         <strong>{Astro.locals.t("page.contributors")}</strong> {contributors.join(" ")}
       </div>
     )
   }
-  <HitsInfo
-    tag={tag}
-    label={Astro.locals.t("page.hits.label")}
-    today={Astro.locals.t("page.hits.today")}
-    total={Astro.locals.t("page.hits.total")}
-    client:only="react"
-  />
 </div>
 
 <script is:inline define:vars={clientVars}>

src/content.config.ts

@@ -37,6 +37,9 @@ export const collections = {
         "page.hits.label": z.string(),
         "page.hits.today": z.string(),
         "page.hits.total": z.string(),
+        "page.hits.ok": z.string(),
+        "page.hits.error": z.string(),
+        "page.hits.loading": z.string(),
       }),
     }),
   }),

src/content/i18n/en.json

@@ -30,5 +30,8 @@
   "page.contributors": "Contributors",
   "page.hits.label": "Visits",
   "page.hits.today": "Today Visits",
-  "page.hits.total": "Total Visits"
+  "page.hits.total": "Total Visits",
+  "page.hits.ok": "Data retrieved successfully",
+  "page.hits.error": "Failed to retrieve data",
+  "page.hits.loading": "Fetching data"
 }

src/content/i18n/zh-Hans.json

@@ -30,5 +30,8 @@
   "page.contributors": "贡献者",
   "page.hits.label": "访问量",
   "page.hits.today": "今日访问",
-  "page.hits.total": "总访问"
+  "page.hits.total": "总访问",
+  "page.hits.ok": "获取数据成功",
+  "page.hits.error": "获取数据失败",
+  "page.hits.loading": "正在获取数据"
 }

src/content/i18n/zh-Hant.json

@@ -30,5 +30,8 @@
   "page.contributors": "貢獻者",
   "page.hits.label": "訪問量",
   "page.hits.today": "今日訪問",
-  "page.hits.total": "總訪問"
+  "page.hits.total": "總訪問",
+  "page.hits.ok": "取得資料成功",
+  "page.hits.error": "取得資料失敗",
+  "page.hits.loading": "正在取得資料"
 }