@xingwangzhe/stalux 1.2.0

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

@@ -0,0 +1,108 @@
+---
+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 {
+    showStats?: boolean;
+    wordCount?: string;
+    buildtime?: string;
+}
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+const { showStats = true, wordCount, buildtime } = Astro.props;
+---
+
+{
+    showStats && (
+        <p class="site-stats">
+            <span id="vercount_container_site_uv">
+                {t("footer.visitors")}<span id="vercount_value_site_uv">Loading...</span>{" "}
+                {t("footer.visits")}
+            </span>
+            <span class="stats-separator">|</span>
+            <span id="vercount_container_site_pv">
+                {t("footer.totalVisits")}
+                <span id="vercount_value_site_pv">Loading...</span> {t("footer.times")}
+            </span>
+            <span class="stats-separator">|</span>
+            <span id="word-count-container">
+                {t("footer.totalWords")}
+                <span id="word-count-value">
+                    {wordCount ?? "Loading..."}
+                </span>{" "}
+                {t("footer.chars")}
+            </span>
+        </p>
+    )
+}
+
+{
+    buildtime && (
+        <div class="site-build-time">
+            <span>
+                {t("footer.runningTime")}
+                <span id="runtime-counter" />
+            </span>
+        </div>
+    )
+}
+
+<script define:vars={{ buildtime, runtimeFormat: t("footer.runtimeFormat") }}>
+    document.addEventListener("astro:page-load", () => {
+        if (!buildtime) return;
+        const runtimeCounter = document.getElementById("runtime-counter");
+        if (!runtimeCounter) return;
+
+        const updateRuntime = () => {
+            const now = new Date();
+            const start = new Date(buildtime);
+            const diffMs = now.getTime() - start.getTime();
+            if (Number.isNaN(diffMs) || diffMs < 0) return;
+
+            const totalSeconds = Math.floor(diffMs / 1000);
+            const days = Math.floor(totalSeconds / 86400);
+            const hours = Math.floor((totalSeconds % 86400) / 3600);
+            const minutes = Math.floor((totalSeconds % 3600) / 60);
+            const seconds = totalSeconds % 60;
+
+            runtimeCounter.textContent = runtimeFormat
+                .replace("{days}", String(days))
+                .replace("{hours}", String(hours))
+                .replace("{minutes}", String(minutes))
+                .replace("{seconds}", String(seconds));
+        };
+
+        updateRuntime();
+        // define:vars 内联脚本会在每次视图切换时重新执行，
+        // 因此用 window 句柄记录定时器，创建新定时器前先清掉旧的，避免累加 1Hz 定时器。
+        const w = window;
+        if (w.__staluxRuntimeTimer != null) {
+            clearInterval(w.__staluxRuntimeTimer);
+        }
+        w.__staluxRuntimeTimer = setInterval(updateRuntime, 1000);
+    });
+</script>
+
+<style>
+    .site-stats {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        font-size: 0.9rem;
+    }
+
+    .stats-separator {
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    .site-build-time {
+        margin-top: 0.5rem;
+        font-size: 0.9rem;
+        color: rgba(255, 255, 255, 0.8);
+        text-align: center;
+    }
+</style>

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

@@ -0,0 +1,67 @@
+---
+interface Props {
+    showPoweredBy?: boolean;
+    showThemeInfo?: boolean;
+}
+
+const { showPoweredBy = true, showThemeInfo = true } = Astro.props;
+const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
+---
+
+{
+    showThemeInfoSection && (
+        <div class="theme-info">
+            {showPoweredBy && (
+                <span>
+                    Powered by
+                    <a
+                        href="https://astro.build"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Astro
+                    </a>
+                </span>
+            )}
+            {showPoweredBy && showThemeInfo && <span> | </span>}
+            {showThemeInfo && (
+                <span>
+                    Theme is
+                    <a
+                        href="https://github.com/xingwangzhe/stalux"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Stalux
+                    </a>
+                </span>
+            )}
+        </div>
+    )
+}
+
+<style>
+    .theme-info {
+        font-size: 0.85rem;
+        display: flex;
+        justify-content: center;
+        gap: 0.3em;
+        flex-wrap: wrap;
+    }
+
+    .theme-info span {
+        margin: 0;
+    }
+
+    .theme-info a {
+        color: rgba(255, 255, 255, 0.8);
+        text-decoration: none;
+        transition: color 0.3s ease;
+        margin: 0 0.2em;
+    }
+
+    .theme-info a:hover {
+        color: rgba(255, 255, 255, 1);
+        text-decoration: none;
+    }
+</style>

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

@@ -0,0 +1,87 @@
+---
+import FooterCopyright from "@components/stalux/footer/FooterCopyright.astro";
+import FooterBeian from "@components/stalux/footer/FooterBeian.astro";
+import FooterThemeInfo from "@components/stalux/footer/FooterThemeInfo.astro";
+import FooterStats from "@components/stalux/footer/FooterStats.astro";
+import FooterBadges from "@components/stalux/footer/FooterBadges.astro";
+import { getSiteData, getAuthorData, getFooterData } from "@utils/config-utils";
+			import type { BadgeItem, BadgeOptions, isBadgeGroup } from "@utils/badge-generator";
+			import { getCollection } from "astro:content";
+			import { getTotalWordCount, formatWordCount } from "@utils/word-count-utils";
+			import footerStyle from "@styles/components/footer/footer.module.css";
+			
+			// 获取配置
+			const configEntries = await getCollection("config");
+			const siteConfig = getSiteData(configEntries);
+			const footerConfig = getFooterData(configEntries);
+			const authorConfig = getAuthorData(configEntries);
+			const author = authorConfig.name;
+			
+			// 标准化 badges（扁平 badge 或 分组），确保 style 字段合法
+			const badges: BadgeItem[] | undefined = footerConfig?.badges?.map(
+			    (item: any) => {
+		        if (item.title && item.items) {
+		            return {
+		                title: item.title,
+		                collapsed: item.collapsed ?? true,
+		                items: item.items.map((b: any) => ({
+		                    ...b,
+		                    style: (["flat","plastic","flat-square","for-the-badge","social"].includes(b.style) ? b.style : "flat") as BadgeOptions["style"],
+		                })),
+		            };
+		        }
+		        return {
+		            ...item,
+		            style: (["flat","plastic","flat-square","for-the-badge","social"].includes(item.style) ? item.style : "flat") as BadgeOptions["style"],
+		        };
+		    },
+		);
+	
+	const totalWordCount = await getTotalWordCount();
+	const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "zh-CN");
+---
+
+<footer class={footerStyle.siteFooter} transition:persist-props>
+    <div class={footerStyle.footerContent}>
+        <!-- 版权信息 -->
+        {
+            footerConfig?.copyright?.enabled && (
+                <FooterCopyright
+                    author={author}
+                    startYear={footerConfig?.copyright?.startYear}
+                />
+            )
+        }
+
+        <!-- 徽章展示 -->
+        <FooterBadges badges={badges} />
+
+        <!-- 备案信息 -->
+        <FooterBeian
+            icp={footerConfig?.beian?.icp?.enabled
+                ? footerConfig?.beian?.icp?.number
+                : undefined}
+            pubsec={footerConfig?.beian?.security?.enabled
+                ? footerConfig?.beian?.security?.text
+                : undefined}
+            pubsecNumber={footerConfig?.beian?.security?.enabled
+                ? footerConfig?.beian?.security?.number
+                : undefined}
+        />
+
+        <!-- 主题信息 -->
+        <FooterThemeInfo
+            showPoweredBy={footerConfig?.theme?.showPoweredBy}
+            showThemeInfo={footerConfig?.theme?.showThemeInfo}
+        />
+
+        <!-- 站点统计 -->
+        <FooterStats
+            wordCount={formattedWordCount}
+            buildtime={footerConfig?.buildtime}
+        />
+
+        <!-- 自定义内容 -->
+        {footerConfig?.custom && <Fragment set:html={footerConfig.custom} />}
+    </div>
+</footer>

