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) {