@xingwangzhe/stalux 1.2.0

package/src/components/stalux/archives/archivesList.astro

@@ -0,0 +1,116 @@
+---
+import { getCollection, type CollectionEntry } from "astro:content";
+import { getSiteData } from "@utils/config-utils";
+import { createTranslator } from "@utils/i18n";
+import styles from "@styles/components/archives/archivesList.module.css";
+import { toTimestamp, parseDate, format } from "@utils/dayjs";
+
+interface Props {
+    posts?: CollectionEntry<"posts">[];
+}
+
+const props = Astro.props as Props;
+const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+const archivesByYearMonth: Record<
+    number,
+    Record<number, CollectionEntry<"posts">[]>
+> = {};
+const yearCounts: Record<number, number> = {};
+
+posts.forEach((post) => {
+    if (!post.data.date) return;
+    const date = parseDate(post.data.date);
+    const year = date.getUTCFullYear();
+    const month = date.getUTCMonth() + 1;
+    if (!archivesByYearMonth[year]) {
+        archivesByYearMonth[year] = {};
+        yearCounts[year] = 0;
+    }
+    if (!archivesByYearMonth[year][month]) {
+        archivesByYearMonth[year][month] = [];
+    }
+    archivesByYearMonth[year][month].push(post);
+    yearCounts[year] += 1;
+});
+
+// 每个 post 只解析一次时间，供排序比较器复用，避免比较器里反复 new Date()
+const tsCache = new Map<CollectionEntry<"posts">, number>(
+    posts.map((p) => [p, toTimestamp(p.data.date || 0)]),
+);
+
+// 对每个月内的文章按 date 字段降序排序（用缓存时间戳做纯数字比较）
+for (const [, months] of Object.entries(archivesByYearMonth)) {
+    for (const month of Object.keys(months).map(Number)) {
+        months[month].sort((a, b) => (tsCache.get(b) ?? 0) - (tsCache.get(a) ?? 0));
+    }
+}
+
+// 按年份降序排序 -
+const sortedYears = Object.keys(archivesByYearMonth)
+    .map(Number)
+    .sort((a: number, b: number) => b - a);
+---
+
+<section class={styles.archivesContainer}>
+    <div class={styles.pageHeader}>
+        <div class={styles.timelineContainer}>
+            {
+                sortedYears.length > 0 ? (
+                    sortedYears.map((year) => (
+                        <div
+                            class={styles.yearSection}
+                            data-year={String(year)}
+                        >
+                            <div class={styles.yearHeader} data-year-header style="opacity:0">
+                                <h2 class={styles.yearTitle}>{year}</h2>
+                                <div class={styles.yearCount}>
+                                    {t("archives.postCount", { n: yearCounts[year] ?? 0 })}
+                                </div>
+                            </div>
+                            {Object.keys(archivesByYearMonth[year])
+                                .map(Number)
+                                .sort((a, b) => b - a)
+                                .map((month) => (
+                                    <div class={styles.monthSection} data-month-section style="opacity:0">
+                                        <h3 class={styles.monthTitle}>
+                                            {t("archives.month", { n: month })}
+                                        </h3>
+                                        <ul class={styles.postList}>
+                                            {archivesByYearMonth[year][
+                                                month
+                                            ].map((post) => (
+                                                <li class={styles.postItem} data-post-item style="opacity:0">
+                                                    <time
+                                                        class={styles.postDate}
+                                                        datetime={post.data.date}
+                                                    >
+                                                        {format(parseDate(post.data.date), 'yyyy-MM-dd')}
+                                                    </time>
+                                                    <a
+                                                        href={`/posts/${post.data.abbrlink}/`}
+                                                        class={styles.postLink}
+                                                        data-astro-prefetch="viewport"
+                                                    >
+                                                        {post.data.title}
+                                                    </a>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                ))}
+                        </div>
+                    ))
+                ) : (
+                    <div class={styles.noPosts}>{t("archives.noPosts")}</div>
+                )
+            }
+        </div>
+
+        <slot name="main" />
+    </div>
+
+</section>

package/src/components/stalux/archives/toArchive.astro

@@ -0,0 +1,14 @@
+---
+import { getCollection } from "astro:content";
+import { getSiteData } from "@utils/config-utils";
+import { createTranslator } from "@utils/i18n";
+import styles from "@styles/components/archives/toArchive.module.css";
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+---
+
+<div id={styles.archs}>
+    <a href="/archives" data-astro-prefetch>{t("archives.viewAll")}</a>
+</div>

package/src/components/stalux/categories/categoriesCard.astro

@@ -0,0 +1,49 @@
+---
+import styles from "@styles/components/categories/categoriesCard.module.css";
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+
+interface Props {
+    category: {
+        name: string;
+        count: number;
+    };
+}
+
+const props = Astro.props as Props;
+const configEntries = await getCollection("config");
+const siteConfig = (configEntries.find(e => e.id === "site")?.data ?? {}) as Record<string, unknown>;
+const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
+---
+
+<article class={styles.categoryCard}>
+    <a
+        href={`/categories/${props.category.name}/`}
+        class={styles.categoryheader + " a-none"}
+        data-astro-prefetch
+    >
+        <div class={styles.categoryIcon}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <path
+                    d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                ></path>
+            </svg>
+        </div>
+        <div class={styles.categoryContent}>
+            <h2 class={styles.categoryName}>{props.category.name}</h2>
+            <div class={styles.categoryCount}>
+                {t("categories.postCount", { n: props.category.count })}
+            </div>
+        </div>
+    </a>
+</article>

package/src/components/stalux/categories/categoriesList.astro

@@ -0,0 +1,17 @@
+---
+import { getCategoryCountList } from "@utils/collections-stats";
+import styles from "@styles/components/categories/categoriesList.module.css";
+import CategoriesCard from "@components/stalux/categories/categoriesCard.astro";
+
+const categoryList = await getCategoryCountList();
+---
+
+<ul class={`${styles.categoriesList} stagger-children`}>
+    {
+        categoryList.map((category) => (
+            <li class={styles.item} style="opacity:0">
+                <CategoriesCard category={category} />
+            </li>
+        ))
+    }
+</ul>

package/src/components/stalux/common/author.astro

@@ -0,0 +1,35 @@
+---
+// @ts-expect-error
+import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+import styles from "@styles/components/common/author.module.css";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+const configEntries = await getCollection("config");
+const authorConfig = getAuthorData(configEntries);
+interface Props {
+    showBio?: boolean | false;
+    iscolum?: boolean | false;
+}
+const props = Astro.props as Props;
+
+// 判断当前页面是否是首页，如果是则跳转到about，否则跳转到首页
+const isHomePage = Astro.url.pathname === "/";
+const navigationHref = isHomePage ? "/about" : "/";
+---
+
+<article class={styles.author} transition:persist-props>
+    <figure
+        class={`${styles.authorFigure} ${props.iscolum ? styles.figureColumn : ""}`}
+    >
+        <a href={navigationHref} class="a-none" data-astro-prefetch>
+            <Image
+                src={authorConfig.avatar}
+                alt={authorConfig.name}
+                width={100}
+                height={100}
+            />
+        </a>
+        <figcaption>{authorConfig.name}</figcaption>
+        {props.showBio && <p>{authorConfig.bio}</p>}
+    </figure>
+</article>

package/src/components/stalux/common/date.astro

@@ -0,0 +1,59 @@
+---
+import styles from "@styles/components/common/date.module.css";
+---
+
+<div id={styles["date-time"]} class="date-time" transition:persist-props>
+    <time id={styles["date"]} data-ref="date" datetime=""></time>
+    <time id={styles["time"]} data-ref="time" datetime=""></time>
+</div>
+
+<script>
+    const pad2 = (n: number) => String(n).padStart(2, "0");
+
+    /** 机器可读：yyyy-MM-dd / HH:mm:ss（本地时区） */
+    function toMachineDate(d: Date): string {
+        return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+    }
+    function toMachineTime(d: Date): string {
+        return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+    }
+
+    /** 展示用日期：中文 2026年07月16日 / 英文 Jul 16, 2026 */
+    function toDisplayDate(d: Date, lang: string): string {
+        if (lang.startsWith("zh")) {
+            return `${d.getFullYear()}年${pad2(d.getMonth() + 1)}月${pad2(d.getDate())}日`;
+        }
+        return new Intl.DateTimeFormat("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "2-digit",
+        }).format(d);
+    }
+
+    function updateDateTime() {
+        const now = new Date();
+        const dateEl = document.querySelector('[data-ref="date"]');
+        const timeEl = document.querySelector('[data-ref="time"]');
+        const lang = document.documentElement.lang || "zh-CN";
+
+        if (dateEl) {
+            dateEl.textContent = toDisplayDate(now, lang);
+            dateEl.setAttribute("datetime", toMachineDate(now));
+        }
+        if (timeEl) {
+            const t = toMachineTime(now);
+            timeEl.textContent = t;
+            timeEl.setAttribute("datetime", t);
+        }
+    }
+
+    // 全局只保留一个 1Hz 定时器：用单例守卫避免视图切换时累加定时器。
+    let timerId: ReturnType<typeof setInterval> | null = null;
+
+    document.addEventListener("astro:page-load", () => {
+        updateDateTime();
+        if (timerId === null) {
+            timerId = setInterval(updateDateTime, 1000);
+        }
+    });
+</script>

package/src/components/stalux/common/search.astro

@@ -0,0 +1,14 @@
+---
+// Pagefind component-ui search modal.
+// Docs: https://pagefind.app/llms-component-ui.txt
+// data-pf-theme must be on a DIRECT parent wrapper of the component.
+---
+
+<div data-pf-theme="dark">
+  <pagefind-modal id="search"></pagefind-modal>
+</div>
+
+<script>
+  import "@pagefind/component-ui";
+  import "@pagefind/component-ui/css";
+</script>

package/src/components/stalux/common/textType.astro

@@ -0,0 +1,16 @@
+---
+// @ts-expect-error
+import Typewriter from "astro-typewriter";
+import { getCollection } from "astro:content";
+import styles from "@styles/components/common/textType.module.css";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const typetextsConfig = getTypetextsData(configEntries);
+---
+
+{
+    typetextsConfig?.items && (
+        <Typewriter class={styles.typeWriter} messages={typetextsConfig?.items} />
+    )
+}

package/src/components/stalux/common/verCount.astro

@@ -0,0 +1,10 @@
+---
+
+---
+
+<script
+    is:inline
+    defer
+    data-astro-rerun
+    type="text/javascript"
+    src="https://events.vercount.one/js"></script>

package/src/components/stalux/footer/FooterBadges.astro

@@ -0,0 +1,150 @@
+---
+import type { BadgeItem } from "@utils/badge-generator";
+import { generateBadge, svgToDataUrl, isBadgeGroup } from "@utils/badge-generator";
+
+interface Props {
+    badges?: BadgeItem[];
+}
+
+const { badges } = Astro.props;
+
+function badgeImg(opts: Record<string, any>) {
+    const src = svgToDataUrl(generateBadge(opts));
+    const alt = opts.alt || `${opts.label}: ${opts.message}`;
+    if (opts.href) {
+        return `<a href="${opts.href}" target="_blank" rel="noopener noreferrer"><img src="${src}" alt="${alt}" class="badge" /></a>`;
+    }
+    return `<img src="${src}" alt="${alt}" class="badge" />`;
+}
+---
+
+{
+    badges && badges.length > 0 && (
+        <div class="badges-wrapper">
+            {badges.map((item: BadgeItem, idx: number) => {
+                if (isBadgeGroup(item)) {
+                    const groupId = `badge-group-${idx}`;
+                    return (
+                        <details class="badge-group" id={groupId}>
+                            <summary class="badge-group-summary">
+                                <span class="badge-group-arrow">&#9654;</span>
+                                <span class="badge-group-title">{item.title}</span>
+                                <span class="badge-group-hint" data-hint="expanded">收起</span>
+                                <span class="badge-group-hint" data-hint="collapsed">展开</span>
+                            </summary>
+                            <div class="badge-group-items badges">
+                                {item.items.map((b: any) => (
+                                    <Fragment set:html={badgeImg(b)} />
+                                ))}
+                            </div>
+                        </details>
+                    );
+                }
+                return <Fragment set:html={badgeImg(item)} />;
+            })}
+        </div>
+    )
+}
+
+<script>
+    function initBadgeGroups() {
+        document.querySelectorAll<HTMLDetailsElement>(".badge-group").forEach((el) => {
+            const key = `badge-${el.id}`;
+            const saved = localStorage.getItem(key);
+            if (saved !== null) {
+                el.open = saved === "open";
+            } else {
+                // 首次访问使用默认折叠状态
+                el.open = el.getAttribute("data-default-open") === "true";
+            }
+            el.addEventListener("toggle", () => {
+                localStorage.setItem(key, el.open ? "open" : "closed");
+            });
+        });
+    }
+    document.addEventListener("astro:page-load", initBadgeGroups);
+    initBadgeGroups();
+</script>
+
+<style>
+    .badges-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .badge-group {
+        width: 100%;
+        border: none;
+    }
+
+    .badge-group-summary {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.2rem 0;
+        color: var(--white-40p);
+        font-size: 0.85rem;
+        user-select: none;
+        list-style: none;
+        transition: color 0.2s;
+    }
+    .badge-group-summary:hover {
+        color: var(--white-70p);
+    }
+    .badge-group-summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .badge-group-arrow {
+        font-size: 0.65rem;
+        transition: transform 0.2s;
+        display: inline-block;
+    }
+    .badge-group[open] .badge-group-arrow {
+        transform: rotate(90deg);
+    }
+
+    .badge-group-title {
+        color: var(--white-60p);
+    }
+
+    .badge-group-hint {
+        font-size: 0.7rem;
+        color: var(--white-25p);
+    }
+    .badge-group[open] .badge-group-hint[data-hint="collapsed"],
+    .badge-group:not([open]) .badge-group-hint[data-hint="expanded"] {
+        display: none;
+    }
+
+    .badge-group-items {
+        padding-top: 0.35rem;
+    }
+
+    .badges {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .badge {
+        height: 20px;
+        vertical-align: middle;
+    }
+
+    @media (max-width: 768px) {
+        .badges {
+            gap: 0.3rem;
+        }
+        .badge {
+            height: 18px;
+        }
+    }
+</style>

package/src/components/stalux/footer/FooterBeian.astro

@@ -0,0 +1,91 @@
+---
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+
+interface Props {
+    icp?: string;
+    pubsec?: string;
+    pubsecNumber?: string;
+}
+
+const { icp, pubsec, pubsecNumber } = Astro.props;
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+
+const showBeian = !!(icp || pubsec);
+---
+
+{
+    showBeian && (
+        <div class="beian-info">
+            {icp && (
+                <a
+                    href="https://beian.miit.gov.cn/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {icp}
+                </a>
+            )}
+            {pubsec && pubsecNumber && (
+                <a
+                    href={`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${pubsecNumber}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="public-security-beian"
+                >
+                    <img
+                        src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
+                        alt={t("footer.securityIcon")}
+                    />
+                    {pubsec}
+                </a>
+            )}
+        </div>
+    )
+}
+
+<style>
+    .beian-info {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .beian-info a {
+        color: rgba(255, 255, 255, 0.7);
+        text-decoration: none;
+        transition: color 0.3s ease;
+        font-size: 0.9rem;
+    }
+
+    .beian-info a:hover {
+        color: rgba(255, 255, 255, 0.9);
+        text-decoration: none;
+    }
+
+    .public-security-beian {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        color: rgba(255, 255, 255, 0.7);
+        text-decoration: none;
+        transition: color 0.3s ease;
+        font-size: 0.9rem;
+    }
+
+    .public-security-beian:hover {
+        color: rgba(255, 255, 255, 0.9);
+        text-decoration: none;
+    }
+
+    .public-security-beian img {
+        width: 15px;
+        height: 15px;
+        display: inline-block;
+    }
+</style>

package/src/components/stalux/footer/FooterCopyright.astro

@@ -0,0 +1,40 @@
+---
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+
+interface Props {
+    author?: string;
+    startYear?: number;
+}
+
+const props = Astro.props as Props;
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+
+const currentYear = new Date().getFullYear();
+const copyrightYear =
+    props.startYear && props.startYear < currentYear
+        ? `${props.startYear}-${currentYear}`
+        : currentYear;
+---
+
+<small class="copyright">
+    <span>&copy; {copyrightYear} {props.author || ""}. {t("footer.rightsReserved")}</span>
+</small>
+
+<style>
+    .copyright {
+        font-weight: 500;
+        display: flex;
+        gap: 0.3em;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .copyright span {
+        margin: 0;
+    }
+</style>