feat: adds optional background colors to icon generation (#2470)

ApollosProject · Apr 7, 2022 · 420170f · 420170f
1 parent 4ce9708
commit 420170f
Showing 1 changed file with 41 additions and 17 deletions.
diff --git a/packages/apollos-cli/commands/logo.js b/packages/apollos-cli/commands/logo.js
@@ -4,6 +4,8 @@ import tmp from 'tmp';
 import canvas from 'canvas';
 import prompts from 'prompts';
 import { execa } from 'execa';
+import consola from 'consola';
+import ora from 'ora';
 
 const { createCanvas, loadImage } = canvas;
 
@@ -22,31 +24,31 @@ const createSplash = async (logoPath) => {
   return tmpobj.name;
 };
 
-const createIOSIcon = async (logoPath) => {
-  const splash = createCanvas(1024, 1024);
-  const ctx = splash.getContext('2d');
+const createIOSIcon = async (logoPath, bgColor) => {
+  const icon = createCanvas(1024, 1024);
+  const ctx = icon.getContext('2d');
 
-  ctx.fillStyle = '#fff';
-  ctx.fillRect = (0, 0, 1024, 1024);
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, 1024, 1024);
 
   const image = await loadImage(logoPath);
   ctx.drawImage(image, 62, 62, 900, 900);
-  const buffer = splash.toBuffer('image/png');
+  const buffer = icon.toBuffer('image/png');
   const tmpobj = tmp.fileSync();
   fs.writeFileSync(tmpobj.name, buffer);
   return tmpobj.name;
 };
 
-const createAndroidIcon = async (logoPath) => {
-  const splash = createCanvas(1024, 1024);
-  const ctx = splash.getContext('2d');
+const createAndroidIcon = async (logoPath, bgColor) => {
+  const icon = createCanvas(1024, 1024);
+  const ctx = icon.getContext('2d');
 
-  ctx.fillStyle = '#fff';
-  ctx.fillRect = (0, 0, 1024, 1024);
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, 1024, 1024);
 
   const image = await loadImage(logoPath);
   ctx.drawImage(image, 262, 262, 500, 500);
-  const buffer = splash.toBuffer('image/png');
+  const buffer = icon.toBuffer('image/png');
   const tmpobj = tmp.fileSync();
   fs.writeFileSync(tmpobj.name, buffer);
   return tmpobj.name;
@@ -61,28 +63,49 @@ export default () => {
       validate: (value) =>
         fs.existsSync(path.normalize(value)) || "File doesn't exist!",
     },
+    {
+      type: 'text',
+      name: 'iconBGColor',
+      message: 'Icon background color?',
+      initial: '#FFFFFF',
+      validate: (value) =>
+        value.match(/#[a-fA-F0-9]{6}/) || 'Must be a hex color!',
+    },
+    {
+      type: 'text',
+      name: 'splashBGColor',
+      message: 'Splash screen background color?',
+      initial: '#FFFFFF',
+      validate: (value) =>
+        value.match(/#[a-fA-F0-9]{6}/) || 'Must be a hex color!',
+    },
   ];
 
   (async () => {
     const response = await prompts(questions);
-    if (Object.keys(response).length === 1) {
+    if (Object.keys(response).length === questions.length) {
       const safePath = path.normalize(response.logoPath);
       const splash = await createSplash(safePath);
-      const ios = await createIOSIcon(safePath);
-      const android = await createAndroidIcon(safePath);
+      const ios = await createIOSIcon(safePath, response.iconBGColor);
+      const android = await createAndroidIcon(safePath, response.iconBGColor);
+      const spinner = ora(`Generating splash screen...`).start();
       try {
         await execa('node_modules/.bin/react-native', [
           'set-splash',
           '--path',
           splash,
+          '--background',
+          response.splashBGColor,
         ]);
+        spinner.text = 'Generating iOS icon...';
         await execa('node_modules/.bin/react-native', [
           'set-icon',
           '--path',
           ios,
           '--platform',
           'ios',
         ]);
+        spinner.text = 'Generating Android icon...';
         await execa('node_modules/.bin/react-native', [
           'set-icon',
           '--path',
@@ -91,9 +114,10 @@ export default () => {
           'android',
         ]);
       } catch (e) {
-        console.log(e);
+        spinner.fail('Failed');
+        consola.error(e);
       }
+      spinner.succeed('Success!');
     }
   })();
-  createSplash();
 };