From 1e18466b20a97b9b156901e94a4c1394827af734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=96nder=20Ceylan?= Date: Thu, 12 Sep 2019 07:44:20 +0200 Subject: [PATCH] feat(main): added option to provide path prefix to generated href links fix #31 --- README.md | 22 +++++---- __snapshots__/cli.test.js.snap | 87 ++++++++++++++++++++++++++++++++++ cli.js | 22 +++++---- cli.test.js | 12 +++++ config/constants.js | 4 ++ helpers/pwa.js | 30 +++++++++--- index.d.ts | 7 +++ main.js | 6 ++- 8 files changed, 162 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index b023b3c2..316553b7 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ $ pwa-asset-generator --help -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 icons -i --index Index html file path to automatically put splash screen and icon meta tags in + -a --path Path prefix to prepend for href links generated for meta tags -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] @@ -80,23 +81,24 @@ $ pwa-asset-generator --help Examples $ pwa-asset-generator logo.html . $ 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 logo.svg ./assets --scrape false --icon-only --path "%PUBLIC_URL%" $ pwa-asset-generator https://raw.githubusercontent.com/onderceylan/pwa-asset-generator/HEAD/static/logo.png -p "15%" -b "linear-gradient(to right, #fa709a 0%, #fee140 100%)" Flag examples - --background="rgba(255, 255, 255, .5)" - --opaque=false - --padding="10px" - --scrape=false - --manifest=./src/manifest.json - --index=./src/index.html - --type=jpeg - --quality=80 + --background "rgba(255, 255, 255, .5)" + --opaque false + --padding "10px" + --scrape false + --manifest ./src/manifest.json + --index ./src/index.html + --path "%PUBLIC_URL%" + --type jpeg + --quality 80 --splash-only --icon-only --landscape-only --portrait-only - --log=false + --log false ``` ### Module diff --git a/__snapshots__/cli.test.js.snap b/__snapshots__/cli.test.js.snap index c7a588a0..781e2eb7 100644 --- a/__snapshots__/cli.test.js.snap +++ b/__snapshots__/cli.test.js.snap @@ -87,6 +87,93 @@ exports[`generates icons and splash screens when both only flags exist 1`] = ` " `; +exports[`generates icons and splash screens with path prefix 1`] = ` +" +[ + { + \\"src\\": \\"temp/manifest-icon-192.png\\", + \\"sizes\\": \\"192x192\\", + \\"type\\": \\"image/png\\" + }, + { + \\"src\\": \\"temp/manifest-icon-512.png\\", + \\"sizes\\": \\"512x512\\", + \\"type\\": \\"image/png\\" + } +] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +" +`; + exports[`generates icons only 1`] = ` " [ diff --git a/cli.js b/cli.js index d08d7f7d..64871af9 100755 --- a/cli.js +++ b/cli.js @@ -21,6 +21,7 @@ $ pwa-asset-generator --help -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 icons -i --index Index html file path to automatically put splash screen and icon meta tags in + -a --path Path prefix to prepend for href links generated for meta tags -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] @@ -32,23 +33,24 @@ $ pwa-asset-generator --help Examples $ pwa-asset-generator logo.html . $ 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 logo.svg ./assets --scrape false --icon-only --path "%PUBLIC_URL%" $ pwa-asset-generator https://raw.githubusercontent.com/onderceylan/pwa-asset-generator/HEAD/static/logo.png -p "15%" -b "linear-gradient(to right, #fa709a 0%, #fee140 100%)" Flag examples - --background="rgba(255, 255, 255, .5)" - --opaque=false - --padding="10px" - --scrape=false - --manifest=./src/manifest.json - --index=./src/index.html - --type=jpeg - --quality=80 + --background "rgba(255, 255, 255, .5)" + --opaque false + --padding "10px" + --scrape false + --manifest ./src/manifest.json + --index ./src/index.html + --path "%PUBLIC_URL%" + --type jpeg + --quality 80 --splash-only --icon-only --landscape-only --portrait-only - --log=false + --log false `, { flags, diff --git a/cli.test.js b/cli.test.js index 50ae51a4..777c6129 100644 --- a/cli.test.js +++ b/cli.test.js @@ -94,3 +94,15 @@ test('generates icons and splash screens when both only flags exist', async () = expect(stdout).toMatchSnapshot(); }); + +test('generates icons and splash screens with path prefix', async () => { + jest.setTimeout(timeout); + + const { stdout } = await execa( + './cli.js', + ['./static/logo.png', './temp', '-s=false', '--path=%PUBLIC_URL%'], + { env: { PAG_TEST_MODE: '1' } }, + ); + + expect(stdout).toMatchSnapshot(); +}); diff --git a/config/constants.js b/config/constants.js index a5d8a7f8..62b03c86 100644 --- a/config/constants.js +++ b/config/constants.js @@ -13,6 +13,10 @@ module.exports = { type: 'string', alias: 'i', }, + path: { + type: 'string', + alias: 'a', + }, opaque: { type: 'boolean', alias: 'o', diff --git a/helpers/pwa.js b/helpers/pwa.js index dbcbc51b..8a6d118c 100644 --- a/helpers/pwa.js +++ b/helpers/pwa.js @@ -14,7 +14,11 @@ const generateIconsContentForManifest = (savedImages, manifestJsonPath) => { })); }; -const generateAppleTouchIconHtml = (savedImages, indexHtmlPath) => { +const generateAppleTouchIconHtml = ( + savedImages, + indexHtmlPath, + pathPrefix = '', +) => { return savedImages .filter(image => image.name.startsWith(constants.APPLE_ICON_FILENAME_PREFIX), @@ -22,13 +26,17 @@ const generateAppleTouchIconHtml = (savedImages, indexHtmlPath) => { .map(({ width, path }) => constants.APPLE_TOUCH_ICON_META_HTML( width, - file.getRelativeImagePath(indexHtmlPath, path), + pathPrefix + file.getRelativeImagePath(indexHtmlPath, path), ), ) .join(''); }; -const generateAppleLaunchImageHtml = (savedImages, indexHtmlPath) => { +const generateAppleLaunchImageHtml = ( + savedImages, + indexHtmlPath, + pathPrefix = '', +) => { return savedImages .filter(image => image.name.startsWith(constants.APPLE_SPLASH_FILENAME_PREFIX), @@ -37,7 +45,7 @@ const generateAppleLaunchImageHtml = (savedImages, indexHtmlPath) => { constants.APPLE_LAUNCH_SCREEN_META_HTML( width, height, - file.getRelativeImagePath(indexHtmlPath, path), + pathPrefix + file.getRelativeImagePath(indexHtmlPath, path), scaleFactor, orientation, ), @@ -45,11 +53,19 @@ const generateAppleLaunchImageHtml = (savedImages, indexHtmlPath) => { .join(''); }; -const generateHtmlForIndexPage = (savedImages, indexHtmlPath) => { +const getPathPrefix = pathPrefix => { + if (pathPrefix) { + return `${pathPrefix}/`; + } + return ''; +}; + +const generateHtmlForIndexPage = (savedImages, indexHtmlPath, pathPrefix) => { + const prependPath = getPathPrefix(pathPrefix); return `\ -${generateAppleTouchIconHtml(savedImages, indexHtmlPath)} +${generateAppleTouchIconHtml(savedImages, indexHtmlPath, prependPath)} -${generateAppleLaunchImageHtml(savedImages, indexHtmlPath)}`; +${generateAppleLaunchImageHtml(savedImages, indexHtmlPath, prependPath)}`; }; const addIconsToManifest = async (manifestContent, manifestJsonFilePath) => { diff --git a/index.d.ts b/index.d.ts index cf419d7b..ea17859b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -42,6 +42,13 @@ declare namespace PwaAssetGenerator { */ readonly index?: string; + /** + Path prefix to prepend for href links generated for meta tags + + @example %PUBLIC_URL% + */ + readonly path?: string; + /** Image type diff --git a/main.js b/main.js index ee575d41..703855e1 100644 --- a/main.js +++ b/main.js @@ -29,7 +29,11 @@ const generateImages = async (source, _output, _options, loggerFn) => { savedImages, options.manifest, ); - const htmlContent = pwa.generateHtmlForIndexPage(savedImages, options.index); + const htmlContent = pwa.generateHtmlForIndexPage( + savedImages, + options.index, + options.path, + ); if (!options.splashOnly) { if (options.manifest) {