Dev (#692)

* Remove specify related applications to be added to the manifest message (#663) * Formatting related application for better display (#666) * Delay mounting codeViewer for milliseconds to fix concurrency issue (#665) * App's log is being used to load home page but not used as a back button (#664) * fix(): fixes #673 (#679) * Bug fix manifest viewer (#681) * display empty string if manifest property's value is falsely * Update the manifest as a key is up * Adding id to access an editor by getElementById on a page * Adding id to the probs and wrapping Monaco editor with a div * Adding resize event listener when it is mounted and remove when component is destroyed * Refactor code to make it DRY * Applying css rules * watching state change and reloading the editor * Debounce helper function is added and call this function to execute update manifest * Fixed undefined in related apps * Putting back event listners when editor is reloaded * Deeplinking pw aurl (#682) * Checking if a query string is matching with pwa url or not * Check a summited pwa url is already part of query string. if not, added it to the url * check and generate if pwa url is already part of query string * Overview and My Hub link is loading using query sting * Log is used to reset and load default page * Process query string and handling browser events * Fixing test fail related to it should fail a bad URL * chore(): update env to point to dev api (#685) * Service worker page cleanup (#686) * fix(): swap top and bottom code viewers * style(): make the code viewer shorter for reg code * Hide broken images (#687) * filter broken icons from the list * suggesion suggest to you to upload at least one image 512×512 or larger * fix(analytics): new markers for build and features * fix(analytics): mark exactly which worker is chosen * fix(analytics): added marker for downloaded service worker Co-authored-by: TesheG <[email protected]>
pwa-builder · Mar 19, 2020 · 4f56b1b · 4f56b1b
1 parent 5902b48
commit 4f56b1b
Show file tree

Hide file tree

Showing 7 changed files with 554 additions and 504 deletions.
diff --git a/components/CodeViewer.vue b/components/CodeViewer.vue
@@ -363,7 +363,7 @@ export default class extends Vue {
   }
 
   #topViewerId {
-    height: 668px;
+    height: 440px;
     width: 100%;
     overflow-x: auto;
     overflow-y: hidden;

diff --git a/components/HubHeader.vue b/components/HubHeader.vue
@@ -52,7 +52,7 @@
 
     <div class="has-acrylic-80 is-dark has-reveal-background" v-if="showSubHeader" id="subHeader">
       <div id="tabsBar">
-        <nuxt-link to="/">Overview</nuxt-link>
+        <nuxt-link :to="{name: 'index', query:{url:this.url}}">Overview</nuxt-link>
         <nuxt-link to="/generate">Manifest</nuxt-link>
         <nuxt-link to="/serviceworker">Service Worker</nuxt-link>
       </div>
@@ -177,11 +177,8 @@ export default class extends Vue {
   }
 
   reset() {
-    if (location.pathname === "/") {
-      this.$emit("reset");
-    } else {
-      window.location.href = window.location.origin;
-    }
+    this.$emit("reset");
+    this.$router.push({ name: 'index'}) 
   }
 }
 

diff --git a/environments/development.js b/environments/development.js
@@ -1,5 +1,5 @@
 module.exports = {
-    apiUrl: 'https://pwabuilder-api-prod.azurewebsites.net',
+    apiUrl: 'https://pwabuilder-api-pre.azurewebsites.net',
     // apiUrl: 'http://localhost:3333',
     analytics: 'UA-111887945-1',
     apiUrl2: 'https://appimagegenerator-pre.azurewebsites.net'

diff --git a/environments/preview.js b/environments/preview.js
@@ -1,5 +1,5 @@
 module.exports = {
-    apiUrl: 'https://pwabuilder-api-prod.azurewebsites.net',
+    apiUrl: 'https://pwabuilder-api-pre.azurewebsites.net',
     analytics: 'UA-98003629-1',
     apiUrl2: 'https://appimagegenerator-pre.azurewebsites.net'
 }
diff --git a/pages/_lang/generate.vue b/pages/_lang/generate.vue
@@ -113,7 +113,8 @@
               <div id="uploadNewSection">
                 <label class="l-generator-label">
                   <h4 class="iconUploadHeader">Upload app icons for your PWA</h4>
-                  <p>We suggest at least one image 512×512 or larger</p>
+                  <p v-if="!isImageBroken">We suggest at least one image 512×512 or larger</p>
+                  <p class="brokenImage" v-if="isImageBroken">If you want a bigger images, we suggest to you to upload at least one image 512×512 or larger</p>
                 </label>
 
                 <div class="button-holder icons">
@@ -139,7 +140,7 @@
                   <div class="pure-u-1-8"></div>
                   <div class="pure-u-1-8"></div>-->
 
-                  <div id="iconItem" class="pure-u-1" v-for="icon in icons" :key="icon.src">
+                  <div id="iconItem" class="pure-u-1" v-for="icon in filterIcons(icons)" :key="icon.src">
                     <div id="iconDivItem" class="pure-u-10-24 l-generator-tablec">
                       <a target="_blank" :href="icon.src">
                         <img class="icon-preview" :src="icon.src" />
@@ -393,6 +394,7 @@ export default class extends Vue {
   public ifEntered = false;
   public  textareaOutlineColor = '';
   public showCopy = true;
+  public isImageBroken: boolean = false;
 
   @GeneratorState manifest: generator.Manifest;
   @GeneratorState members: generator.CustomMember[];
@@ -457,6 +459,24 @@ export default class extends Vue {
     }
   }
 
+  public filterIcons(icons): any {
+    return icons.filter(icon => { 
+      if (!icon.generated || icon.src.indexOf('data') === 0)
+      {
+        return icon;
+      }
+    });
+  }
+
+  public checkBrokenImage(icons): any { 
+    icons.forEach(icon => {
+      if (icon.generated && icon.src.indexOf('data') !== 0)
+      {
+        this.isImageBroken = true;
+      }
+    });
+  }
+
   public textareaError(): void {
     // This method is called when Enter is pressed in the textarea
     this.ifEntered = true; // This property is used to determine whether or not an error message should be displayed
@@ -592,6 +612,7 @@ export default class extends Vue {
       await this.uploadIcon(this.iconFile);
       this.updateManifest(this.manifest$);
     }
+    this.checkBrokenImage(this.icons)
     $iconsModal.hide();
     $iconsModal.hideLoading();
     this.iconFile = null;
@@ -673,6 +694,11 @@ declare var awa: any;
   color: red;
 }
 
+.brokenImage {
+  font-size: 14px;
+  color: #db3457 !important;
+}
+
 footer {
   display: flex;
   justify-content: center;

diff --git a/pages/_lang/reportCard.vue b/pages/_lang/reportCard.vue
@@ -93,8 +93,8 @@
         </p>
 
         <div id="attachSectionActions">
-          <nuxt-link @click="$awa( { 'referrerUri': 'https://www.pwabuilder.com/publish?fromHome' });" id="buildLink" to="/publish">Build My PWA</nuxt-link>
-          <nuxt-link @click="$awa( { 'referrerUri': 'https://www.pwabuilder.com/features?fromHome' });" id="featuresLink" to="/features">Feature Store</nuxt-link>
+          <nuxt-link @click="$awa( { 'referrerUri': 'https://www.pwabuilder.com/publishFromHome' });" id="buildLink" to="/publish">Build My PWA</nuxt-link>
+          <nuxt-link @click="$awa( { 'referrerUri': 'https://www.pwabuilder.com/featuresFromHome' });" id="featuresLink" to="/features">Feature Store</nuxt-link>
         </div>
       </div>
 
@@ -208,16 +208,7 @@ export default class extends Vue {
       this.getTopSamples();
     } else {
       if (window && window.location.search) {
-        const url = window.location.search.split("=")[1];
-
-        this.cleanedURL = decodeURIComponent(url);
-        this.url = this.cleanedURL;
-
-        // this.gotURL = true;
-
-        setTimeout(async () => {
-          await this.checkUrlAndGenerate();
-        }, 500);
+        this.processQueryString();
       }
     }
   }
@@ -255,6 +246,20 @@ export default class extends Vue {
     };
 
     this.$awa(overrideValues);
+    window.addEventListener("popstate", this.backAndForth);
+  }
+
+  beforeDestroy() {
+    (<any>window).removeEventListener("popstate", this.backAndForth);
+  }
+  
+  public async backAndForth(e) {
+    e.preventDefault();
+    if (window.location.href === `${window.location.origin}/`) {
+      this.reset();
+    } else if (window.location.pathname === '/') {
+      this.processQueryString();
+    } 
   }
 
   public async shareReport() {
@@ -310,9 +315,11 @@ export default class extends Vue {
 
   public async checkUrlAndGenerate() {
     this.error = null;
-
     try {
-      if (this.url$ === null || this.url$ === undefined) {
+      if (window && !window.location.search && (this.url$ !== null || this.url$ !== undefined)) {
+        this.$router.push({ name: 'index', query: { url: this.url$ }})
+      }
+      else {
         this.url$ = this.cleanedURL;
       }
 
@@ -343,6 +350,13 @@ export default class extends Vue {
     }
   }
 
+  public async processQueryString() {
+      const url = window.location.search.split("=")[1];
+      this.cleanedURL = decodeURIComponent(url);
+      this.url = this.cleanedURL;
+      this.checkUrlAndGenerate();
+  }
+
   public async getTopSamples() {
     await this.getSamples();
     const cleanedSamples = this.samples.slice(0, 4);