bundle into single js file!

- remove external css - ensure bulma styles don't rely on html, body
- move logo.svg to be loaded inline
- rename scss -> assets
- remove wombat/wombatWorkers, bundled via raw-loader and sw.js
This commit is contained in:
Ilya Kreymer
2020-05-16 09:34:49 -07:00
parent 4df2f78654
commit 077c8cae19
13 changed files with 78 additions and 557 deletions
+1 -32
View File
@@ -10,7 +10,7 @@
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="logoonly.svg"
inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
id="svg403"
id="wrlogo"
version="1.1"
viewBox="0 0 66.712425 66.712425"
height="66.712425mm"
@@ -40,37 +40,6 @@
xlink:href="#linearGradient5691"
inkscape:collect="always" />
</defs>
<sodipodi:namedview
inkscape:window-maximized="0"
inkscape:window-y="23"
inkscape:window-x="0"
inkscape:window-height="786"
inkscape:window-width="1252"
showgrid="false"
inkscape:document-rotation="0"
inkscape:current-layer="layer1"
inkscape:document-units="mm"
inkscape:cy="520.33335"
inkscape:cx="353.00073"
inkscape:zoom="0.35"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
borderopacity="1.0"
bordercolor="#666666"
pagecolor="#ffffff"
id="base" />
<metadata
id="metadata400">
<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
transform="translate(-12.435223,-10.495135)"
id="layer1"

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

