Lighten embedded wallpapers for 0.1.23 (#1)

Co-authored-by: JiongN <JiongN@users.noreply.github.com>

README.md

@@ -1,12 +1,12 @@
 # Haze Note
 
-Haze Note is a macOS-first Obsidian theme with a soft neutral glass frame, local 4K wallpapers, a focused reading surface, and Chinese Style Settings labels.
+Haze Note is a macOS-first Obsidian theme with a soft neutral glass frame, four embedded 4K wallpapers, a focused reading surface, and Chinese Style Settings labels.
 
 ![Haze Note preview](screenshots/screenshot.png)
 
 ## Highlights
 
-- Six original 4K wallpapers embedded directly in `theme.css`.
+- Four original 4K WebP wallpapers embedded directly in `theme.css`: desert sunset, blue-violet dusk, warm paper, and graphite.
 - Neutral light and graphite dark modes, with one adjustable glass-opacity control.
 - A continuous top frame, rounded bottom utility areas, and readable status/backlink text at low opacity.
 - SF Mono / Menlo typography with `LXGW WenKai Mono` as the Chinese fallback.
@@ -20,13 +20,13 @@ Haze Note is a macOS-first Obsidian theme with a soft neutral glass frame, local
 
 ## Development
 
-The distributable `theme.css` embeds the six wallpapers. To rebuild it after changing `src/theme.template.css` or an image:
+The distributable `theme.css` embeds four optimized WebP wallpapers and enforces a 700 KB size ceiling. Install `cwebp`, then rebuild after changing `src/theme.template.css` or an image:
 
 ```bash
 node scripts/build-theme.mjs
 ```
 
-The source wallpapers are in `assets/wallpapers/`.
+The original 4K source wallpapers are in `assets/wallpapers/`. Haze Note also works without any companion plugin; the optional local Haze Note Folders plugin can override the selected preset with an image stored inside a vault.
 
 ## Scope
 

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Haze Note",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "minAppVersion": "1.9.0",
   "author": "jn"
 }

scripts/build-theme.mjs

@@ -1,17 +1,19 @@
-import { readFile, writeFile } from "node:fs/promises";
+import { execFile } from "node:child_process";
+import { readFile, rm, writeFile } from "node:fs/promises";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
+import { promisify } from "node:util";
 
 const scriptDirectory = dirname(fileURLToPath(import.meta.url));
 const themeDirectory = join(scriptDirectory, "..");
 const templatePath = join(themeDirectory, "src", "theme.template.css");
 const outputPath = join(themeDirectory, "theme.css");
+const execFileAsync = promisify(execFile);
+const maximumThemeSize = 700 * 1024;
 
 const wallpapers = [
   ["__HAZE_WALLPAPER_DESERT__", "03_沙漠黄昏_4K.jpg"],
-  ["__HAZE_WALLPAPER_PURPLE__", "01_紫色极光_4K.jpg"],
   ["__HAZE_WALLPAPER_BLUE__", "02_蓝紫暮色_4K.jpg"],
-  ["__HAZE_WALLPAPER_LAVENDER__", "04_薰衣草薄雾_4K.jpg"],
   ["__HAZE_WALLPAPER_PAPER__", "05_暖纸中性色_4K.jpg"],
   ["__HAZE_WALLPAPER_GRAPHITE__", "06_石墨灰_4K.jpg"]
 ];
@@ -23,11 +25,28 @@ for (const [token, filename] of wallpapers) {
     throw new Error(`Theme template is missing ${token}.`);
   }
 
