hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix icon generation

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-06-06 17:21:49 -04:00
parent 8e66107112
commit c557c0e24c
8 changed files with 50 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@ -56,6 +56,7 @@ integration: build
build: node_modules binaries/client build: node_modules binaries/client
yarn run npm:fix-build-version yarn run npm:fix-build-version
$(MAKE) build-extensions -B $(MAKE) build-extensions -B
yarn run build:tray-icons
yarn run compile yarn run compile
ifeq "$(DETECTED_OS)" "Windows" ifeq "$(DETECTED_OS)" "Windows"
# https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish # https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish

122
build/generate-tray-icons.ts
View File

@ -31,113 +31,70 @@ function getSvgStyling(colouring: "dark" | "light"): string {
`; `;
} }
async function getBaseIconTemplates() { async function getBaseIconImage() {
const svgData = await readFile(inputFile, { encoding: "utf-8" }); const svgData = await readFile(inputFile, { encoding: "utf-8" });
const dom = new JSDOM(`<body>${svgData}</body>`); const dom = new JSDOM(`<body>${svgData}</body>`);
const root = dom.window.document.body.getElementsByTagName("svg")[0]; const root = dom.window.document.body.getElementsByTagName("svg")[0];
root.innerHTML += getSvgStyling("light"); root.innerHTML += getSvgStyling("light");
return root.outerHTML; return Buffer.from(root.outerHTML);
} }
async function generateNormalImages(template: string, size: number, name: string) { async function generateImage(image: Buffer, size: number, namePrefix: string) {
await Promise.all([ sharp(image)
sharp(Buffer.from(template))
.resize({ width: size, height: size }) .resize({ width: size, height: size })
.png() .toFile(path.join(outputFolder, `${namePrefix}.png`));
.toFile(path.join(outputFolder, `${name}.png`)), }
sharp(Buffer.from(template))
.resize({ width: size*2, height: size*2 }) async function generateImages(image: Buffer, size: number, name: string) {
.png() await Promise.all([
.toFile(path.join(outputFolder, `${name}@2x.png`)), generateImage(image, size, name),
generateImage(image, size*2, `${name}@2x`),
generateImage(image, size*3, `${name}@3x`),
generateImage(image, size*4, `${name}@4x`),
]); ]);
} }
async function generateUpdateAvailableImages(template: string, size: number, name: string, noticeSvg: string) { async function generateUpdateAvailableImages(baseImage: Buffer) {
const circleSvg = new JSDOM(` const noticeIconImage = await getNoticeIconImage();
<body> const circleBuffer = await sharp(Buffer.from(`
<svg viewBox="0 0 32 32"> <svg viewBox="0 0 64 64">
<circle cx="20" cy="20" r="6" /> <circle cx="32" cy="32" r="32" fill="black" />
</svg> </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(); .toBuffer();
await sharp(circleBuffer) return sharp(baseImage)
.toFile(path.join(outputFolder, "circle.png")); .resize({ width: 128, height: 128 })
await Promise.all([
sharp(Buffer.from(template))
.resize({ width: size, height: size })
.composite([ .composite([
{ {
input: circleBuffer, input: circleBuffer,
gravity: "southeast", top: 64,
/** left: 64,
* The `clear` blend rule is buggy and currently doesn't work blend: "dest-out",
*
* https://github.com/lovell/sharp/issues/3247
*/
blend: "clear",
}, },
{ {
input: ( input: (
await sharp(Buffer.from(noticeSvg)) await sharp(noticeIconImage)
.resize({ .resize({
width: Math.floor(size/1.5), width: 60,
height: Math.floor(size/1.5), height: 60,
}) })
.toBuffer() .toBuffer()
), ),
gravity: "southeast", top: 66,
left: 66,
}, },
]) ])
.png() .toBuffer();
.toFile(path.join(outputFolder, `${name}.png`)),
sharp(Buffer.from(template))
.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`)),
]);
} }
async function getNoticeSvg(): Promise<string> { async function getNoticeIconImage() {
const svgData = await readFile(noticeFile, { encoding: "utf-8" }); const svgData = await readFile(noticeFile, { encoding: "utf-8" });
const noticeSvgRoot = new JSDOM(svgData).window.document.getElementsByTagName("svg")[0]; const noticeSvgRoot = new JSDOM(svgData).window.document.getElementsByTagName("svg")[0];
return noticeSvgRoot.outerHTML; return Buffer.from(noticeSvgRoot.outerHTML);
} }
async function generateTrayIcons() { async function generateTrayIcons() {
@ -145,21 +102,14 @@ async function generateTrayIcons() {
console.log("Generating tray icon pngs"); console.log("Generating tray icon pngs");
await ensureOutputFoler(); await ensureOutputFoler();
const baseTemplate = await getBaseIconTemplates(); const baseIconImage = await getBaseIconImage();
const noticeTemplate = await getNoticeSvg(); const updateAvailableImage = await generateUpdateAvailableImages(baseIconImage);
void noticeTemplate;
void generateUpdateAvailableImages;
await Promise.all([ await Promise.all([
generateNormalImages(baseTemplate, size, "trayIconTemplate"), generateImages(baseIconImage, size, "trayIconTemplate"),
// generateUpdateAvailableImages(baseTemplate, size, "trayIconDarkUpdateAvailableTemplate", noticeTemplate), generateImages(updateAvailableImage, size, "trayIconUpdateAvailableTemplate"),
]); ]);
console.warn("Did not update:", [
"trayIconUpdateAvailableTemplate.png",
"trayIconUpdateAvailableTemplate@2x.png",
]);
console.log("Generated all images"); console.log("Generated all images");
} catch (error) { } catch (error) {
console.error(error); console.error(error);

BIN
build/tray/trayIconTemplate@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
build/tray/trayIconTemplate@4x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
build/tray/trayIconUpdateAvailableTemplate.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 466 B

BIN
build/tray/trayIconUpdateAvailableTemplate@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
build/tray/trayIconUpdateAvailableTemplate@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
build/tray/trayIconUpdateAvailableTemplate@4x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB