feat(main): added option to provide path prefix to generated href links

fix #31
elegantapp · Sep 12, 2019 · 1e18466 · 1e18466
1 parent 1ab1c3e
commit 1e18466
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 28 deletions.
diff --git 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
@@ -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\\"
+  }
+]
+
+
+
+<link rel=\\"apple-touch-icon\\" sizes=\\"180x180\\" href=\\"%PUBLIC_URL%/temp/apple-icon-180.png\\">
+<link rel=\\"apple-touch-icon\\" sizes=\\"167x167\\" href=\\"%PUBLIC_URL%/temp/apple-icon-167.png\\">
+<link rel=\\"apple-touch-icon\\" sizes=\\"152x152\\" href=\\"%PUBLIC_URL%/temp/apple-icon-152.png\\">
+<link rel=\\"apple-touch-icon\\" sizes=\\"120x120\\" href=\\"%PUBLIC_URL%/temp/apple-icon-120.png\\">
+
+<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2048-2732.png\\"
+    media=\\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2732-2048.png\\"
+    media=\\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1668-2388.png\\"
+    media=\\"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2388-1668.png\\"
+    media=\\"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1668-2224.png\\"
+    media=\\"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2224-1668.png\\"
+    media=\\"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1536-2048.png\\"
+    media=\\"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2048-1536.png\\"
+    media=\\"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1242-2688.png\\"
+    media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2688-1242.png\\"
+    media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1125-2436.png\\"
+    media=\\"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2436-1125.png\\"
+    media=\\"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-828-1792.png\\"
+    media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1792-828.png\\"
+    media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1242-2208.png\\"
+    media=\\"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-2208-1242.png\\"
+    media=\\"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-750-1334.png\\"
+    media=\\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1334-750.png\\"
+    media=\\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-640-1136.png\\"
+    media=\\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\"
+    href=\\"%PUBLIC_URL%/temp/apple-splash-1136-640.png\\"
+    media=\\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+
+"
+`;
+
 exports[`generates icons only 1`] = `
 "
 [

diff --git 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
@@ -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
@@ -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
@@ -14,21 +14,29 @@ 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),
     )
     .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,19 +45,27 @@ const generateAppleLaunchImageHtml = (savedImages, indexHtmlPath) => {
       constants.APPLE_LAUNCH_SCREEN_META_HTML(
         width,
         height,
-        file.getRelativeImagePath(indexHtmlPath, path),
+        pathPrefix + file.getRelativeImagePath(indexHtmlPath, path),
         scaleFactor,
         orientation,
       ),
     )
     .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)}
 <meta name="apple-mobile-web-app-capable" content="yes">
-${generateAppleLaunchImageHtml(savedImages, indexHtmlPath)}`;
+${generateAppleLaunchImageHtml(savedImages, indexHtmlPath, prependPath)}`;
 };
 
 const addIconsToManifest = async (manifestContent, manifestJsonFilePath) => {

diff --git 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
@@ -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) {