jekyll: move jekyll back to root, but simpler setup, exclude via _config.yml

app: bundle jekyll docs into app, add 'yarn run docs' to build
ui: add back/forward arrows for app only, adjust responsiveness for app, add IS_APP flag injected via preload
ui: add animated logo, friendly message on empty replay frame
app: improve serve logic:
- serve static files from static root
- serve replay from http localhost instead to avoid proxying https for remote requests
- serve local lookup from http prefix also
- catch any fallthrough from replay as 404
- add timestamp to response channels to ensure uniqness

.gitignore

@@ -1,12 +1,12 @@
 *.har
 *.warc
 *.warc.gz
-!docs/examples/*.warc
+!examples/*.warc
 **/node_modules
 yarn-error.log
 coverage/
 **/local-examples/
 **/.DS_Store
 **/.sass-cache/
-docs/_site/
+_site/
 dist/

_config.yml

@@ -15,10 +15,28 @@ heading_anchors: true
 # Aux links for the upper right navigation
 aux_links:
   "Back to ReplayWeb.page":
-    - "https://replayweb.page/"
+    - "/"
 
 logo: "/assets/logo.svg"
 
 plugins:
   - jekyll-remote-theme
 
+
+baseUrl: '/'
+
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - package.json
+  - run.sh
+  - webpack.config.js
+  - yarn-error.log
+  - yarn.lock
+  - local-examples/
+  - build/
+  - src/
+  - dist/
+  - node_modules/
+  - plugins/
+

assets/logo.svg

@@ -6,38 +6,32 @@
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   width="66.712418mm"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   sodipodi:docname="logo.svg"
-   inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
-   id="wrlogo"
-   version="1.1"
-   viewBox="0 0 66.712418 66.712418"
    height="66.712418mm"
-   width="66.712418mm">
+   viewBox="0 0 66.712418 66.712418"
+   version="1.1"
+   id="wrlogo">
   <defs
      id="defs1341">
     <linearGradient
-       inkscape:collect="always"
+       y2="48.223869"
-       xlink:href="#linearGradient5691"
-       id="linearGradient6615"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
-       x1="2.9740067"
-       y1="48.223869"
        x2="97.913383"
-       y2="48.223869" />
+       y1="48.223869"
+       x1="2.9740067"
+       gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient6615"
+       xlink:href="#linearGradient5691" />
     <linearGradient
-       id="linearGradient5691"
+       id="linearGradient5691">
-       inkscape:collect="always">
       <stop
-         id="stop5687"
+         style="stop-color:#4876ff;stop-opacity:1"
          offset="0"
-         style="stop-color:#4876ff;stop-opacity:1" />
+         id="stop5687" />
       <stop
-         id="stop5689"
+         style="stop-color:#04cdff;stop-opacity:1"
          offset="1"
-         style="stop-color:#04cdff;stop-opacity:1" />
+         id="stop5689" />
     </linearGradient>
   </defs>
   <metadata
@@ -53,66 +47,32 @@
     </rdf:RDF>
   </metadata>
   <g
-     transform="translate(-72.477124,-114.81046)"
      id="layer1"
-     inkscape:groupmode="layer"
+     transform="translate(-72.477124,-114.81046)">
-     inkscape:label="Layer 1">
     <circle
-       style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       transform="rotate(0.86915873)"
-       id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
-       cx="108.06871"
-       cy="146.54422"
        r="33.356209"
-       inkscape:transform-center-x="-2.7634129"
+       cy="146.54422"
-       inkscape:transform-center-y="2.8413144"
+       cx="108.06871"
-       transform="rotate(0.86915873)" />
+       id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
+       style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
     <path
-       sodipodi:nodetypes="cssssscscsssssccc"
+       style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683"
-       inkscape:connector-curvature="0"
-       id="path114-4-0-85-6-0-5-3-6-1-6"
        d="m 119.62552,156.54036 h 5.46953 c 3.81136,0 6.91161,-3.10024 6.91161,-6.9116 0,-3.81136 -3.10025,-6.9116 -6.91161,-6.9116 h -15.59889 c -3.81136,0 -6.9116,3.10024 -6.9116,6.9116 0,1.96682 0.82917,3.73828 2.15161,4.9982 -0.83057,0.55722 -1.82557,0.88678 -2.89857,0.88678 h -2.082056 c -1.042775,-1.72016 -1.654819,-3.73054 -1.654819,-5.88498 0,-6.2834 5.112035,-11.39543 11.395435,-11.39543 h 15.59889 c 6.28341,0 11.39474,5.11132 11.39474,11.39543 0,6.28411 -5.11222,11.50105 -11.39474,11.39543 l -5.45665,0.14787 v -2.17722 z"
-       style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683" />
+       id="path114-4-0-85-6-0-5-3-6-1-6" />
     <path
-       sodipodi:nodetypes="cssssscscsssssccc"
+       style="fill:#64e986;fill-opacity:1;stroke-width:0.702683"
-       inkscape:connector-curvature="0"
-       id="path116-9-4-7-0-8-3-2-08-9-1"
        d="m 91.878825,142.66568 -4.893158,0.0515 c -3.811155,0.0401 -6.911605,3.10024 -6.911605,6.91231 0,3.81065 3.100238,6.91089 6.911605,6.91089 h 15.598893 c 3.81136,0 6.9116,-3.10024 6.9116,-6.91089 0,-1.96682 -0.82917,-3.73899 -2.15162,-4.9989 0.83057,-0.55723 1.82557,-0.88609 2.89857,-0.88609 h 2.08066 c 1.04348,1.71947 1.65552,3.72985 1.65552,5.88499 0,6.28269 -5.11132,11.39472 -11.39473,11.39472 H 86.985667 c -6.282704,0 -11.39544,-5.11132 -11.39544,-11.39472 0,-6.28411 5.112828,-11.49617 11.39544,-11.39614 l 4.893158,0.0779 v 2.17722 z"
