Manually create update ready icon

Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-06-06 12:54:47 -04:00 · 2022-06-06 12:54:47 -04:00 · 7c06f0d8fe
commit 7c06f0d8fe
parent 3d6e77d186
6 changed files with 74 additions and 29 deletions
--- a/1
+++ b/1
@ -56,7 +56,6 @@ integration: build
 build: node_modules binaries/client
 	yarn run npm:fix-build-version
 	$(MAKE) build-extensions -B
-	yarn run build:tray-icons
 	yarn run compile
 ifeq "$(DETECTED_OS)" "Windows"
 # https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish
--- a/build/generate-tray-icons.ts
+++ b/build/generate-tray-icons.ts
@ -64,36 +64,78 @@ async function generateNormalImages(template: string, size: number, name: string
 }

 async function generateUpdateAvailableImages(template: string, size: number, name: string, noticeSvg: string) {
+  const circleSvg = new JSDOM(`
+    <body>
+      <svg viewBox="0 0 32 32">
+        <circle cx="20" cy="20" r="6" />
+      </svg>
+      <style>
+        circle {
+          fill: "black" !important;
+        }
+      </style>
+    </body>
+  `).window.document.getElementsByTagName("svg")[0];
+
+  circleSvg.innerHTML += getSvgStyling("dark");
+
+  const circleBuffer = await sharp(Buffer.from(circleSvg.outerHTML))
+    .resize({
+      width: Math.floor(size/1.5),
+      height: Math.floor(size/1.5),
+    })
+    .toBuffer();
+
+  await sharp(circleBuffer)
+    .toFile(path.join(outputFolder, "circle.png"));
+
  await Promise.all([
    sharp(Buffer.from(template))
-      .composite([{
-        input: (
-          await sharp(Buffer.from(noticeSvg))
-            .resize({
-              width: Math.floor(size/1.5),
-              height: Math.floor(size/1.5),
-            })
-            .toBuffer()
-        ),
-        top: Math.floor(size/2.5),
-        left: Math.floor(size/2.5),
-      }])
      .resize({ width: size, height: size })
+      .composite([
+        {
+          input: circleBuffer,
+          gravity: "southeast",
+          /**
+           * The `clear` blend rule is buggy and currently doesn't work
+           *
+           * https://github.com/lovell/sharp/issues/3247
+           */
+          blend: "clear",
+        },
+        {
+          input: (
+            await sharp(Buffer.from(noticeSvg))
+              .resize({
+                width: Math.floor(size/1.5),
+                height: Math.floor(size/1.5),
+              })
+              .toBuffer()
+          ),
+          gravity: "southeast",
+        },
+      ])
      .png()
      .toFile(path.join(outputFolder, `${name}.png`)),
    sharp(Buffer.from(template))
-      .composite([{
-        input: (
-          await sharp(Buffer.from(noticeSvg))
-            .resize({
-              width: Math.floor((size * 2)/1.5),
-              height: Math.floor((size * 2)/1.5),
-            })
-            .toBuffer()
-        ),
-        top: Math.floor((size * 2)/2.5),
-        left: Math.floor((size * 2)/2.5),
-      }])
+      .composite([
+        {
+          input: circleBuffer,
+          gravity: "southeast",
+          blend: "clear",
+        },
+        {
+          input: (
+            await sharp(Buffer.from(noticeSvg))
+              .resize({
+                width: Math.floor((size * 2)/1.5),
+                height: Math.floor((size * 2)/1.5),
+              })
+              .toBuffer()
+          ),
+          gravity: "southeast",
+        },
+      ])
      .resize({ width: size*2, height: size*2 })
      .png()
      .toFile(path.join(outputFolder, `${name}@2x.png`)),
@ -104,8 +146,6 @@ async function getNoticeSvg(): Promise<string> {
  const svgData = await readFile(noticeFile, { encoding: "utf-8" });
  const noticeSvgRoot = new JSDOM(svgData).window.document.getElementsByTagName("svg")[0];

-  noticeSvgRoot.innerHTML += getSvgStyling("dark");
-
  return noticeSvgRoot.outerHTML;
 }

@ -117,13 +157,19 @@ async function generateTrayIcons() {
    const baseTemplates = await getBaseIconTemplates();
    const noticeTemplate = await getNoticeSvg();

+    void noticeTemplate;
+    void generateUpdateAvailableImages;
+
    await Promise.all([
      generateNormalImages(baseTemplates.light, size, "trayIconDarkTemplate"),
-      generateUpdateAvailableImages(baseTemplates.light, size, "trayIconDarkUpdateAvailableTemplate", noticeTemplate),
+      // generateUpdateAvailableImages(baseTemplates.light, size, "trayIconDarkUpdateAvailableTemplate", noticeTemplate),
      generateNormalImages(baseTemplates.dark, size, "trayIconTemplate"),
-      generateUpdateAvailableImages(baseTemplates.dark, size, "trayIconUpdateAvailableTemplate", noticeTemplate),
    ]);

+    console.warn("Did not update:", [
+      "trayIconDarkUpdateAvailableTemplate.png",
+      "trayIconDarkUpdateAvailableTemplate@2x.png",
+    ]);
    console.log("Generated all images");
  } catch (error) {
    console.error(error);
--- a/build/tray/trayIconDarkUpdateAvailableTemplate.png
+++ b/build/tray/trayIconDarkUpdateAvailableTemplate.png
--- a/build/tray/trayIconDarkUpdateAvailableTemplate@2x.png
+++ b/build/tray/trayIconDarkUpdateAvailableTemplate@2x.png
--- a/build/tray/trayIconUpdateAvailableTemplate.png
+++ b/build/tray/trayIconUpdateAvailableTemplate.png
--- a/build/tray/trayIconUpdateAvailableTemplate@2x.png
+++ b/build/tray/trayIconUpdateAvailableTemplate@2x.png