package/src/components/stalux/layout/head.astro

@@ -0,0 +1,194 @@
+---
+import { SEO } from "astro-seo";
+import { ClientRouter } from "astro:transitions";
+import { getCollection } from "astro:content";
+import { Font } from "astro:assets";
+import VerCount from "@components/stalux/common/verCount.astro";
+import GoogleAnalytics from "@components/stalux/analytics/google.astro";
+import BingClarity from "@components/stalux/analytics/clarity.astro";
+		import "@styles/base/init.css";
+		import Umami from "@components/stalux/analytics/umami.astro";
+		// 预子集化的中文字体（由 scripts/font-subset.ts 在 prebuild 阶段生成）
+		// subset-font (harfbuzz WASM)，纯 JS，无 native 依赖，CI 友好
+		import "@assets/../../public/fonts/subset.css";
+	
+import { langToOpenGraphLocale } from "@utils/i18n";
+import { getAuthorData, getHeadData, getPromoteData, getSiteData } from "@utils/config-utils";
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const authorConfig = getAuthorData(configEntries);
+const headConfig = getHeadData(configEntries);
+const promoteConfig = getPromoteData(configEntries);
+
+// Twitter 卡片类型定义
+type TwitterCardType = "summary" | "summary_large_image";
+
+// 最小必要 SEO 配置
+interface Props {
+  title: string;
+  description: string;
+  cover?: string;
+  isArticle?: boolean;
+  date?: string;
+  updated?: string;
+  tags?: string[];
+  categories?: string[];
+  author?: string;
+  noindex?: boolean;
+}
+
+const props = Astro.props as Props;
+const effectiveTitle = props.title;
+const effectiveDescription = props.description;
+const isArticle = props.isArticle ?? false;
+
+const canonicalBase = siteConfig.canonical || siteConfig.url;
+const canonicalUrl = canonicalBase
+  ? new URL(Astro.url.pathname, canonicalBase).href
+  : Astro.url.href;
+const faviconPath = siteConfig.favicon || "/favicon.ico";
+// 社交分享图片 / JSON-LD image 必须用绝对 URL
+const baseImgUrl = canonicalBase.replace(/\/$/, "");
+const toAbsolute = (p: string) => !p || p.startsWith("http") ? p : baseImgUrl + (p.startsWith("/") ? p : "/" + p);
+const ogImagePath = toAbsolute(props.cover || authorConfig.avatar || faviconPath);
+const isNotFoundPage =
+  Astro.url.pathname === "/404" || Astro.url.pathname === "/404/";
+const resolvedNoindex = Boolean(siteConfig.noindex) || isNotFoundPage || Boolean(props.noindex);
+const resolvedNofollow = Boolean(siteConfig.nofollow) || isNotFoundPage;
+
+const openGraphConfig: Record<string, unknown> = {
+  basic: {
+    title: effectiveTitle,
+    type: isArticle ? "article" : "website",
+    image: ogImagePath,
+    url: canonicalUrl,
+  },
+  optional: {
+    description: effectiveDescription,
+    locale: langToOpenGraphLocale(siteConfig.lang || "zh-CN"),
+  },
+  image: {
+    url: ogImagePath,
+    alt: effectiveTitle,
+  },
+};
+
+// 文章页：添加 article Open Graph 标签
+if (isArticle) {
+  const article: Record<string, unknown> = {};
+  if (props.date) article.publishedTime = props.date;
+  if (props.updated) article.modifiedTime = props.updated;
+  if (props.author) article.authors = [props.author];
+  if (props.categories?.length) article.section = props.categories[0];
+  if (props.tags?.length) article.tags = props.tags;
+  openGraphConfig.article = article;
+}
+
+const twitterConfig = {
+  card: "summary_large_image" as TwitterCardType,
+  title: effectiveTitle,
+  description: effectiveDescription,
+  image: ogImagePath,
+  imageAlt: effectiveTitle,
+  ...(siteConfig.twitterSite ? { site: siteConfig.twitterSite } : {}),
+};
+
+const extendedLink = [
+  { rel: "icon", href: faviconPath },
+  {
+    rel: "alternate",
+    type: "application/rss+xml",
+    title: siteConfig.title || "RSS Feed",
+    href: "/rss.xml",
+  },
+];
+
+		// 向爬虫暴露 Markdown 替代链接
+		// 支持首页、文章、关于、一言、友链、归档、分类、标签
+		const exportMd = Boolean(promoteConfig?.export_md);
+		const normalizedPath = Astro.url.pathname.replace(/\/$/, "") || "/";
+		const mdRootPaths = ["/about", "/words", "/links", "/archives", "/categories", "/tags", "/posts"];
+		const hasMarkdownVersion =
+			exportMd &&
+			(normalizedPath === "/" ||
+				mdRootPaths.some((p) => normalizedPath === p || normalizedPath.startsWith(p + "/")));
+		if (hasMarkdownVersion) {
+			const mdHref = normalizedPath === "/" ? "/index.md" : normalizedPath + ".md";
+			extendedLink.push({
+				rel: "alternate",
+				type: "text/markdown",
+				title: "Markdown source",
+				href: mdHref,
+			});
+		}
+const extendedMeta = [
+  { name: "viewport", content: "width=device-width, initial-scale=1" },
+  { name: "color-scheme", content: "dark" },
+];
+
+let schema: Record<string, unknown>;
+if (isArticle) {
+  schema = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: effectiveTitle,
+    description: effectiveDescription,
+    url: canonicalUrl,
+    image: ogImagePath,
+    datePublished: props.date,
+    dateModified: props.updated || props.date,
+    keywords: props.tags?.join(", "),
+    author: props.author
+      ? {
+          "@type": "Person",
+          name: props.author,
+        }
+      : undefined,
+    mainEntityOfPage: {
+      "@type": "WebPage",
+      "@id": canonicalUrl,
+    },
+  };
+} else {
+  schema = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    url: canonicalUrl,
+    name: effectiveTitle,
+    description: effectiveDescription,
+  };
+}
+const ldJson = JSON.stringify(schema, null, 2).replace(/<\//g, "<\\/");
+---
+
+<head transition:persist-props>
+  <meta charset="utf-8" />
+  <ClientRouter />
+  <SEO
+    title={effectiveTitle}
+    description={effectiveDescription}
+    canonical={canonicalUrl}
+    nofollow={resolvedNofollow}
+    noindex={resolvedNoindex}
+    openGraph={openGraphConfig}
+    twitter={twitterConfig}
+    extend={{
+      link: extendedLink,
+      meta: extendedMeta,
+    }}
+  />
+  <style set:html={`:root{--font-body:"LXGW WenKai Subset","Noto Sans SC","Noto Sans CJK SC",system-ui,-apple-system,sans-serif}`} />
+  <Font cssVariable="--font-code" />
+  {
+    (headConfig?.anyhead) && (
+      <Fragment set:html={headConfig.anyhead} />
+    )
+  }
+  {headConfig?.googleAnalyticsId && <GoogleAnalytics />}
+  {headConfig?.bingClarityId && <BingClarity />}
+  {headConfig?.umami?.id && headConfig?.umami?.url && <Umami />}
+  <script type="application/ld+json" set:html={ldJson} />
+  <VerCount />
+</head>
+

package/src/components/stalux/layout/listPage.astro

@@ -0,0 +1,26 @@
+---
+import Navs from "@components/stalux/layout/navs.astro";
+import Stalux from "@layouts/Stalux.astro";
+import { getCollection } from "astro:content";
+import { getSiteData } from "@utils/config-utils";
+import styles from "@styles/pages/listPage.module.css";
+
+interface Props {
+    title: string;
+    description: string;
+    heading: string;
+    subheading?: string;
+}
+
+const { title, description, heading, subheading } = Astro.props;
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+---
+
+<Stalux title={title + " | " + siteConfig.title} description={description}>
+    <div style="height: 3em;"></div>
+    <Navs />
+    <h1 class={styles.title}>{heading}</h1>
+    {subheading && <div class={styles.description}>{subheading}</div>}
+    <slot />
+</Stalux>

package/src/components/stalux/layout/navs.astro

@@ -0,0 +1,174 @@
+---
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+import { getLucideIcon } from "@utils/lucide-icons";
+import styles from "@styles/components/layout/navs.module.css";
+import Search from "@components/stalux/common/search.astro";
+import { getSiteData, getNavsData } from "@utils/config-utils";
+
+const MenuIcon = getLucideIcon("menu");
+const SearchIcon = getLucideIcon("search");
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const navsConfig = getNavsData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+const navs = navsConfig?.items ?? [];
+---
+
+<nav aria-label="Main navigation" transition:persist-props>
+    <!-- 汉堡菜单按钮 (仅窄屏显示) -->
+    <button
+        data-ref="stalux-nav-toggle"
+        class={styles.navToggle}
+        aria-label={t("nav.menu")}
+    >
+        {MenuIcon && <MenuIcon size={20} stroke-width={2} class="nav-icon" />}
+    </button>
+
+    <!-- 侧边栏遮罩 -->
+    <div data-ref="stalux-nav-overlay" class={styles.navOverlay}></div>
+
+    <!-- 导航列表 -->
+    <div class={styles.navContainer}>
+        <button
+            data-ref="stalux-nav-scroll-left"
+            class={styles.scrollBtn}
+            data-side="left"
+            aria-label={t("nav.scrollLeft")}
+        >
+            <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+
+        <ul data-ref="stalux-nav-list" class={styles.navList}>
+            {
+                navs.map((item) => {
+                    const NavIcon = item.icon ? getLucideIcon(item.icon) : null;
+                    return (
+                        <li class={styles.navItem}>
+                            <a
+                                href={item.link}
+                                class={styles.navLink}
+                                data-ref="stalux-nav-link"
+                                data-astro-prefetch
+                            >
+                                {NavIcon && (
+                                    <NavIcon size={20} stroke-width={2} class="nav-icon" />
+                                )}
+                                <span class={styles.navText}>{item.title}</span>
+                            </a>
+                        </li>
+                    );
+                })
+            }
+            <li class={styles.navItem}>
+                <a
+                    href="javascript:void(0)"
+                    class={styles.navLink}
+                    data-ref="stalux-search-btn"
+                    aria-label={t("search.title")}
+                >
+                    {SearchIcon && (
+                        <SearchIcon size={20} stroke-width={2} class="nav-icon" />
+                    )}
+                    <span class={styles.navText}>{t("nav.search")}</span>
+                </a>
+            </li>
+        </ul>
+
+        <button
+            data-ref="stalux-nav-scroll-right"
+            class={styles.scrollBtn}
+            data-side="right"
+            aria-label={t("nav.scrollRight")}
+        >
+            <svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+    </div>
+</nav>
+<Search />
+<script>
+    document.addEventListener("astro:page-load", () => {
+        const searchBtn = document.querySelector(
+            '[data-ref="stalux-search-btn"]',
+        );
+        searchBtn?.addEventListener("click", (e) => {
+            e.preventDefault();
+            closeNav();
+            document.getElementById('search')?.open();
+        });
+
+        // 汉堡菜单交互
+        const navToggle = document.querySelector(
+            '[data-ref="stalux-nav-toggle"]',
+        );
+        const navList = document.querySelector('[data-ref="stalux-nav-list"]');
+        const navOverlay = document.querySelector(
+            '[data-ref="stalux-nav-overlay"]',
+        );
+
+        function openNav() {
+            navList?.setAttribute("data-state", "open");
+            navOverlay?.setAttribute("data-state", "show");
+            document.body.style.overflow = "hidden";
+        }
+
+        function closeNav() {
+            navList?.removeAttribute("data-state");
+            navOverlay?.removeAttribute("data-state");
+            document.body.style.overflow = "";
+        }
+
+        navToggle?.addEventListener("click", openNav);
+        navOverlay?.addEventListener("click", closeNav);
+
+        // 点击导航链接后关闭侧边栏
+        const navLinks = document.querySelectorAll(
+            '[data-ref="stalux-nav-link"]',
+        );
+        navLinks?.forEach((link) => {
+            link.addEventListener("click", closeNav);
+        });
+
+        // --- 动态导航滚动按钮 ---
+        initNavScroll();
+    });
+
+    function initNavScroll() {
+        const navList = document.querySelector('[data-ref="stalux-nav-list"]');
+        const btnLeft = document.querySelector('[data-ref="stalux-nav-scroll-left"]');
+        const btnRight = document.querySelector('[data-ref="stalux-nav-scroll-right"]');
+        if (!navList || !btnLeft || !btnRight) return;
+
+        function updateButtons() {
+            const hasOverflow = navList.scrollWidth > navList.clientWidth;
+            const atStart = navList.scrollLeft <= 4;
+            const atEnd = navList.scrollLeft >= navList.scrollWidth - navList.clientWidth - 4;
+
+            if (hasOverflow) {
+                btnLeft.classList.toggle("visible", !atStart);
+                btnRight.classList.toggle("visible", !atEnd);
+            } else {
+                btnLeft.classList.remove("visible");
+                btnRight.classList.remove("visible");
+            }
+        }
+
+        btnLeft.addEventListener("click", () => {
+            navList.scrollBy({ left: -300, behavior: "smooth" });
+        });
+
+        btnRight.addEventListener("click", () => {
+            navList.scrollBy({ left: 300, behavior: "smooth" });
+        });
+
+        // 监听滚动事件更新按钮状态
+        navList.addEventListener("scroll", updateButtons);
+
+        // 用 ResizeObserver 监听容器尺寸变化（窗口缩窄/变宽时重新判断）
+        const ro = new ResizeObserver(updateButtons);
+        ro.observe(navList);
+
+        // 初始检测
+        updateButtons();
+    }
+</script>