feat: 好久没提交了,诶,随便交点吧

Author: coderz-w

config/friends.ts

@@ -0,0 +1,33 @@
+export const friendsList: FriendModel[] = [
+  {
+    name: 'YYGod',
+    url: 'https://www.yygod0120.com/zh-CN/about',
+    avatar: 'https://avatars.githubusercontent.com/u/116366929?v=4',
+    desc: '美团架构师',
+  },
+  {
+    name: 'CeazzZY',
+    url: 'https://ceazzzy.github.io/',
+    avatar: 'https://avatars.githubusercontent.com/u/60310690?v=4',
+    desc: '字节臂展腾旭架构师.',
+  },
+  {
+    name: 'sunsunmonkey',
+    url: 'https://sunsunmonkey.github.io/',
+    avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
+    desc: '司马架构师',
+  },
+  {
+    name: 'seasaon',
+    url: 'https://seasonhl.github.io/',
+    avatar: 'https://avatars.githubusercontent.com/u/93079830?v=4',
+    desc: '快手转正犬',
+  },
+];
+
+export interface FriendModel {
+  name: string;
+  url: string;
+  avatar: string;
+  desc: string;
+}

config/index.ts

@@ -1 +1,4 @@
 export { seo } from './seo';
+export { friendsList } from './friends';
+
+export type { FriendModel } from './friends';

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "set ANALYZE=false && next dev",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\" --fix",

src/app/(app)/(home)/page.tsx

