@xingwangzhe/stalux 1.27.0 → 1.28.0

package/src/plugins/feature-flags.ts

@@ -221,19 +221,71 @@ export const featureFlagsHast = defineHastPlugin({
             // 第一张正文图片可能成为 LCP，优先加载；其余图片延迟加载。
             const firstImage = !ctx.data.staluxFirstImageSeen;
             ctx.data.staluxFirstImageSeen = true;
-            if (!node.properties?.loading) {
-                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");
+            const properties = applyImageLoadingPolicy({ ...(node.properties ?? {}) }, firstImage);
+            for (const key of ["loading", "decoding", "fetchpriority"] as const) {
+                const value = properties[key];
+                if (typeof value === "string") ctx.setProperty(node, key, value);
             }
         },
     },
 });
 
+export function applyImageLoadingPolicy(
+    properties: Record<string, unknown>,
+    firstImage: boolean,
+): Record<string, unknown> {
+    if (!properties.loading) properties.loading = firstImage ? "eager" : "lazy";
+    if (!properties.decoding) properties.decoding = "async";
+    if (firstImage) {
+        if (!properties.fetchpriority) properties.fetchpriority = "high";
+    } else {
+        properties.loading = "lazy";
+        if (properties.fetchpriority === "high") properties.fetchpriority = "auto";
+    }
+    return properties;
+}
+
+export function applyHtmlImageLoadingPolicy(html: string): string {
+    return html.replace(
+        /<section\b(?=[^>]*\bdata-pagefind-body\b)[^>]*>[\s\S]*?<\/section>/gi,
+        (body) => {
+            let imageIndex = 0;
+            return body.replace(/<img\b[^>]*>/gi, (tag) => {
+                const isFirstBodyImage = imageIndex++ === 0;
+                const attributes = new Map<string, string>();
+                for (const match of tag.matchAll(/\s([\w:-]+)(?:="([^"]*)")?/g)) {
+                    const name = match[1];
+                    if (name) attributes.set(name.toLowerCase(), match[2] ?? "");
+                }
+
+                const updates: Record<string, string> = {
+                    decoding: attributes.get("decoding") || "async",
+                    loading: isFirstBodyImage ? "eager" : "lazy",
+                };
+                if (isFirstBodyImage) {
+                    updates.fetchpriority = "high";
+                } else if (attributes.get("fetchpriority") === "high") {
+                    updates.fetchpriority = "auto";
+                }
+
+                let result = tag;
+                for (const [name, value] of Object.entries(updates)) {
+                    const pattern = new RegExp(`\\s${name}(?:="[^"]*")?`, "i");
+                    if (pattern.test(result)) {
+                        result = result.replace(pattern, ` ${name}="${value}"`);
+                    } else {
+                        result = result.replace(
+                            /\s*\/?>$/,
+                            (ending) => ` ${name}="${value}"${ending.trimStart()}`,
+                        );
+                    }
+                }
+                return result;
+            });
+        },
+    );
+}
+
 type FeatureFlagsResult = {
     hasImage: boolean;
     readingMinutes: number;

package/src/scripts/waline.ts

@@ -1,6 +1,7 @@
-import { init, type WalineInitOptions } from "@waline/client";
+import type { WalineInitOptions } from "@waline/client";
+import walineCss from "@waline/client/style?inline";
+import staluxWalineCss from "../styles/components/posts/waline.css?inline";
 import { createClientLogger } from "./logger";
-
 import { registerPageLifecycle } from "./page-runtime";
 
 const logger = createClientLogger("waline");
@@ -31,14 +32,34 @@ registerPageLifecycle("waline", () => {
         return;
     }
 
-    const options = {
-        ...decoded,
-        el: commentElement,
-        serverURL: decoded.serverURL,
-        path: typeof decoded.path === "string" ? decoded.path : window.location.pathname,
-    } as WalineInitOptions;
-    const instance = init(options);
-    logger.debug("comment widget initialized");
+    let disposed = false;
+    let destroy: (() => void) | undefined;
+
+    void import("@waline/client")
+        .then((waline) => {
+            if (disposed || !commentElement.isConnected) return;
+            const style = document.createElement("style");
+            style.dataset.staluxWaline = "true";
+            style.textContent = `${walineCss}\n${staluxWalineCss}`;
+            document.head.append(style);
+            const options = {
+                ...decoded,
+                el: commentElement,
+                serverURL: decoded.serverURL,
+                path: typeof decoded.path === "string" ? decoded.path : window.location.pathname,
+            } as WalineInitOptions;
+            const instance = waline.init(options);
+            destroy = () => instance?.destroy();
+            logger.debug("comment widget initialized");
+        })
+        .catch((error) => {
+            logger.warn(
+                `comment assets failed to load (${error instanceof Error ? error.name : "unknown error"})`,
+            );
+        });
 
-    return () => instance?.destroy();
+    return () => {
+        disposed = true;
+        destroy?.();
+    };
 });

