style(friends): 为友链卡片加入动画效果

2. chore(config): 更改 API 调用链接，从 Netlify Function 改为 GitHub API
3. GitHub Card 中头像 URL avatars.githubusercontent.com 改为 EdgeOne CDN 链接 avatars.gh.api.adclosenn.dev

src/components/widget/Profile.astro

@@ -147,16 +147,16 @@ fetch("https://v1.hitokoto.cn")
                 statsElement.textContent = 'Err. invalid domain name';
             }
             // 第一步：调用 API                
-            const githubResponse = await fetch(`https://api.adclosenn.top/.netlify/functions/commit`);
+            const githubResponse = await fetch(`https://api.github.com/repos/Ad-closeNN/blog-fuwari/commits?per_page=1`);
 
             if (!githubResponse.ok) {
                 throw new Error('获取信息失败');
             }
 
-            const Data = await githubResponse.json();
-
+            let Data = await githubResponse.json();
+            Data = Data[0];
             // 第二步：获取 Commit 数据
-            const latestCommit = Data
+            const latestCommit = Data;
             
             const commitData = {
                 hash: latestCommit.sha.slice(0, 7),

src/content/spec/info.md

@@ -45,16 +45,17 @@
                 statsElement.textContent = 'Err. invalid domain name';
             }
             // 第一步：调用 API                
-            const githubResponse = await fetch(`https://api.adclosenn.top/.netlify/functions/commit`);
+            const githubResponse = await fetch(`https://api.github.com/repos/Ad-closeNN/blog-fuwari/commits?per_page=1`);
 
             if (!githubResponse.ok) {
                 throw new Error('获取信息失败');
             }
 
-            const Data = await githubResponse.json();
+            let Data = await githubResponse.json();
+            Data = Data[0];
 
             // 第二步：获取 Commit 数据
-            const latestCommit = Data
+            const latestCommit = Data;
             
             const commitData = {
                 hash: latestCommit.sha.slice(0, 7),

src/pages/friends.astro

@@ -16,9 +16,9 @@ import { Icon } from "astro-icon/components";
             <a href="https://www.netlify.com/" target="_blank" class="friend-card">
                 <div class="flex items-center gap-2">
                     <img src="https://www.netlify.com/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
-                    <div class="font-bold text-black dark:text-white">Netlify（本站托管平台）</div>
+                    <div class="font-bold text-black dark:text-white">Netlify（主站托管平台）</div>
                 </div>
-                <div class="text-sm text-black/50 dark:text-white/50">AWS CDN，优选后简直不要太香！</div>
+                <div class="text-sm text-black/50 dark:text-white/50">亚马逊 AWS CDN</div>
             </a>
 
             <a href="https://github.com/saicaca/fuwari" target="_blank" class="friend-card">
@@ -126,7 +126,34 @@ import { Icon } from "astro-icon/components";
 </MainGridLayout>
 
 <style>
-.friend-card {
-    @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5 transition;
-}
+    .friend-card {
+        @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+    }
+    
+    .friend-card:active {
+        scale: .98;
+        background-color: var(--btn-regular-bg-active);
+    }
+    
+    .friend-card:hover {
+        background-color: var(--btn-regular-bg-hover);
+    }
+    
+    .friend-card:hover .font-bold {
+        color: var(--btn-content);
+    }
+    
+    .friend-card:hover .text-sm {
+    @apply text-gray-700 dark:text-white;
+    }
+
+    .friend-card .font-bold,
+    .friend-card .text-sm {
+        transition-property: color;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+    }
 </style>

src/plugins/rehype-component-github-card.mjs

@@ -64,7 +64,7 @@ export function GithubCardComponent(properties, children) {
         document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks).replaceAll("\u202f", '');
         document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\u202f", '');
         const avatarEl = document.getElementById('${cardUuid}-avatar');
-        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')';
+        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url.replace("https://avatars.githubusercontent.com", "https://avatars.gh.api.adclosenn.dev") + ')';
         avatarEl.style.backgroundColor = 'transparent';
         document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id || "no-license";
         document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");