refactor: optimized animation

valcosmos · Nov 1, 2024 · 73d803f · 73d803f
1 parent 91050e7
commit 73d803f
Show file tree

Hide file tree

Showing 5 changed files with 418 additions and 343 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,7 @@ import type { AnalyticsConfig } from 'pliny/analytics'
 import type { SearchConfig } from 'pliny/search'
 import BackgroundWrapper from '@/components/BackgroundWrapper'
 
-import { ViewTransitions } from 'next-view-transitions'
+// import { ViewTransitions } from 'next-view-transitions'
 // import process from 'node:process'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
@@ -68,56 +68,56 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   const basePath = process.env.BASE_PATH || ''
 
   return (
-    <ViewTransitions>
-      <html
-        lang={siteMetadata.language}
-        className={`${space_grotesk.variable} scroll-smooth`}
-        suppressHydrationWarning
-      >
-        <link
-          rel="apple-touch-icon"
-          sizes="76x76"
-          href={`${basePath}/static/favicons/apple-touch-icon.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href={`${basePath}/static/favicons/favicon-32x32.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href={`${basePath}/static/favicons/favicon-16x16.png`}
-        />
-        <link rel="manifest" href={`${basePath}/static/favicons/site.webmanifest`} />
-        <link
-          rel="mask-icon"
-          href={`${basePath}/static/favicons/safari-pinned-tab.svg`}
-          color="#5bbad5"
-        />
-        <meta name="msapplication-TileColor" content="#000000" />
-        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
-        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
-        <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
-        <body>
-          <BackgroundWrapper>
-            <section className="relative z-10 pl-[calc(100vw-100%)] text-black antialiased dark:text-white">
-              <ThemeProviders>
-                <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
-                <SectionContainer>
-                  <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
-                    <Header />
-                    <main className="mb-auto">{children}</main>
-                  </SearchProvider>
-                  <Footer />
-                </SectionContainer>
-              </ThemeProviders>
-            </section>
-          </BackgroundWrapper>
-        </body>
-      </html>
-    </ViewTransitions>
+    // <ViewTransitions>
+    <html
+      lang={siteMetadata.language}
+      className={`${space_grotesk.variable} scroll-smooth`}
+      suppressHydrationWarning
+    >
+      <link
+        rel="apple-touch-icon"
+        sizes="76x76"
+        href={`${basePath}/static/favicons/apple-touch-icon.png`}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href={`${basePath}/static/favicons/favicon-32x32.png`}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href={`${basePath}/static/favicons/favicon-16x16.png`}
+      />
+      <link rel="manifest" href={`${basePath}/static/favicons/site.webmanifest`} />
+      <link
+        rel="mask-icon"
+        href={`${basePath}/static/favicons/safari-pinned-tab.svg`}
+        color="#5bbad5"
+      />
+      <meta name="msapplication-TileColor" content="#000000" />
+      <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
+      <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
+      <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
+      <body>
+        <BackgroundWrapper>
+          <section className="relative z-10 pl-[calc(100vw-100%)] text-black antialiased dark:text-white">
+            <ThemeProviders>
+              <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
+              <SectionContainer>
+                <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
+                  <Header />
+                  <main className="mb-auto">{children}</main>
+                </SearchProvider>
+                <Footer />
+              </SectionContainer>
+            </ThemeProviders>
+          </section>
+        </BackgroundWrapper>
+      </body>
+    </html>
+    // </ViewTransitions>
   )
 }
diff --git a/app/tags/[tag]/page.tsx b/app/tags/[tag]/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import Reveal from '@/components/Reveal'
 import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayoutWithTags'
 import { genPageMetadata } from 'app/seo'
@@ -41,5 +42,9 @@ export default async function TagPage({ params }: { params: { tag: string } }) {
   if (filteredPosts.length === 0) {
     return notFound()
   }
-  return <ListLayout posts={filteredPosts} title={title} />
+  return (
+    <Reveal>
+      <ListLayout posts={filteredPosts} title={title} />
+    </Reveal>
+  )
 }
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -1,7 +1,7 @@
 import type { LinkProps } from 'next/link'
 import type { AnchorHTMLAttributes } from 'react'
-// import Link from 'next/link'
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
+// import { Link } from 'next-view-transitions'
 
 function CustomLink({ href, ...rest }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) {
   const isInternalLink = href && href.startsWith('/')

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "blogi",
   "version": "2.2.0",
   "private": true,
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].3",
   "scripts": {
     "start": "next dev",
     "dev": "cross-env INIT_CWD=$PWD next dev",
@@ -24,15 +24,15 @@
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.20",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "contentlayer2": "0.5.1",
+    "contentlayer2": "0.5.3",
     "esbuild": "0.24.0",
-    "framer-motion": "^11.11.10",
+    "framer-motion": "^11.11.11",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-from-html-isomorphic": "^2.0.0",
     "image-size": "1.1.1",
     "next": "14.2.15",
-    "next-contentlayer2": "0.5.1",
+    "next-contentlayer2": "0.5.3",
     "next-themes": "^0.3.0",
     "next-view-transitions": "^0.3.2",
     "pliny": "0.3.2",
@@ -48,19 +48,19 @@
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-github-blockquote-alert": "^1.2.1",
+    "remark-github-blockquote-alert": "^1.3.0",
     "remark-math": "^6.0.0",
     "tailwindcss": "^3.4.14",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@eslint-react/eslint-plugin": "^1.15.0",
+    "@eslint-react/eslint-plugin": "^1.15.2",
     "@svgr/webpack": "^8.1.0",
     "@types/mdx": "^2.0.13",
     "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
     "cross-env": "^7.0.3",
     "eslint": "^9.13.0",
     "eslint-config-next": "14.2.15",