feat: implement ScrollToTop component and update layout and fix README categories typo

Author: niexia

README.md

@@ -32,7 +32,7 @@ bun dev
 - [x] Add Header navigation
 - [x] Add posts reading time
 - [x] Add Mobile responsive
-- [x] Add categories / tags
+- [x] Add categories / tag
 - [ ] Add search
 - [ ] Add comment system
 - [x] Add dark mode

app/components/NavBar.tsx

@@ -5,21 +5,9 @@ import Image from "next/image";
 import { ThemeToggle } from "./ThemeToggle";
 
 const NavBar = () => {
-  const toTop = () => {
-    return window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
   return (
     <header>
       <Link href="/" className="absolute"><Image src="/logo.png" width={32} height={32} alt="logo" /></Link>
-      <button title="scroll to top"
-        className="fixed bottom-8 right-8 rounded-full p-1 shadow-lg shadow-zinc-950/50 hover:bg-zinc-800 transition-colors duration-200"
-        onClick={toTop}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M15 11.25l-3-3-3 3" />
-        </svg>
-      </button>
       <nav className="grid grid-cols-[auto_max-content] gap-4 w-full py-2">
         <div></div>
         <div className="grid grid-cols-[repeat(7,auto)] gap-4">

app/components/ScrollToTop.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useEffect, useState } from "react";
+
+function ScrollToTop() {
+  const [showToTop, setShowToTop] = useState(false);
+
+  const toTop = () => {
+    return window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    const checkScrollable = () => document.documentElement.scrollHeight > window.innerHeight;
+    const onScroll = () => {
+      const scrolledDown = window.scrollY > 100; // only show after user scrolled a bit
+      setShowToTop(checkScrollable() && scrolledDown);
+    };
+    const onResize = () => {
+      if (!checkScrollable()) setShowToTop(false);
+      else onScroll();
+    };
+
+    window.addEventListener('scroll', onScroll);
+    window.addEventListener('resize', onResize);
+    // initial check
+    onResize();
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  return (
+  <>
+    {showToTop && (
+      <button title="scroll to top"
+        className="fixed bottom-8 right-8 rounded-full p-1 shadow-lg hover:cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
+        onClick={toTop}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 11.25l-3-3-3 3" />
+        </svg>
+      </button>
+    )}
+  </>
+  )
+}
+
+export { ScrollToTop }

app/layout.tsx

@@ -4,6 +4,7 @@ import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import "./globals.css";
 import { NavBar } from "./components/NavBar";
+import { ScrollToTop } from "./components/ScrollToTop";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -20,11 +21,11 @@ export const metadata: Metadata = {
     default: "杨金 (Yang Jin)",
     template: "%s | Yang Jin",
   },
-  description: "杨金的个人博客，分享关于生活、技术和阅读的见解 | Yang Jin's personal blog, sharing insights on life, technology, and reading.",
+  description: "杨金的个人博客，分享生活、技术和阅读 | Yang Jin's personal blog, sharing insights on life, technology, and reading.",
   keywords: ["杨金", "Yang Jin", "前端工程师", "个人博客", "技术分享", "Front-end Engineer", "Personal Blog", "Technology"],
   openGraph: {
     title: "杨金 (Yang Jin)'s Blog",
-    description: "杨金的个人博客，分享关于生活、技术和阅读的见解 | Yang Jin's personal blog, sharing insights on life, technology, and reading.",
+    description: "杨金的个人博客，分享生活、技术和阅读 | Yang Jin's personal blog, sharing insights on life, technology, and reading.",
     url: "https://yangjin.dev",
     siteName: "杨金 (Yang Jin)'s Blog",
     images: [
@@ -98,6 +99,7 @@ function Footer() {
           </a>
         ))}
       </div>
+      <ScrollToTop />
     </footer>
   );
 }

app/page.mdx

@@ -1,6 +1,6 @@
 <img src="/avatar.jpg" className='mt-10 rounded-full' alt="avatar" width={50} height={50}/>
 
-### Yang Jin
+### About Me
 This is my portfolio, blog, and personal website where I share insights about life, technology, and reading.
 
 👋 Hello! I'm Yang Jin(杨金), a front-end engineer based in Shenzhen. I'm excited to share my professional journey and experiences here. Currently, I work on the TikTok Ads Interface team.

app/posts/think/elon-musk/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: '🚀 《埃隆·马斯克传》阅读笔记',
   description: '《埃隆·马斯克传》是《乔布斯传》作者沃尔特·艾萨克森的新作，记录了马斯克在电动车、太空、AI、能源等领域的多线作战。',
-  tags: ['思考', '马斯克', '阅读笔记'],
+  tag: ['思考', '马斯克', '阅读笔记'],
   date: '2025-10-17',
   duration: '10 min',
 }