@xingwangzhe/stalux 1.51.0 → 1.51.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.51.0",
+    "version": "1.51.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -111,12 +111,12 @@
         "@mcp-b/webmcp-polyfill": "^5.1.0",
         "@microsoft/clarity": "1.0.2",
         "@pagefind/component-ui": "^1.5.2",
-        "@resvg/resvg-js": "2.6.2",
         "@swup/a11y-plugin": "^5.2.1",
         "@swup/head-plugin": "^2.3.1",
         "@swup/js-plugin": "^3.2.0",
         "@swup/preload-plugin": "^3.2.12",
         "@swup/scroll-plugin": "^4.0.0",
+        "@takumi-rs/core": "2.17.1",
         "@waline/client": "^3.16.1",
         "@xingwangzhe/cjk-font-split-native": "^0.4.10",
         "@xingwangzhe/satteri-mermaid": "^0.8.2",
@@ -131,7 +131,6 @@
         "pagefind": "^1.5.2",
         "parse5": "^8.0.1",
         "photoswipe": "^5.4.4",
-        "satori": "0.63.2",
         "satteri": "^0.10.5",
         "simple-icons": "^16.35.0",
         "swup": "4.10.0",

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

@@ -2,8 +2,6 @@ import { createHash } from "node:crypto";
 import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { imageSize } from "image-size";
-import { loadSharp, type SharpRawBuffer } from "./sharp-loader";
-import { CARD_HEIGHT, COVER_WIDTH } from "./social-card-layout";
 
 export interface SocialCardPaths {
     publicDir: string;
@@ -96,48 +94,3 @@ function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise<Buffe
         path.join(paths.cacheDir, "covers", createHash("sha256").update(url.href).digest("hex")),
     );
 }
-
-const preparedCovers = new Map<string, Promise<SharpRawBuffer>>();
-
-/**
- * Crop, flatten and downscale the artwork to the exact panel size. The pixels
- * are composited after rasterization instead of being embedded in the SVG: an
- * image inside the SVG made Resvg decode and scale it as part of vector
- * rasterization, which cost several hundred milliseconds per card.
- */
-export async function prepareCover(bytes: Buffer): Promise<SharpRawBuffer> {
-    const sharp = loadSharp();
-    if (!sharp) throw new Error("sharp is required to crop artwork");
-    const digest = createHash("sha256").update(bytes).digest("hex");
-    let pending = preparedCovers.get(digest);
-    if (!pending) {
-        pending = sharp(bytes)
-            .rotate()
-            .resize({
-                width: COVER_WIDTH,
-                height: CARD_HEIGHT,
-                fit: "cover",
-                position: "centre",
-            })
-            .flatten({ background: "#ffffff" })
-            .removeAlpha()
-            .raw()
-            .toBuffer({ resolveWithObject: true });
-        preparedCovers.set(digest, pending);
-        if (preparedCovers.size > 16)
-            preparedCovers.delete(preparedCovers.keys().next().value ?? "");
-    }
-    try {
-        return await pending;
-    } catch (error) {
-        preparedCovers.delete(digest);
-        throw new Error("cover could not be prepared", { cause: error });
-    }
-}
-
-/** Only used when sharp is unavailable, so Satori can embed the original bytes. */
-export function coverDataUri(bytes: Buffer): string {
-    const { type } = imageSize(bytes);
-    const mime = type === "jpg" ? "image/jpeg" : `image/${type ?? "png"}`;
-    return `data:${mime};base64,${bytes.toString("base64")}`;
-}

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

