@xingwangzhe/stalux 1.21.5 → 1.21.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.5",
+    "version": "1.21.7",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

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

@@ -7,8 +7,3 @@
 <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/footer/FooterBadges.astro

@@ -93,7 +93,7 @@ function badgeImg(opts: Record<string, any>) {
         align-items: center;
         gap: 0.4rem;
         padding: 0.2rem 0;
-        color: var(--white-40p);
+        color: var(--white-70p);
         font-size: 0.85rem;
         user-select: none;
         list-style: none;
@@ -116,12 +116,12 @@ function badgeImg(opts: Record<string, any>) {
     }
 
     .badge-group-title {
-        color: var(--white-60p);
+        color: var(--white-80p);
     }
 
     .badge-group-hint {
         font-size: 0.7rem;
-        color: var(--white-25p);
+        color: var(--white-70p);
     }
     .badge-group[open] .badge-group-hint[data-hint="collapsed"],
     .badge-group:not([open]) .badge-group-hint[data-hint="expanded"] {

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

@@ -27,6 +27,7 @@ const copyrightYear =
 
 <style>
     .copyright {
+        color: var(--white-70p);
         font-weight: 500;
         display: flex;
         gap: 0.3em;

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

@@ -42,6 +42,7 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
 
 <style>
     .theme-info {
+        color: var(--white-70p);
         font-size: 0.85rem;
         display: flex;
         justify-content: center;

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

@@ -62,7 +62,7 @@ const navs = navsConfig?.items ?? [];
             }
             <li class={styles.navItem}>
                 <a
-                    href="javascript:void(0)"
+                    href="#search"
                     class={styles.navLink}
                     data-ref="stalux-search-btn"
                     aria-label={t("search.title")}
@@ -87,14 +87,23 @@ const navs = navsConfig?.items ?? [];
 </nav>
 <Search />
 <script>
+    const navWindow = window as Window & {
+        __STALUX_NAV_INITIALIZED__?: boolean;
+    };
+
     document.addEventListener("astro:page-load", () => {
+        if (navWindow.__STALUX_NAV_INITIALIZED__) return;
+        navWindow.__STALUX_NAV_INITIALIZED__ = true;
+
         const searchBtn = document.querySelector(
             '[data-ref="stalux-search-btn"]',
         );
-        searchBtn?.addEventListener("click", (e) => {
+        searchBtn?.addEventListener("click", async (e) => {
             e.preventDefault();
             closeNav();
-            document.getElementById('search')?.open();
+            await import("@pagefind/component-ui");
+            await import("@pagefind/component-ui/css");
+            document.getElementById("search")?.open();
         });
 
         // 汉堡菜单交互
@@ -139,7 +148,20 @@ const navs = navsConfig?.items ?? [];
         const btnRight = document.querySelector('[data-ref="stalux-nav-scroll-right"]');
         if (!navList || !btnLeft || !btnRight) return;
 
+        let frameId = 0;
+        let lastScale = "1";
+
+        function updateScrollButtons() {
+            const hasOverflow = navList.scrollWidth > navList.clientWidth;
+            const atStart = navList.scrollLeft <= 1;
+            const atEnd = navList.scrollLeft + navList.clientWidth >= navList.scrollWidth - 1;
+
+            btnLeft.toggleAttribute("data-visible", hasOverflow && !atStart);
+            btnRight.toggleAttribute("data-visible", hasOverflow && !atEnd);
+        }
+
         function updateButtons() {
+            frameId = 0;
             const navWidth = navList.clientWidth;
             const itemCount = navList.children.length;
             const baseFontSize = Number.parseFloat(getComputedStyle(navList).fontSize) || 16;
@@ -150,10 +172,17 @@ const navs = navsConfig?.items ?? [];
                 0,
             ) + gap * Math.max(0, itemCount - 1);
             const scale = estimatedWidth > navWidth ? Math.max(minFontSize / baseFontSize, navWidth / estimatedWidth) : 1;
-            navList.style.setProperty("--nav-scale", String(scale));
-            navList.removeAttribute("data-overflow");
-            btnLeft.removeAttribute("data-visible");
-            btnRight.removeAttribute("data-visible");
+            const nextScale = String(scale);
+            if (nextScale !== lastScale) {
+                navList.style.setProperty("--nav-scale", nextScale);
+                lastScale = nextScale;
+            }
+            updateScrollButtons();
+        }
+
+        function scheduleUpdate() {
+            if (frameId) return;
+            frameId = requestAnimationFrame(updateButtons);
         }
 
         btnLeft.addEventListener("click", () => {
@@ -163,18 +192,16 @@ const navs = navsConfig?.items ?? [];
         btnRight.addEventListener("click", () => {
             navList.scrollBy({ left: 300, behavior: "smooth" });
         });
-
-        // 监听滚动事件更新按钮状态
-        navList.addEventListener("scroll", updateButtons);
+        navList.addEventListener("scroll", scheduleUpdate, { passive: true });
 
         // 用 ResizeObserver 监听容器尺寸变化（窗口缩窄/变宽时重新判断）
-        const ro = new ResizeObserver(updateButtons);
+        const ro = new ResizeObserver(scheduleUpdate);
         ro.observe(navList);
         if (navList.parentElement) ro.observe(navList.parentElement);
-        window.addEventListener("resize", updateButtons, { passive: true });
-        window.addEventListener("load", updateButtons, { once: true });
+        window.addEventListener("resize", scheduleUpdate, { passive: true });
+        window.addEventListener("load", scheduleUpdate, { once: true });
 
         // 初始检测
-        updateButtons();
+        scheduleUpdate();
     }
 </script>

package/src/components/stalux/links/linkCard.astro

@@ -44,7 +44,7 @@ const icon = link.icon ?? link.avatar ?? "/favicon.ico";
         />
     </div>
     <div class={styles.content}>
-        <h3 class={styles.title}>{title}</h3>
+        <h2 class={styles.title}>{title}</h2>
         {desc && <p class={styles.description}>{desc}</p>}
     </div>
 </a>

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

@@ -8,9 +8,10 @@ import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, get
 
 interface Props {
     post: CollectionEntry<"posts">;
+    priority?: boolean;
 }
 
-const post = Astro.props.post;
+const { post, priority = false } = Astro.props;
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);
 const timezone = siteConfig.timezone;
@@ -19,16 +20,35 @@ const timezone = siteConfig.timezone;
 const description = post.data.desc || "";
 ---
 
-<a href={`/posts/${post.data.abbrlink}/`} class={style.post + " a-none"} data-astro-prefetch="viewport">
+<article class={style.post}>
     <div class={style.postContainer}>
         {
             post.data.cover && (
-                <div class={style.postCover}>
-                    <img src={post.data.cover} alt={post.data.title} loading="lazy" />
-                </div>
+                <a
+                    href={`/posts/${post.data.abbrlink}/`}
+                    class="a-none"
+                    data-astro-prefetch="viewport"
+                    aria-label={post.data.title}
+                >
+                    <div class={style.postCover}>
+                        <img
+                            src={post.data.cover}
+                            alt={post.data.title}
+                            loading={priority ? "eager" : "lazy"}
+                            decoding="async"
+                            fetchpriority={priority ? "high" : "auto"}
+                            width="640"
+                            height="360"
+                        />
+                    </div>
+                </a>
             )
         }
-        <h2 class={style.postTitle}>{post.data.title}</h2>
+        <h2 class={style.postTitle}>
+            <a href={`/posts/${post.data.abbrlink}/`} class="a-none" data-astro-prefetch="viewport">
+                {post.data.title}
+            </a>
+        </h2>
         <div class={style.time}>
             {
                 post.data.date && (
@@ -57,7 +77,7 @@ const description = post.data.desc || "";
                 {
                     post.data.tags?.map((tag) => (
                         <a class="a-none" href={`/tags/${tag}`} data-astro-prefetch>
-                            <div class={style.postTag}>{tag}</div>
+                            <span class={style.postTag}>{tag}</span>
                         </a>
                     ))
                 }
@@ -66,18 +86,18 @@ const description = post.data.desc || "";
                 {
                     post.data.categories?.map((category) => (
                         <a class="a-none" href={`/categories/${category}`} data-astro-prefetch>
-                            <div class={style.postCategory}>{category}</div>
+                            <span class={style.postCategory}>{category}</span>
                         </a>
                     ))
                 }
             </div>
         </div>
         <a
-            href={`/posts/${post.data.abbrlink}`}
+            href={`/posts/${post.data.abbrlink}/`}
             class={style.readMore + " a-none"}
             data-astro-prefetch
         >
             Read More
         </a>
     </div>
-</a>
+</article>

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

@@ -117,24 +117,30 @@ const mdSourceUrl = exportMd
                 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);
-                    }),
-                );
+                const links = [...container.querySelectorAll(GALLERY_SELECTOR)];
+                for (const link of links) {
+                    const img = link.querySelector("img");
+                    if (!img) continue;
+
+                    const width = img.naturalWidth;
+                    const height = img.naturalHeight;
+                    if (width && height) {
+                        link.dataset.pswpWidth = String(width);
+                        link.dataset.pswpHeight = String(height);
+                        continue;
+                    }
+
+                    const tempImg = new Image();
+                    tempImg.src = img.currentSrc || img.src;
+                    try {
+                        await tempImg.decode();
+                    } catch {
+                        /* 解码失败时跳过尺寸写入 */
+                        continue;
+                    }
+                    link.dataset.pswpWidth = String(tempImg.naturalWidth);
+                    link.dataset.pswpHeight = String(tempImg.naturalHeight);
+                }
             }
 
             let lightbox = null;
@@ -150,7 +156,8 @@ const mdSourceUrl = exportMd
                     lightbox = null;
                 }
 
-                await enrichPhotoSwipeData();
+                // 不阻塞文章首屏；已加载图片会立即写入尺寸，其余图片在后台补齐。
+                void enrichPhotoSwipeData();
 
                 lightbox = new PhotoSwipeLightbox({
                     gallery: "[data-pagefind-body]",

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

@@ -15,9 +15,9 @@ const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.d
 <div data-stalux="postlist" class={styles["container"]}>
     <ul class={styles["post-list"]}>
         {
-            posts.map((post) => (
+            posts.map((post, index) => (
                 <li>
-                    <PostCard post={post} />
+                    <PostCard post={post} priority={index === 0} />
                 </li>
             ))
         }

package/src/components/stalux/words/wordList.astro

@@ -25,7 +25,12 @@ const sorted = [...entries].sort((a, b) => {
             return (
                 <li class={styles.item}>
                     {hash ? (
-                        <a href="javascript:void(0)" class="a-none" data-word-hash={hash}>
+                        <a
+                            href={hash}
+                            class="a-none"
+                            data-word-hash={hash}
+                            aria-label={`Jump to ${entry.data.abbrlink}`}
+                        >
                             <WordCard entry={entry} timezone={timezone} />
                         </a>
                     ) : (

package/src/pages/404.astro

@@ -27,7 +27,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
   </div>
 
   <script define:vars={{ countdownText: t("page404.countdown", { n: "{n}" }) }} is:inline>
-    let timer: number | undefined;
+    let timer;
 
     function startCountdown() {
       if (timer !== undefined) window.clearInterval(timer);
@@ -40,7 +40,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
         if (seconds <= 0) {
           if (timer !== undefined) window.clearInterval(timer);
           timer = undefined;
-          const home = document.querySelector<HTMLAnchorElement>(".home-btn");
+          const home = document.querySelector(".home-btn");
           home?.click();
         } else {
           el.textContent = countdownText.replace("{n}", String(seconds));

package/src/plugins/feature-flags.ts

@@ -56,13 +56,19 @@ export const featureFlagsHast = defineHastPlugin({
         filter: ["img"],
         visit(node, ctx) {
             ctx.data.astro.frontmatter.hasImage = true;
-            // 添加懒加载和异步解码（封面图不在此处理，由 postCard.astro 控制）
+            // 第一张正文图片可能成为 LCP，优先加载；其余图片延迟加载。
+            const data = ctx.data as Record<string, unknown>;
+            const firstImage = !data.staluxFirstImageSeen;
+            data.staluxFirstImageSeen = true;
             if (!node.properties?.loading) {
-                ctx.setProperty(node, "loading", "lazy");
+                ctx.setProperty(node, "loading", firstImage ? "eager" : "lazy");
             }
             if (!node.properties?.decoding) {
                 ctx.setProperty(node, "decoding", "async");
             }
+            if (firstImage && !node.properties?.fetchpriority) {
+                ctx.setProperty(node, "fetchpriority", "high");
+            }
         },
     },
 });

package/src/styles/components/links/socialLinks.module.css

@@ -3,6 +3,7 @@
     ul {
         display: flex;
         flex-wrap: wrap;
+        justify-content: center;
         gap: 1em;
         padding: 0;
         margin: 0;

package/src/styles/components/posts/postCard.module.css

@@ -1,3 +1,25 @@
+.post {
+    display: block;
+    height: 100%;
+    color: inherit;
+    text-decoration: none;
+}
+
+.postTitle {
+    margin: 0;
+    line-height: 1.35;
+}
+
+.postTitle a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.postDescription {
+    color: var(--white-70p);
+    line-height: 1.6;
+}
+
 .postContainer {
     background-color: var(--card-bg);
     border-radius: var(--radius-lg);

package/src/utils/view-transitions.ts

@@ -37,7 +37,7 @@ export type RouteAnimation = {
 const easing = "cubic-bezier(0.25, 0.9, 0.2, 1)";
 const exitAnimation: TransitionAnimation = {
     name: "stalux-page-fade-out",
-    duration: "0.32s",
+    duration: "0.16s",
     easing,
     fillMode: "both",
 };
@@ -48,7 +48,7 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
             old: exitAnimation,
             new: {
                 name: `stalux-page-${name}-in`,
-                duration: "0.42s",
+                duration: "0.2s",
                 easing,
                 fillMode: "both",
             },
@@ -57,7 +57,7 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
             old: exitAnimation,
             new: {
                 name: `stalux-page-${backName}-in`,
-                duration: "0.42s",
+                duration: "0.2s",
                 easing,
                 fillMode: "both",
             },