package/src/styles/base/init.css

@@ -200,7 +200,8 @@ ul {
     --muted-text: #bbb;
 
     /* 字体族栈 */
-    /* --font-body 由 Astro Fonts API 提供（--font-code 同理，见集成注入的 fonts 配置） */
+    --font-body: "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
+    /* --font-code 由 Astro Fonts API 提供；构建时将页面 CJK 子集追加为其回退。 */
 
     /* 字体大小系统 */
     --font-size-subtitle: 1.35rem;

package/src/styles/base/math.css

@@ -35,7 +35,7 @@ math {
     direction: ltr;
     /* Prevent Firefox from omitting the dot on i or j. */
     font-feature-settings: "dtls" off;
-    font-family: "Latin Modern Math", math;
+    font-family: "Latin Modern Math", var(--font-body), math;
 }
 
 math * {

package/src/styles/components/posts/waline.css

@@ -0,0 +1,440 @@
+:root {
+    --waline-accent-rgb: 100, 255, 218;
+}
+
+/* 评论区容器与博客风格一致 */
+.waline-comment-container {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    padding: 2rem;
+    border-radius: 12px;
+    animation: fadeInUpComment 0.8s ease-in-out forwards;
+    opacity: 0;
+    animation-delay: 0.3s;
+}
+
+/* 评论区标题样式与博客风格一致 */
+.waline-comment-title {
+    margin: 0 0 1.5rem 0;
+    font-size: 2rem;
+    text-align: center;
+    background: linear-gradient(90deg, var(--white-90p), rgba(var(--waline-accent-rgb), 0.9));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Waline根元素自定义 */
+.wl-panel {
+    background-color: rgba(17, 17, 17, 0.3);
+    border-radius: 12px;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 1.5rem;
+}
+
+/* 修改输入框样式 */
+.wl-editor,
+.wl-input {
+    background-color: rgba(17, 17, 17, 0.5) !important;
+    color: var(--white-90p) !important;
+    border: 1px solid rgba(100, 100, 100, 0.3) !important;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+/* 输入框焦点状态 */
+.wl-editor:focus,
+.wl-input:focus {
+    border-color: rgba(var(--waline-accent-rgb), 0.5) !important;
+    box-shadow: 0 0 5px rgba(var(--waline-accent-rgb), 0.3) !important;
+    outline: none;
+}
+
+/* 修复登录后头像向下偏移 — 全局 a::after 下划线动画撑高了 wl-login-nick */
+.wl-login-nick {
+    display: block !important;
+    height: var(--waline-avatar-size, 52px);
+    overflow: hidden;
+}
+.wl-login-nick::after {
+    display: none;
+}
+
+/* 修复 markdown 全局 img margin 误伤 Waline 头像 */
+.waline-comment-container img {
+    margin: 0 !important;
+}
+.wl-btn {
+    background: rgba(var(--waline-accent-rgb), 0.6) !important;
+    color: var(--white-full) !important;
+    border: none !important;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    font-weight: 500;
+    padding: 8px 15px;
+    cursor: pointer;
+}
+
+.wl-btn:hover {
+    background: rgba(var(--waline-accent-rgb), 0.7) !important;
+    transform: none;
+    box-shadow: none !important;
+}
+
+.wl-btn.primary {
+    background: rgba(var(--waline-accent-rgb), 0.6) !important;
+}
+
+.wl-btn.primary:hover {
+    background: rgba(var(--waline-accent-rgb), 0.7) !important;
+    transform: none;
+    box-shadow: none !important;
+}
+
+/* 标签文字颜色 */
+.wl-header label {
+    color: var(--white-85p);
+    font-weight: 500;
+}
+
+/* 评论卡片样式 */
+.wl-card {
+    background-color: rgba(17, 17, 17, 0.3) !important;
+    border-radius: 12px;
+    padding: 1.2rem;
+    margin-top: 1.2rem;
+    border: 1px solid rgba(70, 70, 70, 0.2) !important;
+    transition: all 0.3s ease;
+}
+
+.wl-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    border-color: rgba(var(--waline-accent-rgb), 0.3) !important;
+}
+
+/* 修改用户名样式 */
+.wl-nick {
+    color: rgba(var(--waline-accent-rgb), 0.95) !important;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.wl-nick:hover {
+    color: rgba(var(--waline-accent-rgb), 1) !important;
+}
+
+/* 评论内容样式 */
+.wl-content {
+    color: var(--white-90p);
+    line-height: 1.7;
+    margin: 0.8rem 0;
+    word-break: break-word;
+}
+
+/* 回复按钮样式 */
+.wl-reply {
+    opacity: 0.8;
+    transition: all 0.2s ease;
+}
+
+.wl-reply:hover {
+    opacity: 1;
+    text-decoration: none;
+}
+
+/* 表情面板样式 */
+.wl-emoji-popup,
+.wl-gif-popup {
+    background-color: rgba(25, 25, 25, 0.95) !important;
+    border: 1px solid rgba(70, 70, 70, 0.3) !important;
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+/* 表情按钮样式 */
+.wl-emoji-popup button {
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.wl-emoji-popup button:hover {
+    background-color: rgba(var(--waline-accent-rgb), 0.2);
+    transform: scale(1.05);
+}
+
+/* 文章评价反应区域 */
+.wl-reaction {
+    background-color: rgba(17, 17, 17, 0.3);
+    border-radius: 12px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid rgba(70, 70, 70, 0.2);
+    text-align: center;
+}
+
+.wl-reaction-title {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    color: var(--white-90p);
+}
+
+.wl-reaction-list {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.wl-reaction-item {
+    background-color: rgba(30, 30, 30, 0.5) !important;
+    border-radius: 8px;
+    margin: 5px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: 1px solid rgba(70, 70, 70, 0.2) !important;
+}
+
+.wl-reaction-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    background-color: rgba(40, 40, 40, 0.8) !important;
+    border-color: rgba(var(--waline-accent-rgb), 0.3) !important;
+}
+
+.wl-reaction-img {
+    padding: 6px;
+}
+
+.wl-reaction-img img {
+    transition: transform 0.3s ease;
+}
+
+.wl-reaction-item:hover .wl-reaction-img img {
+    transform: scale(1.15);
+}
+
+.wl-reaction-votes {
+    font-size: 0.8rem;
+    padding: 5px 0;
+    background-color: rgba(var(--waline-accent-rgb), 0.7);
+    color: var(--white-full);
+}
+
+/* 评论计数和排序 */
+.wl-meta-head {
+    margin-bottom: 1.2rem;
+    border-bottom: 1px solid rgba(70, 70, 70, 0.3);
+    padding-bottom: 0.8rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.wl-count {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--white-90p);
+}
+
+.wl-sort {
+    display: flex;
+    gap: 1rem;
+}
+
+.wl-sort li {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: var(--white-70p);
+}
+
+.wl-sort li:hover {
+    color: var(--white-90p);
+}
+
+.wl-sort li.active {
+    color: rgba(var(--waline-accent-rgb), 1);
+    font-weight: 500;
+}
+
+/* 页码导航 */
+.wl-page {
+    margin-top: 1.2rem;
+    text-align: center;
+}
+
+.wl-page button {
+    background: rgba(30, 30, 30, 0.5) !important;
+    color: var(--white-80p) !important;
+    border: 1px solid rgba(70, 70, 70, 0.3) !important;
+    border-radius: 6px;
+    margin: 0 5px;
+    padding: 5px 10px;
+    transition: all 0.2s ease;
+}
+
+.wl-page button:hover:not(:disabled) {
+    background: rgba(var(--waline-accent-rgb), 0.7) !important;
+    color: var(--white-full) !important;
+    transform: translateY(-2px);
+}
+
+.wl-page button.active {
+    background: rgba(var(--waline-accent-rgb), 0.8) !important;
+    color: var(--white-full) !important;
+}
+
+/* Waline底部版权信息 */
+.wl-power {
+    opacity: 0.6;
+    font-size: 0.85rem;
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.wl-power a {
+    color: rgba(var(--waline-accent-rgb), 0.9);
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.wl-power a:hover {
+    color: rgba(var(--waline-accent-rgb), 1);
+    text-decoration: underline;
+}
+
+/* 评论为空状态 */
+.wl-empty {
+    text-align: center;
+    padding: 2rem 0;
+    color: var(--white-60p);
+    font-size: 1.1rem;
+}
+
+/* 支持文字数量统计 */
+.wl-text-number {
+    font-size: 0.9rem;
+    color: var(--white-60p);
+}
+
+/* 添加动画效果 */
+@keyframes fadeInUpComment {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 降低选中文本高亮程度，移除外边框 */
+.waline-comment-container *::selection {
+    background: rgba(var(--waline-accent-rgb), 0.25);
+    color: inherit;
+    border: none;
+    outline: none;
+}
+
+.waline-comment-container *::-moz-selection {
+    background: rgba(var(--waline-accent-rgb), 0.25);
+    color: inherit;
+    border: none;
+    outline: none;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .waline-comment-container {
+        padding: 1.5rem;
+        margin-top: 2rem;
+    }
+
+    .waline-comment-title {
+        font-size: 1.8rem;
+    }
+
+    .wl-panel {
+        padding: 0.8rem;
+    }
+
+    .wl-header {
+        flex-direction: column;
+    }
+
+    .wl-header-item {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+
+    /* 平板设备上的嵌套评论处理 */
+    .wl-card {
+        padding: 0.8rem;
+        margin-left: 0;
+    }
+
+    .wl-children {
+        margin-left: 0;
+        padding-left: 0;
+    }
+
+    .wl-children .wl-card {
+        margin-left: 0;
+        border-left: 3px solid rgba(var(--waline-accent-rgb), 0.4);
+        padding-left: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .waline-comment-container {
+        padding: 1rem;
+        margin-top: 1.5rem;
+    }
+
+    .waline-comment-title {
+        font-size: 1.6rem;
+    }
+
+    .wl-panel {
+        padding: 0.8rem;
+    }
+
+    .wl-reaction-list {
+        gap: 5px;
+    }
+
+    .wl-card {
+        padding: 0.75rem;
+        margin-left: 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    /* 小屏幕上的嵌套评论处理 */
+    .wl-children {
+        margin-left: 0;
+        padding-left: 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .wl-children .wl-card {
+        margin-left: 0;
+        border-left: 3px solid rgba(var(--waline-accent-rgb), 0.4);
+        padding-left: 0.6rem;
+        width: 100%;
+    }
+
+    .wl-children .wl-children .wl-card {
+        border-left: 3px solid rgba(var(--waline-accent-rgb), 0.3);
+        padding-left: 0.6rem;
+    }
+
+    .wl-meta-head {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: flex-start;
+    }
+}

package/src/utils/i18n.ts

@@ -12,7 +12,9 @@ export interface Translator {
 }
 
 export function createTranslator(lang: string): Translator {
-    const dict = dicts[lang] || dicts["zh-CN"];
+    const normalizedLang = lang.toLowerCase();
+    const language = normalizedLang.startsWith("en") ? "en" : "zh-CN";
+    const dict = dicts[language] ?? dicts["zh-CN"] ?? en;
 
     function t(key: string, params?: Record<string, string | number>): string {
         const keys = key.split(".");
@@ -21,12 +23,12 @@ export function createTranslator(lang: string): Translator {
             if (text && typeof text === "object") {
                 text = (text as Record<string, unknown>)[k];
             } else {
-                return key;
+                return lookup(en, key) ?? key;
             }
         }
-        if (typeof text !== "string") return key;
+        if (typeof text !== "string" || !text.trim()) text = lookup(en, key) ?? key;
 
-        let result = text;
+        let result = text as string;
         if (params) {
             for (const [k, v] of Object.entries(params)) {
                 result = result.replace(`{${k}}`, String(v));
@@ -35,7 +37,16 @@ export function createTranslator(lang: string): Translator {
         return result;
     }
 
-    return { t, lang };
+    return { t, lang: language };
+}
+
+function lookup(dictionary: Record<string, unknown>, key: string): string | undefined {
+    let value: unknown = dictionary;
+    for (const part of key.split(".")) {
+        if (!value || typeof value !== "object") return;
+        value = (value as Record<string, unknown>)[part];
+    }
+    return typeof value === "string" && value.trim() ? value : undefined;
 }
 
 /**