@xingwangzhe/stalux 1.35.0 → 1.35.2

package/README.md

@@ -93,6 +93,7 @@ bun run dev
 - 🗺️ **Sitemap** (bundled; `.md` source endpoints auto-filtered)
 - 🖼️ **PhotoSwipe** image lightbox
 - 📊 **Mermaid** diagrams and flowcharts
+  Uses Merman through `@xingwangzhe/satteri-mermaid@0.8.1`, with the `dark` theme and a transparent canvas by default. The plugin supports 11 theme presets; see the [configuration reference](https://github.com/xingwangzhe/satteri-mermaid/blob/v0.8.1/docs/configuration.md). Rendering failures throw by default.
 - 📐 **Math formula rendering** (Temml → MathML)
 - 💬 **Waline** comment system
 - 🤖 **LLM discovery files** (llms.txt / llms-full.txt)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.35.0",
+    "version": "1.35.2",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -95,47 +95,47 @@
         "styles:watch": "node scripts/build-styles.ts --watch"
     },
     "dependencies": {
-        "@astrojs/compiler": "2.13.1",
-        "@astrojs/markdown-satteri": "0.4.2",
-        "@astrojs/partytown": "2.1.8",
+        "@astrojs/compiler": "^4.0.0",
+        "@astrojs/markdown-satteri": "^0.4.3",
+        "@astrojs/partytown": "^2.1.8",
         "@astrojs/rss": "^4.0.19",
         "@astrojs/sitemap": "^3.7.4",
-        "@babel/parser": "7.29.9",
+        "@babel/parser": "^8.0.6",
         "@expressive-code/plugin-line-numbers": "^0.44.2",
-        "@lucide/astro": "^1.47.0",
+        "@lucide/astro": "^1.52.0",
         "@mcp-b/webmcp-polyfill": "^5.1.0",
         "@pagefind/component-ui": "^1.5.2",
-        "@waline/client": "3.16.0",
-        "@xingwangzhe/cjk-font-split-native": "0.2.0",
-        "@xingwangzhe/satteri-mermaid": "0.7.8",
-        "@xingwangzhe/satteri-photoswipe": "^0.2.5",
-        "@xingwangzhe/tags-cloud": "^1.2.8",
+        "@waline/client": "^3.16.0",
+        "@xingwangzhe/cjk-font-split-native": "^0.2.0",
+        "@xingwangzhe/satteri-mermaid": "^0.8.1",
+        "@xingwangzhe/satteri-photoswipe": "^0.2.6",
+        "@xingwangzhe/tags-cloud": "^1.2.9",
         "astro-expressive-code": "^0.44.2",
         "astro-seo": "^1.2.0",
         "badge-maker": "^6.0.0",
-        "css-tree": "3.2.1",
-        "magic-string": "0.30.21",
+        "css-tree": "^3.2.1",
+        "magic-string": "^1.4.3",
         "pagefind": "^1.5.2",
-        "parse5": "8.0.1",
+        "parse5": "^8.0.1",
         "photoswipe": "^5.4.4",
         "satteri": "^0.10.5",
-        "simple-icons": "^16.32.0",
+        "simple-icons": "^16.34.0",
         "temml": "^0.13.5",
         "yaml": "^2.9.1"
     },
     "devDependencies": {
-        "@astrojs/check": "0.9.10",
-        "@biomejs/biome": "2.5.14",
+        "@astrojs/check": "^0.9.10",
+        "@biomejs/biome": "^2.5.15",
         "@types/css-tree": "^3.2.0",
-        "@types/node": "^26.6.2",
+        "@types/node": "^26.6.4",
         "@unocss/astro": "^66.10.5",
-        "@vitest/coverage-v8": "5.0.1",
-        "astro": "^7.3.5",
-        "knip": "^6.37.0",
+        "@vitest/coverage-v8": "^5.0.3",
+        "astro": "^7.3.6",
+        "knip": "^6.40.0",
         "typescript": "npm:@typescript/typescript6@6.0.2",
         "unocss": "^66.10.5",
-        "vite": "8.3.0",
-        "vitest": "5.0.1"
+        "vite": "^8.3.3",
+        "vitest": "^5.0.3"
     },
     "peerDependencies": {
         "astro": "^7.3.5"

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

@@ -57,57 +57,65 @@ const archiveYears = [...archivesByYearMonth.entries()]
     <div class="stalux-archive-page-header">
         <div class="stalux-archive-timeline-container">
             {archiveYears.length > 0 ? (
-    archiveYears.map((archiveYear) => (
-        <div class="stalux-archive-year-section" data-year={String(archiveYear.year)}>
-            <div class="stalux-archive-year-header">
-                <h2 class="stalux-archive-year-title">{archiveYear.year}</h2>
-                <div class="stalux-archive-year-count">
-                    {t("archives.postCount", { n: archiveYear.count })}
-                </div>
-            </div>
-            {archiveYear.months.map(({ month, posts: monthPosts }) => (
-                <div
-                    class="stalux-archive-month-section"
-                    data-archive-month
-                    style={{
-                        "--archive-estimate": `${Math.ceil(monthPosts.length / 12) * 12 * 48 + 40}px`,
-                    }}
-                >
-                    <h3 class="stalux-archive-month-title">{t("archives.month", { n: month })}</h3>
-                    {Array.from({ length: Math.ceil(monthPosts.length / 12) }, (_, index) =>
-                        monthPosts.slice(index * 12, (index + 1) * 12),
-                    ).map((group) => (
-                        <ul
-                            class="stalux-archive-post-list"
-                            style={{ "--archive-group-estimate": `${group.length * 48}px` }}
-                        >
-                            {group.map((post) => (
-                                <li class="stalux-archive-post-item">
-                                    <time
-                                        class="stalux-archive-post-date"
-                                        datetime={post.data.date}
+                archiveYears.map((archiveYear) => (
+                    <div class="stalux-archive-year-section" data-year={String(archiveYear.year)}>
+                        <div class="stalux-archive-year-header">
+                            <h2 class="stalux-archive-year-title">{archiveYear.year}</h2>
+                            <div class="stalux-archive-year-count">
+                                {t("archives.postCount", { n: archiveYear.count })}
+                            </div>
+                        </div>
+                        {archiveYear.months.map(({ month, posts: monthPosts }) => (
+                            <div
+                                class="stalux-archive-month-section"
+                                data-archive-month
+                                style={{
+                                    "--archive-estimate": `${Math.ceil(monthPosts.length / 12) * 12 * 48 + 40}px`,
+                                }}
+                            >
+                                <h3 class="stalux-archive-month-title">
+                                    {t("archives.month", { n: month })}
+                                </h3>
+                                {Array.from(
+                                    { length: Math.ceil(monthPosts.length / 12) },
+                                    (_, index) => monthPosts.slice(index * 12, (index + 1) * 12),
+                                ).map((group) => (
+                                    <ul
+                                        class="stalux-archive-post-list"
+                                        style={{
+                                            "--archive-group-estimate": `${group.length * 48}px`,
+                                        }}
                                     >
-                                        {format(parseDate(post.data.date), "yyyy-MM-dd")}
-                                    </time>
-                                    <a
-                                        href={`/posts/${post.data.abbrlink}/`}
-                                        class="stalux-archive-post-link"
-                                        data-archive-description={post.data.desc || ""}
-                                        data-astro-prefetch="viewport"
-                                    >
-                                        {post.data.title}
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    ))}
-                </div>
-            ))}
-        </div>
-    ))
-) : (
-    <div class="stalux-archive-no-posts">{t("archives.noPosts")}</div>
-)}
+                                        {group.map((post) => (
+                                            <li class="stalux-archive-post-item">
+                                                <time
+                                                    class="stalux-archive-post-date"
+                                                    datetime={post.data.date}
+                                                >
+                                                    {format(
+                                                        parseDate(post.data.date),
+                                                        "yyyy-MM-dd",
+                                                    )}
+                                                </time>
+                                                <a
+                                                    href={`/posts/${post.data.abbrlink}/`}
+                                                    class="stalux-archive-post-link"
+                                                    data-archive-description={post.data.desc || ""}
+                                                    data-astro-prefetch="viewport"
+                                                >
+                                                    {post.data.title}
+                                                </a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                ))
+            ) : (
+                <div class="stalux-archive-no-posts">{t("archives.noPosts")}</div>
+            )}
         </div>
 
         <slot name="main" />

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

@@ -9,8 +9,8 @@ const categoryList = await getCategoryCountList(Astro.logger);
 
 <ul class="stalux-categories">
     {categoryList.map((category) => (
-    <li>
-        <CategoriesCard category={category} />
-    </li>
-))}
+        <li>
+            <CategoriesCard category={category} />
+        </li>
+    ))}
 </ul>

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

@@ -55,8 +55,8 @@ const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "z
     <div class="stalux-footer-content stalux-u-flex stalux-u-flex-col">
         <!-- 版权信息 -->
         {footerConfig?.copyright?.enabled && (
-    <FooterCopyright author={author} startYear={footerConfig?.copyright?.startYear} />
-)}
+            <FooterCopyright author={author} startYear={footerConfig?.copyright?.startYear} />
+        )}
 
         <!-- 徽章展示 -->
         <FooterBadges badges={badges} />
@@ -64,8 +64,12 @@ const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "z
         <!-- 备案信息 -->
         <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}
+            pubsec={footerConfig?.beian?.security?.enabled
+                ? footerConfig?.beian?.security?.text
+                : undefined}
+            pubsecNumber={footerConfig?.beian?.security?.enabled
+                ? footerConfig?.beian?.security?.number
+                : undefined}
         />
 
         <!-- 主题信息 -->

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

@@ -52,9 +52,9 @@ const ldJson = JSON.stringify(seo.schema).replace(/<\//g, "<\\/");
         openGraph={seo.openGraph}
         twitter={seo.twitter}
         extend={{
-    link: seo.links,
-    meta: seo.meta,
-}}
+            link: seo.links,
+            meta: seo.meta,
+        }}
     />
     <!-- 代码字体由 Astro Fonts API 注入；正文按页面生成 native CJK 子集。 -->
     <Font cssVariable="--font-code" />

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

@@ -48,21 +48,21 @@ const navs = navsConfig?.items ?? [];
             class="stalux-nav-list stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap stalux-u-w-full stalux-u-min-w-0"
         >
             {navs.map((item) => {
-    const NavIcon = item.icon ? getLucideIcon(item.icon, Astro.logger) : null;
-    return (
-        <li class="stalux-nav-item stalux-u-flex stalux-u-items-center">
-            <a
-                href={item.link}
-                class="stalux-nav-link"
-                data-ref="stalux-nav-link"
-                data-astro-prefetch
-            >
-                {NavIcon && <NavIcon size={20} stroke-width={2} class="nav-icon" />}
-                <span class="stalux-nav-text">{item.title}</span>
-            </a>
-        </li>
-    );
-})}
+                const NavIcon = item.icon ? getLucideIcon(item.icon, Astro.logger) : null;
+                return (
+                    <li class="stalux-nav-item stalux-u-flex stalux-u-items-center">
+                        <a
+                            href={item.link}
+                            class="stalux-nav-link"
+                            data-ref="stalux-nav-link"
+                            data-astro-prefetch
+                        >
+                            {NavIcon && <NavIcon size={20} stroke-width={2} class="nav-icon" />}
+                            <span class="stalux-nav-text">{item.title}</span>
+                        </a>
+                    </li>
+                );
+            })}
             <li class="stalux-nav-item stalux-u-flex stalux-u-items-center">
                 <a
                     href="#search"

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

@@ -12,8 +12,8 @@ const links = linksConfig?.sites ?? [];
 
 <ul class="stalux-links">
     {links.map((link) => (
-    <li class="stalux-link-list-item">
-        <LinkCard link={link} />
-    </li>
-))}
+        <li class="stalux-link-list-item">
+            <LinkCard link={link} />
+        </li>
+    ))}
 </ul>

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

