@windcoder/astro-theme-orchid 0.3.0 → 0.4.1

package/README.md

@@ -2,6 +2,8 @@
 
 清新简约的 Astro 博客主题，以 **Astro Integration** 形式提供：站点只做三件事——声明域名、接入主题、传入配置；页面、样式引擎、路由全部由主题注入。支持版本化升级与组件覆盖（`src/overrides/` 同名替换，升级永不覆盖站点定制）。
 
+> 部分功能设计参考了 [Firefly](https://github.com/CuteLeaf/Firefly) 主题，在此致谢。
+
 ## 特性一览
 
 - **页面**：首页（featured/cover/compact/text 四种卡片混排）、文章页（TOC/相关推荐/分享海报/打赏入口）、归档（按年折叠）、分类、标签、专题、画廊（含加密相册）、友链、追番、留言板、打赏、关于

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@windcoder/astro-theme-orchid",
-	"version": "0.3.0",
+	"version": "0.4.1",
 	"description": "清新简约的 Astro 博客主题，以 Integration 形式提供，支持版本化升级与组件覆盖",
 	"type": "module",
 	"keywords": [

package/scripts/generate-lqips.mjs

@@ -1,25 +1,46 @@
 #!/usr/bin/env node
 /**
- * LQIP 生成脚本（M3b-b9，P1-14）：扫描站点 public 下的图片，每张采样
- * 2×2 像素取三色，产出 18 字符 compact hex（三段 rgb hex 拼接），
- * 整体写入站点根 lqips.json（键 → 色，全量重建，增量收益有限故不做）。
+ * LQIP + 缩略图生成脚本（M3b-b9，P1-14；§4.106 扩展双产物；§4.107 外链 LQIP）：
+ * 产出两份构建期元数据：
+ * 1. lqips.json：每张采样 2×2 像素取三色 → 18 字符 compact hex（三段 rgb hex 拼接）。
+ *    两类键：`public:<posix 相对路径>`（站点 public 图片）+ `url:<完整外链 URL>`
+ *    （文章封面/正文首图/相册 urls.txt 等外链图，fetch 下载后同样采样——
+ *    缓存即产物自身：已有 url: 键不重复抓取，`--refresh` 强制重抓）。
+ * 2. thumbs.json：每张 public 图同步生成同目录 `<名>.thumb.webp`（480 宽 q75，
+ *    不放大小图），并记录原图宽高（灯箱打开原图时需正确原始尺寸）。
+ *    外链图不做缩略图（版权/CORS/构建网络依赖，消费端回退原图）。
  *
  * 运行：pnpm --filter site lqip（cwd 必须是 site 根）
- * 消费链路：lqips.json → themeLqipsPlugin（vite.ts）→ virtual:theme/lqips
- *   → utils/lqip.ts getLqipStyle() → 构建期内联渐变（零客户端请求）。
+ * 消费链路：
+ *   lqips.json  → themeLqipsPlugin（vite.ts）→ virtual:theme/lqips
+ *     → utils/lqip.ts getLqipStyle() / rehypeImageEnhance() → 构建期内联渐变；
+ *   thumbs.json → themeLqipsPlugin（vite.ts）→ virtual:theme/thumbs
+ *     → utils/thumb.ts getThumbInfo() → 列表封面构建期换缩略图 URL。
  *
- * 键约定：`public:<posix 相对路径>`。主题图片一律 public 路径或外链
- * （不用 astro:assets），故无需 src: 键；外链/无数据在消费端自然降级纯色。
- * sharp 经本脚本文件位置解析到 theme 包依赖，与 cwd 无关。
+ * 外键一致性约定：url: 键的 URL 必须与渲染期逐字符一致——
+ *   - frontmatter image / 正文首图 / urls.txt 行：原样提取（与 gallery.ts 的
+ *     trim + `#` 注释过滤规则相同）；
+ *   - image:"api"：复刻 utils.ts 的 randomCoverUrl（seedHash + ?v= 追加），
+ *     apis 模板从 site/src/config/*.ts 正则提取首个 apis 数组。
+ * 相册「显式外链 cover」（相册元数据字段）暂不收集：demo 站无此用法，
+ * 且元数据格式多样，出现需求时再扩展。sharp 经本脚本位置解析 theme 依赖。
  */
 import fs from "node:fs";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import sharp from "sharp";
 
 const cwd = process.cwd();
 const publicDir = path.join(cwd, "public");
-const outFile = path.join(cwd, "lqips.json");
+const srcDir = path.join(cwd, "src");
+const lqipFile = path.join(cwd, "lqips.json");
+const thumbsFile = path.join(cwd, "thumbs.json");
+
+const THUMB_WIDTH = 480;
+const THUMB_QUALITY = 75;
+const THUMB_SUFFIX = ".thumb.webp";
+const FETCH_CONCURRENCY = 5;
+const FETCH_TIMEOUT_MS = 15_000;
+const REFRESH = process.argv.includes("--refresh");
 
 const EXTS = new Set([".png", ".jpg", ".jpeg", ".webp", ".avif"]);
 const EXCLUDED_DIRS = new Set(["node_modules", ".astro", "dist", ".git"]);
@@ -29,7 +50,7 @@ if (!fs.existsSync(publicDir)) {
 	process.exit(1);
 }
 
-/** 递归收集图片相对路径（posix 风格，排除构建/依赖目录） */
+/** 递归收集图片相对路径（posix 风格，排除构建/依赖目录与缩略图产物） */
 function collectImages(dir, base = "") {
 	const out = [];
 	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
@@ -41,7 +62,10 @@ function collectImages(dir, base = "") {
 					base ? `${base}/${entry.name}` : entry.name,
 				),
 			);
-		} else if (EXTS.has(path.extname(entry.name).toLowerCase())) {
+		} else if (
+			EXTS.has(path.extname(entry.name).toLowerCase()) &&
+			!entry.name.endsWith(THUMB_SUFFIX)
+		) {
 			out.push(base ? `${base}/${entry.name}` : entry.name);
 		}
 	}
