diff --git a/packages/apollos-cli/commands/logo.js b/packages/apollos-cli/commands/logo.js index 88d731aca..f38c8ffa4 100644 --- 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,21 +63,41 @@ 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', @@ -83,6 +105,7 @@ export default () => { '--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(); };