@@ -42,40 +42,40 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
 >
     <ul>
         {mediaLinks.map((item) => {
-    const icon = item.icon ? getIconByTitle(item.icon) : undefined;
-    return (
-        <li class="social_icon">
-            <a
-                href={item.link}
-                target="_blank"
-                aria-label={item.icon}
-                rel="noopener noreferrer"
-                title={item.icon}
-                class="a-none"
-            >
-                {icon ? (
-                    <div class="icon-container">
-                        <svg
-                            role="img"
-                            viewBox="0 0 24 24"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            fill="currentColor"
-                            aria-hidden="true"
-                        >
-                            <title>{icon.title}</title>
-                            <path d={icon.path} />
-                        </svg>
-                    </div>
-                ) : (
-                    <span class="custom-icon">
-                        {item.icon ? item.icon.charAt(0).toUpperCase() : ""}
-                    </span>
-                )}
-            </a>
-        </li>
-    );
-})}
+            const icon = item.icon ? getIconByTitle(item.icon) : undefined;
+            return (
+                <li class="social_icon">
+                    <a
+                        href={item.link}
+                        target="_blank"
+                        aria-label={item.icon}
+                        rel="noopener noreferrer"
+                        title={item.icon}
+                        class="a-none"
+                    >
+                        {icon ? (
+                            <div class="icon-container">
+                                <svg
+                                    role="img"
+                                    viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="24"
+                                    height="24"
+                                    fill="currentColor"
+                                    aria-hidden="true"
+                                >
+                                    <title>{icon.title}</title>
+                                    <path d={icon.path} />
+                                </svg>
+                            </div>
+                        ) : (
+                            <span class="custom-icon">
+                                {item.icon ? item.icon.charAt(0).toUpperCase() : ""}
+                            </span>
+                        )}
+                    </a>
+                </li>
+            );
+        })}
     </ul>
 </nav>

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

