Add preview on PRs (#274)

source/app/web/statics/about/index.html

@@ -28,7 +28,7 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
                 Search a GitHub user
               </h2>
-              <small>{{ requests.remaining }} GitHub requests remaining</small>
+              <small :class="{'error-text':!requests.remaining}">{{ requests.remaining }} GitHub requests remaining</small>
               <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions/229" target="_blank">GitHub discussions</a>!</small>
             </div>
             <div class="inputs">
@@ -58,6 +58,10 @@
             An error occurred while generating metrics :(<br>
             <small>{{ error.message }}</small>
           </div>
+          <small class="warning" v-if="preview">
+            Metrics insights are rendered by <a href="https://metrics.lecoq.io/">metrics.lecoq.io</a> in preview mode.<br>
+            Any backend editions won't be reflected but client-side rendering can still be tested.
+          </small>
         </section>
 
         <template v-if="metrics">

source/app/web/statics/about/script.js

@@ -122,6 +122,9 @@
           url() {
             return `${window.location.protocol}//${window.location.host}/about/${this.user}`
           },
+          preview() {
+            return /-preview$/.test(this.version)
+          }
         },
       //Data initialization
         data:{

source/app/web/statics/app.js

@@ -207,6 +207,10 @@
               //Return object
                 const configure = Object.fromEntries(entries)
                 return Object.keys(configure).length ? configure : null
+            },
+          //Is in preview mode
+            preview() {
+              return /-preview$/.test(this.version)
             }
         },
       //Methods

source/app/web/statics/index.html

@@ -49,8 +49,8 @@
 
             <div class="ui-avatar" :style="{backgroundImage:avatar ? `url(${avatar})` : 'none'}"></div>
 
-            <input type="text" v-model="user" placeholder="Your GitHub username" :disabled="generated.pending" @keyup.enter="(!user)||(generated.pending)||(unusable.length > 0) ? null : generate()">
-            <button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)">
+            <input type="text" v-model="user" placeholder="Your GitHub username" :disabled="generated.pending" @keyup.enter="(!user)||(generated.pending)||(unusable.length > 0)||(!requests.remaining) ? null : generate()">
+            <button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)||(!requests.remaining)">
               <template v-if="generated.pending">
                 Generating metrics<span class="loading"></span>
               </template>
@@ -58,7 +58,11 @@
                 Generate your metrics!
               </template>
             </button>
-            <small>{{ requests.remaining }} GitHub requests remaining</small>
+            <small :class="{'error-text':!requests.remaining}">{{ requests.remaining }} GitHub requests remaining</small>
+            <small class="warning" v-if="preview">
+              Metrics are rendered by <a href="https://metrics.lecoq.io/">metrics.lecoq.io</a> in preview mode.
+              Any backend editions won't be reflected but client-side rendering can still be tested.
+            </small>
             <div class="warning" v-if="unusable.length">
               Metrics cannot be generated because the following plugins are not available on this web instance: {{ unusable.join(", ") }}
             </div>

source/app/web/statics/style.css

@@ -271,6 +271,10 @@
     border-radius: 6px;
   }
 
+  .error-text {
+    color: var(--color-alert-error-text);
+  }
+
 /* Warning */
   .warning {
     padding: .5rem .75rem;