Upgrade to Next.js 16 with Turbopack and Contentlayer2

- Upgraded Next.js to v16, React to v19 - Migrated from contentlayer to contentlayer2 - Migrated to Turbopack by decoupling Contentlayer from webpack - Updated all page components to handle async params (Next.js 15+ breaking change) - Changed package.json to type: module and renamed config files to .cjs - Updated README with current tech stack and article creation instructions - Fixed tag encoding issue (removed double encoding) - All security vulnerabilities resolved (npm audit: 0 vulnerabilities)
2025-11-19 22:43:14 +08:00
parent 4c08413936
commit a4db9688b6
11 changed files with 1435 additions and 427 deletions
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -0,0 +1,126 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./content/**/*.{md,mdx}"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          soft: 'var(--color-accent-soft)',
+          textLight: 'var(--color-accent-text-light)',
+          textDark: 'var(--color-accent-text-dark)'
+        }
+      },
+      fontFamily: {
+        'serif-eng': ['var(--font-serif-eng)', 'serif'],
+        'serif-cn': ['"Songti SC"', '"Noto Serif TC"', '"SimSun"', 'serif'],
+      },
+      transitionTimingFunction: {
+        snappy: 'cubic-bezier(0.32, 0.72, 0, 1)'
+      },
+      transitionDuration: {
+        180: '180ms',
+        260: '260ms'
+      },
+      boxShadow: {
+        lifted: '0 12px 30px -14px rgba(15, 23, 42, 0.25)',
+        outline: '0 0 0 1px rgba(59, 130, 246, 0.25)'
+      },
+      keyframes: {
+        'fade-in-up': {
+          '0%': { opacity: '0', transform: 'translateY(8px) scale(0.98)' },
+          '100%': { opacity: '1', transform: 'translateY(0) scale(1)' }
+        },
+        'float-soft': {
+          '0%': { transform: 'translate3d(0,0,0) scale(1)' },
+          '50%': { transform: 'translate3d(4px,-6px,0) scale(1.03)' },
+          '100%': { transform: 'translate3d(0,0,0) scale(1)' }
+        }
+      },
+      animation: {
+        'fade-in-up': 'fade-in-up 0.6s ease-out both',
+        'float-soft': 'float-soft 12s ease-in-out infinite'
+      },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.slate.700'),
+            a: {
+              color: 'var(--color-accent-text-light)',
+              '&:hover': {
+                color: 'var(--color-accent)'
+              }
+            },
+            h1: {
+              fontWeight: '700',
+              letterSpacing: '-0.03em',
+              fontFamily: 'var(--font-serif-eng), "Songti SC", serif',
+            },
+            h2: {
+              fontWeight: '600',
+              letterSpacing: '-0.02em',
+              fontFamily: 'var(--font-serif-eng), "Songti SC", serif',
+            },
+            blockquote: {
+              fontStyle: 'normal',
+              borderLeftColor: 'var(--color-accent-soft)',
+              color: theme('colors.slate.700'),
+              backgroundColor: theme('colors.slate.50')
+            },
+            code: {
+              backgroundColor: theme('colors.slate.100'),
+              padding: '0.15rem 0.35rem',
+              borderRadius: '0.25rem'
+            }
+          }
+        },
+        dark: {
+          css: {
+            // Slightly softer than pure white for body text
+            color: theme('colors.slate.200'),
+            a: {
+              color: 'var(--color-accent-text-dark)',
+              '&:hover': {
+                color: 'var(--color-accent)'
+              }
+            },
+            strong: {
+              color: theme('colors.slate.50'),
+              fontWeight: '700'
+            },
+            b: {
+              color: theme('colors.slate.50'),
+              fontWeight: '700'
+            },
+            em: {
+              color: theme('colors.slate.100')
+            },
+            h1: {
+              color: theme('colors.slate.50')
+            },
+            h2: {
+              color: theme('colors.slate.50')
+            },
+            blockquote: {
+              borderLeftColor: 'var(--color-accent)',
+              backgroundColor: theme('colors.slate.800'),
+              color: theme('colors.slate.200'),
+              p: {
+                color: theme('colors.slate.200')
+              }
+            },
+            code: {
+              backgroundColor: theme('colors.slate.800')
+            }
+          }
+        }
+      })
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};