-  const wallpaper = await readFile(join(themeDirectory, "assets", "wallpapers", filename));
-  const dataUri = `data:image/jpeg;base64,${wallpaper.toString("base64")}`;
-  output = output.replaceAll(token, dataUri);
+  const sourcePath = join(themeDirectory, "assets", "wallpapers", filename);
+  const webpPath = join(themeDirectory, "assets", "wallpapers", `.${filename}.q60.webp`);
+
+  try {
+    await execFileAsync("cwebp", ["-quiet", "-q", "60", sourcePath, "-o", webpPath]);
+    const wallpaper = await readFile(webpPath);
+    const dataUri = `data:image/webp;base64,${wallpaper.toString("base64")}`;
+    output = output.replaceAll(token, dataUri);
+  } finally {
+    await rm(webpPath, { force: true });
+  }
+}
+
+if (output.includes("__HAZE_WALLPAPER_")) {
+  throw new Error("Theme template contains an unprocessed wallpaper token.");
+}
+
+const outputSize = Buffer.byteLength(output, "utf8");
+if (outputSize > maximumThemeSize) {
+  throw new Error(`Theme CSS is ${outputSize} bytes; limit is ${maximumThemeSize} bytes.`);
 }
 
 await writeFile(outputPath, output, "utf8");
 
-console.log(`Built ${outputPath} with ${wallpapers.length} embedded wallpapers.`);
+console.log(`Built ${outputPath} with four embedded 4K WebP wallpapers (${outputSize} bytes).`);

src/theme.template.css

@@ -1,5 +1,5 @@
 /*
-Haze Note 0.1.22
+Haze Note 0.1.23
 Personal macOS-first Obsidian theme by jn.
 No remote assets. No sound effects.
 */
@@ -17,7 +17,7 @@ settings:
   -
     id: haze-wallpaper
     title: 内置壁纸
-    description: 六张壁纸均嵌入主题文件，不依赖网络、插件或 macOS 桌面透明。
+    description: 四张原创 4K 壁纸以 WebP 嵌入主题，不依赖网络。如需自定义图片，可在可选的 Haze Note 文件夹插件中选择库内图片。
     type: class-select
     allowEmpty: false
     default: haze-wallpaper-desert
@@ -25,15 +25,9 @@ settings:
       -
         label: 沙漠黄昏
         value: haze-wallpaper-desert
-      -
-        label: 紫色极光
-        value: haze-wallpaper-purple
       -
         label: 蓝紫暮色
         value: haze-wallpaper-blue
-      -
-        label: 薰衣草薄雾
-        value: haze-wallpaper-lavender
       -
         label: 暖纸中性色
         value: haze-wallpaper-paper
@@ -159,10 +153,11 @@ settings:
   --haze-blue: #4296d8;
   --haze-purple: #a675d1;
   --haze-pink: #d77ba4;
+  /* The optional Haze Note Folders plugin can override this variable with
+     any supported image in the vault. Removing the override restores the
+     current Style Settings selection. */
   --haze-wallpaper-desert-image: url("__HAZE_WALLPAPER_DESERT__");
-  --haze-wallpaper-purple-image: url("__HAZE_WALLPAPER_PURPLE__");
   --haze-wallpaper-blue-image: url("__HAZE_WALLPAPER_BLUE__");
-  --haze-wallpaper-lavender-image: url("__HAZE_WALLPAPER_LAVENDER__");
   --haze-wallpaper-paper-image: url("__HAZE_WALLPAPER_PAPER__");
   --haze-wallpaper-graphite-image: url("__HAZE_WALLPAPER_GRAPHITE__");
   --haze-wallpaper-image: var(--haze-wallpaper-desert-image);
@@ -172,18 +167,10 @@ body.haze-wallpaper-desert {
   --haze-wallpaper-image: var(--haze-wallpaper-desert-image);
 }
 
-body.haze-wallpaper-purple {
-  --haze-wallpaper-image: var(--haze-wallpaper-purple-image);
-}
-
 body.haze-wallpaper-blue {
   --haze-wallpaper-image: var(--haze-wallpaper-blue-image);
 }
 
-body.haze-wallpaper-lavender {
-  --haze-wallpaper-image: var(--haze-wallpaper-lavender-image);
-}
-
 body.haze-wallpaper-paper {
   --haze-wallpaper-image: var(--haze-wallpaper-paper-image);
 }