Use Font Awesome icons for hero social links

2025-11-17 17:25:22 +08:00
parent b89c01c966
commit 07f8cd13bd
3 changed files with 127 additions and 60 deletions
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,9 +1,62 @@
 import { siteConfig } from '@/lib/config';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faGithub,
+  faTwitter,
+  faMastodon,
+  faGitAlt,
+  faLinkedin
+} from '@fortawesome/free-brands-svg-icons';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';

 export function Hero() {
  const { name, tagline, social } = siteConfig;
  const initial = name?.charAt(0)?.toUpperCase() || 'G';

+  const items = [
+    social.github && {
+      key: 'github',
+      href: social.github,
+      label: 'GitHub',
+      icon: faGithub
+    },
+    social.twitter && {
+      key: 'twitter',
+      href: `https://twitter.com/${social.twitter.replace('@', '')}`,
+      label: 'Twitter',
+      icon: faTwitter
+    },
+    social.mastodon && {
+      key: 'mastodon',
+      href: social.mastodon,
+      label: 'Mastodon',
+      icon: faMastodon
+    },
+    social.gitea && {
+      key: 'gitea',
+      href: social.gitea,
+      label: 'Gitea',
+      icon: faGitAlt
+    },
+    social.linkedin && {
+      key: 'linkedin',
+      href: social.linkedin,
+      label: 'LinkedIn',
+      icon: faLinkedin
+    },
+    social.email && {
+      key: 'email',
+      href: `mailto:${social.email}`,
+      label: 'Email',
+      icon: faEnvelope
+    }
+  ].filter(Boolean) as {
+    key: string;
+    href: string;
+    label: string;
+    icon: any;
+  }[];
+
  return (
    <section className="mb-8 rounded-xl border bg-gradient-to-r from-slate-50 to-slate-100 px-6 py-6 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:to-slate-950">
      <div className="flex items-center gap-4">
@@ -17,71 +70,20 @@ export function Hero() {
          <p className="mt-1 max-w-2xl text-sm text-slate-700 dark:text-slate-100">
            {tagline}
          </p>
-          {(social.github ||
-            social.twitter ||
-            social.linkedin ||
-            social.email ||
-            social.mastodon ||
-            social.gitea) && (
-            <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-500">
-              {social.github && (
+          {items.length > 0 && (
+            <div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-slate-500">
+              {items.map((item) => (
                <a
-                  href={social.github}
+                  key={item.key}
+                  href={item.href}
                  target="_blank"
                  rel="noopener noreferrer"
-                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
+                  className="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/80 dark:ring-slate-700"
                >
-                  GitHub
+                  <FontAwesomeIcon icon={item.icon} className="h-3.5 w-3.5" />
+                  <span>{item.label}</span>
                </a>
-              )}
-              {social.twitter && (
-                <a
-                  href={`https://twitter.com/${social.twitter.replace('@', '')}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
-                >
-                  Twitter
-                </a>
-              )}
-              {social.mastodon && (
-                <a
-                  href={social.mastodon}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
-                >
-                  Mastodon
-                </a>
-              )}
-              {social.gitea && (
-                <a
-                  href={social.gitea}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
-                >
-                  Gitea
-                </a>
-              )}
-              {social.linkedin && (
-                <a
-                  href={social.linkedin}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
-                >
-                  LinkedIn
-                </a>
-              )}
-              {social.email && (
-                <a
-                  href={`mailto:${social.email}`}
-                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
-                >
-                  Email
-                </a>
-              )}
+              ))}
            </div>
          )}
        </div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
+        "@fortawesome/free-brands-svg-icons": "^7.1.0",
+        "@fortawesome/free-solid-svg-icons": "^7.1.0",
+        "@fortawesome/react-fontawesome": "^3.1.0",
        "clsx": "^2.1.1",
        "contentlayer": "^0.3.4",
        "gray-matter": "^4.0.3",
@@ -609,6 +612,65 @@
      "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
      "license": "MIT"
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz",
+      "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
+      "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-7.1.0.tgz",
+      "integrity": "sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz",
+      "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.1.0.tgz",
+      "integrity": "sha512-5OUQH9aDH/xHJwnpD4J7oEdGvFGJgYnGe0UebaPIdMW9UxYC/f5jv2VjVEgnikdJN0HL8yQxp9Nq+7gqGZpIIA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@grpc/grpc-js": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.1.tgz",
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
    "clsx": "^2.1.1",
    "contentlayer": "^0.3.4",
    "gray-matter": "^4.0.3",