diff --git a/README.md b/README.md index 878c734b..cb1c1111 100644 --- a/README.md +++ b/README.md @@ -50,19 +50,23 @@ $ pwa-asset-generator --help The assets will be saved to the folder where the command is executed if no output-folder provided. Options - -b --background Page background to use when image source is provided [default: transparent] + -b --background Page background to use when image source is provided: css value [default: transparent] -o --opaque Making screenshots to be saved with a background color [default: true] - -p --padding Padding to use when image source provided [default: "10%"] + -p --padding Padding to use when image source provided: css value [default: "10%"] -s --scrape Scraping Apple Human Interface Guidelines to fetch splash screen specs [default: true] -m --manifest Web app manifest file path to automatically update manifest file with the generated images -i --index Index html file path to automatically put splash screen meta tags in -t --type Image type: png|jpeg [default: png] -q --quality Image quality: 0...100 (Only for JPEG) [default: 100] - + -h --splash-only Only generate splash screens [default: false] + -c --icon-only Only generate icons [default: false] + -l --landscape-only Only generate landscape splash screens [default: false] + -r --portrait-only Only generate portrait splash screens [default: false] + Examples $ pwa-asset-generator logo.html . - $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . - $ pwa-asset-generator logo.svg ./assets --scrape false + $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . -t jpeg -q 90 --splash-only --portrait-only + $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only $ pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "15%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)" Flag examples @@ -72,6 +76,12 @@ $ pwa-asset-generator --help --scrape=false --manifest=./src/manifest.json --index=./src/index.html + --type=jpeg + --quality=80 + --splash-only + --icon-only + --landscape-only + --portrait-only ``` ## Troubleshooting diff --git a/cli.js b/cli.js index 51145f0a..ad092fbc 100755 --- a/cli.js +++ b/cli.js @@ -23,12 +23,14 @@ const cli = meow( -q --quality Image quality: 0...100 (Only for JPEG) [default: 100] -h --splash-only Only generate splash screens [default: false] -c --icon-only Only generate icons [default: false] + -l --landscape-only Only generate landscape splash screens [default: false] + -r --portrait-only Only generate portrait splash screens [default: false] Examples $ pwa-asset-generator logo.html . - $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . -t jpeg -q 90 + $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . -t jpeg -q 90 --splash-only --portrait-only $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only - $ pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "10%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)" + $ pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "15%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)" Flag examples --background="rgba(255, 255, 255, .5)" @@ -39,8 +41,10 @@ const cli = meow( --index=./src/index.html --type=jpeg --quality=80 - --splash-only=true - --icon-only=true + --splash-only + --icon-only + --landscape-only + --portrait-only `, { flags: { @@ -92,27 +96,51 @@ const cli = meow( alias: 'c', default: false, }, + landscapeOnly: { + type: 'boolean', + alias: 'l', + default: false, + }, + portraitOnly: { + type: 'boolean', + alias: 'r', + default: false, + }, }, }, ); const source = cli.input[0]; let output = cli.input[1]; -const options = cli.flags; +let options = cli.flags; const logger = preLogger('cli'); +const normalizeOnlyFlagPairs = (flag1Key, flag2Key, opts) => { + const stripOnly = key => key.replace('Only', ''); + if (opts[flag1Key] && opts[flag2Key]) { + logger.warn( + `Hmm, you want to _only_ generate both ${stripOnly( + flag1Key, + )} and ${stripOnly( + flag2Key, + )} set. Ignoring --x-only settings as this is default behavior`, + ); + return { + ...opts, + [flag1Key]: false, + [flag2Key]: false, + }; + } + return opts; +}; + if (!source) { logger.error('Please specify a URL or file path as a source'); process.exit(1); } -if (options.splashOnly && options.iconOnly) { - logger.warn( - `Hmm, you wan't to _only_ generate both splash and icon set. Ignoring --x-only settings as this is default behavior`, - ); - options.splashOnly = false; - options.iconOnly = false; -} +options = normalizeOnlyFlagPairs('splashOnly', 'iconOnly', options); +options = normalizeOnlyFlagPairs('landscapeOnly', 'portraitOnly', options); if (!output) { output = process.cwd(); diff --git a/helpers/images.js b/helpers/images.js index c7bdde0b..247c5663 100644 --- a/helpers/images.js +++ b/helpers/images.js @@ -30,24 +30,30 @@ const getIconImages = () => { ); }; -const getSplashScreenImages = uniformSplashScreenData => { +const getSplashScreenImages = (uniformSplashScreenData, options) => { return uniqWith( - uniformSplashScreenData.reduce((acc, curr) => { - return acc.concat([ - mapToImageFileObj( - constants.APPLE_SPLASH_FILENAME_PREFIX, - curr.portrait.width, - curr.portrait.height, - curr.scaleFactor, - ), - mapToImageFileObj( - 'apple-splash', - curr.landscape.width, - curr.landscape.height, - curr.scaleFactor, - ), - ]); - }, []), + uniformSplashScreenData + .reduce((acc, curr) => { + return acc.concat([ + !options.landscapeOnly + ? mapToImageFileObj( + constants.APPLE_SPLASH_FILENAME_PREFIX, + curr.portrait.width, + curr.portrait.height, + curr.scaleFactor, + ) + : null, + !options.portraitOnly + ? mapToImageFileObj( + constants.APPLE_SPLASH_FILENAME_PREFIX, + curr.landscape.width, + curr.landscape.height, + curr.scaleFactor, + ) + : null, + ]); + }, []) + .filter(el => el !== null), isEqual, ); }; diff --git a/puppets.js b/puppets.js index 8e1c0608..1931e464 100644 --- a/puppets.js +++ b/puppets.js @@ -244,7 +244,7 @@ const generateImages = async (source, output, options) => { const splashScreenMetaData = await getSplashScreenMetaData(options); const allImages = [ ...(!options.iconOnly - ? images.getSplashScreenImages(splashScreenMetaData) + ? images.getSplashScreenImages(splashScreenMetaData, options) : []), ...(!options.splashOnly ? images.getIconImages() : []), ];