---
// 静态图片
import { Image } from "astro:assets";
// 时间处理
import { fmtTime } from "@/utils/index";
// 获取用户配置数据
import SITE_CONFIG from "@/config";
const { Avatar, Author, Motto, WebSites, GoogleAds } = SITE_CONFIG;
// 获取文章数据
import { getCategories, getTags, getRecommendArticles } from "@/utils/getPostInfo";
// 分类列表
const categories = getCategories();
// 热门标签
const tags = getTags();
// 最新文章
const recommendArticles = getRecommendArticles();
// Google 广告组件
import GoogleAd from "@/components/GoogleAd/GoogleAd.astro";
// 侧边栏样式
import "./Aside.less";
---

<aside class="vh-aside">
	<!-- 头像块 -->
	<section class="vh-aside-item user">
		<Image class="vh-aside-avatar" src="/assets/images/lazy-loading.webp" data-vh-lz-src={Avatar} alt={Author} width="1" height="1" />
		<span class="vh-aside-auther">{Author}</span>
		<p class="vh-aside-motto">{Motto}</p>
		<section class="vh-aside-links">
			{
				WebSites.map(item => (
					<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
						<Image src={item.icon} alt={item.text} width="1" height="1" />
					</a>
				))
			}
		</section>
	</section>

	<!-- 分类块 -->
	<section class="vh-aside-item categories">
		<h3>分类</h3>
		<div class="vh-aside-categories">
			{
				categories
					.sort((a: any, b: any) => b.count - a.count)
					.map(i => (
						<a href={`/categories/${i.title}`}>
							<span>{i.title}</span>
							<i>{i.count}</i>
						</a>
					))
			}
		</div>
	</section>

	<!-- 标签块 -->
	<section class="vh-aside-item tags">
		<h3>热门标签</h3>
		<div class="vh-aside-tags">
			{
				tags.map(i => (
					<a href={`/tag/${i}`}>
						<span>{i}</span>
					</a>
				))
			}
		</div>
	</section>

	<section class="sticky-aside">
		<!-- 最新文章块 -->
		{
			recommendArticles.length && (
				<section class="vh-aside-item articles">
					<h3>推荐文章</h3>
					<div class="vh-aside-articles">
						{recommendArticles.map(async i => (
							<a href={`/article/${(await i).id}`}>
								<p class="cover">
									<Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={(await i).cover} alt={(await i).title} width="1" height="1" />
								</p>
								<p class="info">
									<span>{(await i).title}</span>
									<time>{fmtTime((await i).date, "YYYY-MM-DD A")}</time>
								</p>
							</a>
						))}
					</div>
				</section>
			)
		}

		<!-- 谷歌广告块 -->
		{
			GoogleAds.ad_Client && GoogleAds.asideAD_Slot && (
				<section class="vh-aside-item ad">
					<h3>广而告之</h3>
					<GoogleAd className="vh-aside-ad" slotID={GoogleAds.asideAD_Slot} />
				</section>
			)
		}
	</section>
</aside>