@@ -50,14 +50,18 @@ const cfg = {
 >
     {items.length > 0 && <h3 class="stalux-post-taxonomy-title">{title ?? cfg.heading}</h3>}
     {items.length > 0 ? (
-    <div class={cfg.listClass} transition:name={cfg.contentName}>
-        {items.map((item) => (
-            <a href={`${cfg.prefix}${item}/`} class={`${cfg.itemClass} a-none`} data-astro-prefetch>
-                {item}
-            </a>
-        ))}
-    </div>
-) : (
-    <div class="stalux-post-taxonomy-empty">{cfg.empty}</div>
-)}
+        <div class={cfg.listClass} transition:name={cfg.contentName}>
+            {items.map((item) => (
+                <a
+                    href={`${cfg.prefix}${item}/`}
+                    class={`${cfg.itemClass} a-none`}
+                    data-astro-prefetch
+                >
+                    {item}
+                </a>
+            ))}
+        </div>
+    ) : (
+        <div class="stalux-post-taxonomy-empty">{cfg.empty}</div>
+    )}
 </nav>

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

@@ -30,13 +30,13 @@ const licenseName = buildCCName(cc, t);
         <p class="stalux-license-title">{title}</p>
         <p class="stalux-license-author">{t("post.author")}{author}</p>
         {url && (
-    <p class="stalux-license-url">
-        {t("post.articleLink")}
-        <a href={url} target="_blank" rel="noopener noreferrer">
-            {url}
-        </a>
-    </p>
-)}
+            <p class="stalux-license-url">
+                {t("post.articleLink")}
+                <a href={url} target="_blank" rel="noopener noreferrer">
+                    {url}
+                </a>
+            </p>
+        )}
         <p class="stalux-license-license">
             {t("post.licensedUnder")}
             <a href={licenseLink} target="_blank" rel="noopener noreferrer">

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

