@xingwangzhe/stalux 1.4.2 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/index.ts +18 -2
- package/src/internal/font-subset-dev.ts +143 -129
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xingwangzhe/stalux",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.4",
|
|
4
4
|
"description": "A powerful, modern Astro blog theme \u2014 use as template or install as plugin",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"astro",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"@expressive-code/plugin-line-numbers": "^0.44.1",
|
|
79
79
|
"@lucide/astro": "^1.27.0",
|
|
80
80
|
"@pagefind/component-ui": "^1.5.2",
|
|
81
|
-
"@waline/client": "3.15.2",
|
|
81
|
+
"@waline/client": "^3.15.2",
|
|
82
82
|
"@xingwangzhe/satteri-mermaid": "0.7.1",
|
|
83
83
|
"@xingwangzhe/satteri-photoswipe": "^0.2.0",
|
|
84
84
|
"@xingwangzhe/tags-cloud": "^1.2.4",
|
package/src/index.ts
CHANGED
|
@@ -9,7 +9,9 @@
|
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
import path from "node:path";
|
|
12
|
+
import { resolve } from "node:path";
|
|
12
13
|
import { fileURLToPath } from "node:url";
|
|
14
|
+
import { existsSync, readdirSync } from "node:fs";
|
|
13
15
|
|
|
14
16
|
import type { AstroIntegration } from "astro";
|
|
15
17
|
// pagefind 是 ESM-only 包,需要在模块顶层导入
|
|
@@ -212,13 +214,27 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration {
|
|
|
212
214
|
// 7. 字体裁剪(开发模式,生成 common 子集 + 按需路由切片)
|
|
213
215
|
try {
|
|
214
216
|
const projectRoot = process.cwd();
|
|
217
|
+
// 清除旧的字体缓存
|
|
218
|
+
const oldFontDir = resolve(projectRoot, "public/fonts");
|
|
219
|
+
if (existsSync(oldFontDir)) {
|
|
220
|
+
// 删除旧的 subset-*.css 和 common-*.woff2,让按需中间件重新生成
|
|
221
|
+
for (const f of readdirSync(oldFontDir)) {
|
|
222
|
+
if (f.startsWith("subset-") || f.startsWith("common-")) continue;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
215
225
|
// 先生成 common 子集
|
|
216
226
|
await runFontSubsetting(projectRoot, logger, true);
|
|
217
|
-
//
|
|
227
|
+
// 再添加按需路由切片中间件(放在最前面,优先拦截字体请求)
|
|
218
228
|
const { createDevFontMiddleware } = await import(
|
|
219
229
|
new URL("./internal/font-subset-dev.ts", import.meta.url).href
|
|
220
230
|
);
|
|
221
|
-
|
|
231
|
+
const fontMiddleware = createDevFontMiddleware(projectRoot, logger);
|
|
232
|
+
server.middlewares.use((req: any, res: any, next: any) => {
|
|
233
|
+
if (req.url?.startsWith("/fonts/")) {
|
|
234
|
+
return fontMiddleware(req, res, next);
|
|
235
|
+
}
|
|
236
|
+
next();
|
|
237
|
+
});
|
|
222
238
|
} catch (error) {
|
|
223
239
|
logger.debug(`Font subsetting deferred in dev: ${String(error)}`);
|
|
224
240
|
}
|
|
@@ -4,12 +4,13 @@
|
|
|
4
4
|
* Intercepts /fonts/subset-*.css requests, generates the WOFF2 subset
|
|
5
5
|
* for the requested route on-the-fly, and serves it.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
7
|
+
* Handles ALL HTML routes: posts, about, words, home, archives, tags, etc.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
|
|
11
11
|
import { resolve, join, dirname } from "node:path";
|
|
12
12
|
import { fileURLToPath } from "node:url";
|
|
13
|
+
|
|
13
14
|
import type { AstroIntegrationLogger } from "astro";
|
|
14
15
|
import subsetFontFn from "subset-font";
|
|
15
16
|
|
|
@@ -17,43 +18,67 @@ const FONT_INPUT = "src/assets/fonts/LXGWWenKai-Regular.ttf";
|
|
|
17
18
|
const CONTENT_ROOT = "stalux";
|
|
18
19
|
const FONT_OUT_DIR = "public/fonts";
|
|
19
20
|
|
|
20
|
-
/**
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Get characters for a given route subset.
|
|
23
|
+
* Returns null if route is unknown.
|
|
24
|
+
*/
|
|
25
|
+
function getRouteChars(projectRoot: string, subsetId: string): string | null {
|
|
26
|
+
const contentRoot = resolve(projectRoot, CONTENT_ROOT);
|
|
27
|
+
|
|
28
|
+
// ── Posts ──────────────────────────────────────────────
|
|
29
|
+
if (subsetId.startsWith("posts-")) {
|
|
30
|
+
const abbrlink = subsetId.slice(6);
|
|
31
|
+
const postsDir = join(contentRoot, "posts");
|
|
32
|
+
if (!existsSync(postsDir)) return null;
|
|
33
|
+
for (const f of readdirSync(postsDir)) {
|
|
34
|
+
if ((f.endsWith(".md") || f.endsWith(".mdx")) && !f.startsWith("_")) {
|
|
35
|
+
const content = readFileSync(join(postsDir, f), "utf-8");
|
|
36
|
+
if (content.includes(`abbrlink: ${abbrlink}`)) return content;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return null;
|
|
28
40
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
if (
|
|
45
|
-
|
|
41
|
+
|
|
42
|
+
// ── About ──────────────────────────────────────────────
|
|
43
|
+
if (subsetId === "about") {
|
|
44
|
+
const aboutDir = join(contentRoot, "about");
|
|
45
|
+
if (!existsSync(aboutDir)) return null;
|
|
46
|
+
for (const f of readdirSync(aboutDir)) {
|
|
47
|
+
if (f.endsWith(".md") || f.endsWith(".mdx"))
|
|
48
|
+
return readFileSync(join(aboutDir, f), "utf-8");
|
|
49
|
+
}
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// ── Words ──────────────────────────────────────────────
|
|
54
|
+
if (subsetId === "words") {
|
|
55
|
+
const wordsDir = join(contentRoot, "words");
|
|
56
|
+
if (!existsSync(wordsDir)) return null;
|
|
57
|
+
const all: string[] = [];
|
|
58
|
+
for (const f of readdirSync(wordsDir)) {
|
|
59
|
+
if (f.endsWith(".md") && !f.startsWith("_")) {
|
|
60
|
+
all.push(readFileSync(join(wordsDir, f), "utf-8"));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return all.join("\n") || null;
|
|
46
64
|
}
|
|
47
|
-
return null;
|
|
48
|
-
}
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
65
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
66
|
+
// ── Other HTML routes (home, archives, tags, categories, links, 404) ──
|
|
67
|
+
// These pages use i18n text + config YAML text, which are already
|
|
68
|
+
// covered by the common subset. Return config text for extra safety.
|
|
69
|
+
if (["home", "archives", "tags", "categories", "links", "common"].includes(subsetId)) {
|
|
70
|
+
const configDir = join(contentRoot, "config");
|
|
71
|
+
if (!existsSync(configDir)) return null;
|
|
72
|
+
const all: string[] = [];
|
|
73
|
+
for (const f of readdirSync(configDir)) {
|
|
74
|
+
if (f.endsWith(".yml") || f.endsWith(".yaml")) {
|
|
75
|
+
all.push(readFileSync(join(configDir, f), "utf-8"));
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return all.join("\n") || null;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return null;
|
|
57
82
|
}
|
|
58
83
|
|
|
59
84
|
/**
|
|
@@ -61,73 +86,63 @@ function extractChars(text: string): string {
|
|
|
61
86
|
* Returns the CSS content to be served.
|
|
62
87
|
*/
|
|
63
88
|
async function generateSubsetOnDemand(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
89
|
+
projectRoot: string,
|
|
90
|
+
subsetId: string,
|
|
91
|
+
logger: AstroIntegrationLogger,
|
|
67
92
|
): Promise<string | null> {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
93
|
+
const chars = getRouteChars(projectRoot, subsetId);
|
|
94
|
+
if (!chars) return null;
|
|
95
|
+
|
|
96
|
+
// Extract unique characters
|
|
97
|
+
const charSet = new Set<string>();
|
|
98
|
+
for (const ch of chars) charSet.add(ch);
|
|
99
|
+
if (charSet.size === 0) return null;
|
|
100
|
+
|
|
101
|
+
// Deduplicate against common subset: read common.css to find its referenced WOFF2
|
|
102
|
+
const outDir = resolve(projectRoot, FONT_OUT_DIR);
|
|
103
|
+
const commonCssPath = join(outDir, "common.css");
|
|
104
|
+
const commonCharSet = new Set<string>();
|
|
105
|
+
|
|
106
|
+
// We can't precisely know which chars common covers without re-extracting.
|
|
107
|
+
// But we can read the i18n + config source for a rough estimate.
|
|
108
|
+
// For now, generate the full subset - the WOFF2 will be small either way.
|
|
109
|
+
// (Most chars are already in common, so the delta is tiny.)
|
|
110
|
+
|
|
111
|
+
// Locate font file
|
|
112
|
+
const fontPaths = [
|
|
113
|
+
resolve(projectRoot, FONT_INPUT),
|
|
114
|
+
resolve(projectRoot, "node_modules", "@xingwangzhe", "stalux", FONT_INPUT),
|
|
115
|
+
resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", FONT_INPUT),
|
|
116
|
+
];
|
|
117
|
+
let fontPath: string | undefined;
|
|
118
|
+
for (const p of fontPaths) {
|
|
119
|
+
if (existsSync(p)) {
|
|
120
|
+
fontPath = p;
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
if (!fontPath) return null;
|
|
125
|
+
|
|
126
|
+
const fontBuffer = readFileSync(fontPath);
|
|
127
|
+
mkdirSync(outDir, { recursive: true });
|
|
128
|
+
|
|
129
|
+
// Generate subset WOFF2
|
|
130
|
+
const charsStr = [...charSet].sort().join("");
|
|
131
|
+
const hash = [...charsStr].slice(0, 12).join("");
|
|
132
|
+
const filename = `subset-${subsetId}-${hash}.woff2`;
|
|
133
|
+
const outPath = join(outDir, filename);
|
|
134
|
+
|
|
135
|
+
if (!existsSync(outPath)) {
|
|
136
|
+
try {
|
|
137
|
+
const data = await subsetFontFn(fontBuffer, charsStr, { targetFormat: "woff2" });
|
|
138
|
+
writeFileSync(outPath, data);
|
|
139
|
+
logger.info(` on-demand subset: ${(data.length / 1024).toFixed(1)} KB → ${filename}`);
|
|
140
|
+
} catch {
|
|
141
|
+
return null;
|
|
142
|
+
}
|
|
81
143
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
content = readFileSync(contentPath, "utf-8");
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
const chars = extractChars(content);
|
|
88
|
-
|
|
89
|
-
// 3. Load common subset chars to find unique ones
|
|
90
|
-
const outDir = resolve(projectRoot, FONT_OUT_DIR);
|
|
91
|
-
const commonCSS = join(outDir, "common.css");
|
|
92
|
-
let commonCharsCached: string[] = [];
|
|
93
|
-
|
|
94
|
-
// Look for existing common subset to extract its covered chars
|
|
95
|
-
// We re-read the common subset data from the generated file list
|
|
96
|
-
const commonFile = existsSync(join(outDir, "common.css"))
|
|
97
|
-
? readFileSync(join(outDir, "common.css"), "utf-8")
|
|
98
|
-
: "";
|
|
99
|
-
// We can't know exactly what chars the common subset covers without reading
|
|
100
|
-
// the original source. But we can just generate the full subset.
|
|
101
|
-
// To minimize size, we note that common subset already covers most.
|
|
102
|
-
|
|
103
|
-
// 4. Locate font file
|
|
104
|
-
const fontPaths = [
|
|
105
|
-
resolve(projectRoot, FONT_INPUT),
|
|
106
|
-
resolve(projectRoot, "node_modules", "@xingwangzhe", "stalux", FONT_INPUT),
|
|
107
|
-
resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", FONT_INPUT),
|
|
108
|
-
];
|
|
109
|
-
let fontPath: string | undefined;
|
|
110
|
-
for (const p of fontPaths) {
|
|
111
|
-
if (existsSync(p)) { fontPath = p; break; }
|
|
112
|
-
}
|
|
113
|
-
if (!fontPath) return null;
|
|
114
|
-
|
|
115
|
-
const fontBuffer = readFileSync(fontPath);
|
|
116
|
-
mkdirSync(outDir, { recursive: true });
|
|
117
|
-
|
|
118
|
-
// 5. Generate subset WOFF2
|
|
119
|
-
const hash = [...chars].slice(0, 12).join("");
|
|
120
|
-
const filename = `subset-${subsetId}-${hash}.woff2`;
|
|
121
|
-
const outPath = join(outDir, filename);
|
|
122
|
-
|
|
123
|
-
if (!existsSync(outPath)) {
|
|
124
|
-
const data = await subsetFontFn(fontBuffer, chars, { targetFormat: "woff2" });
|
|
125
|
-
writeFileSync(outPath, data);
|
|
126
|
-
logger.info(` on-demand subset: ${(data.length / 1024).toFixed(1)} KB → ${filename}`);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
// 6. Return CSS content
|
|
130
|
-
return `@font-face {
|
|
144
|
+
|
|
145
|
+
return `@font-face {
|
|
131
146
|
font-family: "LXGW WenKai Subset";
|
|
132
147
|
src: url("/fonts/${filename}") format("woff2");
|
|
133
148
|
font-display: swap;
|
|
@@ -138,33 +153,32 @@ async function generateSubsetOnDemand(
|
|
|
138
153
|
* Create Vite middleware for on-demand font subsetting in dev mode.
|
|
139
154
|
*/
|
|
140
155
|
export function createDevFontMiddleware(projectRoot: string, logger: AstroIntegrationLogger) {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
}
|
|
169
|
-
};
|
|
156
|
+
return async (req: any, res: any, next: any) => {
|
|
157
|
+
const url = req.url || "";
|
|
158
|
+
const match = url.match(/^\/fonts\/subset-(.+)\.css$/);
|
|
159
|
+
if (!match) return next();
|
|
160
|
+
|
|
161
|
+
const subsetId = match[1];
|
|
162
|
+
|
|
163
|
+
// Check if file already exists (cached from previous on-demand generation)
|
|
164
|
+
const cssPath = resolve(projectRoot, FONT_OUT_DIR, `subset-${subsetId}.css`);
|
|
165
|
+
if (existsSync(cssPath)) {
|
|
166
|
+
res.statusCode = 200;
|
|
167
|
+
res.setHeader("Content-Type", "text/css");
|
|
168
|
+
res.end(readFileSync(cssPath, "utf-8"));
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// Generate on-demand
|
|
173
|
+
logger.info(`Font subset: on-demand generating for "${subsetId}"...`);
|
|
174
|
+
const css = await generateSubsetOnDemand(projectRoot, subsetId, logger);
|
|
175
|
+
if (css) {
|
|
176
|
+
writeFileSync(cssPath, css); // cache it
|
|
177
|
+
res.statusCode = 200;
|
|
178
|
+
res.setHeader("Content-Type", "text/css");
|
|
179
|
+
res.end(css);
|
|
180
|
+
} else {
|
|
181
|
+
next();
|
|
182
|
+
}
|
|
183
|
+
};
|
|
170
184
|
}
|