blog-fuwari/src/components/widget/Profile.astro

---
import { Icon } from "astro-icon/components";
import { profileConfig, umamiConfig } from "../../config";
import { url } from "../../utils/url-utils";
import ImageWrapper from "../misc/ImageWrapper.astro";

const config = profileConfig;
---
<div class="card-base p-3">
    <div class="text-center text-sm text-neutral-500 dark:text-neutral-400 border-neutral-100 dark:border-neutral-700">一言 / hitokoto</div>
    <div class="text-center text-sm text-neutral-500 dark:text-neutral-400 border-neutral-100 dark:border-neutral-700">
    <p id="hitokoto">正在加载一言...</p>
    </div>
    <div class="text-center text-sm text-neutral-500 dark:text-neutral-400 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
    </div>
    <a aria-label="Go to About Page" href={url('/about/')}
       class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
       max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
        w-full h-full z-50 flex items-center justify-center">
            <Icon name="fa6-regular:address-card"
                  class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
            </Icon>
        </div>
        <ImageWrapper src={config.avatar || ""} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
    </a>
    <div class="px-2">
        <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
        <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
        
        <!-- bio: 名言部分 -->
        <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>

        
        <div class="flex gap-2 justify-center mb-1">
            {config.links.length > 1 && config.links.map(item =>
                    <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
                        <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                    </a>
            )}
            {config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
                                            class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
                <Icon name={config.links[0].icon} class="text-[1.5rem]"></Icon>
                {config.links[0].name}
            </a>}
        </div>

        <!-- 全站访问量统计 https://github.com/afoim/fuwari/blob/81f22decb17ff7ee1dd480c10773f7ba8f4df296/src/components/widget/Profile.astro -->
        <div class="text-center text-sm text-neutral-500 dark:text-neutral-400 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-center gap-1">
                <Icon name="material-symbols:visibility-outline" class="text-base"></Icon>
                <span id="site-stats">加载中...</span>
            </div>
        </div>

        <!-- 最新 Commit 提交信息 -->
        <div class="text-center text-sm text-neutral-500 dark:text-neutral-400 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-center gap-1">
                <Icon name="ic:baseline-commit" class="text-base"></Icon>
                <span><a id="github-commit-link" href="#">
                <span id="github-commit">加载中...</span></a></span>

            </div>
        </div>

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=250 height=86 src="//music.163.com/outchain/player?type=2&id=411500345&auto=0&height=66"></iframe>

    </div>
</div>
</script>

<script>
// 傻逼脑子 Merge 的时候怎么把这个删了
// 调用一言 API
//fetch("https://international.v1.hitokoto.cn")
// 试试国内，不过容易崩
fetch("https://v1.hitokoto.cn")
  .then(response => response.json())
  .then(data => {
    // API 返回的字段是 data.text
    document.getElementById("hitokoto").innerText = data.hitokoto;
  })
  .catch(error => {
    console.error("获取一言失败：", error);
    //document.getElementById("hitokoto").innerText = "获取失败，请稍后再试。";
    //失败后用内置的，成功了用别人的。
    document.getElementById("hitokoto").innerText = "再热情的心也经不起冷漠，再爱你的人也经不起冷落。";
  });
</script>

<script define:vars={{ umamiConfig }}>
    // 获取全站访问量统计
    async function loadSiteStats() {
        if (!umamiConfig.enable) {
            return;
        }
        
        try {
            // 第一步：获取网站ID和token
            const shareResponse = await fetch(`${umamiConfig.baseUrl}/api/share/${umamiConfig.shareId}`);
            if (!shareResponse.ok) {
                throw new Error('获取分享信息失败');
            }
            const shareData = await shareResponse.json();
            const { websiteId, token } = shareData;
            
            // 第二步：获取全站统计数据（不指定url参数获取全站数据）
            const currentTimestamp = Date.now();
            const statsUrl = `${umamiConfig.baseUrl}/api/websites/${websiteId}/stats?startAt=0&endAt=${currentTimestamp}&unit=hour&timezone=${encodeURIComponent(umamiConfig.timezone)}&compare=false`;
            
            const statsResponse = await fetch(statsUrl, {
                 headers: {
                     'x-umami-share-token': token
                 }
             });
            
            if (!statsResponse.ok) {
                throw new Error('获取统计数据失败');
            }
            
            const statsData = await statsResponse.json();
            const pageviews = statsData.pageviews?.value || 0;
            // const visitors = statsData.visits?.value || 0;
            
            const statsElement = document.getElementById('site-stats');
            if (statsElement) {
                statsElement.textContent = `浏览量 ${pageviews}`;
            }
        } catch (error) {
            console.error('获取全站统计失败:', error);
            const statsElement = document.getElementById('site-stats');
            if (statsElement) {
                statsElement.textContent = '统计不可用';
            }
        }
    }

    // 页面加载完成后获取统计数据
    document.addEventListener('DOMContentLoaded', loadSiteStats);
</script>
<!-- 获取 Commit 信息 via API -->
<script>
    async function loadCommitStats() {
        try {
            // 第零步：检查域名（甚至本地）
            const statsElement = document.getElementById('github-commit'); // 查找 id
            const link = document.getElementById('github-commit-link'); // 查找 id
            
            if (!window.location.hostname.includes('localhost') && !window.location.hostname.includes('adclosenn.top')) {
                statsElement.textContent = 'Err. invalid domain name';
            }
            // 第一步：调用 API                
            const githubResponse = await fetch(`https://api.adclosenn.top/.netlify/functions/commit`);

            if (!githubResponse.ok) {
                throw new Error('获取信息失败');
            }

            const Data = await githubResponse.json();

            // 第二步：获取 Commit 数据
            const latestCommit = Data
            
            const commitData = {
                hash: latestCommit.sha.slice(0, 7),
                fullHash: latestCommit.sha,
                message: latestCommit.commit.message.split('\n')[0],
                author: latestCommit.commit.author.name,
                date: latestCommit.commit.author.date,
                url: latestCommit.html_url
            };
            
            
            if (statsElement) {
                statsElement.textContent = `当前提交：${Data.sha.slice(0,7)}`;
            }
            

            if (link){
            // const gurl = "https://github.com/Ad-closeNN/blog-fuwari/commit/"+Data.sha;
            const gurl = "/info/";
                link.href = gurl;
                link.title = "("+Data.commit.committer.date + ")" + " " + Data.commit.message;
            }
        } catch (error) {
            console.error('获取 Commit 信息失败:', error);  
            const statsElement = document.getElementById('github-commit');
            if (statsElement) {
                statsElement.textContent = '提交信息不可用';
            }
        }
    }

    // 页面加载完成后获取 Commit 数据
    document.addEventListener('DOMContentLoaded', loadCommitStats);
</script>