@@ -23,25 +23,25 @@ const description = post.data.desc || "";
 <article class="stalux-post-card-shell block h-full text-inherit no-underline">
     <div class="stalux-post-card stalux-u-flex stalux-u-flex-col stalux-u-w-full stalux-u-min-w-0">
         {post.data.cover && (
-    <a
-        href={`/posts/${post.data.abbrlink}/`}
-        class="a-none"
-        data-astro-prefetch="viewport"
-        aria-label={post.data.title}
-    >
-        <div class="stalux-card-post-cover stalux-u-w-full stalux-u-min-w-0">
-            <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>
-)}
+            <a
+                href={`/posts/${post.data.abbrlink}/`}
+                class="a-none"
+                data-astro-prefetch="viewport"
+                aria-label={post.data.title}
+            >
+                <div class="stalux-card-post-cover stalux-u-w-full stalux-u-min-w-0">
+                    <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="stalux-card-post-title"
             transition:name={priority ? getPostTitleTransitionName(post.data.abbrlink) : undefined}
@@ -52,21 +52,27 @@ const description = post.data.desc || "";
         </h2>
         <div class="stalux-card-time stalux-u-items-center stalux-u-flex-wrap">
             {post.data.date && (
-    <time
-        class="stalux-card-post-date"
-        datetime={timezone ? toMachineDateTime(post.data.date, timezone) : post.data.date}
-    >
-        {post.data.date}
-    </time>
-)}
+                <time
+                    class="stalux-card-post-date"
+                    datetime={
+                        timezone ? toMachineDateTime(post.data.date, timezone) : post.data.date
+                    }
+                >
+                    {post.data.date}
+                </time>
+            )}
             {post.data.updated && (
-    <time
-        class="stalux-card-post-updated"
-        datetime={timezone ? toMachineDateTime(post.data.updated, timezone) : post.data.updated}
-    >
-        {post.data.updated}
-    </time>
-)}
+                <time
+                    class="stalux-card-post-updated"
+                    datetime={
+                        timezone
+                            ? toMachineDateTime(post.data.updated, timezone)
+                            : post.data.updated
+                    }
+                >
+                    {post.data.updated}
+                </time>
+            )}
         </div>
         <div class="stalux-card-post-description stalux-u-min-w-0">{description}</div>
         <div class="stalux-card-post-meta stalux-u-flex stalux-u-flex-col">