@@ -4,10 +4,11 @@ import type { SocialCardData } from "../utils/social-image";
 
 interface PostData {
     title: string;
-    desc: string;
     date: string;
+    abbrlink: string;
     cover?: string;
     categories?: string[];
+    tags?: string[];
 }
 
 export function createSocialCardData(
@@ -15,13 +16,14 @@ export function createSocialCardData(
     site: SiteData,
     author: AuthorData,
 ): SocialCardData {
+    const siteUrl = new URL(site.canonical ?? site.url);
     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",
+        host: siteUrl.host,
+        postUrl: new URL(`/posts/${encodeURIComponent(post.abbrlink)}/`, siteUrl).href,
+        tags: post.tags ?? [],
         date: formatInTimeZone(
             parseDate(post.date, site.timezone || "Asia/Shanghai"),
             site.timezone || "Asia/Shanghai",

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

@@ -1,41 +1,34 @@
+import type { Node } from "@takumi-rs/core";
 import type { SocialCardData } from "../utils/social-image";
 
 export const CARD_WIDTH = 1200;
 export const CARD_HEIGHT = 630;
 export const CARD_MARGIN = 72;
 export const COVER_WIDTH = 440;
-export const COVER_LEFT = CARD_WIDTH - COVER_WIDTH;
 export const CARD_FONT_FAMILY = "Stalux Card";
-export const CARD_FONT_WEIGHT = 400;
 
-export interface CardNode {
-    type: string;
-    props: Record<string, unknown> & { style?: Record<string, unknown>; children?: unknown };
-}
+const MUTED = "#545454";
+const RULE = "rgba(0, 0, 0, 0.16)";
 
-const text = (value: string, style: Record<string, unknown>): CardNode => ({
-    type: "div",
-    // `display: block` is what enables `lineClamp` and its ellipsis in Satori.
-    props: { style: { display: "block", overflow: "hidden", ...style }, children: value },
-});
+const text = (value: string, style: Record<string, unknown>): Node =>
+    ({ type: "text", text: value, style }) as Node;
 
-const rule = (top: number, width: number): CardNode => ({
-    type: "div",
-    props: {
+const rule = (top: number, width: number): Node =>
+    ({
+        type: "container",
         style: {
             position: "absolute",
             left: CARD_MARGIN,
             top,
             width,
             height: 1,
-            backgroundColor: "rgba(0, 0, 0, 0.16)",
+            backgroundColor: RULE,
         },
-    },
-});
+    }) as Node;
 
-const row = (top: number, width: number, children: CardNode[]): CardNode => ({
-    type: "div",
-    props: {
+const row = (top: number, width: number, children: Node[]): Node =>
+    ({
+        type: "container",
         style: {
             position: "absolute",
             left: CARD_MARGIN,
@@ -46,16 +39,16 @@ const row = (top: number, width: number, children: CardNode[]): CardNode => ({
             alignItems: "baseline",
         },
         children,
-    },
-});
+    }) as Node;
 
-function header(data: SocialCardData, textWidth: number): CardNode {
+function header(data: SocialCardData, textWidth: number): Node {
     return row(50, textWidth, [
         text(data.siteTitle, {
             fontSize: 26,
             lineHeight: 1.2,
             maxWidth: "62%",
             lineClamp: 1,
+            overflow: "hidden",
             color: "#000000",
         }),
         text(data.category || "", {
@@ -65,32 +58,34 @@ function header(data: SocialCardData, textWidth: number): CardNode {
             letterSpacing: 3,
             lineHeight: 1.2,
             lineClamp: 1,
+            overflow: "hidden",
             color: "#000000",
         }),
     ]);
 }
 
-function footer(data: SocialCardData, textWidth: number): CardNode {
+function footer(data: SocialCardData, textWidth: number): Node {
     return row(550, textWidth, [
         text(data.host, { fontSize: 22, lineHeight: 1.3, color: "#000000" }),
         text(`${data.author}  /  ${data.date}`, {
             fontSize: 22,
             lineHeight: 1.3,
             textAlign: "right",
-            color: "#545454",
+            color: MUTED,
         }),
     ]);
 }
 
 /**
  * A fixed editorial layout: black type on white, one full-colour artwork panel.
- * No accent colour, gradients, or decoration — the title and the image carry it.
+ * No accent colour, gradients, or decoration — the title, metadata and image
+ * carry it. Every text block is black or neutral gray; only the cover is colour.
  */
-export function socialCardTree(data: SocialCardData, withCover = false, cover?: string): CardNode {
+export function socialCardTree(data: SocialCardData, withCover = false): Node {
     const textWidth = withCover
         ? CARD_WIDTH - COVER_WIDTH - CARD_MARGIN * 2
         : CARD_WIDTH - CARD_MARGIN * 2;
-    const children: CardNode[] = [
+    const children: Node[] = [
         header(data, textWidth),
         rule(106, textWidth),
         text(data.title, {
@@ -101,53 +96,64 @@ export function socialCardTree(data: SocialCardData, withCover = false, cover?:
             fontSize: 58,
             lineHeight: 1.2,
             lineClamp: 3,
+            overflow: "hidden",
             overflowWrap: "anywhere",
             color: "#000000",
         }),
-        text(data.description.replace(/\s+/gu, " ").trim(), {
+    ];
+    if (data.tags.length > 0)
+        children.push(
+            text(data.tags.map((tag) => `#${tag}`).join("  ·  "), {
+                position: "absolute",
+                left: CARD_MARGIN,
+                top: 384,
+                width: textWidth,
+                fontSize: 23,
+                lineHeight: 1.3,
+                lineClamp: 1,
+                overflow: "hidden",
+                color: "#000000",
+            }),
+        );
+    children.push(
+        text(data.postUrl.replace(/^https?:\/\//u, ""), {
             position: "absolute",
             left: CARD_MARGIN,
-            top: 398,
+            top: 426,
             width: textWidth,
-            fontSize: 24,
-            lineHeight: 1.55,
-            lineClamp: 2,
-            overflowWrap: "anywhere",
-            color: "#545454",
+            fontSize: 21,
+            lineHeight: 1.3,
+            lineClamp: 1,
+            overflow: "hidden",
+            color: MUTED,
         }),
         rule(532, textWidth),
         footer(data, textWidth),
-    ];
-    if (cover)
+    );
+    if (withCover)
         children.push({
-            type: "img",
-            props: {
-                src: cover,
-                style: {
-                    position: "absolute",
-                    right: 0,
-                    top: 0,
-                    width: COVER_WIDTH,
-                    height: CARD_HEIGHT,
-                    objectFit: "cover",
-                },
-            },
-        });
-    return {
-        type: "div",
-        props: {
+            type: "image",
+            src: "stalux-cover",
             style: {
-                width: CARD_WIDTH,
+                position: "absolute",
+                right: 0,
+                top: 0,
+                width: COVER_WIDTH,
                 height: CARD_HEIGHT,
-                position: "relative",
-                display: "flex",
-                backgroundColor: "#ffffff",
-                color: "#000000",
-                fontFamily: CARD_FONT_FAMILY,
-                overflow: "hidden",
+                objectFit: "cover",
             },
-            lang: data.lang,
-            children,
+        } as Node);
+    return {
+        type: "container",
+        style: {
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
+            position: "relative",
+            backgroundColor: "#ffffff",
+            color: "#000000",
+            fontFamily: CARD_FONT_FAMILY,
+            overflow: "hidden",
         },
-    };
+        children,
+    } as Node;
 }

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

@@ -1,106 +1,47 @@
 import { createHash } from "node:crypto";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { Resvg } from "@resvg/resvg-js";
-import satori from "satori";
+import { Renderer } from "@takumi-rs/core";
 import { type SocialCardData, socialCardFormat } from "../utils/social-image";
-import { loadSharp, type SharpPipeline, type SharpRawBuffer } from "./sharp-loader";
-import { coverDataUri, loadCover, prepareCover, type SocialCardPaths } from "./social-card-cover";
-import {
-    CARD_FONT_FAMILY,
-    CARD_FONT_WEIGHT,
-    CARD_HEIGHT,
-    CARD_WIDTH,
-    COVER_LEFT,
-    socialCardTree,
-} from "./social-card-layout";
+import { loadCover, type SocialCardPaths } from "./social-card-cover";
+import { CARD_FONT_FAMILY, CARD_HEIGHT, CARD_WIDTH, socialCardTree } from "./social-card-layout";
 
 export type { SocialCardPaths } from "./social-card-cover";
 export { localCoverPath } from "./social-card-cover";
 export { socialCardTree } from "./social-card-layout";
 
-/** Bump when the layout changes so every cached render is replaced. */
-const TEMPLATE = "stalux-mono-v1";
+/** Bump when the layout or renderer changes so every cached render is replaced. */
+const TEMPLATE = "stalux-mono-takumi-v2";
+const JPEG_QUALITY = 60;
 
-type SatoriInput = Parameters<typeof satori>[0];
+const renderers = new Map<string, Promise<Renderer>>();
 
-function encodeWithSharp(
-    pipeline: SharpPipeline,
-    format: "jpg" | "png",
-    panel?: SharpRawBuffer,
-): Promise<Buffer> {
-    if (format === "jpg") {
-        // The artwork keeps its colour. Without artwork the whole frame is
-        // black and white, so the smaller true grayscale JPEG is used.
-        const composed = panel
-            ? pipeline.composite([
-                  {
-                      input: panel.data,
-                      raw: {
-                          width: panel.info.width,
-                          height: panel.info.height,
-                          channels: panel.info.channels,
-                      },
-                      left: COVER_LEFT,
-                      top: 0,
-                  },
-              ])
-            : pipeline.greyscale().toColourspace("b-w");
-        return composed.jpeg({ quality: 80, mozjpeg: true }).toBuffer();
-    }
-    return pipeline
-        .greyscale()
-        .png({ compressionLevel: 9, palette: true, colours: 256, effort: 3 })
-        .toBuffer();
-}
-
-/**
- * Rasterize with Resvg, then let Sharp compose and encode in a single pass.
- * System-font discovery is disabled because Satori already converted every
- * glyph to a path; leaving it on made each Resvg instance scan all installed
- * fonts, costing about 500ms per card.
- */
-async function renderCardBytes(
-    svg: string,
-    format: "jpg" | "png",
-    panel?: SharpRawBuffer,
-): Promise<Buffer> {
-    const png = new Resvg(svg, {
-        fitTo: { mode: "width", value: CARD_WIDTH },
-        background: "#ffffff",
-        font: { loadSystemFonts: false },
-    })
-        .render()
-        .asPng();
-    const sharp = loadSharp();
-    if (!sharp) {
-        if (format === "jpg") throw new Error("JPEG encoding requires sharp");
-        return png;
-    }
-    try {
-        return await encodeWithSharp(sharp(png), format, panel);
-    } catch (error) {
-        if (format === "jpg") throw error;
-        return png;
-    }
-}
-
-const fonts = new Map<string, Promise<Buffer>>();
-function readFont(fontPath: string): Promise<Buffer> {
-    let pending = fonts.get(fontPath);
+function getRenderer(fontPath: string): Promise<Renderer> {
+    let pending = renderers.get(fontPath);
     if (!pending) {
-        pending = readFile(fontPath);
-        fonts.set(fontPath, pending);
+        pending = (async () => {
+            const renderer = new Renderer({ cacheMaxBytes: 32 * 1024 * 1024 });
+            await renderer.registerFont({
+                name: CARD_FONT_FAMILY,
+                data: await readFile(fontPath),
+            });
+            return renderer;
+        })();
+        renderers.set(fontPath, pending);
     }
     return pending;
 }
 
-let fontDigestPromise: Promise<string> | undefined;
+const fontDigests = new Map<string, Promise<string>>();
 function getFontDigest(fontPath: string): Promise<string> {
-    fontDigestPromise ??= readFile(fontPath).then((bytes) =>
-        createHash("sha256").update(bytes).digest("hex"),
-    );
-    return fontDigestPromise;
+    let pending = fontDigests.get(fontPath);
+    if (!pending) {
+        pending = readFile(fontPath).then((bytes) =>
+            createHash("sha256").update(bytes).digest("hex"),
+        );
+        fontDigests.set(fontPath, pending);
+    }
+    return pending;
 }
 
 export async function renderSocialCard(
@@ -109,7 +50,6 @@ export async function renderSocialCard(
     warn: (message: string) => void,
 ): Promise<Buffer> {
     const format = socialCardFormat(data);
-    const sharpAvailable = Boolean(loadSharp());
     let coverBytes: Buffer | undefined;
     if (data.cover) {
         try {
@@ -120,67 +60,38 @@ export async function renderSocialCard(
     }
     // Content-only key: identical card data + identical font + identical cover
     // always reuses the cached render, whatever the filesystem timestamps say.
-    // It is checked before cropping artwork so a warm build does no image work.
+    // It is checked before any raster work, so a warm build only reads bytes.
     const fontDigest = await getFontDigest(paths.fontPath);
     const key = createHash("sha256")
-        .update(
-            JSON.stringify([TEMPLATE, format, data, fontDigest, sharpAvailable ? "panel" : "flat"]),
-        )
+        .update(JSON.stringify([TEMPLATE, format, data, fontDigest]))
         .update(coverBytes ?? "")
         .digest("hex");
     const cacheFile = path.join(paths.cacheDir, `${key}.${format}`);
     const hit = await readFile(cacheFile).catch(() => undefined);
     if (hit) return hit;
 
-    let panel: SharpRawBuffer | undefined;
-    let inlineCover: string | undefined;
-    if (coverBytes) {
-        if (sharpAvailable) {
-            try {
-                panel = await prepareCover(coverBytes);
-            } catch {
-                warn(`分享封面不可用，已回退标题卡片：${data.title}`);
-            }
-        } else {
-            // Without sharp there is no compositor, so the original bytes go
-            // through Satori instead (PNG/JPEG only, and no palette encoding).
-            inlineCover = coverDataUri(coverBytes);
-        }
-    }
-
-    const withCover = Boolean(panel || inlineCover);
-    const renderTree = async (hasCover: boolean) => {
-        const svg = await satori(
-            socialCardTree(
-                data,
-                hasCover,
-                hasCover ? inlineCover : undefined,
-            ) as unknown as SatoriInput,
-            {
-                width: CARD_WIDTH,
-                height: CARD_HEIGHT,
-                fonts: [
-                    {
-                        name: CARD_FONT_FAMILY,
-                        data: await readFont(paths.fontPath),
-                        weight: CARD_FONT_WEIGHT,
-                        style: "normal",
-                    },
-                ],
-            },
-        );
-        return renderCardBytes(svg, format, hasCover ? panel : undefined);
-    };
+    const renderer = await getRenderer(paths.fontPath);
+    const render = (withCover: boolean) =>
+        renderer.render(socialCardTree(data, withCover), {
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
+            format: format === "jpg" ? "jpeg" : "png",
+            quality: JPEG_QUALITY,
+            images: withCover && coverBytes ? [{ src: "stalux-cover", data: coverBytes }] : [],
+        });
     let bytes: Buffer;
+    let cacheable = true;
     try {
-        bytes = await renderTree(withCover);
+        bytes = await render(Boolean(coverBytes));
     } catch (error) {
-        if (!withCover) throw error;
+        if (!coverBytes) throw error;
         warn(`分享封面解码失败，已回退标题卡片：${data.title}`);
         // Do not cache the fallback under the artwork key: a later build should
         // retry the cover instead of inheriting a short-lived decode failure.
-        return renderTree(false);
+        bytes = await render(false);
+        cacheable = false;
     }
+    if (!cacheable) return bytes;
     await mkdir(paths.cacheDir, { recursive: true });
     await writeFile(cacheFile, bytes);
     return bytes;

package/src/utils/social-image.ts

@@ -1,13 +1,12 @@
 import { createHash } from "node:crypto";
-import { loadSharp } from "../internal/sharp-loader";
 
 export interface SocialCardData {
     title: string;
-    description: string;
     siteTitle: string;
     author: string;
     host: string;
-    lang: string;
+    postUrl: string;
+    tags: string[];
     date: string;
     category: string;
     cover?: string;
@@ -37,20 +36,15 @@ export function isSocialImageUrl(value: string): boolean {
     }
 }
 
-/**
- * Cards with artwork are photographic, so JPEG saves most of the bytes and is
- * accepted by every crawler. Plain cards stay PNG: flat type compresses far
- * better there. Without `sharp` neither palette PNG nor JPEG is available, so
- * the card falls back to a plain PNG.
- */
+/** Artwork cards are photographic, so JPEG saves bytes; plain cards stay PNG. */
 export function socialCardFormat(data: Pick<SocialCardData, "cover">): SocialCardFormat {
-    return data.cover && loadSharp() ? "jpg" : "png";
+    return data.cover ? "jpg" : "png";
 }
 
 export function socialCardPath(data: SocialCardData, base = "/"): string {
     // Bump the template revision when layout changes. Metadata changes get a fresh URL.
     const hash = createHash("sha256")
-        .update(JSON.stringify(["stalux-mono-v1", data]))
+        .update(JSON.stringify(["stalux-mono-v2", data]))
         .digest("hex")
         .slice(0, 20);
     return `${base.replace(/\/$/u, "")}/og/${hash}.${socialCardFormat(data)}`;

package/src/internal/sharp-loader.ts

@@ -1,45 +0,0 @@
-import { createRequire } from "node:module";
-
-export interface SharpRawBuffer {
-    data: Buffer;
-    info: { width: number; height: number; channels: number };
-}
-
-export interface SharpPipeline {
-    rotate: () => SharpPipeline;
-    resize: (options: Record<string, unknown>) => SharpPipeline;
-    flatten: (options: Record<string, unknown>) => SharpPipeline;
-    removeAlpha: () => SharpPipeline;
-    composite: (images: Record<string, unknown>[]) => SharpPipeline;
-    greyscale: () => SharpPipeline;
-    toColourspace: (colourspace: string) => SharpPipeline;
-    raw: () => SharpPipeline;
-    jpeg: (options: Record<string, unknown>) => SharpPipeline;
-    png: (options: Record<string, unknown>) => SharpPipeline;
-    toBuffer(): Promise<Buffer>;
-    toBuffer(options: { resolveWithObject: true }): Promise<SharpRawBuffer>;
-}
-
-export type SharpFactory = (input: Buffer) => SharpPipeline;
-
-let cached: { factory: SharpFactory | undefined } | undefined;
-
-/**
- * `sharp` is optional: it ships with Astro and is a dev dependency of the theme,
- * but a project using another image service must still be able to build. It is
- * loaded with `require` because the Vite module runner may already be closed and
- * because a bare dynamic import would make the bundler resolve it eagerly.
- */
-export function loadSharp(): SharpFactory | undefined {
-    if (cached) return cached.factory;
-    let factory: SharpFactory | undefined;
-    try {
-        const loaded = createRequire(import.meta.url)("sharp") as { default?: unknown };
-        const candidate = (loaded.default ?? loaded) as unknown;
-        if (typeof candidate === "function") factory = candidate as SharpFactory;
-    } catch {
-        factory = undefined;
-    }
-    cached = { factory };
-    return factory;
-}