feat: init

zhuba-Ahhh · Aug 22, 2024 · b022da8 · b022da8
1 parent 6bde0e4
commit b022da8
Show file tree

Hide file tree

Showing 10 changed files with 1,117 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -11,8 +11,9 @@
   "dependencies": {
     "framer-motion": "^11.3.29",
     "next": "14.2.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next-themes": "^0.3.0",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,8 @@ import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
+import { ThemeProvider } from "next-themes";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -17,13 +19,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh">
+    <html lang="zh" suppressHydrationWarning>
       <body className={`${inter.className} flex flex-col min-h-screen`}>
-        <Header />
-        <main className="flex-grow container mx-auto px-4 py-8">
-          {children}
-        </main>
-        <Footer />
+        <ThemeProvider attribute="class">
+          <Header />
+          <main className="flex-grow container mx-auto px-4 py-8">
+            {children}
+          </main>
+          <Footer />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,17 +4,17 @@ import { motion } from "framer-motion";
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen text-center bg-gradient-to-br from-primary to-secondary text-white">
+    <div className="flex flex-col items-center justify-center min-h-screen text-center bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white p-4">
       <motion.h1
-        className="text-5xl font-bold mb-6"
+        className="text-5xl font-bold mb-4"
         initial={{ opacity: 0, y: -50 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
+        transition={{ duration: 0.7, ease: "easeOut" }}
       >
         欢迎来到我的博客
       </motion.h1>
       <motion.p
-        className="text-xl mb-8 max-w-2xl"
+        className="text-lg mb-6 max-w-xl"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.3, duration: 0.5 }}
@@ -28,26 +28,34 @@ export default function Home() {
       >
         <Link
           href="/blog"
-          className="bg-white text-primary px-8 py-4 rounded-full text-lg font-semibold hover:bg-opacity-90 transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
+          className="bg-white text-indigo-600 px-8 py-3 rounded-full text-lg font-semibold hover:bg-opacity-90 transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-105"
         >
           探索博客文章
         </Link>
       </motion.div>
       <motion.div
-        className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"
+        className="mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
         initial={{ opacity: 0, y: 50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.9, duration: 0.5 }}
       >
         {["React", "Next.js", "TypeScript"].map((tech, index) => (
           <motion.div
             key={tech}
-            className="bg-white bg-opacity-20 p-6 rounded-lg backdrop-blur-lg"
-            whileHover={{ scale: 1.05 }}
+            className="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-lg cursor-pointer border border-white border-opacity-20"
+            whileHover={{
+              scale: 1.05,
+              backgroundColor: "rgba(255,255,255,0.2)",
+            }}
             whileTap={{ scale: 0.95 }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
           >
-            <h3 className="text-2xl font-semibold mb-2">{tech}</h3>
-            <p className="text-sm">深入探讨{tech}的高级技巧和最佳实践</p>
+            <h3 className="text-2xl font-semibold mb-3">{tech}</h3>
+            <p className="text-sm opacity-80">
+              深入探讨{tech}的高级技巧和最佳实践
+            </p>
           </motion.div>
         ))}
       </motion.div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import ThemeToggle from "./ThemeToggle";
 
 export default function Header() {
   return (
@@ -10,7 +11,7 @@ export default function Header() {
         >
           我的博客
         </Link>
-        <ul className="flex space-x-6 mt-4 md:mt-0">
+        <ul className="flex items-center space-x-6 mt-4 md:mt-0">
           <li>
             <Link
               href="/"
@@ -35,6 +36,9 @@ export default function Header() {
               关于
             </Link>
           </li>
+          <li className="flex items-center">
+            <ThemeToggle />
+          </li>
         </ul>
       </nav>
     </header>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -6,7 +6,7 @@ interface LayoutProps {
 
 export default function Layout({ children }: LayoutProps) {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen text-center bg-gradient-to-br from-primary to-secondary text-white">
+    <div className="flex flex-col items-center justify-center min-h-screen text-center bg-light dark:bg-dark-darker text-dark-darker dark:text-light">
       {children}
     </div>
   );

diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
@@ -0,0 +1,42 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+
+const MoonIcon = () => (
+  <svg viewBox="0 0 1024 1024" className="w-5 h-5">
+    <path
+      d="M608.256 201.728c12.8 5.632 24.576 11.776 36.352 18.432-11.776-7.168-23.552-13.312-36.352-18.432z m72.704 43.008c10.24 7.68 19.968 16.384 29.184 25.088-9.216-9.216-18.944-17.408-29.184-25.088z m120.832 352.768c-4.096 16.384-9.728 32.256-16.384 47.616 6.656-15.36 12.288-31.232 16.384-47.616z m-440.32-160.768c0-120.832 81.408-222.208 193.024-252.928-5.632-1.536-11.776-2.56-17.408-3.584-1.536-0.512-3.584-0.512-5.12-1.024l-10.752-1.536c-3.072-0.512-6.144-1.024-9.216-1.024-2.048 0-3.584-0.512-5.632-0.512-4.608-0.512-9.216-1.024-13.824-1.024h-3.584c-5.12 0-10.24-0.512-15.36-0.512-186.88 0-338.432 151.04-338.432 337.92 0 186.368 151.552 337.92 338.432 337.92 5.12 0 10.24 0 15.872-0.512 1.536 0 3.072 0 4.608-0.512 4.096 0 7.68-0.512 11.264-1.024 1.536 0 3.072-0.512 4.608-0.512 5.12-0.512 10.24-1.024 15.36-2.048h0.512c4.608-0.512 9.728-1.536 14.336-2.56 1.536-0.512 3.072-0.512 4.608-1.024 3.584-1.024 7.168-1.536 10.752-2.56 1.536-0.512 3.072-0.512 4.608-1.024 4.608-1.024 9.728-2.56 14.336-4.096 0.512 0 1.024-0.512 1.536-0.512 4.096-1.536 8.192-2.56 12.288-4.096l4.608-1.536c3.072-1.024 6.656-2.56 9.728-3.584 1.536-0.512 3.072-1.024 4.608-2.048 4.608-2.048 8.704-3.584 13.312-6.144 1.024-0.512 1.536-1.024 2.56-1.024 3.584-1.536 7.168-3.584 10.752-5.632 1.536-1.024 3.072-1.536 4.608-2.56 3.072-1.536 5.632-3.072 8.192-4.608 1.536-1.024 3.072-1.536 4.608-2.56 4.096-2.56 7.68-5.12 11.776-7.68 1.024-0.512 2.048-1.536 3.072-2.048 3.072-2.048 5.632-4.096 8.704-6.144 1.536-1.024 3.072-2.56 4.608-3.584 2.56-2.048 4.608-3.584 7.168-5.632 1.536-1.024 3.072-2.56 4.608-3.584 3.584-3.072 6.656-5.632 10.24-8.704 1.536-1.024 2.56-2.56 4.096-3.584 2.048-2.048 4.608-4.096 6.656-6.144l4.608-4.608c2.048-2.048 3.584-4.096 5.632-6.144 1.536-1.536 3.072-3.072 4.096-4.608 2.56-3.072 5.12-6.144 8.192-9.216 1.536-1.536 3.072-3.584 4.608-5.632 1.536-2.048 3.584-4.096 5.12-6.656 1.536-2.048 2.56-3.584 4.096-5.632l4.608-6.144c1.536-2.048 2.56-3.584 4.096-5.632 2.048-3.072 4.096-6.656 6.144-9.728 1.536-2.048 2.56-4.608 4.096-6.656 1.536-2.048 2.56-4.608 4.096-6.656 1.024-2.048 2.048-4.096 3.584-6.144 1.024-2.048 2.048-4.608 3.584-6.656l3.072-6.144c2.048-4.096 3.584-7.68 5.12-11.776-44.544 34.304-100.352 54.784-160.768 54.784-146.432-0.512-264.704-117.76-264.704-263.168z m276.48-92.16l-88.064 16.384 61.44 64-11.264 87.04 81.408-37.376L762.88 512l-11.264-87.04 61.44-64-88.064-16.384-43.52-76.8-43.52 76.8z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const SunIcon = () => (
+  <svg viewBox="0 0 1024 1024" className="w-5 h-5">
+    <path
+      d="M876.544 502.784l-100.352-99.84V260.608c0-7.168-5.632-12.8-12.8-12.8h-142.848l-100.352-99.84c-5.12-5.12-13.312-5.12-18.432 0L401.92 247.808H260.608c-7.168 0-12.8 5.632-12.8 12.8v141.312L147.456 502.784c-5.12 5.12-5.12 13.312 0 18.432l100.352 99.84v142.336c0 7.168 5.632 12.8 12.8 12.8h141.312l100.864 100.864c5.12 5.12 13.312 5.12 18.432 0l100.864-100.864h142.336c7.168 0 12.8-5.632 12.8-12.8v-142.336l99.84-99.84c4.608-5.12 4.608-13.312-0.512-18.432zM511.488 742.4c-127.488 0-230.4-102.912-230.4-230.4 0-126.976 103.424-230.4 230.4-230.4 127.488 0 230.4 102.912 230.4 230.4 0 126.976-102.912 230.4-230.4 230.4z m0-414.72c-101.888 0-184.32 82.432-184.32 184.32s82.432 184.32 184.32 184.32 184.32-82.432 184.32-184.32-82.432-184.32-184.32-184.32z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <button
+      className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label={theme === "dark" ? "切换到亮色模式" : "切换到暗色模式"}
+    >
+      {theme === "dark" ? <SunIcon /> : <MoonIcon />}
+    </button>
+  );
+}
+
+export default ThemeToggle;
diff --git a/src/data/blogPosts.ts b/src/data/blogPosts.ts
@@ -24,7 +24,7 @@ export const blogPosts: BlogPost[] = [
     title: "Next.js 13新特性解析",
     excerpt: "深入了解Next.js 13带来的革命性变化...",
     content:
-      "Next.js 13引入了许多激动人心的新特性,如App Router、服务器组件、流式渲染等。本文将详细介绍这些新特性的使用方法和优势。我们将探讨App Router如何简化路由管理,服务器组件如何提升性能和SEO,以及流式渲染如何改善大型应用的用户体验。同时,我们还将讨论从Next.js 12迁移到13版本的最佳实践和注意事项。",
+      "Next.js 13引入了许多激动人心的新特性,如App Router、服务器组件、流式渲染等。本文将详细介绍这些新特性的使用方法和优势。我们将探讨App Router��何简化路由管理,服务器组件如何提升性能和SEO,以及流式渲染如何改善大型应用的用户体验。同时,我们还将讨论从Next.js 12迁移到13版本的最佳实践和注意事项。",
     date: "2024-03-20",
     author: "李四",
     tags: ["Next.js", "服务器组件", "性能优化"],
@@ -44,9 +44,140 @@ export const blogPosts: BlogPost[] = [
     title: "TypeScript高级类型技巧",
     excerpt: "掌握TypeScript中的高级类型用法...",
     content:
-      "TypeScript的类型系统非常强大,但也有一定的学习曲线。本文将深入探讨TypeScript中的高级类型技巧,包括条件类型、映射类型、联合类型和交叉类型等。我们将通过实际例子展示这些高级类型的应用,如何使用它们来创建更灵活、更安全的代码。同时,我们还将讨论TypeScript的类型推断机制,以及如何编写和使用自定义类型守卫。",
+      "TypeScript的类型系统非常强大,但也有一定的学习曲线。本文将深入探讨TypeScript中的高级类型技巧,包括条件类型、映射类型、联合类型和交叉类型等。我们将通过实际��子展示这些高级类型的应用,如何使用它们来创建更灵活、更安全的代码。同时,我们还将讨论TypeScript的类型推断机制,以及如何编写和使用自定义类型守卫。",
     date: "2024-03-30",
     author: "赵六",
     tags: ["TypeScript", "类型系统", "前端开发"],
   },
+  {
+    id: 5,
+    title: "深入理解JavaScript异步编程",
+    excerpt: "探索JavaScript中的异步编程模式和最佳实践...",
+    content: `
+# JavaScript异步编程深度解析
+
+JavaScript的异步编程是前端开发中的重要概念。本文将深入探讨各种异步编程模式及其应用。
+
+## 回调函数
+
+回调函数是最基本的异步编程方式:
+
+\`\`\`javascript
+function fetchData(callback) {
+  setTimeout(() => {
+    callback('Data fetched');
+  }, 1000);
+}
+
+fetchData((result) => {
+  console.log(result);
+});
+\`\`\`
+
+## Promise
+
+Promise提供了更优雅的异步处理方式:
+
+\`\`\`javascript
+function fetchData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve('Data fetched');
+    }, 1000);
+  });
+}
+
+fetchData()
+  .then(result => console.log(result))
+  .catch(error => console.error(error));
+\`\`\`
+
+## Async/Await
+
+Async/Await是基于Promise的语法糖,使异步代码更易读:
+
+\`\`\`javascript
+async function getData() {
+  try {
+    const result = await fetchData();
+    console.log(result);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+getData();
+\`\`\`
+
+通过掌握这些异步编程模式,我们可以更好地处理复杂的异步操作,提高代码的可读性和可维护性。
+    `,
+    date: "2024-04-05",
+    author: "陈七",
+    tags: ["JavaScript", "异步编程", "Promise", "Async/Await"],
+  },
+  {
+    id: 6,
+    title: "React性能优化实战指南",
+    excerpt: "学习React应用的高级性能优化技巧...",
+    content: `
+# React性能优化实战指南
+
+在构建大型React应用时,性能优化至关重要。本文将介绍一些实用的React性能优化技巧。
+
+## 使用React.memo
+
+React.memo可以帮助我们避免不必要的重渲染:
+
+\`\`\`jsx
+const MyComponent = React.memo(function MyComponent(props) {
+  /* 渲染使用到的props */
+});
+\`\`\`
+
+## 使用useMemo和useCallback
+
+useMemo和useCallback可以帮助我们缓存计算结果和回调函数:
+
+\`\`\`jsx
+const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
+
+const memoizedCallback = useCallback(
+  () => {
+    doSomething(a, b);
+  },
+  [a, b],
+);
+\`\`\`
+
+## 虚拟化长列表
+
+对于长列表,我们可以使用虚拟化技术来提高性能:
+
+\`\`\`jsx
+import { FixedSizeList as List } from 'react-window';
+
+function Row({ index, style }) {
+  return <div style={style}>Row {index}</div>;
+}
+
+function Example() {
+  return (
+    <List
+      height={150}
+      itemCount={1000}
+      itemSize={35}
+      width={300}
+    >
+      {Row}
+    </List>
+  );
+}
+\`\`\`
+
+通过应用这些优化技巧,我们可以显著提升React应用的性能,为用户提供更流畅的体验。
+    `,
+    date: "2024-04-10",
+    author: "林八",
+    tags: ["React", "性能优化", "虚拟列表"],
+  },
 ];
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -9,12 +9,34 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        primary: "#3490dc",
-        secondary: "#ffed4a",
-        dark: "#2d3748",
+        primary: {
+          DEFAULT: "#1890ff",
+          light: "#40a9ff",
+          dark: "#096dd9",
+        },
+        secondary: {
+          DEFAULT: "#36CFC9",
+          light: "#17E4DC",
+          dark: "#289490",
+        },
+        dark: {
+          DEFAULT: "#001529",
+          light: "#002140",
+          darker: "#000c17",
+        },
+        light: "#f0f2f5",
+        accent: "#f5222d",
+        warning: "#faad14",
+        info: "#13c2c2",
+        gray: {
+          DEFAULT: "#d9d9d9",
+          light: "#f5f5f5",
+          dark: "#8c8c8c",
+        },
       },
     },
   },
   plugins: [],
 };
+
 export default config;