@xingwangzhe/stalux 1.2.0

package/src/components/stalux/posts/postCard.astro

@@ -0,0 +1,83 @@
+---
+import style from "@styles/components/posts/postCard.module.css";
+import { toMachineDateTime } from "@utils/semantic-time";
+import { getCollection } from "astro:content";
+
+import type { CollectionEntry } from "astro:content";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+
+interface Props {
+    post: CollectionEntry<"posts">;
+}
+
+const post = Astro.props.post;
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const timezone = siteConfig.timezone;
+
+// 描述：使用文章自身的 desc
+const description = post.data.desc || "";
+---
+
+<a href={`/posts/${post.data.abbrlink}/`} class={style.post + " a-none"} data-astro-prefetch="viewport">
+    <div class={style.postContainer}>
+        {
+            post.data.cover && (
+                <div class={style.postCover}>
+                    <img src={post.data.cover} alt={post.data.title} loading="lazy" />
+                </div>
+            )
+        }
+        <h2 class={style.postTitle}>{post.data.title}</h2>
+        <div class={style.time}>
+            {
+                post.data.date && (
+                    <time
+                        class={style.postDate}
+                        datetime={timezone ? toMachineDateTime(post.data.date, timezone) : post.data.date}
+                    >
+                        {post.data.date}
+                    </time>
+                )
+            }
+            {
+                post.data.updated && (
+                    <time
+                        class={style.postUpdated}
+                        datetime={timezone ? toMachineDateTime(post.data.updated, timezone) : post.data.updated}
+                    >
+                        {post.data.updated}
+                    </time>
+                )
+            }
+        </div>
+        <div class={style.postDescription}>{description}</div>
+        <div class={style.postMeta}>
+            <div class={style.postTags}>
+                {
+                    post.data.tags?.map((tag) => (
+                        <a class="a-none" href={`/tags/${tag}`} data-astro-prefetch>
+                            <div class={style.postTag}>{tag}</div>
+                        </a>
+                    ))
+                }
+            </div>
+            <div class={style.postCategories}>
+                {
+                    post.data.categories?.map((category) => (
+                        <a class="a-none" href={`/categories/${category}`} data-astro-prefetch>
+                            <div class={style.postCategory}>{category}</div>
+                        </a>
+                    ))
+                }
+            </div>
+        </div>
+        <a
+            href={`/posts/${post.data.abbrlink}`}
+            class={style.readMore + " a-none"}
+            data-astro-prefetch
+        >
+            Read More
+        </a>
+    </div>
+</a>

package/src/components/stalux/posts/postContent.astro

