Merge pull request #4 from zhuba-Ahhh/dev

feat: ✨ 动效
zhuba-Ahhh · Aug 25, 2024 · 50adba7 · 50adba7
2 parents a16285e + 112c680
commit 50adba7
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "analyze": "pnpm clean && ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
-    "clean": "rm -rf .next"
+    "clean": "rm -rf .next",
+    "serve": "serve -s out -p 3010"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
@@ -28,6 +29,7 @@
     "next": "14.2.6",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
+    "next-view-transitions": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
@@ -52,4 +54,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/blog/BlogClientComponent.tsx b/src/app/blog/BlogClientComponent.tsx
@@ -124,14 +124,14 @@ export default function BlogList() {
   return (
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-4xl font-bold mb-8 text-center">博客文章</h1>
-      
+
       <BlogSearch
         searchTerm={searchTerm}
         onSearchChange={handleSearch}
         sortOption={sortOption}
         onSortChange={(value: SortOption) => setSortOption(value)}
       />
-      
+
       <TagList
         allTags={allTags}
         selectedTag={selectedTag}
@@ -140,7 +140,7 @@ export default function BlogList() {
         onToggleExpand={() => setIsTagsExpanded(!isTagsExpanded)}
         initialTagCount={INITIAL_TAG_COUNT}
       />
-      
+
       <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
         {isLoading ? (
           Array.from({ length: POSTS_PER_PAGE }).map((_, index) => (
@@ -187,7 +187,7 @@ export default function BlogList() {
           </div>
         )}
       </div>
-      
+
       {filteredPostsMemo.length > 0 && (
         <Pagination
           currentPage={currentPage}

diff --git a/src/app/blog/BlogPostCard.tsx b/src/app/blog/BlogPostCard.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { motion } from "framer-motion";
 import {
   Card,

diff --git a/src/app/blog/[id]/BlogFooter.tsx b/src/app/blog/[id]/BlogFooter.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { Badge, Button } from "@/components/ui";
 import { BlogPost } from "@/data/blogPosts";
 

diff --git a/src/app/blog/[id]/RelatedPosts.tsx b/src/app/blog/[id]/RelatedPosts.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
 import { BlogPost } from "@/data/blogPosts";
 

diff --git a/src/app/blog/[id]/ShareButtons.tsx b/src/app/blog/[id]/ShareButtons.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { FaTwitter, FaFacebook, FaLinkedin } from "react-icons/fa";
 
 interface ShareButtonsProps {

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,8 @@ import Footer from "@/components/Footer";
 
 import { cn } from "@/lib/utils";
 
+import { ViewTransitions } from "next-view-transitions";
+
 import { ThemeProvider } from "next-themes";
 import AnimatedLayout from "@/components/AnimatedLayout";
 
@@ -22,24 +24,26 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh" suppressHydrationWarning className="h-full">
-      <link rel="icon" href="/next.svg" type="image/svg+xml" />
-      <body
-        className={cn(
-          `${inter.className} flex flex-col bg-background font-sans antialiased h-full`,
-          inter.variable
-        )}
-      >
-        <ThemeProvider attribute="class">
-          <Header />
-          <AnimatedLayout>
-            <main className="flex-grow container mx-auto px-4 h-full">
-              {children}
-            </main>
-          </AnimatedLayout>
-          <Footer />
-        </ThemeProvider>
-      </body>
-    </html>
+    <ViewTransitions>
+      <html lang="zh" suppressHydrationWarning className="h-full">
+        <link rel="icon" href="/next.svg" type="image/svg+xml" />
+        <body
+          className={cn(
+            `${inter.className} flex flex-col bg-background font-sans antialiased h-full`,
+            inter.variable
+          )}
+        >
+          <ThemeProvider attribute="class">
+            <Header />
+            <AnimatedLayout>
+              <main className="flex-grow container mx-auto px-4 h-full">
+                {children}
+              </main>
+            </AnimatedLayout>
+            <Footer />
+          </ThemeProvider>
+        </body>
+      </html>
+    </ViewTransitions>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { motion } from "framer-motion";
 import { blogPosts } from "@/data/blogPosts";
 

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { Badge } from "@/components/ui/badge";
 
 export default function Footer() {

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { usePathname } from "next/navigation";
 import ThemeToggle from "./ThemeToggle";
 import { Button } from "@/components/ui/button";

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,9 +6,6 @@ import animate from "tailwindcss-animate";
 const config = {
   darkMode: ["class"],
   content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
   ],
   prefix: "",