+20 -8
View File
@@ -33,15 +33,27 @@ $navbar-breakpoint: 800px;
overflow-x: hidden;
}
.font-ssp {
font-family: 'Source Code Pro', monospace;
}
.font-ssp-c {
font-family: 'Source Code Pro', monospace;
letter-spacing: -1.5px;
}
@import "../node_modules/bulma/bulma";
// Add html and body styles to :host for webcomponents
:host {
background-color: $body-background-color;
font-size: $body-size;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: $body-min-width;
overflow-x: $body-overflow-x;
overflow-y: $body-overflow-y;
text-rendering: $body-rendering;
text-size-adjust: 100%;
font-family: $body-family;
color: $body-color;
font-size: $body-font-size;
font-weight: $body-weight;
line-height: $body-line-height;
box-sizing: border-box;
overflow: hidden;
}
-2
View File
File diff suppressed because one or more lines are too long
+29 -29
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -2,7 +2,7 @@
<html class="no-overflow">
<head>
<script src="./dist/frontend.js"></script>
<link href="./dist/frontend.css" rel="stylesheet"/>
<!--<link href="./dist/frontend.css" rel="stylesheet"/>-->
</head>
<body>
<app-main></app-main>
+1
View File
@@ -20,6 +20,7 @@
"css-loader": "^3.5.3",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.0",
"raw-loader": "^4.0.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"svg-inline-loader": "^0.8.2",
-17
View File
@@ -1,17 +0,0 @@
html {
scroll-behavior: smooth;
overflow-y: hidden;
}
html.no-overflow {
overflow-y: hidden;
};
body {
height: 100vh;
}
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
+8 -11
View File
@@ -9,12 +9,9 @@ import { register } from 'register-service-worker';
import prettyBytes from 'pretty-bytes';
import marked from 'marked';
import '../scss/base.scss';
import allCssRaw from '../scss/main.scss';
import allCssRaw from '../assets/main.scss';
import rwpLogo from '../assets/logo.svg';
//import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
//import fasInfo 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';
@@ -66,7 +63,7 @@ class AppMain extends LitElement
static get styles() {
return wrapCss(css`
#logo {
#wrlogo {
max-height: 2.5rem;
margin-right: 8px;
}
@@ -100,7 +97,7 @@ class AppMain extends LitElement
<nav class="navbar has-background-info" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item has-text-weight-bold is-size-5 has-allcaps" href="/">
<img id="logo" src="/static/logo.svg"/>
<fa-icon id="wrlogo" size="2.5rem" .svg=${rwpLogo}></fa-icon>
<span class="has-text-primary">replay</span>
<span class="has-text-link">web.page</span>
</a>
@@ -469,7 +466,7 @@ You can select a file to upload from the main page by clicking the \'Choose File
return html`
<section class="container">
<div class="level has-text-centered">
<img class="level-item logo" src="/static/logo.svg"/>
<fa-icon class="level-item logo" size="96px" .svg=${rwpLogo}></fa-icon>
</div>
<div class="level">
<p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
@@ -721,8 +718,8 @@ class WrColl extends LitElement
super();
this.sourceUrl = null;
this.baseApiPrefix = "/wabac/api";
this.baseReplayPrefix = "/wabac";
this.baseApiPrefix = "./wabac/api";
this.baseReplayPrefix = "./wabac";
this.apiPrefix = "";
this.replayPrefix = "";
@@ -2085,7 +2082,7 @@ function registerSW(url) {
});
register(url, {
registrationOptions: { scope: '/' },
registrationOptions: { scope: './' },
ready (registration) {
console.log('Service worker is active.');
resolve();
-1
View File
File diff suppressed because one or more lines are too long
-449
View File
@@ -1,449 +0,0 @@
/**
* Mini wombat for performing URL rewriting within the
* Web/Shared/Service Worker context
* @param {Object} info
* @return {WBWombat}
*/
function WBWombat(info) {
if (!(this instanceof WBWombat)) return new WBWombat(info);
/** @type {Object} */
this.info = info;
this.initImportScriptsRewrite();
this.initHTTPOverrides();
this.initClientApisOverride();
this.initCacheApisOverride();
}
/**
* Returns T/F indicating if the supplied URL is not to be rewritten
* @param {string} url
* @return {boolean}
*/
WBWombat.prototype.noRewrite = function(url) {
return (
!url ||
url.indexOf('blob:') === 0 ||
url.indexOf('javascript:') === 0 ||
url.indexOf('data:') === 0 ||
url.indexOf(this.info.prefix) === 0
);
};
/**
* Returns T/F indicating if the supplied URL is an relative URL
* @param {string} url
* @return {boolean}
*/
WBWombat.prototype.isRelURL = function(url) {
return url.indexOf('/') === 0 || url.indexOf('http:') !== 0;
};
/**
* Attempts to resolve the supplied relative URL against
* the origin this worker was created on
* @param {string} maybeRelURL
* @param {string} against
* @return {string}
*/
WBWombat.prototype.maybeResolveURL = function(maybeRelURL, against) {
if (!against) return maybeRelURL;
try {
var resolved = new URL(maybeRelURL, against);
return resolved.href;
} catch (e) {}
return maybeRelURL;
};
/**
* Returns null to indicate that the supplied URL is not to be rewritten.
* Otherwise returns a URL that can be rewritten
* @param {*} url
* @param {string} resolveAgainst
* @return {?string}
*/
WBWombat.prototype.ensureURL = function(url, resolveAgainst) {
if (!url) return url;
var newURL;
switch (typeof url) {
case 'string':
newURL = url;
break;
case 'object':
newURL = url.toString();
break;
default:
return null;
}
if (this.noRewrite(newURL)) return null;
if (this.isRelURL(newURL)) {
return this.maybeResolveURL(newURL, resolveAgainst);
}
// if url starts with current origin, but not properly rewritten, rewrite against current baseUr
if (newURL.indexOf(self.location.origin) === 0) {
return this.maybeResolveURL(newURL.slice(self.location.origin.length), resolveAgainst);
}
return newURL;
};
/**
* Rewrites the supplied URL
* @param {string} url
* @return {string}
*/
WBWombat.prototype.rewriteURL = function(url) {
var rwURL = this.ensureURL(url, this.info.originalURL);
if (!rwURL) return url;
if (this.info.prefixMod) {
return this.info.prefixMod + rwURL;
}
return rwURL;
};
/**
* Rewrites the supplied URL of an controlled page using the mp\_ modifier
* @param {string} url
* @param {WindowClient} [client]
* @return {string}
*/
WBWombat.prototype.rewriteClientWindowURL = function(url, client) {
var rwURL = this.ensureURL(url, client ? client.url : this.info.originalURL);
if (!rwURL) return url;
if (this.info.prefix) {
return this.info.prefix + 'mp_/' + rwURL;
}
return rwURL;
};
/**
* Mini url rewriter specifically for rewriting web sockets
* @param {?string} originalURL
* @return {string}
*/
WBWombat.prototype.rewriteWSURL = function(originalURL) {
// If undefined, just return it
if (!originalURL) return originalURL;
var urltype_ = typeof originalURL;
var url = originalURL;
// If object, use toString
if (urltype_ === 'object') {
url = originalURL.toString();
} else if (urltype_ !== 'string') {
return originalURL;
}
// empty string check
if (!url) return url;
var wsScheme = 'ws://';
var wssScheme = 'wss://';
var https = 'https://';
var wbSecure = this.info.prefix.indexOf(https) === 0;
var wbPrefix =
this.info.prefix.replace(
wbSecure ? https : 'http://',
wbSecure ? wssScheme : wsScheme
) + 'ws_/';
return wbPrefix + url;
};
/**
* Rewrites all URLs in the supplied arguments object
* @param {Object} argsObj
* @return {Array<string>}
*/
WBWombat.prototype.rewriteArgs = function(argsObj) {
// recreate the original arguments object just with URLs rewritten
var newArgObj = new Array(argsObj.length);
for (var i = 0; i < newArgObj.length; i++) {
newArgObj[i] = this.rewriteURL(argsObj[i]);
}
return newArgObj;
};
/**
* Rewrites the input to one of the Fetch APIs
* @param {*|string|Request} input
* @return {*|string|Request}
*/
WBWombat.prototype.rewriteFetchApi = function(input) {
var rwInput = input;
switch (typeof input) {
case 'string':
rwInput = this.rewriteURL(input);
break;
case 'object':
if (input.url) {
var new_url = this.rewriteURL(input.url);
if (new_url !== input.url) {
// not much we can do here Request.url is read only
// https://developer.mozilla.org/en-US/docs/Web/API/Request/url
rwInput = new Request(new_url, input);
}
} else if (input.href) {
// it is likely that input is either self.location or self.URL
// we cant do anything here so just let it go
rwInput = input.href;
}
break;
}
return rwInput;
};
/**
* Rewrites the input to one of the Cache APIs
* @param {*|string|Request} request
* @return {*|string|Request}
*/
WBWombat.prototype.rewriteCacheApi = function(request) {
var rwRequest = request;
if (typeof request === 'string') {
rwRequest = this.rewriteURL(request);
}
return rwRequest;
};
/**
* Applies an override to the importScripts function
* @see https://html.spec.whatwg.org/multipage/workers.html#dom-workerglobalscope-importscripts
*/
WBWombat.prototype.initImportScriptsRewrite = function() {
if (!self.importScripts) return;
var wombat = this;
var origImportScripts = self.importScripts;
self.importScripts = function importScripts() {
// rewrite the arguments object and call original function via fn.apply
var rwArgs = wombat.rewriteArgs(arguments);
return origImportScripts.apply(this, rwArgs);
};
};
/**
* Applies overrides to the XMLHttpRequest.open and XMLHttpRequest.responseURL
* in order to ensure URLs are rewritten.
*
* Applies an override to window.fetch in order to rewrite URLs and URLs of
* the supplied Request objects used as arguments to fetch.
*
* Applies overrides to window.Request, window.Response, window.EventSource,
* and window.WebSocket in order to ensure URLs they operate on are rewritten.
*
* @see https://xhr.spec.whatwg.org/
* @see https://fetch.spec.whatwg.org/
* @see https://html.spec.whatwg.org/multipage/web-sockets.html#websocket
* @see https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface
*/
WBWombat.prototype.initHTTPOverrides = function() {
var wombat = this;
if (
self.XMLHttpRequest &&
self.XMLHttpRequest.prototype &&
self.XMLHttpRequest.prototype.open
) {
var oXHROpen = self.XMLHttpRequest.prototype.open;
self.XMLHttpRequest.prototype.open = function open(
method,
url,
async,
user,
password
) {
var rwURL = wombat.rewriteURL(url);
var openAsync = true;
if (async != null && !async) openAsync = false;
oXHROpen.call(this, method, rwURL, openAsync, user, password);
if (rwURL.indexOf('data:') === -1) {
this.setRequestHeader('X-Pywb-Requested-With', 'XMLHttpRequest');
}
};
}
if (self.fetch != null) {
// this fetch is Worker.fetch
var orig_fetch = self.fetch;
self.fetch = function fetch(input, init_opts) {
var rwInput = wombat.rewriteFetchApi(input);
var newInitOpts = init_opts || {};
newInitOpts['credentials'] = 'include';
return orig_fetch.call(this, rwInput, newInitOpts);
};
}
if (self.Request && self.Request.prototype) {
var orig_request = self.Request;
self.Request = (function(Request_) {
return function Request(input, init_opts) {
var newInitOpts = init_opts || {};
var newInput = wombat.rewriteFetchApi(input);
newInitOpts['credentials'] = 'include';
return new Request_(newInput, newInitOpts);
};
})(self.Request);
self.Request.prototype = orig_request.prototype;
}
if (self.Response && self.Response.prototype) {
var originalRedirect = self.Response.prototype.redirect;
self.Response.prototype.redirect = function redirect(url, status) {
var rwURL = wombat.rewriteUrl(url);
return originalRedirect.call(this, rwURL, status);
};
}
if (self.EventSource && self.EventSource.prototype) {
var origEventSource = self.EventSource;
self.EventSource = (function(EventSource_) {
return function EventSource(url, configuration) {
var rwURL = url;
if (url != null) {
rwURL = wombat.rewriteUrl(url);
}
return new EventSource_(rwURL, configuration);
};
})(self.EventSource);
self.EventSource.prototype = origEventSource.prototype;
Object.defineProperty(self.EventSource.prototype, 'constructor', {
value: self.EventSource
});
}
if (self.WebSocket && self.WebSocket.prototype) {
var origWebSocket = self.WebSocket;
self.WebSocket = (function(WebSocket_) {
return function WebSocket(url, configuration) {
var rwURL = url;
if (url != null) {
rwURL = wombat.rewriteWSURL(url);
}
return new WebSocket_(rwURL, configuration);
};
})(self.WebSocket);
self.WebSocket.prototype = origWebSocket.prototype;
Object.defineProperty(self.WebSocket.prototype, 'constructor', {
value: self.WebSocket
});
}
};
/**
* Applies an override to Clients.openWindow and WindowClient.navigate that rewrites
* the supplied URL that represents a controlled window
* @see https://w3c.github.io/ServiceWorker/#window-client-interface
* @see https://w3c.github.io/ServiceWorker/#clients-interface
*/
WBWombat.prototype.initClientApisOverride = function() {
var wombat = this;
if (
self.Clients &&
self.Clients.prototype &&
self.Clients.prototype.openWindow
) {
var oClientsOpenWindow = self.Clients.prototype.openWindow;
self.Clients.prototype.openWindow = function openWindow(url) {
var rwURL = wombat.rewriteClientWindowURL(url);
return oClientsOpenWindow.call(this, rwURL);
};
}
if (
self.WindowClient &&
self.WindowClient.prototype &&
self.WindowClient.prototype.navigate
) {
var oWinClientNavigate = self.WindowClient.prototype.navigate;
self.WindowClient.prototype.navigate = function navigate(url) {
var rwURL = wombat.rewriteClientWindowURL(url, this);
return oWinClientNavigate.call(this, rwURL);
};
}
};
/**
* Applies overrides to the CachStorage and Cache interfaces in order
* to rewrite the URLs they operate on
* @see https://w3c.github.io/ServiceWorker/#cachestorage
* @see https://w3c.github.io/ServiceWorker/#cache-interface
*/
WBWombat.prototype.initCacheApisOverride = function() {
var wombat = this;
if (
self.CacheStorage &&
self.CacheStorage.prototype &&
self.CacheStorage.prototype.match
) {
var oCacheStorageMatch = self.CacheStorage.prototype.match;
self.CacheStorage.prototype.match = function match(request, options) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCacheStorageMatch.call(this, rwRequest, options);
};
}
if (self.Cache && self.Cache.prototype) {
if (self.Cache.prototype.match) {
var oCacheMatch = self.Cache.prototype.match;
self.Cache.prototype.match = function match(request, options) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCacheMatch.call(this, rwRequest, options);
};
}
if (self.Cache.prototype.matchAll) {
var oCacheMatchAll = self.Cache.prototype.matchAll;
self.Cache.prototype.matchAll = function matchAll(request, options) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCacheMatchAll.call(this, rwRequest, options);
};
}
if (self.Cache.prototype.add) {
var oCacheAdd = self.Cache.prototype.add;
self.Cache.prototype.add = function add(request, options) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCacheAdd.call(this, rwRequest, options);
};
}
if (self.Cache.prototype.addAll) {
var oCacheAddAll = self.Cache.prototype.addAll;
self.Cache.prototype.addAll = function addAll(requests) {
var rwRequests = requests;
if (Array.isArray(requests)) {
rwRequests = new Array(requests.length);
for (var i = 0; i < requests.length; i++) {
rwRequests[i] = wombat.rewriteCacheApi(requests[i]);
}
}
return oCacheAddAll.call(this, rwRequests);
};
}
if (self.Cache.prototype.put) {
var oCachePut = self.Cache.prototype.put;
self.Cache.prototype.put = function put(request, response) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCachePut.call(this, rwRequest, response);
};
}
if (self.Cache.prototype.delete) {
var oCacheDelete = self.Cache.prototype.delete;
self.Cache.prototype.delete = function newCacheDelete(request, options) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCacheDelete.call(this, rwRequest, options);
};
}
if (self.Cache.prototype.keys) {
var oCacheKeys = self.Cache.prototype.keys;
self.Cache.prototype.keys = function keys(request, options) {
var rwRequest = wombat.rewriteCacheApi(request);
return oCacheKeys.call(this, rwRequest, options);
};
}
}
};
self.WBWombat = WBWombat;
+4 -4
View File
File diff suppressed because one or more lines are too long
+5 -2
View File
@@ -8,8 +8,7 @@ module.exports = (env, argv) => {
entry: {
'frontend': './src/frontend.js',
'embed': './src/embed.js',
'sw': 'wabac/src/sw.js',
'wombat': 'wombat/src/wbWombat.js',
'sw': 'wabac/src/sw.js'
},
output: {
@@ -61,6 +60,10 @@ module.exports = (env, argv) => {
test: /main.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
},
{
test: /wombat.js|wombatWorkers.js$/i,
loaders: ['raw-loader'],
}
]
}
}
+9 -1
View File
@@ -3754,6 +3754,14 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
raw-loader@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.1.tgz#14e1f726a359b68437e183d5a5b7d33a3eba6933"
integrity sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==
dependencies:
loader-utils "^2.0.0"
schema-utils "^2.6.5"
read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -4020,7 +4028,7 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
schema-utils@^2.6.1, schema-utils@^2.6.6:
schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.6.6:
version "2.6.6"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==