Add ClustrMaps widget using official code

Author: PyyWill

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono, Noto_Serif, PT_Serif } from "next/font/google";
 import "./globals.css";
 import { aboutMe } from "@/data/aboutme";
 import { customMetadata } from "@/data/title-description";
+import { ClustrMapsWidget } from "@/components/clustrmaps-widget";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -45,28 +46,32 @@ export default function RootLayout({
       >
         <main className="">{children}</main>
         <footer className="border-t border-neutral-200 dark:border-neutral-800 bg-[#FFFCF8]">
-          <div className="flex flex-row mx-auto max-w-7xl px-6 py-12 md:flex md:items-start md:justify-between ">
-            <div className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
-              <p>
-                © {new Date().getFullYear()} {aboutMe.name}.
-              </p>
-              {aboutMe.secretDescription && (
-                <p className="text-xs text-neutral-600 dark:text-neutral-400 mt-4">
-                  {aboutMe.secretDescription}
+          <div className="flex flex-col mx-auto max-w-7xl px-6 py-12">
+            <div className="flex flex-row md:flex md:items-start md:justify-between mb-8">
+              <div className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
+                <p>
+                  © {new Date().getFullYear()} {aboutMe.name}.
                 </p>
-              )}
-            </div>
-            <div className="mb-4">
-              <p className="text-sm text-neutral-500 dark:text-neutral-500 justify">
-                Built with{" "}
-                <a
-                  href="https://github.com/tovacinni/research-website-template"
-                  className="underline hover:text-neutral-800 dark:hover:text-neutral-300 transition-colors"
-                >
-                  research-website-template
-                </a>
-              </p>
+                {aboutMe.secretDescription && (
+                  <p className="text-xs text-neutral-600 dark:text-neutral-400 mt-4">
+                    {aboutMe.secretDescription}
+                  </p>
+                )}
+              </div>
+              <div className="mb-4">
+                <p className="text-sm text-neutral-500 dark:text-neutral-500 justify">
+                  Built with{" "}
+                  <a
+                    href="https://github.com/tovacinni/research-website-template"
+                    className="underline hover:text-neutral-800 dark:hover:text-neutral-300 transition-colors"
+                  >
+                    research-website-template
+                  </a>
+                </p>
+              </div>
             </div>
+            {/* ClustrMaps Widget */}
+            <ClustrMapsWidget />
           </div>
         </footer>
       </body>

src/components/clustrmaps-widget.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect } from "react";
+import Script from "next/script";
+
+export function ClustrMapsWidget() {
+  // ClustrMaps 站点 ID
+  const siteId = "wuBlhiVI3f9XcFVumFREQbzFU3WgcWCqwR-bRIOMJOI";
+
+  return (
+    <div className="flex flex-col items-center justify-center mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800">
+      <p className="text-xs text-neutral-500 dark:text-neutral-500 mb-2">
+        访问统计
+      </p>
+      {/* 使用 Next.js Script 组件加载 ClustrMaps 官方脚本 */}
+      <Script
+        id="clustrmaps"
+        src={`//clustrmaps.com/map_v2.js?d=${siteId}`}
+        strategy="afterInteractive"
+      />
+      {/* ClustrMaps 脚本会自动在这里渲染地图 */}
+      <div id="clustrmaps-widget" style={{ minHeight: "100px" }}></div>
+      {/* 备用图片链接（如果 JavaScript 失败） */}
+      <a
+        href="http://www.clustrmaps.com/map/Pyywill.github.io"
+        title="Visit tracker for Pyywill.github.io"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mt-2"
+      >
+        <img
+          src={`//www.clustrmaps.com/map_v2.png?d=${siteId}`}
+          alt="Visit tracker"
+          style={{ maxWidth: "100%", height: "auto" }}
+          loading="lazy"
+        />
+      </a>
+      <p className="text-xs text-neutral-400 dark:text-neutral-600 mt-2">
+        <a
+          href="https://clustrmaps.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-neutral-600 dark:hover:text-neutral-400 transition-colors"
+        >
+          ClustrMaps
+        </a>
+      </p>
+    </div>
+  );
+}
+