---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import MarkdownIt from "markdown-it";

const markdown = new MarkdownIt();
const siteNameHtml = markdown.renderInline("`Ad_closeNN 的小站`");
const siteDescriptionHtml = markdown.renderInline("`永远相信美好的事情即将发生`");
const siteUrlHtml = markdown.renderInline("`https://blog.adclosenn.top`");
const siteAvatarHtml = markdown.renderInline("`https://blog.adclosenn.top/assets/avatar.jpg`");
---

<MainGridLayout title="友情链接">
    <div class="card-base p-6 md:p-8">
        <div class="flex items-center gap-2 mb-6">
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
                <Icon name="material-symbols:diversity-3" class="text-[1.5rem]">
            </div>
            <h1 class="text-2xl font-bold text-black dark:text-white">友情链接</h1>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            
            <a href="https://www.cloudflare.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://www.cloudflare-cn.com/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Cloudflare</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">本站使用的托管平台 | CDN&赛博菩萨</div>
            </a>

            <a href="https://github.com/saicaca/fuwari" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/favicon/saicaca.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">fuwari</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">本站使用的模板 | 使用 Astro 构建的静态博客模板</div>
            </a>
            
            <a href="https://chatgpt.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://cdn.oaistatic.com/assets/favicon-l4nq08hd.svg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">OpenAI ChatGPT</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">这玩意难道有时候不比脑子好使</div>
            </a>

            <a href="https://gemini.google.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/favicon/google-gemini.svg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Google Gemini</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">这是真好用</div>
            </a>
            
            <a href="https://code.visualstudio.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://code.visualstudio.com/assets/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Visual Studio Code</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">轻量编辑器中的真神</div>
            </a>
            
            <a href="https://github.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/favicon/github.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">GitHub</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">在单一协作平台上构建和交付软件</div>
            </a>

            <a href="https://hitokoto.cn" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://hitokoto.cn/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">一言</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">把一些句子汇聚起来，形成一言网络，以传递更多的感动</div>
            </a>

            <a href="https://2x.nz" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=2726730791&spec=0" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">AcoFork Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">爱你所爱~ ❤</div>
            </a>


            <a href="https://ansonq.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://ansonq.com/src/tx.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Anson 主页</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">Anson 的国际导航页</div>
            </a>

            <a href="https://bbos.me" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/friends-avatar/0x4E314E30.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">五道口宇宙中心</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">什么都想了解一点</div>
            </a>

            <a href="https://blog.mckero.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://i0.hdslb.com/bfs/face/96a6399dffe9e203d3afcc83fe5af3377830fa19.png" loading="lazy" referrerpolicy="no-referrer" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">MC_Kero 的 blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">依稀当年泪目干！</div>
            </a>

            <a href="https://icp.redcha.cn" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://icp.redcha.cn/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">茶备案</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">茶备案致力于打造一个经典的互联网同盟会，希望可以和站长朋友们一起学习交流</div>
            </a>

            <a href="https://icp.gov.moe" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://icp.gov.moe/images/ico64.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">萌国ICP备案</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">嗯，你没看错，这是萌国的ICP备案。萌国在哪呢，听某萌主说，好像是个异次元上的国度。萌主就爱给人组cp,俗称icp我们说的是萌国ICP备案，号称萌ICP备，简称萌备</div>
            </a>
            
            <!--
            <a href="https://caiyifeng.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://img.cdn1.vip/i/68bbdee513eb9_1757142757.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">LYEy_isine个人博客</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">花海无一日，少年踏自来</div>
            </a>
            -->

            <a href="https://wyf9.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://wyf9.top/favicon.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">wyf9's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">什么都有的个人 blog?</div>
            </a>

            <a href="https://tbmiao.dpdns.org" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/friends-avatar/tbmiao.dpdns.org_172878250.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">AUNyaの小窝</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">一个热爱二次元的小萌新~</div>
            </a>

            <a href="https://blog.lenmei233.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://blog.lenmei233.top/images/avatar.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">lenmei233's blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">A person who loves coding, Welcome to my blog!</div>
            </a>

            <a href="https://cs.gt.tc" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://weavatar.com/avatar/75f9692805b439a703cabc302b85a47d07a9c67a0879c346aa70342fd5ccc596?s=96&r=g" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">天码行空的小破站</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">To be bright~</div>
            </a>

            <a href="https://blog.yaooa.cn" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://blog.yaooa.cn/_astro/avatar.CKWOOGoY_ZSc86z.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">YaoBlog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">不知道干什么就只有摆烂了</div>
            </a>

            <a href="https://blog.150191.xyz" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://i0.hdslb.com/bfs/im_new/a5d3aa9f94ce663d9c2530d9f568ced61059364724.webp" loading="lazy" referrerpolicy="no-referrer"  class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Clina's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">¡El pueblo unido jamás será vencido!</div>
            </a>

            <!--
            <a href="https://blog.zhongyudata.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://zyblog.cn-nb1.rains3.com/zhongyudata.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">中域科技</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">技术与生活</div>
            </a>
            -->

            <a href="https://xhc861.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/friends-avatar/xhc861.top_99964145.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">xhc861's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">博客，远不止于博客~</div>
            </a>

            <a href="https://blog.hxrch.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://img.hxrch.top/bfav256.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Horean's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">Spread the knowledge wisely & widely.</div>
            </a>

            <a href="https://www.xie.today" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://www.xie.today/images/avatar.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">RATING3PRO Today</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">潜水</div>
            </a>

            <a href="https://meowcata.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://meowcata.top/assets/avatar.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">MeowCata 小站</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">化学 × 随手记 × 心得 × 随缘更</div>
            </a>

            <a href="https://blog.578113.xyz" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://image.578113.xyz/img/skyceria.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">AkiNard Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">艾拉酱世界第一可爱！</div>
            </a>

            <a href="https://blog.4365754.xyz" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://photos.4365754.xyz/ac0cf34feb992487db7e63382418382dba213210.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">雪诺的小博客                    </div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">分享关于网络的众多有趣的小知识</div>
            </a>

        </div>

        <!-- 申请友链 -->
        <div class="sponsors-section mt-8">
        	<h2 class="text-xl font-bold text-black dark:text-white mb-4 flex items-center gap-2">
        		<Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"/>
        		将您的网站加入本站友链板块
        	</h2>
        	<p class="text-sm text-black/60 dark:text-white/60">
        		请自行提交 GitHub Issue ： <a target="_blank" href="https://github.com/Ad-closeNN/form/issues/new?template=friends-link.yml" class="transition link text-[var(--primary)] font-medium">点击这里提交</a>
        	</p>
            <div class="mt-4 h-px bg-black/10 dark:bg-white/10"></div>
            <p class="mt-4 text-sm font-medium text-black/70 dark:text-white/70 select-none">本站友链信息</p>
            <div class="mt-4 text-sm text-black/60 dark:text-white/60 space-y-1">
                <p><span class="select-none">站点名称：</span><Fragment set:html={siteNameHtml} /></p>
                <p><span class="select-none">站点描述：</span><Fragment set:html={siteDescriptionHtml} /></p>
                <p><span class="select-none">站点 URL：</span><Fragment set:html={siteUrlHtml} /></p>
                <p><span class="select-none">站点图片：</span><Fragment set:html={siteAvatarHtml} /></p>
            </div>
            
        <br>
    </div>

</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 border border-black/20 dark:border-white/20;
        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>