@@ -74,19 +80,19 @@ const description = post.data.desc || "";
                 class="stalux-card-post-tags stalux-u-flex stalux-u-items-center stalux-u-flex-wrap"
             >
                 {post.data.tags?.map((tag) => (
-    <a class="a-none" href={`/tags/${tag}`} data-astro-prefetch>
-        <span class="stalux-card-post-tag">{tag}</span>
-    </a>
-))}
+                    <a class="a-none" href={`/tags/${tag}`} data-astro-prefetch>
+                        <span class="stalux-card-post-tag">{tag}</span>
+                    </a>
+                ))}
             </div>
             <div
                 class="stalux-card-post-categories stalux-u-flex stalux-u-items-center stalux-u-flex-wrap"
             >
                 {post.data.categories?.map((category) => (
-    <a class="a-none" href={`/categories/${category}`} data-astro-prefetch>
-        <span class="stalux-card-post-category">{category}</span>
-    </a>
-))}
+                    <a class="a-none" href={`/categories/${category}`} data-astro-prefetch>
+                        <span class="stalux-card-post-category">{category}</span>
+                    </a>
+                ))}
             </div>
         </div>
         <a

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

@@ -47,61 +47,61 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
         </h1>
         <div class="stalux-post-metadata">
             {props.date && (
-    <time
-        class="stalux-post-meta-item"
-        datetime={timezone ? toMachineDateTime(props.date, timezone) : props.date}
-    >
-        {t("post.publishTime")}
-        {props.date}
-    </time>
-)}
+                <time
+                    class="stalux-post-meta-item"
+                    datetime={timezone ? toMachineDateTime(props.date, timezone) : props.date}
+                >
+                    {t("post.publishTime")}
+                    {props.date}
+                </time>
+            )}
 
             {props.updated && (
-    <time
-        class="stalux-post-meta-item"
-        datetime={timezone ? toMachineDateTime(props.updated, timezone) : props.updated}
-    >
-        {t("post.updateTime")}
-        {props.updated}
-    </time>
-)}
+                <time
+                    class="stalux-post-meta-item"
+                    datetime={timezone ? toMachineDateTime(props.updated, timezone) : props.updated}
+                >
+                    {t("post.updateTime")}
+                    {props.updated}
+                </time>
+            )}
         </div>
         {(
-    <div class="stalux-post-page-stats">
-        {(props.readingMinutes ?? 0) > 0 && (
-            <span class="stalux-post-reading-time">
-                {t("post.readingTime")}
-                {props.readingMinutes && props.readingMinutes > 0
-                    ? props.readingMinutes < 1
-                        ? t("common.lessThanOneMinute")
-                        : t("common.minute", { n: props.readingMinutes })
-                    : ""}
-            </span>
+            <div class="stalux-post-page-stats">
+                {(props.readingMinutes ?? 0) > 0 && (
+                    <span class="stalux-post-reading-time">
+                        {t("post.readingTime")}
+                        {props.readingMinutes && props.readingMinutes > 0
+                            ? props.readingMinutes < 1
+                                ? t("common.lessThanOneMinute")
+                                : t("common.minute", { n: props.readingMinutes })
+                            : ""}
+                    </span>
+                )}
+                {(props.wordCount ?? 0) > 0 && (
+                    <span class="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>
         )}
-        {(props.wordCount ?? 0) > 0 && (
-            <span class="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="stalux-post-source-link-row">
-        <a
-            class="stalux-post-source-link"
-            href={mdSourceUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-            {t("post.viewSource")}
-        </a>
-    </div>
-)}
+            <div class="stalux-post-source-link-row">
+                <a
+                    class="stalux-post-source-link"
+                    href={mdSourceUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t("post.viewSource")}
+                </a>
+            </div>
+        )}
     </header>
 
     <ArticleSummary description={props.description} label={t("post.summary")} />

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

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

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

@@ -36,22 +36,22 @@ const tocItems = headings
 >
     <h3 class="stalux-toc-title">{title}</h3>
     {tocItems.length > 0 ? (
-    <ul class="stalux-toc-list" transition:name="toc-content">
-        {tocItems.map((heading) => (
-            <li>
-                <a
-                    class={`stalux-toc-item ${({ 1: "stalux-toc-depth-1", 2: "stalux-toc-depth-2", 3: "stalux-toc-depth-3", 4: "stalux-toc-depth-4", 5: "stalux-toc-depth-5", 6: "stalux-toc-depth-6" } as Record<number, string>)[heading.depth] || ""} a-none`}
-                    href={`#${heading.slug}`}
-                    data-toc-link
-                >
-                    {heading.text}
-                </a>
-            </li>
-        ))}
-    </ul>
-) : (
-    <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
-)}
+        <ul class="stalux-toc-list" transition:name="toc-content">
+            {tocItems.map((heading) => (
+                <li>
+                    <a
+                        class={`stalux-toc-item ${({ 1: "stalux-toc-depth-1", 2: "stalux-toc-depth-2", 3: "stalux-toc-depth-3", 4: "stalux-toc-depth-4", 5: "stalux-toc-depth-5", 6: "stalux-toc-depth-6" } as Record<number, string>)[heading.depth] || ""} a-none`}
+                        href={`#${heading.slug}`}
+                        data-toc-link
+                    >
+                        {heading.text}
+                    </a>
+                </li>
+            ))}
+        </ul>
+    ) : (
+        <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
+    )}
 </nav>
 
 <script src="../../../scripts/toc-scrollspy.ts"></script>

package/src/components/stalux/tags/tagsCloud.astro

@@ -24,26 +24,26 @@ const tagLinks = tagList.map((t) => ({
 <!-- 移动端：SSR 卡片 -->
 <div class="stalux-cloud-cards" id="tags-cards">
     {tagList.length > 0 ? (
-    tagGroups.map((group) => (
-        <div class="stalux-cloud-tag-group">
-            {group.map(({ name, count }) => (
-                <a
-                    href={`/tags/${name}/`}
-                    class="stalux-cloud-tag-card"
-                    data-stalux-card
-                    data-stalux-tag-card
-                    data-count={count}
-                    data-astro-prefetch
-                >
-                    <span class="stalux-cloud-tag-name">{name}</span>
-                    <span class="stalux-cloud-tag-count">{count}</span>
-                </a>
-            ))}
-        </div>
-    ))
-) : (
-    <div class="stalux-cloud-no-tags">{t("tags.noTags")}</div>
-)}
+        tagGroups.map((group) => (
+            <div class="stalux-cloud-tag-group">
+                {group.map(({ name, count }) => (
+                    <a
+                        href={`/tags/${name}/`}
+                        class="stalux-cloud-tag-card"
+                        data-stalux-card
+                        data-stalux-tag-card
+                        data-count={count}
+                        data-astro-prefetch
+                    >
+                        <span class="stalux-cloud-tag-name">{name}</span>
+                        <span class="stalux-cloud-tag-count">{count}</span>
+                    </a>
+                ))}
+            </div>
+        ))
+    ) : (
+        <div class="stalux-cloud-no-tags">{t("tags.noTags")}</div>
+    )}
 </div>
 
 <!-- 桌面端：Canvas 标签云 -->

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

@@ -23,32 +23,32 @@ const machineDate = date && timezone ? toMachineDateTime(date, timezone) : date;
         <Content />
     </div>
     {(date || source || sourceDate) && (
-    <footer class="stalux-word-footer">
-        {date ? (
-            <time class="stalux-word-date" datetime={machineDate}>
-                {date}
-            </time>
-        ) : (
-            <span />
-        )}
-        {(source || sourceDate) && (
-            <div class="stalux-word-source-meta">
-                {sourceDate && <span class="stalux-word-source-date">{sourceDate}</span>}
-                {source &&
-                    (link ? (
-                        <a
-                            href={link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="stalux-word-source-link"
-                        >
-                            — {source}
-                        </a>
-                    ) : (
-                        <span class="stalux-word-source-text">— {source}</span>
-                    ))}
-            </div>
-        )}
-    </footer>
-)}
+        <footer class="stalux-word-footer">
+            {date ? (
+                <time class="stalux-word-date" datetime={machineDate}>
+                    {date}
+                </time>
+            ) : (
+                <span />
+            )}
+            {(source || sourceDate) && (
+                <div class="stalux-word-source-meta">
+                    {sourceDate && <span class="stalux-word-source-date">{sourceDate}</span>}
+                    {source &&
+                        (link ? (
+                            <a
+                                href={link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="stalux-word-source-link"
+                            >
+                                — {source}
+                            </a>
+                        ) : (
+                            <span class="stalux-word-source-text">— {source}</span>
+                        ))}
+                </div>
+            )}
+        </footer>
+    )}
 </article>

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

@@ -21,24 +21,24 @@ const sorted = [...entries].sort((a, b) => {
 
 <ul class="stalux-word-list-list">
     {sorted.map((entry) => {
-    const hash = entry.data.abbrlink ? `#word-${entry.data.abbrlink}` : undefined;
-    return (
-        <li class="stalux-word-list-item">
-            {hash ? (
-                <a
-                    href={hash}
-                    class="a-none"
-                    data-word-hash={hash}
-                    aria-label={`Jump to ${entry.data.abbrlink}`}
-                >
+        const hash = entry.data.abbrlink ? `#word-${entry.data.abbrlink}` : undefined;
+        return (
+            <li class="stalux-word-list-item">
+                {hash ? (
+                    <a
+                        href={hash}
+                        class="a-none"
+                        data-word-hash={hash}
+                        aria-label={`Jump to ${entry.data.abbrlink}`}
+                    >
+                        <WordCard entry={entry} timezone={timezone} />
+                    </a>
+                ) : (
                     <WordCard entry={entry} timezone={timezone} />
-                </a>
-            ) : (
-                <WordCard entry={entry} timezone={timezone} />
-            )}
-        </li>
-    );
-})}
+                )}
+            </li>
+        );
+    })}
 </ul>
 
 <script src="../../../scripts/word-list.ts"></script>

package/src/index.ts

@@ -291,6 +291,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             mermaidHast({
                                 responsive: true,
                                 theme: "dark",
+                                themeVariables: { background: "transparent" },
                                 themeOverrides: { clusterBorder: "#cccccc" },
                             }),
                             seen,

package/src/layouts/PostLayout.astro

@@ -60,7 +60,9 @@ const walineConfig = walineSection?.serverURL
         <PostContent
             title={props.title}
             description={props.description}
-            titleTransitionName={props.postId === undefined ? undefined : getPostTitleTransitionName(props.postId)}
+            titleTransitionName={props.postId === undefined
+                ? undefined
+                : getPostTitleTransitionName(props.postId)}
             date={props.date}
             updated={props.updated}
             readingMinutes={props.readingMinutes}
@@ -71,12 +73,12 @@ const walineConfig = walineSection?.serverURL
             <PostCC title={props.title} author={author} url={Astro.url.href} cc={props.cc} />
             <PostNavigation prev={props.prev} next={props.next} />
             {commentEnabled && walineConfig?.serverURL && (
-    <WalineComment
-        {...buildWalineProps(walineConfig)}
-        path={Astro.url.pathname}
-        title={props.title}
-    />
-)}
+                <WalineComment
+                    {...buildWalineProps(walineConfig)}
+                    path={Astro.url.pathname}
+                    title={props.title}
+                />
+            )}
         </PostContent>
 
         <!-- Right Sidebar -->

