@xingwangzhe/stalux 1.41.5 → 1.43.0

package/src/index.ts

@@ -120,6 +120,8 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
         ...options,
     };
 
+    const socialCardPaths = { publicDir: "", cacheDir: "", base: "/", fontPath: "" };
+
     let pageFontData: { fontBuffer: Buffer; outputDir: string; cacheDir: string } | undefined;
 
     const coreIntegration: AstroIntegration = {
@@ -161,17 +163,48 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             config.build.inlineStylesheets === "always" ? "always" : "never",
                     },
                     vite: {
-                        optimizeDeps: { exclude: ["@mcp-b/webmcp-polyfill"] },
+                        optimizeDeps: {
+                            exclude: ["@mcp-b/webmcp-polyfill"],
+                            // Discover lazy page features before the first visit:
+                            // Vite re-optimization would otherwise reload the
+                            // entire document midway through a Swup navigation.
+                            include: [
+                                "swup",
+                                "@swup/a11y-plugin",
+                                "@swup/head-plugin",
+                                "@swup/js-plugin",
+                                "@swup/preload-plugin",
+                                "@swup/scroll-plugin",
+                                "@microsoft/clarity",
+                                "@pagefind/component-ui",
+                                "@waline/client",
+                                "@xingwangzhe/tags-cloud",
+                                "photoswipe",
+                                "photoswipe/lightbox",
+                            ],
+                        },
                         css: { lightningcss: { targets: modernCssTargets } },
                         build: {
                             target: config.vite.build?.target ?? "esnext",
                             cssMinify: "lightningcss",
-                            sourcemap: false,
+                            // 默认不产出 sourcemap；消费方显式开启时（如 SONDA=1 做体积分析）尊重其设置
+                            sourcemap: config.vite.build?.sourcemap ?? false,
                         },
                         resolve: {
                             alias: createViteAliases(srcDir),
                         },
                         plugins: [
+                            {
+                                name: "stalux:social-card-paths",
+                                resolveId: (id) =>
+                                    id === "virtual:stalux-social-card-paths"
+                                        ? `\0${id}`
+                                        : undefined,
+                                load: (id) =>
+                                    id === "\0virtual:stalux-social-card-paths"
+                                        ? `export default ${JSON.stringify(socialCardPaths)}`
+                                        : undefined,
+                            },
                             searchStylePlugin(command === "dev", config.base),
                             webMcpMutationsPlugin(),
                             ...(command === "build"
@@ -339,6 +372,12 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
             "astro:config:done": ({ config, logger }) => {
                 const srcDir = fileURLToPath(new URL(".", import.meta.url));
                 const publicDir = fileURLToPath(config.publicDir);
+                Object.assign(socialCardPaths, {
+                    publicDir,
+                    cacheDir: fileURLToPath(new URL("stalux-social-cards/", config.cacheDir)),
+                    base: config.base,
+                    fontPath: path.join(srcDir, "assets/fonts/LXGWWenKai-Regular.ttf"),
+                });
                 const assetsLogger = logger.fork("stalux/assets");
                 if (pageFontData) {
                     pageFontData.outputDir = path.join(

package/src/internal/social-card-data.ts

@@ -0,0 +1,34 @@
+import type { AuthorData, SiteData } from "../schemas/config";
+import { formatInTimeZone, parseDate } from "../utils/dayjs";
+import type { SocialCardData } from "../utils/social-image";
+
+interface PostData {
+    title: string;
+    desc: string;
+    date: string;
+    cover?: string;
+    categories?: string[];
+}
+
+export function createSocialCardData(
+    post: PostData,
+    site: SiteData,
+    author: AuthorData,
+): SocialCardData {
+    return {
+        title: post.title,
+        description: post.desc,
+        siteTitle: site.title,
+        author: author.name,
+        host: new URL(site.canonical ?? site.url).host,
+        lang: site.lang || "zh-CN",
+        accent: site.accentColor || "#EAB308",
+        date: formatInTimeZone(
+            parseDate(post.date, site.timezone || "Asia/Shanghai"),
+            site.timezone || "Asia/Shanghai",
+            "yyyy-MM-dd",
+        ),
+        category: post.categories?.[0] ?? "",
+        ...(post.cover?.trim() ? { cover: post.cover.trim() } : {}),
+    };
+}

package/src/internal/social-card-renderer.ts

@@ -0,0 +1,307 @@
+import { createHash } from "node:crypto";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { type Node, Renderer } from "@takumi-rs/core";
+import { imageSize } from "image-size";
+import type { SocialCardData } from "../utils/social-image";
+
+export interface SocialCardPaths {
+    publicDir: string;
+    cacheDir: string;
+    base: string;
+    fontPath: string;
+}
+
+const MAX_COVER_BYTES = 8 * 1024 * 1024;
+let rendererPromise: Promise<Renderer> | undefined;
+function getRenderer(fontPath: string): Promise<Renderer> {
+    rendererPromise ??= (async () => {
+        const renderer = new Renderer({ cacheMaxBytes: 32 * 1024 * 1024 });
+        await renderer.registerFont({ name: "Stalux Card", data: await readFile(fontPath) });
+        return renderer;
+    })();
+    return rendererPromise;
+}
+
+/** Resolve only assets inside the final public directory, including encoded Chinese paths. */
+export function localCoverPath(cover: string, paths: SocialCardPaths): string | undefined {
+    if (!cover.startsWith("/") || cover.startsWith("//")) return undefined;
+    try {
+        let pathname = decodeURIComponent(cover.split(/[?#]/u)[0] ?? "");
+        const base = paths.base.replace(/\/$/u, "");
+        if (base && pathname.startsWith(`${base}/`)) pathname = pathname.slice(base.length);
+        const target = path.resolve(paths.publicDir, `.${pathname}`);
+        if (!target.startsWith(`${path.resolve(paths.publicDir)}${path.sep}`)) return undefined;
+        return target;
+    } catch {
+        return undefined;
+    }
+}
+
+const coverRequests = new Map<string, Promise<Buffer>>();
+
+async function loadCover(cover: string, paths: SocialCardPaths): Promise<Buffer> {
+    const key = `${paths.publicDir}|${cover}`;
+    let pending = coverRequests.get(key);
+    if (!pending) {
+        pending = loadCoverUncached(cover, paths);
+        coverRequests.set(key, pending);
+        // Bound memory while sharing requests and failures between WebP and PNG renders.
+        if (coverRequests.size > 8) coverRequests.delete(coverRequests.keys().next().value ?? "");
+    }
+    return pending;
+}
+
+async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise<Buffer> {
+    const local = localCoverPath(cover, paths);
+    let bytes: Buffer;
+    if (local) {
+        if ((await stat(local)).size > MAX_COVER_BYTES) throw new Error("cover exceeds 8 MiB");
+        bytes = await readFile(local);
+    } else {
+        const url = new URL(cover.startsWith("//") ? `https:${cover}` : cover);
+        if (!["https:", "http:"].includes(url.protocol)) throw new Error("invalid cover URL");
+        const remoteCache = path.join(
+            paths.cacheDir,
+            "covers",
+            createHash("sha256").update(url.href).digest("hex"),
+        );
+        const cachedStat = await stat(remoteCache).catch(() => undefined);
+        if (cachedStat && Date.now() - cachedStat.mtimeMs < 86_400_000)
+            return readFile(remoteCache);
+        const response = await fetch(url, { signal: AbortSignal.timeout(8000) });
+        if (!response.ok || !response.headers.get("content-type")?.startsWith("image/"))
+            throw new Error(`cover returned HTTP ${response.status} or non-image content`);
+        const chunks: Uint8Array[] = [];
+        let size = 0;
+        if (!response.body) throw new Error("empty cover");
+        for await (const chunk of response.body) {
+            size += chunk.length;
+            if (size > MAX_COVER_BYTES) throw new Error("cover exceeds 8 MiB");
+            chunks.push(chunk);
+        }
+        bytes = Buffer.concat(chunks);
+        const dimensions = imageSize(bytes);
+        if (
+            !dimensions.width ||
+            !dimensions.height ||
+            dimensions.width * dimensions.height > 32_000_000
+        )
+            throw new Error("invalid cover dimensions");
+        await mkdir(path.dirname(remoteCache), { recursive: true });
+        await writeFile(remoteCache, bytes);
+    }
+    const dimensions = imageSize(bytes);
+    if (
+        !dimensions.width ||
+        !dimensions.height ||
+        dimensions.width * dimensions.height > 32_000_000
+    )
+        throw new Error("invalid or oversized cover dimensions");
+    return bytes;
+}
+
+function text(value: string, style: Node["style"]): Node {
+    return { type: "text", text: value, style };
+}
+
+/** A fixed editorial layout: site identity, readable title, optional artwork, quiet footer. */
+export function socialCardTree(
+    data: SocialCardData,
+    hasCover: boolean,
+    titleSize = 60,
+    title = data.title,
+): Node {
+    const titleWidth = hasCover ? 650 : 1056;
+    const accent = /^#[\da-f]{6}$/iu.test(data.accent) ? data.accent : "#EAB308";
+    const children: Node[] = [
+        {
+            type: "container",
+            style: {
+                position: "absolute",
+                right: -120,
+                top: -200,
+                width: 650,
+                height: 650,
+                borderRadius: "50%",
+                border: `1px solid ${accent}35`,
+                background: `radial-gradient(circle, ${accent}18, transparent 70%)`,
+            },
+        },
+        {
+            type: "container",
+            style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: 1200,
+                height: 6,
+                backgroundColor: accent,
+            },
+        },
+        text(data.siteTitle, {
+            position: "absolute",
+            left: 72,
+            top: 48,
+            width: 820,
+            height: 46,
+            fontSize: 28,
+            color: accent,
+            overflow: "hidden",
+        }),
+        text(data.category || "ARTICLE", {
+            position: "absolute",
+            right: 72,
+            top: 54,
+            width: 240,
+            height: 36,
+            textAlign: "right",
+            fontSize: 21,
+            color: "#a9b5c6",
+            overflow: "hidden",
+        }),
+        text(title, {
+            position: "absolute",
+            left: 72,
+            top: 142,
+            width: titleWidth,
+            height: 260,
+            fontSize: titleSize,
+            lineHeight: 1.24,
+            color: "#f5f7fb",
+            overflow: "hidden",
+            overflowWrap: "anywhere",
+        }),
+        text([...data.description.replace(/\s+/gu, " ")].slice(0, hasCover ? 65 : 100).join(""), {
+            position: "absolute",
+            left: 72,
+            top: 421,
+            width: titleWidth,
+            height: 76,
+            fontSize: 25,
+            lineHeight: 1.45,
+            color: "#a9b5c6",
+            overflow: "hidden",
+        }),
+        {
+            type: "container",
+            style: {
+                position: "absolute",
+                left: 72,
+                top: 535,
+                width: 1056,
+                height: 1,
+                backgroundColor: "#ffffff22",
+            },
+        },
+        text(data.host, { position: "absolute", left: 72, top: 560, fontSize: 23, color: accent }),
+        text(`${data.author}  /  ${data.date}`, {
+            position: "absolute",
+            right: 72,
+            top: 560,
+            width: 650,
+            textAlign: "right",
+            fontSize: 23,
+            color: "#b9c4d3",
+        }),
+    ];
+    if (hasCover)
+        children.push({
+            type: "image",
+            src: "stalux-cover",
+            style: {
+                position: "absolute",
+                right: 72,
+                top: 142,
+                width: 350,
+                height: 354,
+                objectFit: "cover",
+                borderRadius: 20,
+            },
+        });
+    return {
+        type: "container",
+        lang: data.lang,
+        style: {
+            width: 1200,
+            height: 630,
+            position: "relative",
+            backgroundColor: "#101722",
+            fontFamily: "Stalux Card",
+            overflow: "hidden",
+        },
+        children,
+    };
+}
+
+export async function renderSocialCard(
+    data: SocialCardData,
+    paths: SocialCardPaths,
+    warn: (message: string) => void,
+    format: "webp" | "png" = "webp",
+): Promise<Buffer> {
+    let cover: Buffer | undefined;
+    if (data.cover) {
+        try {
+            cover = await loadCover(data.cover, paths);
+        } catch {
+            warn(`分享封面不可用，已回退标题卡片：${data.title}`);
+        }
+    }
+    const font = await stat(paths.fontPath);
+    const key = createHash("sha256")
+        .update(JSON.stringify(["v2", format, data, font.size, font.mtimeMs]))
+        .update(cover ?? "")
+        .digest("hex");
+    const cacheFile = path.join(paths.cacheDir, `${key}.${format}`);
+    const hit = await readFile(cacheFile).catch(() => undefined);
+    if (hit) return hit;
+    const renderer = await getRenderer(paths.fontPath);
+    const layout = async (withCover: boolean) => {
+        const width = withCover ? 650 : 1056;
+        let title = [...data.title].slice(0, 150).join("");
+        let size = 66;
+        while (true) {
+            const measured = await renderer.measure(
+                {
+                    type: "text",
+                    text: title,
+                    style: {
+                        width,
+                        fontSize: size,
+                        lineHeight: 1.24,
+                        fontFamily: "Stalux Card",
+                        overflowWrap: "anywhere",
+                    },
+                },
+                { width },
+            );
+            if (measured.height <= 250) break;
+            if (size > 30) size -= 2;
+            else title = `${[...title].slice(0, -3).join("")}…`;
+        }
+        return socialCardTree(data, withCover, size, title);
+    };
+    let bytes: Buffer;
+    try {
+        bytes = await renderer.render(await layout(Boolean(cover)), {
+            width: 1200,
+            height: 630,
+            format,
+            quality: 86,
+            images: cover ? [{ src: "stalux-cover", data: cover }] : [],
+        });
+    } catch (error) {
+        if (!cover) throw error;
+        warn(`分享封面解码失败，已回退标题卡片：${data.title}`);
+        bytes = await renderer.render(await layout(false), {
+            width: 1200,
+            height: 630,
+            format,
+            quality: 86,
+        });
+    }
+    await mkdir(paths.cacheDir, { recursive: true });
+    await writeFile(cacheFile, bytes);
+    return bytes;
+}

package/src/internal/style-names.generated.ts

@@ -290,80 +290,70 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--stalux-site-header-height": "--s1q",
         "--stalux-site-header-min-height": "--s1r",
         "--stalux-text-shadow": "--s1s",
-        "--stalux-vt-distance": "--s1t",
-        "--stalux-vt-duration": "--s1u",
-        "--stalux-vt-rx": "--s1v",
-        "--stalux-vt-ry": "--s1w",
-        "--stalux-vt-rz": "--s1x",
-        "--stalux-vt-scale": "--s1y",
-        "--stalux-vt-tilt": "--s1z",
-        "--stalux-vt-x": "--s20",
-        "--stalux-vt-y": "--s21",
-        "--surface-glass": "--s22",
-        "--surface-glass-shadow": "--s23",
-        "--tag-bg": "--s24",
-        "--tag-bg-hover": "--s25",
-        "--tl-line": "--s26",
-        "--tl-pad": "--s27",
-        "--transition-fast": "--s28",
-        "--transition-medium": "--s29",
-        "--transition-normal": "--s2a",
-        "--transition-slow": "--s2b",
-        "--transition-slower": "--s2c",
-        "--transition-slowest": "--s2d",
-        "--un-rotate": "--s2e",
-        "--un-rotate-x": "--s2f",
-        "--un-rotate-y": "--s2g",
-        "--un-rotate-z": "--s2h",
-        "--un-scale-x": "--s2i",
-        "--un-scale-y": "--s2j",
-        "--un-scale-z": "--s2k",
-        "--un-skew-x": "--s2l",
-        "--un-skew-y": "--s2m",
-        "--un-translate-x": "--s2n",
-        "--un-translate-y": "--s2o",
-        "--un-translate-z": "--s2p",
-        "--updated-bg": "--s2q",
-        "--updated-border": "--s2r",
-        "--white-05p": "--s2s",
-        "--white-10p": "--s2t",
-        "--white-15p": "--s2u",
-        "--white-20p": "--s2v",
-        "--white-30p": "--s2w",
-        "--white-50p": "--s2x",
-        "--white-60p": "--s2y",
-        "--white-70p": "--s2z",
-        "--white-75p": "--s30",
-        "--white-78p": "--s31",
-        "--white-80p": "--s32",
-        "--white-85p": "--s33",
-        "--white-90p": "--s34",
-        "--white-95p": "--s35",
-        "--white-full": "--s36"
+        "--surface-glass": "--s1t",
+        "--surface-glass-shadow": "--s1u",
+        "--tag-bg": "--s1v",
+        "--tag-bg-hover": "--s1w",
+        "--tl-line": "--s1x",
+        "--tl-pad": "--s1y",
+        "--transition-fast": "--s1z",
+        "--transition-medium": "--s20",
+        "--transition-normal": "--s21",
+        "--transition-slow": "--s22",
+        "--transition-slower": "--s23",
+        "--transition-slowest": "--s24",
+        "--un-rotate": "--s25",
+        "--un-rotate-x": "--s26",
+        "--un-rotate-y": "--s27",
+        "--un-rotate-z": "--s28",
+        "--un-scale-x": "--s29",
+        "--un-scale-y": "--s2a",
+        "--un-scale-z": "--s2b",
+        "--un-skew-x": "--s2c",
+        "--un-skew-y": "--s2d",
+        "--un-translate-x": "--s2e",
+        "--un-translate-y": "--s2f",
+        "--un-translate-z": "--s2g",
+        "--updated-bg": "--s2h",
+        "--updated-border": "--s2i",
+        "--white-05p": "--s2j",
+        "--white-10p": "--s2k",
+        "--white-15p": "--s2l",
+        "--white-20p": "--s2m",
+        "--white-30p": "--s2n",
+        "--white-50p": "--s2o",
+        "--white-60p": "--s2p",
+        "--white-70p": "--s2q",
+        "--white-75p": "--s2r",
+        "--white-78p": "--s2s",
+        "--white-80p": "--s2t",
+        "--white-85p": "--s2u",
+        "--white-90p": "--s2v",
+        "--white-95p": "--s2w",
+        "--white-full": "--s2x"
     },
     "animations": {
         "fadeInUpComment": "k0",
         "spin": "k1",
         "stalux-article-enter": "k2",
         "stalux-article-enter-back": "k3",
-        "stalux-content-in": "k4",
-        "stalux-cursor-blink": "k5",
-        "stalux-link-avatar-spin": "k6",
-        "stalux-page-enter": "k7",
-        "stalux-page-enter-back": "k8",
-        "stalux-page-exit": "k9",
-        "stalux-random-spin": "ka",
-        "stalux-sidebar-left-back-in": "kb",
-        "stalux-sidebar-left-back-out": "kc",
-        "stalux-sidebar-left-in": "kd",
-        "stalux-sidebar-left-out": "ke",
-        "stalux-sidebar-right-back-in": "kf",
-        "stalux-sidebar-right-back-out": "kg",
-        "stalux-sidebar-right-in": "kh",
-        "stalux-sidebar-right-out": "ki",
-        "stalux-social-stalux-social-arrive": "kj",
-        "stalux-taxonomy-enter": "kk",
-        "stalux-taxonomy-enter-back": "kl",
-        "stalux-word-word-glow": "km"
+        "stalux-cursor-blink": "k4",
+        "stalux-link-avatar-spin": "k5",
+        "stalux-page-enter": "k6",
+        "stalux-page-enter-back": "k7",
+        "stalux-page-exit": "k8",
+        "stalux-random-spin": "k9",
+        "stalux-sidebar-left-back-in": "ka",
+        "stalux-sidebar-left-back-out": "kb",
+        "stalux-sidebar-left-in": "kc",
+        "stalux-sidebar-left-out": "kd",
+        "stalux-sidebar-right-back-in": "ke",
+        "stalux-sidebar-right-back-out": "kf",
+        "stalux-sidebar-right-in": "kg",
+        "stalux-sidebar-right-out": "kh",
+        "stalux-social-stalux-social-arrive": "ki",
+        "stalux-taxonomy-enter": "kj",
+        "stalux-taxonomy-enter-back": "kk",
+        "stalux-word-word-glow": "kl"
     }
 };

package/src/layouts/PostLayout.astro

@@ -52,11 +52,7 @@ const walineConfig = walineSection?.serverURL
 ---
 
 <div class="stalux-post-page">
-    <div
-        class="stalux-post-layout"
-        transition:name="stalux-article-layout"
-        transition:animate="none"
-    >
+    <div class="stalux-post-layout">
         <!-- Left Sidebar -->
         <PostLeft author={author} authorAvatar={props.authorAvatar} />
 

package/src/layouts/Stalux.astro

@@ -11,6 +11,7 @@ import {
     getPromoteData,
     getSiteData,
 } from "@utils/config-utils";
+import type { SocialImage } from "@utils/social-image";
 import { getRouteKind } from "@utils/view-transitions";
 
 const props = Astro.props as Props;
@@ -19,6 +20,7 @@ interface Props {
     title: string;
     description: string;
     cover?: string;
+    socialImage?: SocialImage;
     isArticle?: boolean;
     date?: string;
     updated?: string;
@@ -60,6 +62,7 @@ const routeKind = getRouteKind(Astro.url.pathname);
         title={props.title}
         description={props.description}
         cover={props.cover}
+        socialImage={props.socialImage}
         isArticle={props.isArticle}
         date={props.date}
         updated={props.updated}
@@ -88,20 +91,10 @@ const routeKind = getRouteKind(Astro.url.pathname);
         data-stalux-umami-id={headConfig?.umami?.id}
         data-stalux-umami-url={headConfig?.umami?.url}
     >
-        <header
-            class="stalux-site-header"
-            data-stalux-font-group="header"
-            transition:name="stalux-site-header"
-            transition:animate="none"
-            transition:persist="stalux-site-header"
-        >
+        <header class="stalux-site-header" data-stalux-font-group="header">
             <Navs />
         </header>
-        <div
-            data-stalux-scroll-sentinel
-            transition:persist="stalux-scroll-sentinel"
-            aria-hidden="true"
-        ></div>
+        <div data-stalux-scroll-sentinel aria-hidden="true"></div>
         {llmPromote && (
             <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
                 <p>{llmPromote}</p>
@@ -111,15 +104,9 @@ const routeKind = getRouteKind(Astro.url.pathname);
             class="bg-layer bg-a"
             data-stalux-background="a"
             style="opacity: 1;"
-            transition:persist="stalux-bg-a"
-            aria-hidden="true"
-        ></div>
-        <div
-            class="bg-layer bg-b"
-            data-stalux-background="b"
-            transition:persist="stalux-bg-b"
             aria-hidden="true"
         ></div>
+        <div class="bg-layer bg-b" data-stalux-background="b" aria-hidden="true"></div>
         <main class="stalux-main" data-stalux-route={routeKind}>
             <slot />
         </main>

package/src/pages/index.astro

@@ -20,11 +20,7 @@ import { getSiteData } from "@utils/config-utils";
 
 <Stalux title={siteTitle} description={siteDescription}>
     <div class="stalux-home-body stalux-u-flex stalux-u-items-center stalux-u-flex-col">
-        <h1
-            class="stalux-home-title stalux-u-text-center"
-            data-stalux-motion-focus
-            transition:animate="none"
-        >
+        <h1 class="stalux-home-title stalux-u-text-center" data-stalux-motion-focus>
             {siteTitle}
         </h1>
         <h2