update

Author: neveler

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

astro.config.ts

@@ -4,6 +4,8 @@ import { defineConfig } from "astro/config";
 import { localeConfig } from "./config/locale";
 import { sidebarConfig } from "./config/sidebar";
 
+import react from "@astrojs/react";
+
 const urlHandler = (url: string) => {
   if (url.endsWith("/")) {
     url += "index.html";
@@ -96,6 +98,7 @@ export default defineConfig({
       favicon: "/favicon.ico",
       credits: true,
     }),
+    react(),
   ],
   build: {
     format: "file",

package.json

@@ -12,10 +12,15 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.6",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/starlight": "^0.37.3",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
     "astro": "^5.6.1",
     "csv-parse": "^6.1.0",
     "qrcode": "^1.5.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "sharp": "^0.34.2",
     "typescript": "^5.9.3"
   },

src/components/react/HitsInfo.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+export type Props = {};
+
+type Data = {
+  today: string;
+  total: string;
+};
+
+const HitsInfo: React.FC<Props> = ({}) => {
+  const [data, setData] = React.useState<Data | null>(null);
+  React.useEffect(() => {
+    const hitsUrl = new URL("https://hits.zkitefly.eu.org");
+    hitsUrl.searchParams.set("tag", window.location.origin + window.location.pathname);
+
+    fetch(hitsUrl)
+      .then(async (response) => {
+        if (response.status !== 200) return;
+
+        const svg = await response.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, "image/svg+xml");
+        const textNode = doc.querySelector("text");
+
+        if (!textNode || !textNode.textContent) return;
+
+        const parts = textNode.textContent.split(" / ");
+        if (parts.length !== 2) return;
+
+        const [total, today] = parts;
+        setData({ total, today });
+      })
+      .catch(() => {
+        // 与原逻辑一致：忽略错误
+      });
+  }, []);
+
+  if (!data) return <></>;
+
+  return (
+    <div className="hits">
+      <strong>访问量</strong> <span title="今日访问">{data.today}</span>
+      {" / "}
+      <span title="总访问">{data.total}</span>
+    </div>
+  );
+};
+
+export default HitsInfo;

src/components/starlight/PageTitle.astro

@@ -1,15 +1,20 @@
 ---
 import DefaultPageTitle from "@astrojs/starlight/components/PageTitle.astro";
+import HitsInfo from "@components/react/HitsInfo";
 
 const { contributors } = Astro.locals.starlightRoute.entry.data;
+const showContributors = Array.isArray(contributors) && contributors.length > 0;
 ---
 
 <DefaultPageTitle />
 
-{
-  Array.isArray(contributors) && contributors.length > 0 && (
-    <p>
-      <strong>{Astro.locals.t("page.contributors")}</strong> {contributors.join(" ")}
-    </p>
-  )
-}
+<div class="info">
+  {
+    showContributors && (
+      <div class="contributors">
+        <strong>{Astro.locals.t("page.contributors")}</strong> {contributors.join(" ")}
+      </div>
+    )
+  }
+  <HitsInfo client:load />
+</div>

tsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "paths": {
       "@components/*": ["./src/components/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   },
   "extends": "astro/tsconfigs/strict",
   "include": [".astro/types.d.ts", "**/*"],