@@ -49,8 +73,8 @@ function collectImages(dir, base = "") {
 }
 
 /** sharp 2×2 fill 采样 → 取 [0][1][3] 三像素（左上/右上/右下）rgb hex 拼接 */
-async function sampleColors(file) {
-	const { data, info } = await sharp(file)
+async function sampleColors(input) {
+	const { data, info } = await sharp(input)
 		.resize(2, 2, { fit: "fill" })
 		.removeAlpha()
 		.raw()
@@ -64,19 +88,214 @@ async function sampleColors(file) {
 	return hex(0) + hex(1) + hex(3);
 }
 
+/** 生成 480 宽 webp 缩略图（不放大小图），返回 { thumb 相对路径, 原图宽高 } */
+async function makeThumb(rel) {
+	const file = path.join(publicDir, rel);
+	const parsed = path.parse(rel);
+	const thumbRel = path.posix.format({
+		dir: parsed.dir,
+		name: `${parsed.name}.thumb`,
+		ext: ".webp",
+	});
+	const meta = await sharp(file).metadata();
+	await sharp(file)
+		.resize({ width: THUMB_WIDTH, withoutEnlargement: true })
+		.webp({ quality: THUMB_QUALITY })
+		.toFile(path.join(publicDir, thumbRel));
+	return {
+		thumb: thumbRel,
+		width: meta.width ?? 0,
+		height: meta.height ?? 0,
+	};
+}
+
+// ---------- 外链 URL 收集（§4.107） ----------
+
+/** 复刻 utils.ts seedHash（Java String.hashCode 同款），保证与渲染期键一致 */
+function seedHash(str) {
+	let h = 0;
+	for (let i = 0; i < str.length; i++)
+		h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+	return Math.abs(h);
+}
+
+/** 复刻 utils.ts randomCoverUrl：{slug} 替换 + ?v=<hash>（有 query 用 &） */
+function randomCoverUrl(template, slug) {
+	const withSlug = template.includes("{slug}")
+		? template.replaceAll("{slug}", slug)
+		: template;
+	return `${withSlug}${withSlug.includes("?") ? "&" : "?"}v=${seedHash(slug)}`;
+}
+
+/** 从 site/src/config/*.ts 正则提取首个 randomCover.apis 模板（提取不到返回 null） */
+function getApiTemplate() {
+	const configDir = path.join(srcDir, "config");
+	if (!fs.existsSync(configDir)) return null;
+	for (const name of fs.readdirSync(configDir).sort()) {
+		if (!/\.(m|c)?(ts|js)$/.test(name)) continue;
+		const text = fs.readFileSync(path.join(configDir, name), "utf8");
+		const apis = text.match(/apis:\s*\[([^\]]*)\]/);
+		if (apis) {
+			const url = apis[1].match(/["']([^"']+)["']/);
+			if (url) return url[1];
+		}
+	}
+	return null;
+}
+
+/** 正文首个外链图 URL：跳过 ```/~~~ 围栏代码块，md 图片语法或 <img> 均可 */
+function extractFirstImage(body) {
+	let inFence = false;
+	for (const line of body.split("\n")) {
+		if (/^\s*(```|~~~)/.test(line)) {
+			inFence = !inFence;
+			continue;
+		}
+		if (inFence) continue;
+		let m = line.match(/!\[[^\]]*\]\(\s*(https?:\/\/[^)\s]+)/);
+		if (m) return m[1];
+		m = line.match(/<img[^>]*\ssrc=["'](https?:\/\/[^"']+)["']/i);
+		if (m) return m[1];
+	}
+	return null;
+}
+
+/** 收集外链图片 URL：文章 frontmatter image（含 api 确定性解析）+ 正文首图 + 相册 urls.txt */
+function collectRemoteUrls() {
+	const urls = new Set();
+	const apiTemplate = getApiTemplate();
+	const postsDir = path.join(srcDir, "content", "posts");
+	if (fs.existsSync(postsDir)) {
+		const walkMd = (dir) => {
+			const out = [];
+			for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+				if (entry.isDirectory())
+					out.push(...walkMd(path.join(dir, entry.name)));
+				else if (/\.(md|mdx)$/i.test(entry.name))
+					out.push(path.join(dir, entry.name));
+			}
+			return out;
+		};
+		for (const file of walkMd(postsDir)) {
+			const text = fs.readFileSync(file, "utf8");
+			const fm = text.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+			let image;
+			if (fm) {
+				const im = fm[1].match(/^image:\s*["']?([^"'\n]+?)["']?\s*$/m);
+				if (im) image = im[1].trim();
+			}
+			if (image && image !== "api" && /^https?:\/\//.test(image)) {
+				urls.add(image);
+			} else if (image === "api" && apiTemplate) {
+				const slug = path.basename(file).replace(/\.(md|mdx)$/i, "");
+				urls.add(randomCoverUrl(apiTemplate, slug));
+			}
+			// 正文首图（无封面文章它是列表封面；有封面文章供正文增强查表）
+			const body = fm ? text.slice(fm[0].length) : text;
+			const first = extractFirstImage(body);
+			if (first) urls.add(first);
+		}
+	}
+	const galleryDir = path.join(publicDir, "gallery");
+	if (fs.existsSync(galleryDir)) {
+		for (const entry of fs.readdirSync(galleryDir, { withFileTypes: true })) {
+			if (!entry.isDirectory()) continue;
+			const urlsFile = path.join(galleryDir, entry.name, "urls.txt");
+			if (!fs.existsSync(urlsFile)) continue;
+			for (const line of fs.readFileSync(urlsFile, "utf-8").split("\n")) {
+				const u = line.trim();
+				if (u && !u.startsWith("#") && /^https?:\/\//.test(u)) urls.add(u);
+			}
+		}
+	}
+	return [...urls];
+}
+
+/** fetch 外链图 → sharp 采样（超时/非 2xx 抛错由调用方跳过） */
+async function fetchSample(url) {
+	const res = await fetch(url, {
+		signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+		headers: { "user-agent": "orchid-theme-lqip/1.0" },
+	});
+	if (!res.ok) throw new Error(`HTTP ${res.status}`);
+	return sampleColors(Buffer.from(await res.arrayBuffer()));
+}
+
+/** 固定并发的小任务池（保持顺序写 out） */
+async function mapPool(items, limit, fn) {
+	const out = new Array(items.length);
+	let i = 0;
+	async function worker() {
+		while (i < items.length) {
+			const idx = i++;
+			try {
+				out[idx] = await fn(items[idx]);
+			} catch (err) {
+				console.warn(
+					`[lqip] 外链抓取失败，跳过: ${items[idx]} — ${err.message}`,
+				);
+			}
+		}
+	}
+	await Promise.all(
+		Array.from({ length: Math.min(limit, items.length) }, () => worker()),
+	);
+	return out;
+}
+
 try {
+	// public 图片：LQIP + 缩略图（照旧重算，public 内容变了要跟上）
 	const files = collectImages(publicDir);
-	const entries = await Promise.all(
-		files.map(async (rel) => [
+	const lqipEntries = [];
+	const thumbEntries = [];
+	for (const rel of files) {
+		lqipEntries.push([
 			`public:${rel}`,
 			await sampleColors(path.join(publicDir, rel)),
-		]),
+		]);
+		thumbEntries.push([`public:${rel}`, await makeThumb(rel)]);
+	}
+
+	// 外链：lqips.json 已有 url: 键即缓存，只抓缺失项
+	let cached = {};
+	if (!REFRESH) {
+		try {
+			cached = Object.fromEntries(
+				Object.entries(JSON.parse(fs.readFileSync(lqipFile, "utf8"))).filter(
+					([k, v]) => k.startsWith("url:") && /^[0-9a-f]{18}$/i.test(v),
+				),
+			);
+		} catch {
+			cached = {};
+		}
+	}
+	const remoteUrls = collectRemoteUrls();
+	const pending = remoteUrls.filter((u) => !(`url:${u}` in cached));
+	console.log(
+		`[lqip] 外链 ${remoteUrls.length} 条（缓存命中 ${remoteUrls.length - pending.length}，待抓 ${pending.length}）`,
 	);
+	const fetched = await mapPool(pending, FETCH_CONCURRENCY, async (url) => [
+		url,
+		await fetchSample(url),
+	]);
+	// 缓存命中的 url: 键原样合并（否则第二次运行会把它从产物中丢掉）
+	for (const [k, v] of Object.entries(cached)) lqipEntries.push([k, v]);
+	for (const pair of fetched) {
+		if (pair) lqipEntries.push([`url:${pair[0]}`, pair[1]]);
+	}
+
 	fs.writeFileSync(
-		outFile,
-		JSON.stringify(Object.fromEntries(entries), null, 2) + "\n",
+		lqipFile,
+		// tab 缩进与 Biome format 一致：生成物入库即合规，重跑不会反复触发 CI format 报错
+		JSON.stringify(Object.fromEntries(lqipEntries), null, "\t") + "\n",
+	);
+	fs.writeFileSync(
+		thumbsFile,
+		JSON.stringify(Object.fromEntries(thumbEntries), null, "\t") + "\n",
+	);
+	console.log(
+		`[lqip] public ${files.length} 张 + 外链 ${remoteUrls.length - pending.length + fetched.filter(Boolean).length} 条 → ${path.relative(cwd, lqipFile)} + ${path.relative(cwd, thumbsFile)}`,
 	);
-	console.log(`[lqip] ${files.length} 张图片 → ${path.relative(cwd, outFile)}`);
 } catch (err) {
 	console.error("[lqip] 生成失败：", err);
 	process.exit(1);

package/src/components/AlbumCard.astro

@@ -5,6 +5,7 @@ import { t } from "../i18n/index.js";
  * data-tags（标签数组）与 data-search（名称/描述/地点/标签全文小写）供 gallery-filter 筛选。
  */
 import { getLqipStyle } from "../utils/lqip.js";
+import { getThumbInfo } from "../utils/thumb.js";
 
 interface Props {
 	id: string;
@@ -33,6 +34,8 @@ const {
 const searchText = [name, description, location, ...tags]
 	.join(" ")
 	.toLowerCase();
+/* §4.106：相册封面用缩略图（点击进详情页看原图，卡片本身无灯箱） */
+const thumb = getThumbInfo(cover);
 ---
 
 <a class="album-card card" href={`/gallery/${id}/`} data-tags={tags.join(',')} data-search={searchText} aria-label={encrypted ? `${name}（${t('encryptedAlbum')}）` : name}>
@@ -41,7 +44,7 @@ const searchText = [name, description, location, ...tags]
       <>
         {/* LQIP 占位渐变（b9.5）：外链封面查不到数据时降级纯色 */}
         <div class="qy-lqip" style={getLqipStyle(cover)} aria-hidden="true"></div>
-        <img src={cover} alt={name} loading="lazy" decoding="async" data-lqip />
+        <img src={thumb.src} alt={name} loading="lazy" decoding="async" data-lqip />
       </>
     ) : (
       <span class="album-cover-fallback">