@xingwangzhe/stalux 1.21.3 → 1.21.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.3",
+    "version": "1.21.6",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -84,7 +84,6 @@
         "@waline/client": "^3.15.2",
         "@xingwangzhe/satteri-mermaid": "0.7.3",
         "@xingwangzhe/satteri-photoswipe": "^0.2.2",
-        "@xingwangzhe/stalux": "1.21.0",
         "@xingwangzhe/tags-cloud": "^1.2.5",
         "animejs": "^4.5.0",
         "astro-expressive-code": "^0.44.1",

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")}
@@ -91,10 +91,12 @@ const navs = navsConfig?.items ?? [];
         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();
         });
 
         // 汉堡菜单交互
@@ -140,17 +142,20 @@ const navs = navsConfig?.items ?? [];
         if (!navList || !btnLeft || !btnRight) return;
 
         function updateButtons() {
-            const maxScrollLeft = Math.max(0, navList.scrollWidth - navList.clientWidth);
-            const hasOverflow = maxScrollLeft > 4;
-            const scrollLeft = Math.min(Math.max(navList.scrollLeft, 0), maxScrollLeft);
-
-            if (navList.scrollLeft !== scrollLeft) {
-                navList.scrollLeft = scrollLeft;
-            }
-
-            navList.toggleAttribute("data-overflow", hasOverflow);
-            btnLeft.classList.toggle("visible", hasOverflow && scrollLeft > 4);
-            btnRight.classList.toggle("visible", hasOverflow && scrollLeft < maxScrollLeft - 4);
+            const navWidth = navList.clientWidth;
+            const itemCount = navList.children.length;
+            const baseFontSize = Number.parseFloat(getComputedStyle(navList).fontSize) || 16;
+            const minFontSize = 12;
+            const gap = Number.parseFloat(getComputedStyle(navList).gap) || 0;
+            const estimatedWidth = [...navList.children].reduce(
+                (total, item) => total + item.getBoundingClientRect().width,
+                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");
         }
 
         btnLeft.addEventListener("click", () => {

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/pages/index.astro

@@ -19,10 +19,10 @@ import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, get
 
 <Stalux title={siteTitle} description={siteDescription} fontSubsetId="home">
   <div class={styles.homeBody}>
-    <h1 class={styles.homeTitle}>{siteTitle}</h1>
     <div class={styles.homeNavs}>
       <Navs />
     </div>
+    <h1 class={styles.homeTitle}>{siteTitle}</h1>
     <h2 class="sr-only" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">{t("ai.about")}</h2>
     <Author />
     <TextType />

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/layout/navs.module.css

@@ -1,4 +1,10 @@
 /* 导航容器 — 相对定位，为滚动按钮提供锚点 */
+nav {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+}
+
 .navContainer {
     position: relative;
     width: 100%;
@@ -13,30 +19,22 @@
     gap: 2rem;
     align-items: center;
     justify-content: center;
+    transform: scale(var(--nav-scale, 1));
+    transform-origin: center;
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
     transition: transform 0.3s ease;
     /* 当导航项总宽度超过视口时允许横向滚动，防止右侧项被裁剪 */
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    /* 隐藏滚动条但保留滚动功能 */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.navList[data-overflow] {
-    justify-content: flex-start;
-    padding-inline: 44px;
-}
-
-.navList::-webkit-scrollbar {
-    display: none;
+    flex-wrap: wrap;
+    width: 100%;
+    overflow: visible;
+    justify-content: center;
 }
 
 /* 滚动按钮 — 仅当内容溢出时显示 */
 .scrollBtn {
+    display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -49,7 +47,6 @@
     backdrop-filter: blur(8px);
     color: var(--white-full);
     cursor: pointer;
-    display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
@@ -63,7 +60,7 @@
     background: var(--black-50p);
 }
 
-.scrollBtn.visible {
+.scrollBtn[data-visible] {
     opacity: 1;
     pointer-events: auto;
 }
@@ -77,7 +74,7 @@
 }
 
 /* 导航容器 hover 时显示滚动按钮 */
-.navContainer:hover .scrollBtn.visible {
+.navContainer:hover .scrollBtn[data-visible] {
     opacity: 1;
 }
 
@@ -183,20 +180,16 @@
     }
 }
 
-/* 较窄屏幕：隐藏文字，只显示图标 */
+/* 中小屏幕：保留文字，通过横向滚动展示完整导航 */
 @media (max-width: 900px) {
-    .navText {
-        display: none;
-    }
-
     .navItem {
-        font-size: 1em;
-        margin-right: 0.5em;
-        margin-left: 0.5em;
+        font-size: 0.95em;
+        margin-right: 0.25em;
+        margin-left: 0.25em;
     }
 
     .navList {
-        gap: 0.75rem;
+        gap: 0.5rem;
     }
 }
 
@@ -204,12 +197,19 @@
 @media (max-width: 600px) {
     .navToggle {
         display: block;
+        position: fixed;
+        top: 0.75rem;
+        left: 0.75rem;
     }
 
     .navContainer {
         overflow: visible;
     }
 
+    nav {
+        width: auto;
+    }
+
     .navList {
         position: fixed;
         top: 0;

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;
@@ -13,10 +14,21 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            text-align: center;
             border-radius: 50%;
             background-color: var(--white-15p);
             box-sizing: border-box;
             overflow: hidden;
         }
+        a,
+        .icon-container,
+        .custom-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            line-height: 1;
+        }
     }
 }

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/styles/pages/home.module.css

@@ -4,6 +4,7 @@
     align-items: center;
     min-height: 100vh;
     padding-bottom: var(--space-3xl);
+    position: relative;
 }
 
 .homeTitle {
@@ -16,6 +17,11 @@
 
 .homeNavs {
     display: flex;
+    width: 100%;
+    order: -1;
+    min-width: 0;
+    max-width: 100%;
+    justify-content: center;
 }
 
 #showPostList {
@@ -44,6 +50,10 @@
         align-items: center;
         gap: 0.5em;
     }
+
+    .homeNavs :global(nav) {
+        width: 100%;
+    }
     #showPostList {
         margin-top: 2em;
         font-size: 1.1em;