#!/usr/bin/env node
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import {
buildFeedThumbnailSvg,
buildThumbnailSvg,
extractCoverSignals,
generateHtmlThumbnail,
resolveCoverDataUri,
} from '../mindspace-thumbnails.mjs';
const root = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
const outputDir = path.join(root, 'public', 'thumbnail-demo');
const samples = [
{
id: 'malaysia-travel',
file: path.join(root, 'MindSpace', 'john', 'malaysia-travel-guide.html'),
meta: {
tag: '旅行攻略',
subtitle: '马来西亚深度游',
cover: 'https://images.unsplash.com/photo-1596422846543-75c6fc197f07?auto=format&fit=crop&w=1200&q=80',
},
},
{
id: 'mapo-tofu',
file: path.join(root, 'MindSpace', 'john', 'mapo-tofu.html'),
meta: {
tag: '美食专题',
cover: 'https://images.unsplash.com/photo-1525755662778-989d0529657e?auto=format&fit=crop&w=1200&q=80',
},
},
];
function galleryCard({ id, title, subtitle }) {
return `
`;
}
async function main() {
await fs.mkdir(outputDir, { recursive: true });
const cards = [];
for (const sample of samples) {
let html = '';
try {
html = await fs.readFile(sample.file, 'utf8');
} catch {
console.warn(`跳过缺失样本: ${sample.file}`);
continue;
}
const signals = extractCoverSignals(html, sample.meta);
const legacySvg = buildThumbnailSvg({
title: signals.title,
subtitle: sample.meta.subtitle ?? signals.subtitle,
accent: signals.accent,
});
const coverDataUri = signals.image
? await resolveCoverDataUri({
storageRoot: outputDir,
contentBaseDir: path.dirname(sample.file),
imageUrl: signals.image,
})
: null;
const feedSvg = buildFeedThumbnailSvg(signals, { coverDataUri });
await fs.writeFile(path.join(outputDir, `${sample.id}-legacy.svg`), legacySvg, 'utf8');
await fs.writeFile(path.join(outputDir, `${sample.id}-feed.svg`), feedSvg, 'utf8');
await generateHtmlThumbnail(outputDir, `${sample.id}-generated.svg`, html, {
...sample.meta,
contentBaseDir: path.dirname(sample.file),
});
cards.push(
galleryCard({
id: sample.id,
title: signals.title,
subtitle: `${signals.tag} · 新版 3:4 封面`,
}),
);
}
const html = `
MindSpace 预览图 Demo
MindSpace 预览图升级 Demo
左侧为旧版横版缩略图，中间为新版 3:4 信息流封面（自动从 HTML 提取标题、配色、emoji），右侧为保存页面时实际写入的 thumbnail.svg。下方是小红书风格卡片效果。
${cards
.map(
(card, index) => `
`,
)
.join('')}
旧版（横版字卡）
新版（3:4 精美封面）
generateHtmlThumbnail 输出