-       style="fill:#64e986;fill-opacity:1;stroke-width:0.702683" />
+       id="path116-9-4-7-0-8-3-2-08-9-1" />
     <path
-       transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)"
-       inkscape:transform-center-y="0.018337839"
-       inkscape:transform-center-x="-1.9610825"
-       d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
-       inkscape:randomized="0"
-       inkscape:rounded="0"
-       inkscape:flatsided="false"
-       sodipodi:arg2="2.0988478"
-       sodipodi:arg1="1.0516502"
-       sodipodi:r2="7.2594481"
-       sodipodi:r1="14.518896"
-       sodipodi:cy="34.639832"
-       sodipodi:cx="66.525429"
-       sodipodi:sides="3"
-       id="path3919-5-9-8-6-6-56-0-37-5-8"
        style="fill:#64e986;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-       sodipodi:type="star" />
+       id="path3919-5-9-8-6-6-56-0-37-5-8"
-    <path
-       transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)"
-       inkscape:transform-center-y="-0.01877307"
-       inkscape:transform-center-x="2.1128909"
        d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
-       inkscape:randomized="0"
+       transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)" />
-       inkscape:rounded="0"
+    <path
-       inkscape:flatsided="false"
-       sodipodi:arg2="2.0988478"
-       sodipodi:arg1="1.0516502"
-       sodipodi:r2="7.2594481"
-       sodipodi:r1="14.518896"
-       sodipodi:cy="34.639832"
-       sodipodi:cx="66.525429"
-       sodipodi:sides="3"
-       id="path3919-3-3-7-5-9-7-2-6-8-7-7"
        style="fill:#d2f9d6;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-       sodipodi:type="star" />
+       id="path3919-3-3-7-5-9-7-2-6-8-7-7"
+       d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
+       transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)" />
   </g>
 </svg>

assets/logoa.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   width="66.712418mm"
+   height="66.712418mm"
+   viewBox="0 0 66.712418 66.712418"
+   version="1.1"
+   id="wrlogo">
+  <defs
+     id="defs1341">
+    <linearGradient
+       y2="48.223869"
+       x2="97.913383"
+       y1="48.223869"
+       x1="2.9740067"
+       gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient6615"
+       xlink:href="#linearGradient5691" />
+    <linearGradient
+       id="linearGradient5691">
+      <stop
+         style="stop-color:#4876ff;stop-opacity:1"
+         offset="0"
+         id="stop5687">
+        <animate attributeName="stop-color" values="#4876ff; #1b0921;  #4876ff; #04cdff; #4876ff; " dur="9s" repeatCount="indefinite" />
+      </stop>
+      <stop
+         style="stop-color:#04cdff;stop-opacity:1"
+         offset="1"
+         id="stop5689">
+        <animate attributeName="stop-color" values="#04cdff; #4876ff; #1b0921; #4876ff; #04cdff; " dur="9s" repeatCount="indefinite" />
+      </stop>
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata1344">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-72.477124,-114.81046)">
+    <circle
+       transform="rotate(0.86915873)"
+       r="33.356209"
+       cy="146.54422"
+       cx="108.06871"
+       id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
+       style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    <path
+       style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683"
+       d="m 119.62552,156.54036 h 5.46953 c 3.81136,0 6.91161,-3.10024 6.91161,-6.9116 0,-3.81136 -3.10025,-6.9116 -6.91161,-6.9116 h -15.59889 c -3.81136,0 -6.9116,3.10024 -6.9116,6.9116 0,1.96682 0.82917,3.73828 2.15161,4.9982 -0.83057,0.55722 -1.82557,0.88678 -2.89857,0.88678 h -2.082056 c -1.042775,-1.72016 -1.654819,-3.73054 -1.654819,-5.88498 0,-6.2834 5.112035,-11.39543 11.395435,-11.39543 h 15.59889 c 6.28341,0 11.39474,5.11132 11.39474,11.39543 0,6.28411 -5.11222,11.50105 -11.39474,11.39543 l -5.45665,0.14787 v -2.17722 z"
+       id="path114-4-0-85-6-0-5-3-6-1-6" />
+    <path
+       style="fill:#64e986;fill-opacity:1;stroke-width:0.702683"
+       d="m 91.878825,142.66568 -4.893158,0.0515 c -3.811155,0.0401 -6.911605,3.10024 -6.911605,6.91231 0,3.81065 3.100238,6.91089 6.911605,6.91089 h 15.598893 c 3.81136,0 6.9116,-3.10024 6.9116,-6.91089 0,-1.96682 -0.82917,-3.73899 -2.15162,-4.9989 0.83057,-0.55723 1.82557,-0.88609 2.89857,-0.88609 h 2.08066 c 1.04348,1.71947 1.65552,3.72985 1.65552,5.88499 0,6.28269 -5.11132,11.39472 -11.39473,11.39472 H 86.985667 c -6.282704,0 -11.39544,-5.11132 -11.39544,-11.39472 0,-6.28411 5.112828,-11.49617 11.39544,-11.39614 l 4.893158,0.0779 v 2.17722 z"
+       id="path116-9-4-7-0-8-3-2-08-9-1" />
+    <path
+       style="fill:#64e986;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path3919-5-9-8-6-6-56-0-37-5-8"
+       d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
+       transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)" />
+    <path
+       style="fill:#d2f9d6;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path3919-3-3-7-5-9-7-2-6-8-7-7"
+       d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
+       transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)" />
+  </g>
+</svg>