package/src/layouts/Stalux.astro

@@ -83,10 +83,10 @@ const routeAnimation = getRouteAnimation(routeKind);
         data-stalux-umami-url={headConfig?.umami?.url}
     >
         {llmPromote && (
-    <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
-        <p>{llmPromote}</p>
-    </section>
-)}
+            <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
+                <p>{llmPromote}</p>
+            </section>
+        )}
         <div
             class="bg-layer bg-a"
             data-stalux-background="a"

package/src/pages/about.astro

@@ -47,12 +47,12 @@ const author = authorConfig.name;
                 cc="CC-BY-NC-SA-4.0"
             />
             {commentEnabled && walineConfig?.serverURL && (
-    <WalineComment
-        {...buildWalineProps(walineConfig)}
-        path={Astro.url.pathname}
-        title={aboutPage.data.title}
-    />
-)}
+                <WalineComment
+                    {...buildWalineProps(walineConfig)}
+                    path={Astro.url.pathname}
+                    title={aboutPage.data.title}
+                />
+            )}
         </PostContent>
     </div>
 </Stalux>

package/src/pages/categories/[category].astro

@@ -28,10 +28,10 @@ const props = Astro.props as Props;
 <Stalux
     title={`${t("taxonomy.category")}: ${props.category} | ${siteConfig.title}`}
     description={t("taxonomy.browseCategory", {
-    title: siteConfig.title,
-    category: props.category,
-    count: props.count,
-})}
+        title: siteConfig.title,
+        category: props.category,
+        count: props.count,
+    })}
 >
     <div style="height: 3em;"></div>
     <Navs />

package/src/pages/tags/[tag].astro

@@ -28,7 +28,11 @@ const props = Astro.props as Props;
 
 <Stalux
     title={`${t("taxonomy.tag")}: ${props.tag} | ${siteConfig.title}`}
-    description={t("taxonomy.browseTag", { title: siteConfig.title, tag: props.tag, count: props.count })}
+    description={t("taxonomy.browseTag", {
+        title: siteConfig.title,
+        tag: props.tag,
+        count: props.count,
+    })}
     noindex={props.count < 3}
 >
     <div style="height: 3em;"></div>