@@ -245,7 +245,7 @@ const BlogCardList = () => {
   ];
 
   return (
-    <div className=" w-full mt-10 md:mt-16 flex flex-col gap-y-8 px-8">
+    <div className=" w-full mt-10 md:mt-16 flex flex-col gap-y-8 px-4">
       <span className="text-2xl font-medium leading-loose md:ml-4 font-mono hidden gap-x-2 items-center  md:flex">
         最近文章
         <span className=" i-material-symbols-kid-star-outline cursor-pointer hover:rotate-[720deg] animate-ease-out duration-150" />
@@ -257,7 +257,7 @@ const BlogCardList = () => {
 
 const WindVane = () => {
   return (
-    <div className=" w-full mt-10 md:mt-16 flex flex-col gap-y-8 px-8">
+    <div className=" w-full mt-10 md:mt-16 flex flex-col gap-y-8 px-4">
       <span className="text-2xl flex justify-center md:justify-start items-center gap-x-2 text-center  font-medium leading-loose md:ml-4 font-mono ">
         风向标
         <span className=" i-mingcute-navigation-line cursor-pointer hover:rotate-[360deg] animate-ease-out duration-200" />

src/app/(app)/friends/page.tsx

@@ -4,137 +4,9 @@ import { motion } from 'framer-motion';
 import { memo, useState } from 'react';
 import Image from 'next/image';
 
-interface FriendModel {
-  name: string;
-  url: string;
-  avatar: string;
-  desc: string;
-}
+import { friendsList, type FriendModel } from '~/index';
 
 export default function Friends() {
-  const friendData: FriendModel[] = [
-    {
-      name: 'Alice',
-      url: 'https://www.baidu.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'A passionate developer and a great friend.',
-    },
-    {
-      name: 'Bob',
-      url: 'https://bob.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Bob loves working on open-source projects.',
-    },
-    {
-      name: 'Charlie',
-      url: 'https://charlie.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Charlie is a fantastic designer and loves to create beautiful UIs.',
-    },
-    {
-      name: 'Dave',
-      url: 'https://dave.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'A data science enthusiast and machine learning expert.',
-    },
-    {
-      name: 'Eve',
-      url: 'https://eve.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Eve loves cybersecurity and cryptography.',
-    },
-    {
-      name: 'Frank',
-      url: 'https://frank.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Frank is a backend engineer with years of experience.',
-    },
-    {
-      name: 'Grace',
-      url: 'https://grace.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Grace is a machine learning researcher.',
-    },
-    {
-      name: 'Heidi',
-      url: 'https://heidi.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Heidi enjoys working on cloud computing.',
-    },
-    {
-      name: 'Ivan',
-      url: 'https://ivan.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Ivan specializes in database optimization.',
-    },
-    {
-      name: 'Judy',
-      url: 'https://judy.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Judy is a frontend developer with a passion for animations.',
-    },
-    {
-      name: 'Karl',
-      url: 'https://karl.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Karl is a mobile developer working on iOS apps.',
-    },
-    {
-      name: 'Lara',
-      url: 'https://lara.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Lara enjoys writing clean, maintainable code.',
-    },
-    {
-      name: 'Mallory',
-      url: 'https://mallory.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Mallory is an expert in penetration testing.',
-    },
-    {
-      name: 'Nina',
-      url: 'https://nina.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Nina is passionate about AR/VR development.',
-    },
-    {
-      name: 'Oscar',
-      url: 'https://oscar.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Oscar loves contributing to open-source projects.',
-    },
-    {
-      name: 'Peggy',
-      url: 'https://peggy.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Peggy is a blockchain developer.',
-    },
-    {
-      name: 'Quinn',
-      url: 'https://quinn.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Quinn focuses on DevOps and cloud infrastructure.',
-    },
-    {
-      name: 'Rita',
-      url: 'https://rita.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Rita is an AI researcher and educator.',
-    },
-    {
-      name: 'Steve',
-      url: 'https://steve.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Steve enjoys developing Android applications.',
-    },
-    {
-      name: 'Trudy',
-      url: 'https://trudy.example.com',
-      avatar: 'https://avatars.githubusercontent.com/u/116412388?v=4',
-      desc: 'Trudy works on full-stack web applications.',
-    },
-  ];
-
   return (
     <div>
       <header className="prose prose-p:my-2 font-mono">
@@ -143,7 +15,7 @@ export default function Friends() {
       </header>
 
       <main className="mt-10 flex w-full flex-col">
-        <FriendCardList data={friendData} />
+        <FriendCardList data={friendsList} />
       </main>
     </div>
   );

src/app/layout.tsx

@@ -6,7 +6,7 @@ import { Metadata, Viewport } from 'next';
 import WebAppProviders from '@/components/providers/root';
 import AccentColorStyleInjector from '@/components/modules/shared/AccentColorStyleInjector';
 import Root from '@/components/layout/Root';
-import { seo } from '~/seo';
+import { seo } from '~/index';
 
 export const metadata: Metadata = {
   metadataBase: seo.url,

src/components/ui/ThemeSwitcher/ThemeSwitcher.tsx

@@ -105,7 +105,7 @@ const ThemeIndicator = () => {
 
   return (
     <div
-      className="absolute top-[4px] z-[-1] size-[32px] rounded-full bg-base-100 shadow-[0_1px_2px_0_rgba(127.5,127.5,127.5,.2),_0_1px_3px_0_rgba(127.5,127.5,127.5,.1)] duration-200"
+      className="absolute top-[4px] z-[-1] size-[32px] rounded-full bg-base-100 shadow-[0_1px_2px_0_rgba(127.5,127.5,127.5,.2),_0_1px_3px_0_rgba(127.5,127.5,127.5,.8)] duration-200"
       style={{
         left: { light: 4, system: 36, dark: 68 }[theme],
       }}

src/components/ui/focus-cards.tsx/FocusCards.tsx

@@ -25,7 +25,13 @@ export const Card = React.memo(
         hovered !== null && hovered !== index && 'blur-sm scale-[0.98]',
       )}
     >
-      <Image src={card.src} alt={card.title} fill className="object-cover absolute inset-0" />
+      <Image
+        src={card.src}
+        alt={card.title}
+        fill
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+        className="object-cover absolute inset-0"
+      />
       <div
         className={cn(
           'absolute inset-0 bg-black/50 flex flex-col justify-end py-8 px-4 transition-opacity duration-300', // 修改为 flex-col
@@ -63,7 +69,7 @@ export function FocusCards({ cards }: { cards: Card[] }) {
   const [hovered, setHovered] = useState<number | null>(null);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-[7xl] mx-auto md:px-8 w-full">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-14 max-w-[7xl] mx-auto md:px-8 w-full">
       {cards.map((card, index) => (
         <Card
           key={card.title}