docs/usage.md

@@ -4,7 +4,7 @@ title: Usage
 nav_order: 1
 description: 'Usage'
 has_children: true
-permalink: /docs
+permalink: /docs/index.html
 ---
 
 # ReplayWeb.Page

embed.js

@@ -1,4 +1,4 @@
-!function(t,e){for(var s in e)t[s]=e[s]}(self,function(t){var e={};function s(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,s),r.l=!0,r.exports}return s.m=t,s.c=e,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)s.d(n,r,function(e){return t[e]}.bind(null,r));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/",s(s.s=108)}({0:function(t,e,s){"use strict";s.d(e,"c",(function(){return d.e})),s.d(e,"d",(function(){return N})),s.d(e,"b",(function(){return C})),s.d(e,"a",(function(){return E}));var n=s(5),r=s(1);function i(t,e){const{element:{content:s},parts:n}=t,r=document.createTreeWalker(s,133,null,!1);let i=a(n),o=n[i],c=-1,l=0;const u=[];let d=null;for(;r.nextNode();){c++;const t=r.currentNode;for(t.previousSibling===d&&(d=null),e.has(t)&&(u.push(t),null===d&&(d=t)),null!==d&&l++;void 0!==o&&o.index===c;)o.index=null!==d?-1:o.index-l,i=a(n,i),o=n[i]}u.forEach(t=>t.parentNode.removeChild(t))}const o=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},a=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(Object(r.d)(e))return s}return-1};var c=s(9),l=s(8),u=s(13),d=s(6);
+!function(t,e){for(var s in e)t[s]=e[s]}(self,function(t){var e={};function s(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,s),r.l=!0,r.exports}return s.m=t,s.c=e,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)s.d(n,r,function(e){return t[e]}.bind(null,r));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/",s(s.s=111)}({0:function(t,e,s){"use strict";s.d(e,"c",(function(){return d.e})),s.d(e,"d",(function(){return N})),s.d(e,"b",(function(){return C})),s.d(e,"a",(function(){return E}));var n=s(5),r=s(1);function i(t,e){const{element:{content:s},parts:n}=t,r=document.createTreeWalker(s,133,null,!1);let i=a(n),o=n[i],c=-1,l=0;const u=[];let d=null;for(;r.nextNode();){c++;const t=r.currentNode;for(t.previousSibling===d&&(d=null),e.has(t)&&(u.push(t),null===d&&(d=t)),null!==d&&l++;void 0!==o&&o.index===c;)o.index=null!==d?-1:o.index-l,i=a(n,i),o=n[i]}u.forEach(t=>t.parentNode.removeChild(t))}const o=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},a=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(Object(r.d)(e))return s}return-1};var c=s(9),l=s(8),u=s(13),d=s(6);
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -65,7 +65,7 @@ const n=`{{lit-${String(Math.random()).slice(2)}}}`,r=`\x3c!--${n}--\x3e`,i=new
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const n=new WeakMap,r=t=>(...e)=>{const s=t(...e);return n.set(s,!0),s},i=t=>"function"==typeof t&&n.has(t)},108:function(t,e,s){"use strict";s.r(e);var n=s(0);class r extends n.a{constructor(){super(),this.replayBase="http://localhost:9990/",this.view="replay",this.ts="",this.url="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1}static get properties(){return{url:{type:String},ts:{type:String},source:{type:String},replayBase:{type:String},title:{type:String},coll:{type:String},config:{type:String},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean}}}firstUpdated(){window.addEventListener("message",t=>{const e=this.renderRoot.querySelector("iframe");if(e&&t.source===e.contentWindow){if(t.data.title&&(this.title=t.data.title),console.log(t.data),!this.deepLink)return;const e=new URLSearchParams({url:t.data.url,ts:t.data.ts}),s=new URL(window.location.href);s.hash="#"+e.toString(),window.history.replaceState({},"",s)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",t=>this.updateFromHash()))}updateFromHash(){const t=new URLSearchParams(window.location.hash.slice(1));t.has("url")&&(this.url=t.get("url")),t.has("ts")&&(this.ts=t.get("ts"))}updated(t){(t.has("url")||t.has("ts")||t.has("source"))&&(this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,embed:"true"}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,view:this.view}).toString())}static get styles(){return n.b`
+const n=new WeakMap,r=t=>(...e)=>{const s=t(...e);return n.set(s,!0),s},i=t=>"function"==typeof t&&n.has(t)},111:function(t,e,s){"use strict";s.r(e);var n=s(0);class r extends n.a{constructor(){super(),this.replayBase="http://localhost:9990/",this.view="replay",this.ts="",this.url="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1}static get properties(){return{url:{type:String},ts:{type:String},source:{type:String},replayBase:{type:String},title:{type:String},coll:{type:String},config:{type:String},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean}}}firstUpdated(){window.addEventListener("message",t=>{const e=this.renderRoot.querySelector("iframe");if(e&&t.source===e.contentWindow){if(t.data.title&&(this.title=t.data.title),console.log(t.data),!this.deepLink)return;const e=new URLSearchParams({url:t.data.url,ts:t.data.ts}),s=new URL(window.location.href);s.hash="#"+e.toString(),window.history.replaceState({},"",s)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",t=>this.updateFromHash()))}updateFromHash(){const t=new URLSearchParams(window.location.hash.slice(1));t.has("url")&&(this.url=t.get("url")),t.has("ts")&&(this.ts=t.get("ts"))}updated(t){(t.has("url")||t.has("ts")||t.has("source"))&&(this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,embed:"true"}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,view:this.view}).toString())}static get styles(){return n.b`
       iframe {
         width: 100%;
         height: 100%;

package.json

@@ -11,10 +11,10 @@
     "bulma": "^0.8.2",
     "lit-element": "^2.3.1",
     "marked": "^1.0.0",
+    "mime-types": "^2.1.27",
     "pretty-bytes": "^5.3.0",
     "register-service-worker": "^1.7.1",
-    "wabac": "github:https://github.com/webrecorder/wabac.js",
+    "wabac": "github:https://github.com/webrecorder/wabac.js"
-    "wombat": "github:https://github.com/webrecorder/wombat"
   },
   "devDependencies": {
     "css-loader": "^3.5.3",
@@ -39,7 +39,9 @@
     "pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
     "dist": "electron-builder",
     "start-electron": "NODE_ENV=development electron ./dist/electron.js",
-    "build-electron": "yarn run build && yarn run pack"
+    "build-electron": "yarn run build && yarn run pack",
+    "docs": "bundle exec jekyll build",
+    "all": "yarn run build && yarn run docs && yarn run pack"
   },
   "build": {
     "afterSign": "build/notarize.js",
@@ -48,12 +50,18 @@
     "appId": "net.webrecorder.replaywebpage",
     "artifactName": "${name}-${version}.${ext}",
     "files": [
-      "!**/*",
       "!**/node_modules/**/*",
-      "package.json",
       "dist/*.js",
-      "docs/*.js",
+      "*.js",
-      "docs/index.html"
+      "*.html",
+      {
+        "from": "_site/docs",
+        "to": "docs"
+      },
+      {
+        "from": "_site/assets",
+        "to": "assets"
+      }
     ],
     "extraResources": [
       "plugins"

src/electron-main.js

@@ -1,27 +1,28 @@
 "use strict";
 
-const {app, session, BrowserWindow, protocol, ipcMain} = require('electron');
+import fetch from 'node-fetch';
-const path = require('path');
+import { Headers } from 'node-fetch';
-const fs = require('fs');
-const qs = require('querystring');
 
-const { ArchiveResponse, Rewriter } = require('wabac/src/rewrite');
+import {app, session, BrowserWindow, ipcMain} from 'electron';
 
-const { Headers } = require('node-fetch');
+import path from 'path';
+import fs from 'fs';
+import qs from 'querystring';
+
+import { ArchiveResponse, Rewriter } from 'wabac/src/rewrite';
+
+import { PassThrough } from 'stream';
+
+import mime from 'mime-types';
 
 global.Headers = Headers;
 
-const { PassThrough } = require('stream');
+const STATIC_PREFIX = "http://localhost:5471/";
-
-const STATIC_PREFIX = `https://replayweb.page/`;
 
 const REPLAY_PREFIX = STATIC_PREFIX + "wabac/";
 
-const STATIC_PATHS = {
+const HTML_TYPE = 'text/html; charset="utf-8"';
-  'index.html': 'text/html',
+const JS_TYPE = 'application/javascript; charset="utf-8"';
-  'frontend.js': 'application/javascript',
-  'sw.js': 'application/javascript'
-};
 
 const URL_RX = /([^\/]+)\/([\d]+)(?:\w\w_)?\/(.*)$/;
 
@@ -29,7 +30,7 @@ const appPath = app.getAppPath();
 
 const projPath = path.join(appPath, "../");
 
-const staticContentPath = path.join(__dirname, "../", "docs");
+const staticContentPath = path.join(__dirname, "../");
 
 const pluginPath = path.join(projPath, "plugins", "PepperFlashPlayer.plugin");
 
@@ -51,7 +52,7 @@ app.commandLine.appendSwitch('ppapi-flash-path', pluginPath);
 var proxyColl;
 var proxyTS;
 
-var mainContents;
+var mainWindow;
 
 
 function bufferToStream(data) {
@@ -65,42 +66,50 @@ function bufferToStream(data) {
 
 
 async function doIntercept(request, callback) {
-  console.log("request", request.url);
+  console.log(`${request.method} ${request.url} from ${request.referrer}`);
 
+  // if local server
   if (request.url.startsWith(STATIC_PREFIX)) {
-    let filename = request.url.slice(STATIC_PREFIX.length).split("?", 1)[0];
+    //if replay prefix
-    if (filename === "") {
+    if (request.url.startsWith(REPLAY_PREFIX)) {
-      filename = "index.html";
-    }
-    const type = STATIC_PATHS[filename];
-
-    if (type) {
-      const fullPath = path.join(staticContentPath, filename);
-
-      console.log("fullPath: " + fullPath);
-
-      const data = fs.createReadStream(fullPath);
-
-      callback({statusCode: 200, headers: {"content-type": type}, data});
-      return;
-
-    } else if (request.url.startsWith(REPLAY_PREFIX)) {
       const m = request.url.slice(REPLAY_PREFIX.length).match(URL_RX);
       if (m) {
         proxyColl = m[1];
         proxyTS = m[2];
 
-        //const data = bufferToStream(`<html><head><script>window.location.href = "${m[3]}";</script></head></html>`);
-        //const statusCode = 200;
-        //const headers =  {"location": m[3], "cache-control": "no-cache"};
-
-        //callback({statusCode, headers, data});
-
         request.url = m[3];
-        await resolveResponse(request, callback);
+        return await resolveArchiveResponse(request, callback);
-        return;
+      }
+    } else {
+
+      // try serve static file from app dir
+      let filename = request.url.slice(STATIC_PREFIX.length).split("?", 1)[0];
+
+      if (filename === "") {
+        filename = "index.html";
+      } else if (filename === "docs") {
+        filename = "docs/index.html";
+      }
+
+      let ext = path.extname(filename);
+      if (!ext) {
+        ext = ".html";
+        filename += ext;
+      }
+
+      const mimeType = mime.contentType(ext);
+
+      if (mimeType) {
+        const fullPath = path.join(staticContentPath, filename);
+
+        console.log("fullPath: " + fullPath);
+
+        const data = fs.createReadStream(fullPath);
+
+        return callback({statusCode: 200, headers: {"content-type": mimeType}, data});
       }
     }
+    
     return notFound(request.url, callback);
   }
 
@@ -122,12 +131,30 @@ async function doIntercept(request, callback) {
 
     const {statusCode, start, end} = parseRange(reqHeaders, headers, size);
 
-    const data = fs.createReadStream(filename, {start, end});
+    const data = request.method === "HEAD" ? null : fs.createReadStream(filename, {start, end});
 
     callback({statusCode, headers, data});
+    return;
   }
 
-  await resolveResponse(request, callback);
+  // possible 'live leak' attempt, just return not found
+  if (request.referrer && request.referrer.startsWith(REPLAY_PREFIX)) {
+    return notFound(request.url, callback);
+  }
+
+  await proxyLive(request, callback);
+}
+
+async function proxyLive(request, callback) {
+  let headers = request.headers;
+
+  const method = request.method;
+  const response = await fetch(request.url, {method, headers});
+  const data = method === "HEAD" ? null : response.body;
+  const statusCode = response.status;
+
+  headers = Object.fromEntries(response.headers.entries());
+  callback({statusCode, headers, data});
 }
 
 function notFound(url, callback) {
@@ -136,9 +163,10 @@ function notFound(url, callback) {
   callback({statusCode: 404, headers: {"Content-Type": 'text/html; charset="utf-8"'}, data});
 }
 
-async function resolveResponse(request, callback) {
+async function resolveArchiveResponse(request, callback) {
-  //mainContents.once("ipc-message", async (event, channel, status, headers, payload) => {
+  const channel = `req:${new Date().getTime()}:${request.url}`;
-  ipcMain.once("req:" + request.url, async (event, status, headers, payload) => {
+
+  ipcMain.once(channel, async (event, status, headers, payload) => {
     const url = request.url;
 
     if (status === 404 && !payload) {
@@ -161,7 +189,6 @@ async function resolveResponse(request, callback) {
       useBaseRules: true
     });
 
-    //const timestamp = proxyTS;
     request.headers = new Headers(request.headers);
 
     try {
@@ -188,7 +215,7 @@ async function resolveResponse(request, callback) {
 
   });
 
-  mainContents.send("getresponse", request, proxyColl, proxyTS);
+  mainWindow.webContents.send("getresponse", request, proxyColl, proxyTS, channel);
 }
 
 function parseRange(reqHeaders, headers, size) {
@@ -215,28 +242,14 @@ function parseRange(reqHeaders, headers, size) {
 
 
 function createWindow () {
-  //createServer();
-
   const sesh = session.defaultSession;
-  protocol.registerStreamProtocol("filex", async (request, callback) => {
-    const filename = qs.unescape(request.url.slice("filex://-".length));
-    console.log("filex", filename);
-
-    if (filename.endsWith("?redir")) {
-      const newLoc = request.url.replace("?redir", "");
-      console.log("redir to: " + newLoc);
-      callback({statusCode: 304, headers: {"Location": newLoc}, data: bufferToStream(NOT_FOUND)});
-      return;
-    }
-
-
-  });
 
+  //sesh.protocol.interceptStreamProtocol("file", doIntercept);
   sesh.protocol.interceptStreamProtocol("http", doIntercept);
-  sesh.protocol.interceptStreamProtocol("https", doIntercept);
+  //sesh.protocol.interceptStreamProtocol("https", doIntercept);
 
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 1024,
     height: 768,
     isMaximized: true,
@@ -244,6 +257,8 @@ function createWindow () {
     webPreferences: {
       plugins: true,
       preload: path.join(__dirname, 'preload.js'),
+      nativeWindowOpen: true,
+      contextIsolation: true
     }
   }).once('ready-to-show', () => {
 
@@ -289,11 +304,12 @@ app.on('window-all-closed', function () {
   app.quit();
 });
 
-
+/*
 app.on('web-contents-created', (event, contents) => {
   if (contents.getType() === "webview") {
     contents.openDevTools();
   } else if (contents.getType() === "window") {
+    console.log("main contents set")
     mainContents = contents;
   }
-});
+});*/

src/electron-preload.js

@@ -2,7 +2,9 @@
 
 import { CollectionLoader } from 'wabac/src/loaders';
 
-const { ipcRenderer } = require('electron');
+const { ipcRenderer, contextBridge } = require('electron');
+
+contextBridge.exposeInMainWorld('electron', {'IS_APP': true});
 
 const dbs = {};
 
@@ -17,7 +19,7 @@ async function getDB(name) {
   return dbs[name].store;
 }
 
-async function getResponse(event, request, coll, ts) {
+async function getResponse(event, request, coll, ts, channel) {
   const db = await getDB(coll);
   await db.initing;
 
@@ -25,8 +27,6 @@ async function getResponse(event, request, coll, ts) {
 
   const result = await db.getResource(req, "", {request});
 
-  const channel = "req:" + request.url;
-
   if (!result) {
     ipcRenderer.send(channel, 404);
     return;

src/frontend.js

@@ -11,8 +11,13 @@ import marked from 'marked';
 
 import allCssRaw from '../assets/main.scss';
 import rwpLogo from '../assets/logo.svg';
+import rwpAnimLogo from '../assets/logoa.svg';
+
+import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
+import fasArrowRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg';
+
+import fasInfoIcon from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
 
-import fasArchiveIcon from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
 import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg';
 import fasFullscreen from '@fortawesome/fontawesome-free/svgs/solid/desktop.svg';
 import fasUnfullscreen from '@fortawesome/fontawesome-free/svgs/solid/compress-arrows-alt.svg';
@@ -31,10 +36,7 @@ function wrapCss(custom) {
   return [allCss, custom];
 }
 
-const GDRIVE_CLIENT_ID = "160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com";
+const IS_APP = window.electron && window.electron.IS_APP;
-
-const HELPER_PROXY = "https://helper-proxy.webrecorder.workers.dev";
-
 
 const dbworker = new Worker(__SW_PATH__);
 
@@ -87,9 +89,32 @@ class AppMain extends LitElement
     .navbar {
       padding: 0 0.5em;
     }
-    .info-menu {
+
-      padding: 0 1.0em;
+    div.navbar-menu fa-icon {
+      vertical-align: sub;
     }
+    
+    @media screen and (min-width: 800px) {
+      .menu-only {
+        display: none;
+      }
+
+      a.arrow-button {
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+
+      .info-menu {
+        padding: 0 1.0em;
+      }
+    }
+
+    @media screen and (max-width: 800px) {
+      .wide-only {
+        display: none;
+      }
+    }
+
     `);
   }
 
@@ -111,11 +136,21 @@ class AppMain extends LitElement
       </div>
       <div class="navbar-menu ${this.navMenuShown ? 'is-active' : ''}">
       <div class="navbar-start">
+      ${IS_APP ? html`
+        <a class="navbar-item arrow-button" title="Go Back" @click="${(e) => window.history.back()}">
+          <fa-icon .svg="${fasArrowLeft}"></fa-icon><span class="menu-only">&nbsp;Go Back</span>
+        </a>
+        <a class="navbar-item arrow-button" title="Go Forward" @click="${(e) => window.history.forward()}">
+          <fa-icon .svg="${fasArrowRight}"></fa-icon><span class="menu-only">&nbsp;Go Forward</span>
+        </a>
+      ` : ``}
       ${this.sourceUrl && this.collInfo ? html`
         <div class="navbar-item has-dropdown is-hoverable">
-          <a class="info-menu navbar-link is-arrowless"><fa-icon size="1.2em" .svg="${fasArchiveIcon}"></fa-icon></a>
+          <a class="info-menu navbar-link is-arrowless"><fa-icon size="1.2em" .svg="${fasInfoIcon}"></fa-icon>
+          <span class="menu-only">About this Archive</span>
+          </a>
           <div class="navbar-dropdown">
-            <div class="navbar-item"><i>About this Archive</i></div>
+            <div class="navbar-item wide-only"><i>About this Archive</i></div>
             <hr class="navbar-divider">
             <div class="navbar-item">
               Source:&nbsp;<b>${this.sourceUrl}</b>
@@ -138,7 +173,7 @@ class AppMain extends LitElement
       </div>
       <div class="navbar-end">
         <a href="/docs" target="_blank" class="navbar-item">
-          <fa-icon .svg="${fasHelp}"></fa-icon>&nbsp;How it Works
+          <fa-icon .svg="${fasHelp}"></fa-icon><span>&nbsp;How it Works</span>
         </a>
         <a href="?terms" @click="${(e) => { e.preventDefault(); this.showTerms = true} }"class="navbar-item">Terms</a>
       </div>
@@ -193,6 +228,9 @@ class AppMain extends LitElement
 
   firstUpdated() {
     this.initRoute();
+    window.addEventListener("popstate", (event) => {
+      this.initRoute();
+    });
   }
 
   updated(changedProperties) {
@@ -268,10 +306,15 @@ class AppMain extends LitElement
 
   onStartLoad(event) {
     // just redirect right away?
+    this.pageParams.set("source", event.detail.sourceUrl);
+
     if (!event.detail.isFile) {
-      this.pageParams.set("source", event.detail.sourceUrl);
       window.location.search = this.pageParams.toString();
       return;
+    } else {
+      const url = new URL(window.location.href);
+      url.search = this.pageParams.toString();
+      window.history.pushState({}, "", url.toString());
     }
 
     this.sourceUrl = event.detail.sourceUrl;
@@ -289,7 +332,7 @@ class AppMain extends LitElement
       return;
     }
 
-    this.initRoute();
+    //this.initRoute();
 
     if (event.detail.sourceUrl !== this.sourceUrl) {
       this.pageParams.set("source", event.detail.sourceUrl);
@@ -468,7 +511,7 @@ You can select a file to upload from the main page by clicking the \'Choose File
     return html`
     <section class="container">
     <div class="has-text-centered is-flex">
-    <fa-icon class="logo" size="96px" .svg=${rwpLogo}></fa-icon>
+    <fa-icon class="logo" size="96px" .svg=${rwpAnimLogo}></fa-icon>
   </div>
       <div class="level">
         <p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
@@ -620,6 +663,9 @@ class WrIndex extends LitElement
     div.field.has-addons {
       flex: auto;
     }
+    form {
+      flex-grow: 1;
+    }
     button.is-loading {
       line-height: 1.5em;
       height: 1.5em;
@@ -645,46 +691,48 @@ class WrIndex extends LitElement
   render() {
     return html`
     <section class="section no-top-padding">
-      <div class="container">
+      ${!IS_APP ? html`
-        <nav class="panel is-warning">
+      <p class="subtitle has-text-centered">Explore and Replay Interactive Archived Webpages Directly in your Browser.</p>
-          <p class="panel-heading">Load Web Archive</p>
+      ` : ``}
-          <div class="extra-padding panel-block file has-name">
+      <nav class="panel is-warning">
-            <form class="container is-flex" @submit="${this.onStartLoad}">
+        <p class="panel-heading">Load Web Archive</p>
-              <label class="file-label">
+        <div class="extra-padding panel-block file has-name">
-                <input class="file-input"
+          <form class="content is-flex" @submit="${this.onStartLoad}">
-                  @click="${(e) => e.currentTarget.value = null}"
+            <label class="file-label">
-                  @change=${this.onChooseFile} type="file" id="fileupload" name="fileupload">
+              <input class="file-input"
-                <span class="file-cta">
+                @click="${(e) => e.currentTarget.value = null}"
-                  <span class="file-icon">
+                @change=${this.onChooseFile} type="file" id="fileupload" name="fileupload">
-                    <fa-icon size="0.9em" .svg=${fasUpload}></fa-icon>
+              <span class="file-cta">
-                  </span>
+                <span class="file-icon">
-                  <span class="file-label">
+                  <fa-icon size="0.9em" .svg=${fasUpload}></fa-icon>
-                    Choose File...
-                  </span>
                 </span>
-              </label>
+                <span class="file-label">
+                  Choose File...
+                </span>
+              </span>
+            </label>
 
-              <div class="field has-addons">
+            <div class="field has-addons">
-                <p class="control is-expanded">
+              <p class="control is-expanded">
-                  <input class="file-name input" type="text"
+                <input class="file-name input" type="text"
-                  name="filename" id="filename"
+                name="filename" id="filename"
-                  pattern="^((file|http|https|s3):\/\/.*\.(warc|warc.gz|har|zip|waz))|(googledrive:\/\/[^\/\s]+)$"
+                pattern="((file|http|https|s3):\/\/.*\.(warc|warc.gz|har|zip|wacz))|(googledrive:\/\/.+)"
-                  .value="${this.fileDisplayName}"
+                .value="${this.fileDisplayName}"
-                  @input="${this.onInput}"
+                @input="${this.onInput}"
-                  autocomplete="off"
+                autocomplete="off"
-                  placeholder="Choose a local file or enter a URL for a (WARC, HAR, WBN, or ZIP) archive">
+                placeholder="Choose a local file or enter a URL for a (WARC, HAR, WBN, or WACZ) archive">
-                </p>
+              </p>
-                <div class="control">
+              <div class="control">
-                  <button type="submit" class="button is-primary">Load</button>
+                <button type="submit" class="button is-primary">Load</button>
-                </div>
               </div>
+            </div>
 
-            </form>
+          </form>
-          </div>
+        </div>
-        </nav>
+      </nav>
-      </div>
     </section>
-    <section class="container">
+
+    <section class="section no-top-padding">
       <nav class="panel is-light">
         <p class="panel-heading">Loaded Archives</p>
         <div class="coll-list">
@@ -789,7 +837,7 @@ class WrColl extends LitElement
       const newHash = "#" + new URLSearchParams(this.tabData).toString();
       if (newHash !== this._locationHash) {
         this._locationHash = newHash;
-        if (this._replaceLoc) {
+        if (this._replaceLoc || Object.keys(changedProperties.get("tabData")).length === 0) {
           const newLoc = new URL(window.location.href);
           newLoc.hash = this._locationHash;
           window.history.replaceState({}, "", newLoc.href);
@@ -900,13 +948,13 @@ class WrColl extends LitElement
       display: none;
     }
 
-    @media screen and (min-width: 1024px) {
+    @media screen and (min-width: ${!IS_APP ? css`1024px` : css`1134px`}) {
       .tab-label {
         display: inline;
       }
     }
 
-    @media screen and (min-width: 680px) {
+    @media screen and (min-width: ${!IS_APP ? css`680px` : css`850px`}) {
       .main.tabs {
         position: absolute;
         top: 0px;
@@ -997,7 +1045,7 @@ class WrColl extends LitElement
     <wr-coll-resources .collInfo="${this.collInfo}"
     urlSearch="${this.tabData.urlSearch || ""}"
     urlSearchType="${this.tabData.urlSearchType || ""}"
-    .currMime="${this.tabData.currMime}"
+    .currMime="${this.tabData.currMime || ""}"
     @coll-tab-nav="${this.onCollTabNav}" id="resources"
     class="is-paddingless ${this.tabData.view === 'resources' ? '' : 'is-hidden'}">
     </wr-coll-resources>
@@ -1250,7 +1298,7 @@ class WrResources extends LitElement
 {
   static get filters() {
     return [
-      {name: "HTML", filter: "text/html,text/xhtml"},
+      {name: "HTML", filter: ""}, //default
       {name: "Images", filter: "image/"},
       {name: "Audio/Video", filter: "audio/,video/"},
       {name: "PDF", filter: "application/pdf"},
@@ -1306,10 +1354,6 @@ class WrResources extends LitElement
         changedProperties.has("urlSearchType") ||
         changedProperties.has("currMime")) {
 
-      if (!this.currMime) {
-        this.currMime = "text/html,text/xhtml";
-      }
-
       this.doLoadResources();
       const data = {
         urlSearch: this.urlSearch,
@@ -1345,7 +1389,20 @@ class WrResources extends LitElement
       url = "https://" + url;
     }
 
-    const mime = this.currMime === "all" ? "" : this.currMime;
+    let mime;
+
+    switch (this.currMime) {
+      case "all":
+        mime = "";
+        break;
+
+      case "":
+        mime = "text/html,text/xhtml";
+        break;
+
+      default:
+        mime = this.currMime;
+    }
 
     const params = new URLSearchParams({
       mime,
@@ -1753,6 +1810,21 @@ class WrReplayPage extends LitElement
         border-radius: 4px;
       }
 
+      .intro-panel {
+        min-width: 40%;
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+      }
+
+      .intro-panel .panel-heading {
+        font-size: 1.0em;
+      }
+
+      .intro-panel .panel-block {
+        padding: 1.0em;
+      }
+
       #datetime {
         position: absolute;
         right: 1em;
@@ -1776,7 +1848,7 @@ class WrReplayPage extends LitElement
   render() {
     return html`
     ${this.embed !== "replayonly" ? html`
-    <div class="container replay-bar">
+    <div class="replay-bar">
       <form @submit="${this.onSubmit}">
         <div class="field has-addons">
           <a id="fullscreen" class="button is-borderless" @click="${this.onFullscreenToggle}">
@@ -1803,7 +1875,12 @@ class WrReplayPage extends LitElement
     ${this.iframeUrl ? html`
     <iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen"
     src="${this.iframeUrl}"></iframe>
-    ` : ``}
+    ` : html`
+      <nav class="panel intro-panel">
+        <p class="panel-heading">Replay Web Page</p>
+        <p class="panel-block">Enter a URL above to replay it from the web archive!</p>
+      </nav>
+    `}
 
     ${this.isAuthable ? html`
     <div class="modal ${this.showAuth ? 'is-active' : ''}">
@@ -1878,7 +1955,7 @@ class WrGdrive extends LitElement
     try {
       const sourceUrl = this.sourceUrl;
       const fileId = sourceUrl.slice("googledrive://".length);
-      const publicCheckUrl = `${HELPER_PROXY}/g/${fileId}`;
+      const publicCheckUrl = `${__HELPER_PROXY__}/g/${fileId}`;
 
       let resp = null;
       try {
@@ -2007,7 +2084,7 @@ class WrGdrive extends LitElement
   gauth(prompt, callback) {
     gapi.load('auth2', () => {
       gapi.auth2.authorize({
-          client_id: GDRIVE_CLIENT_ID,
+          client_id: __GDRIVE_CLIENT_ID__,
           scope: "https://www.googleapis.com/auth/drive.file",
           response_type: "token",
           prompt

webpack.config.js

@@ -4,12 +4,18 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 // fake url used in app to serve files
 // can not use custom scheme due to service worker issues
-const APP_FILE_SERVE_PREFIX = "https://files.replayweb.page";
+const APP_FILE_SERVE_PREFIX = "http://files.replayweb.page";
+//const APP_FILE_SERVE_PREFIX = "file://files.replayweb.page";
+
+
+// helper proxy URL, run locally for app
+const HELPER_PROXY = "https://helper-proxy.webrecorder.workers.dev";
+
+// GDrive client-id
+const GDRIVE_CLIENT_ID = "160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com";
+
 
 
-// if running in dev-server, build sw.js in dist/sw.js
-// to support hot-reloading, otherwise, build sw.js in root
-const IS_DEV_SERVER = process.env.WEBPACK_DEV_SERVER;
 
 
 const electronMainConfig = (env, argv) => {
@@ -30,6 +36,7 @@ const electronMainConfig = (env, argv) => {
     plugins: [
       new webpack.DefinePlugin({
         __APP_FILE_SERVE_PREFIX__ : JSON.stringify(APP_FILE_SERVE_PREFIX),
+        __HELPER_PROXY__ : JSON.stringify(HELPER_PROXY)
       })
     ]
   }
@@ -63,7 +70,7 @@ const browserConfig = (env, argv) => {
     },
 
     output: {
-      path: path.join(__dirname, 'docs'),
+      path: path.join(__dirname),
       filename: '[name].js',
       libraryTarget: 'self',
       globalObject: 'self',
@@ -78,7 +85,7 @@ const browserConfig = (env, argv) => {
       compress: true,
       port: 9990,
       open: false,
-      contentBase:  path.join(__dirname, 'docs'),
+      contentBase:  path.join(__dirname),
       publicPath: '/'
     },
 
@@ -87,6 +94,8 @@ const browserConfig = (env, argv) => {
       new webpack.DefinePlugin({
         __SW_PATH__: JSON.stringify('./sw.js'),
         __APP_FILE_SERVE_PREFIX__ : JSON.stringify(APP_FILE_SERVE_PREFIX),
+        __HELPER_PROXY__ : JSON.stringify(HELPER_PROXY),
+        __GDRIVE_CLIENT_ID__ : JSON.stringify(GDRIVE_CLIENT_ID)
       }),
     ],
 

yarn.lock

@@ -3514,7 +3514,7 @@ mime-db@1.44.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
   integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
 
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.27"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
   integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
@@ -6063,10 +6063,6 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
-"wombat@github:https://github.com/webrecorder/wombat":
-  version "3.0.0"
-  resolved "https://codeload.github.com/webrecorder/wombat/tar.gz/753ea8dd6ec0e257e21f589cb08a85f6a3f7443c"
-
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"