fix(cli): calculated relative path of generated content to the refere…

…nce output file Added calculated relative path of output folder to the saved manifest.json and/or index.html file fix #21
elegantapp · Aug 22, 2019 · b76e9d2 · b76e9d2
1 parent ec991ec
commit b76e9d2
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 48 deletions.
diff --git a/cli.js b/cli.js
@@ -153,39 +153,47 @@ if (!output) {
     const savedImages = await puppets.generateImages(source, output, options);
     const manifestJsonContent = pwa.generateIconsContentForManifest(
       savedImages,
+      options.manifest,
+    );
+    const htmlContent = pwa.generateHtmlForIndexPage(
+      savedImages,
+      options.index,
     );
-    const htmlContent = pwa.generateHtmlForIndexPage(savedImages);
 
-    if (options.manifest) {
-      await pwa.addIconsToManifest(manifestJsonContent, options.manifest);
-      logger.success(
-        `Icons are saved to Web App Manifest file ${options.manifest}`,
-      );
-    } else if (!options.splashOnly) {
-      logger.warn(
-        'Web App Manifest file is not specified, printing out the content to console instead',
-      );
-      logger.success(
-        'Below is the icons content for your manifest.json file. You can copy/paste it manually',
-      );
-      process.stdout.write(
-        `\n${JSON.stringify(manifestJsonContent, null, 2)}\n\n`,
-      );
+    if (!options.splashOnly) {
+      if (options.manifest) {
+        await pwa.addIconsToManifest(manifestJsonContent, options.manifest);
+        logger.success(
+          `Icons are saved to Web App Manifest file ${options.manifest}`,
+        );
+      } else if (!options.splashOnly) {
+        logger.warn(
+          'Web App Manifest file is not specified, printing out the content to console instead',
+        );
+        logger.success(
+          'Below is the icons content for your manifest.json file. You can copy/paste it manually',
+        );
+        process.stdout.write(
+          `\n${JSON.stringify(manifestJsonContent, null, 2)}\n\n`,
+        );
+      }
     }
 
-    if (options.index) {
-      await pwa.addMetaTagsToIndexPage(htmlContent, options.index);
-      logger.success(
-        `Splash screen meta tags are saved to index html file ${options.index}`,
-      );
-    } else {
-      logger.warn(
-        'Index html file is not specified, printing out the content to console instead',
-      );
-      logger.success(
-        'Below is the splash screen content for your index.html file. You can copy/paste it manually',
-      );
-      process.stdout.write(`\n${htmlContent}\n`);
+    if (!options.iconOnly) {
+      if (options.index) {
+        await pwa.addMetaTagsToIndexPage(htmlContent, options.index);
+        logger.success(
+          `Splash screen meta tags are saved to index html file ${options.index}`,
+        );
+      } else {
+        logger.warn(
+          'Index html file is not specified, printing out the content to console instead',
+        );
+        logger.success(
+          'Below is the splash screen content for your index.html file. You can copy/paste it manually',
+        );
+        process.stdout.write(`\n${htmlContent}\n`);
+      }
     }
   } catch (e) {
     logger.error(e);

diff --git a/helpers/file.js b/helpers/file.js
@@ -38,10 +38,6 @@ const getShellHtmlFilePath = () => {
   return `${getAppDir()}/static/shell.html`;
 };
 
-const getDefaultImageSavePath = (imageName, ext) => {
-  return path.join(process.cwd(), `${imageName}.${ext}`);
-};
-
 const getImageSavePath = (imageName, outputFolder, ext) => {
   return path.join(outputFolder, `${imageName}.${ext}`);
 };
@@ -50,6 +46,13 @@ const getFileUrlOfPath = source => {
   return fileUrl(source);
 };
 
+const getRelativeFilePath = (referenceFilePath, filePath) => {
+  return path.relative(
+    path.dirname(path.resolve(referenceFilePath)),
+    path.resolve(filePath),
+  );
+};
+
 const pathExists = (filePath, mode) => {
   return new Promise((resolve, reject) => {
     try {
@@ -139,9 +142,9 @@ module.exports = {
   isImageFile,
   getShellHtmlFilePath,
   getImageSavePath,
-  getDefaultImageSavePath,
   getFileUrlOfPath,
   pathExists,
+  getRelativeFilePath,
   getAppDir,
   getExtension,
   readFile,

diff --git a/helpers/pwa.js b/helpers/pwa.js
@@ -2,28 +2,35 @@ const cheerio = require('cheerio');
 const constants = require('../config/constants');
 const file = require('../helpers/file');
 
-const generateIconsContentForManifest = savedImages => {
+const generateIconsContentForManifest = (savedImages, manifestJsonPath) => {
   return savedImages
     .filter(image =>
       image.name.startsWith(constants.MANIFEST_ICON_FILENAME_PREFIX),
     )
-    .map(({ path: src, width, height }) => ({
-      src,
+    .map(({ path, width, height }) => ({
+      src: manifestJsonPath
+        ? file.getRelativeFilePath(manifestJsonPath, path)
+        : path,
       sizes: `${width}x${height}`,
-      type: `image/${file.getExtension(src)}`,
+      type: `image/${file.getExtension(path)}`,
     }));
 };
 
-const generateAppleTouchIconHtml = savedImages => {
+const generateAppleTouchIconHtml = (savedImages, indexHtmlPath) => {
   return savedImages
     .filter(image =>
       image.name.startsWith(constants.APPLE_ICON_FILENAME_PREFIX),
     )
-    .map(({ width, path }) => constants.APPLE_TOUCH_ICON_META_HTML(width, path))
+    .map(({ width, path }) =>
+      constants.APPLE_TOUCH_ICON_META_HTML(
+        width,
+        indexHtmlPath ? file.getRelativeFilePath(indexHtmlPath, path) : path,
+      ),
+    )
     .join('');
 };
 
-const generateAppleLaunchImageHtml = savedImages => {
+const generateAppleLaunchImageHtml = (savedImages, indexHtmlPath) => {
   return savedImages
     .filter(image =>
       image.name.startsWith(constants.APPLE_SPLASH_FILENAME_PREFIX),
@@ -32,19 +39,19 @@ const generateAppleLaunchImageHtml = savedImages => {
       constants.APPLE_LAUNCH_SCREEN_META_HTML(
         width,
         height,
-        path,
+        indexHtmlPath ? file.getRelativeFilePath(indexHtmlPath, path) : path,
         scaleFactor,
         orientation,
       ),
     )
     .join('');
 };
 
-const generateHtmlForIndexPage = savedImages => {
+const generateHtmlForIndexPage = (savedImages, indexHtmlPath) => {
   return `\
-${generateAppleTouchIconHtml(savedImages)}
+${generateAppleTouchIconHtml(savedImages, indexHtmlPath)}
 <meta name="apple-mobile-web-app-capable" content="yes">
-${generateAppleLaunchImageHtml(savedImages)}`;
+${generateAppleLaunchImageHtml(savedImages, indexHtmlPath)}`;
 };
 
 const addIconsToManifest = async (manifestContent, manifestJsonFilePath) => {

diff --git a/puppets.js b/puppets.js
@@ -217,9 +217,7 @@ const saveImages = async (imageList, source, output, options) => {
 
       const { type, quality } = options;
 
-      const path = output
-        ? file.getImageSavePath(name, output, type)
-        : file.getDefaultImageSavePath(name, type);
+      const path = file.getImageSavePath(name, output, type);
 
       try {
         const page = await browser.newPage();