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

<aside class="vh-aside">
	<!-- 头像块 -->
	{
		AsideShow.WebSitesShow && (
			<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">
							<Svg src={item.icon} />
						</a>
					))}
				</section>
				<section class="vh-aside-info">
					<div class="art-item count">
						<span>{CountInfo.ArticleCount}</span>
						<p>文章数</p>
					</div>
					<div class="cat-item count">
						<span>{CountInfo.CategoryCount}</span>
						<p>分类数</p>
					</div>
					<div class="tag-item count">
						<span>{CountInfo.TagCount}</span>
						<p>标签数</p>
					</div>
				</section>
				<canvas class="vh-aside-canvas" width="888" height="1888" />
			</section>
		)
	}

	<!-- 公告块 -->
	{
		SITE_CONFIG.Tips && (
			<section class="vh-aside-item tips">
				<span>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
						<path d="M3 9.662c2 2.338 2 4.338 0 6.338c3 .5 4.5 1 5 4c2 -3 6 -4 9 0c0 -3 1 -4 4 -4.004q -3 -2.995 0 -5.996c-3 0 -5 -2 -5 -5c-2 4 -5 3 -7.5 -1c-.5 3 -2.5 5 -5.5 5.662" />
					</svg>
					公告
				</span>
				<div class="tips-content">
					<Fragment set:html={SITE_CONFIG.Tips} />
				</div>
			</section>
		)
	}

	<!-- 分类块 -->
	{
		AsideShow.CategoriesShow && (
			<section class="vh-aside-item cat">
				<h3>分类</h3>
				<div class="vh-aside-cat">
					{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>
		)
	}

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

	<section class="sticky-aside">
		<!-- 最新文章块 -->
		{
			recommendArticles.length && AsideShow.recommendArticleShow && (
				<section class="vh-aside-item articles">
					<h3>推荐文章</h3>
					<div class="vh-aside-articles">
						{recommendArticles.map((i, idx) => (
							<a href={`/article/${i.id}`}>
								<span>
									{idx < 3 ? <i>{idx + 1}</i> : <em>{idx + 1}.</em>}
									<cite class="vh-ellipsis">{i.title}</cite>
								</span>
								<time>{fmtTime(i.date, "YYYY-MM-DD A")}</time>
							</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>