fix: board icon & add blog to detail

Author: dajiangjunok

src/components/board/BoardMemberDetail.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal } from 'antd';
 import { X, Mail } from 'lucide-react';
-import { FaTwitter, FaGithub, FaLinkedin } from 'react-icons/fa';
+import { FaTwitter, FaGithub, FaLinkedin, FaBlog } from 'react-icons/fa';
 import { SiWechat } from 'react-icons/si';
 import Image from 'next/image';
 import { PersonCardProps } from './PersonCard';
@@ -108,6 +108,17 @@ export default function BoardMemberDetail({
                   <FaLinkedin size={24} />
                 </a>
               )}
+              {member.blog && (
+                <a
+                  href={member.blog}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.socialLink}
+                  title="Blog"
+                >
+                  <FaBlog size={24} />
+                </a>
+              )}
             </div>
           </div>
         </div>

src/components/board/PersonCard.module.css

@@ -35,7 +35,7 @@
 
 .personInfo {
   flex: 1;
-  margin: 16px 24px;
+  margin: 8px 10px 4px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -97,6 +97,12 @@
   color: #333333;
   margin: 0 0 8px 0;
   line-height: 1.3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tagsContainer {
@@ -128,22 +134,27 @@
 
 .socialLinks {
   display: flex;
-  gap: 12px;
+  flex-wrap: wrap;
+  gap: 8px;
   justify-content: center;
-  margin: 0 24px 20px 24px;
+  margin: auto 16px 16px 16px;
+  min-height: 40px;
 }
 
 .socialLink {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
   background: #f5f5f5;
   border-radius: 8px;
   color: #666666;
   transition: all 0.3s ease;
   text-decoration: none;
+  flex-shrink: 0;
 }
 
 .socialLink:hover {
@@ -171,8 +182,10 @@
   }
 
   .socialLinks {
-    margin: 0 20px 12px 20px;
+    margin: auto 12px 12px 12px;
     flex-shrink: 0;
+    gap: 6px;
+    min-height: 36px;
   }
 
   .name {
@@ -188,6 +201,12 @@
   .title {
     font-size: 13px;
     margin: 0 0 3px 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .organization {