@@ -0,0 +1,174 @@
+---
+import { fade } from "astro:transitions";
+import style from "@styles/components/posts/postContent.module.css";
+import "@styles/components/markdown.css";
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+import { toMachineDateTime } from "@utils/semantic-time";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+
+interface Props {
+    title: string;
+    date?: string;
+    updated?: string;
+    readingTime?: string;
+    readingMinutes?: number;
+    wordCount?: number;
+    hasImage?: boolean;
+}
+
+const props = Astro.props as Props;
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const promoteConfig = getPromoteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+const timezone = siteConfig.timezone;
+
+// 仅当开启 export_md 时，才展示“查看 Markdown 原文”按钮，并推导对应 .md 路径
+// /about 等非文章页面固定不显示 Markdown 原文按钮
+const isAboutPage = Astro.url.pathname.startsWith("/about");
+const exportMd = Boolean(promoteConfig?.export_md) && !isAboutPage;
+const mdSourceUrl = exportMd
+    ? Astro.url.pathname.replace(/\/$/, "") + ".md"
+    : "";
+---
+
+<article
+    class={style.articleContent}
+    transition:name="post-content"
+    transition:animate={fade({ duration: "1.2s" })}>
+    <!-- Article Header -->
+    <header class={style.articleHeader}>
+        <h1 class={style.title}>{props.title}</h1>
+        <div class={style.metadata}>
+            {
+                props.date && (
+                    <time class={style.metaItem} datetime={timezone ? toMachineDateTime(props.date, timezone) : props.date}>
+                        {t("post.publishTime")}
+                        {props.date}
+                    </time>
+                )
+            }
+
+            {
+                props.updated && (
+                    <time class={style.metaItem} datetime={timezone ? toMachineDateTime(props.updated, timezone) : props.updated}>
+                        {t("post.updateTime")}
+                        {props.updated}
+                    </time>
+                )
+            }
+        </div>
+        {
+            <div class={style.pageStats}>
+                    {(props.readingTime || props.readingMinutes) && (
+                        <span class={style.readingTime}>
+                            {t("post.readingTime")}{props.readingMinutes && props.readingMinutes > 0
+                                ? (props.readingMinutes < 1
+                                    ? t("common.lessThanOneMinute")
+                                    : t("common.minute", { n: props.readingMinutes }))
+                                : props.readingTime}
+                        </span>
+                    )}
+                    {props.wordCount && props.wordCount > 0 && (
+                        <span class={style.wordCount}>
+                            {t("post.wordCount")}{props.wordCount}
+                        </span>
+                    )}
+                    <span id="vercount_container_page_pv">
+                        {t("post.viewCount")}
+                        <span id="vercount_value_page_pv">Loading...</span>
+                    </span>
+                </div>
+        }
+        {
+            exportMd && (
+                <div class={style.sourceLinkRow}>
+                    <a
+                        class={style.sourceLink}
+                        href={mdSourceUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        {t("post.viewSource")}
+                    </a>
+                </div>
+            )
+        }
+    </header>
+
+    <!-- Article Body -->
+    <section class={style.body} data-pagefind-body>
+        <slot />
+    </section>
+</article>
+
+{
+    props.hasImage && (
+        <script>
+            import PhotoSwipeLightbox from "photoswipe/lightbox";
+            import PhotoSwipe from "photoswipe";
+
+            // 选择器必须与 @xingwangzhe/satteri-photoswipe HAST 插件生成的 class 一致
+            const GALLERY_SELECTOR = "a.pswp-gallery-item";
+
+            async function enrichPhotoSwipeData() {
+                const container = document.querySelector("[data-pagefind-body]");
+                if (!container) return;
+
+                const links = container.querySelectorAll(GALLERY_SELECTOR);
+                await Promise.all(
+                    [...links].map(async (link) => {
+                        const img = link.querySelector("img");
+                        if (!img) return;
+
+                        const tempImg = new Image();
+                        tempImg.src = img.currentSrc || img.src;
+                        try {
+                            await tempImg.decode();
+                        } catch {
+                            /* 解码失败时跳过尺寸写入 */
+                            return;
+                        }
+                        link.dataset.pswpWidth = String(tempImg.naturalWidth);
+                        link.dataset.pswpHeight = String(tempImg.naturalHeight);
+                    }),
+                );
+            }
+
+            let lightbox = null;
+
+            async function initLightbox() {
+                // 销毁旧实例（View Transition 导航后，旧 DOM 已移除，需安全销毁）
+                if (lightbox) {
+                    try {
+                        lightbox.destroy();
+                    } catch {
+                        /* ignore */
+                    }
+                    lightbox = null;
+                }
+
+                await enrichPhotoSwipeData();
+
+                lightbox = new PhotoSwipeLightbox({
+                    gallery: "[data-pagefind-body]",
+                    children: GALLERY_SELECTOR,
+                    pswpModule: PhotoSwipe,
+                    initialZoomLevel: "fill",
+                });
+                lightbox.init();
+            }
+
+            // 1) View Transition 导航后触发
+            document.addEventListener("astro:page-load", initLightbox);
+
+            // 2) 首屏兜底：避免 astro:page-load 在监听器注册前已触发
+            if (document.readyState !== "loading") {
+                setTimeout(initLightbox, 0);
+            } else {
+                document.addEventListener("DOMContentLoaded", () => setTimeout(initLightbox, 0));
+            }
+        </script>
+    )
+}

package/src/components/stalux/posts/postLeft.astro

@@ -0,0 +1,41 @@
+---
+import PostAuthor from "@components/stalux/posts/postAuthor.astro";
+import style from "@styles/components/posts/postSidebar.module.css";
+import SocialMedia from "@components/stalux/links/socialMedia.astro";
+import RandomPost from "@components/stalux/posts/randomPost.astro";
+import { fade } from "astro:transitions";
+// 判断是否为文章页面
+const isPostPage = Astro.url.pathname.includes("/posts/");
+---
+
+<aside
+    class={style.sidebar}
+    transition:name="left-sidebar"
+    transition:animate={fade({ duration: "0.3s" })}
+>
+    <PostAuthor />
+    <div class={style.sidebarContainer}>
+        <SocialMedia />
+    </div>
+    <div class={style.sidebarContainer}>
+        <RandomPost />
+    </div>
+
+    <style>
+        :global(.stalux-root) {
+            --sidebar-width: 280px;
+        }
+
+        @media (max-width: 1200px) {
+            :global(.stalux-root) {
+                --sidebar-width: 240px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            :global(.stalux-root) {
+                --sidebar-width: 0;
+            }
+        }
+    </style>
+</aside>

package/src/components/stalux/posts/postList.astro

@@ -0,0 +1,25 @@
+---
+import styles from "@styles/components/posts/postList.module.css";
+import { getCollection, type CollectionEntry } from "astro:content";
+import PostCard from "@components/stalux/posts/postCard.astro";
+
+interface Props {
+    posts?: CollectionEntry<"posts">[];
+}
+
+const props = Astro.props as Props;
+// Allow callers to pass filtered posts to avoid re-fetching the full list.
+const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
+---
+
+<div data-stalux="postlist" class={styles["container"]}>
+    <ul class={styles["post-list"]}>
+        {
+            posts.map((post) => (
+                <li>
+                    <PostCard post={post} />
+                </li>
+            ))
+        }
+    </ul>
+</div>

package/src/components/stalux/posts/postNavigation.astro

@@ -0,0 +1,137 @@
+---
+import style from "@styles/components/posts/postNavigation.module.css";
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+
+interface Props {
+    prev?: { url: string; title: string };
+    next?: { url: string; title: string };
+}
+
+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");
+---
+
+{
+    (props.prev || props.next) && (
+        <nav class={style.postNavigation} aria-label="文章导航">
+            <div class={style.postNavigationInner}>
+                {props.prev ? (
+                    <a
+                        href={props.prev.url}
+                        class={`${style.postNavLink} ${style.prevPost}`}
+                        rel="prev"
+                        data-astro-prefetch
+                    >
+                        <span class={style.postNavArrow}>
+                            <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="M19 12H5M12 19l-7-7 7-7" />
+                            </svg>
+                        </span>
+                        <div class={style.postNavContent}>
+                            <span class={style.postNavLabel}>{t("post.prevPost")}</span>
+                            <span class={style.postNavTitle}>
+                                {props.prev.title}
+                            </span>
+                        </div>
+                    </a>
+                ) : (
+                    <span
+                        class={`${style.postNavLink} ${style.prevPost} ${style.disabled}`}
+                    >
+                        <span class={style.postNavArrow}>
+                            <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="M19 12H5M12 19l-7-7 7-7" />
+                            </svg>
+                        </span>
+                        <div class={style.postNavContent}>
+                            <span class={style.postNavLabel}>{t("post.prevPost")}</span>
+                            <span class={style.postNavTitle}>
+                                {t("post.noPrev")}
+                            </span>
+                        </div>
+                    </span>
+                )}
+
+                {props.next ? (
+                    <a
+                        href={props.next.url}
+                        class={`${style.postNavLink} ${style.nextPost}`}
+                        rel="next"
+                        data-astro-prefetch
+                    >
+                        <div class={style.postNavContent}>
+                            <span class={style.postNavLabel}>{t("post.nextPost")}</span>
+                            <span class={style.postNavTitle}>
+                                {props.next.title}
+                            </span>
+                        </div>
+                        <span class={style.postNavArrow}>
+                            <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="M5 12h14M12 5l7 7-7 7" />
+                            </svg>
+                        </span>
+                    </a>
+                ) : (
+                    <span
+                        class={`${style.postNavLink} ${style.nextPost} ${style.disabled}`}
+                    >
+                        <div class={style.postNavContent}>
+                            <span class={style.postNavLabel}>{t("post.nextPost")}</span>
+                            <span class={style.postNavTitle}>
+                                {t("post.noNext")}
+                            </span>
+                        </div>
+                        <span class={style.postNavArrow}>
+                            <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="M5 12h14M12 5l7 7-7 7" />
+                            </svg>
+                        </span>
+                    </span>
+                )}
+            </div>
+        </nav>
+    )
+}

package/src/components/stalux/posts/postRight.astro

@@ -0,0 +1,33 @@
+---
+import style from "@styles/components/posts/postSidebar.module.css";
+import Date from "@components/stalux/common/date.astro";
+import PostToc from "@components/stalux/posts/postToc.astro";
+import PostTaxonomy from "@components/stalux/posts/PostTaxonomy.astro";
+import { fade } from "astro:transitions";
+interface Props {
+    headings?: Array<{ depth: number; slug: string; text: string }>;
+    tags?: string[];
+    categories?: string[];
+}
+
+const { headings = [], tags = [], categories = [] } = Astro.props;
+---
+
+<aside
+    class={style.sidebarRight}
+    transition:name="right-sidebar"
+    transition:animate={fade({ duration: "0.3s" })}
+>
+    <div class={style.sidebarContainer}>
+        <Date />
+    </div>
+    <div class={style.sidebarContainer}>
+        <PostToc headings={headings} />
+    </div>
+    <div class={style.sidebarContainer}>
+        <PostTaxonomy kind="tag" items={tags} />
+    </div>
+    <div class={style.sidebarContainer}>
+        <PostTaxonomy kind="category" items={categories} />
+    </div>
+</aside>

package/src/components/stalux/posts/postToc.astro

@@ -0,0 +1,88 @@
+---
+import { fade } from "astro:transitions";
+import style from "@styles/components/posts/postToc.module.css";
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+import { initTocScrollSpy } from "@utils/toc-scrollspy";
+
+interface TocHeading {
+    depth: number;
+    slug: string;
+    text: string;
+}
+
+interface Props {
+    headings?: TocHeading[];
+    title?: string;
+}
+
+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");
+const { headings = [], title = t("taxonomy.toc") } = Astro.props;
+
+const tocItems = headings
+    .filter((item) => item && item.slug && item.text)
+    .map((item) => ({
+        ...item,
+        depth: Math.min(Math.max(item.depth ?? 1, 1), 6),
+    }));
+
+// 定义目录内容的过渡动画 - 平滑褶皱效果
+const tocContentAnimation = {
+    old: {
+        name: "fadeSlideDown",
+        duration: "0.3s",
+        easing: "ease-out",
+    },
+    new: {
+        name: "fadeSlideDown",
+        duration: "0.3s",
+        easing: "ease-out",
+    },
+};
+---
+
+<nav transition:name="toc-container" data-toc-active-class={style.active} aria-label={t("taxonomy.toc")}>
+    <h3 class={style.title}>{title}</h3>
+    {
+        tocItems.length > 0 ? (
+            <ul
+                class={style.list}
+                transition:name="toc-content"
+                transition:animate={fade({ duration: "0.3s" })}
+            >
+                {tocItems.map((heading) => (
+                    <li>
+                        <a
+                            class={`${style.item} ${style[`depth-${heading.depth}`] || ""} a-none`}
+                            href={`#${heading.slug}`}
+                            data-toc-link
+                        >
+                            {heading.text}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        ) : (
+            <div class={style.empty}>{t("taxonomy.noToc")}</div>
+        )
+    }
+</nav>
+
+<script>
+    import { initTocScrollSpy } from "@utils/toc-scrollspy";
+
+    document.addEventListener("astro:page-load", () => {
+        const container = document.querySelector("[data-toc-active-class]");
+        const activeClass = container?.getAttribute("data-toc-active-class");
+        if (activeClass) initTocScrollSpy(activeClass);
+    });
+</script>
+
+<style is:global>
+    @keyframes fadeSlideDown {
+        from { opacity: 0; transform: translateY(-8px); }
+        to   { opacity: 1; transform: translateY(0); }
+    }
+</style>