Merge branch 'master' into site/deps

site/Dockerfile

@@ -1,4 +1,4 @@
-FROM mhart/alpine-node:10.15
+FROM mhart/alpine-node:11.14
 
 # install dependencies
 WORKDIR /app
@@ -12,7 +12,7 @@ RUN npm install --production
 # Only copy over the Node pieces we need
 # ~> Saves 35MB
 ###
-FROM mhart/alpine-node:base-10.15
+FROM mhart/alpine-node:base-11.14
 
 WORKDIR /app
 COPY --from=0 /app .

site/package-lock.json

@@ -3246,16 +3246,6 @@
       "integrity": "sha512-WHq43gS+6ufNOEqlrDBxVEbb8ntfXrfAUU2ZOpCxrBdGKW3gyv8mCxAfIBD0DroPKGrJ2eSsXsLtY9MPntsyTw==",
       "dev": true
     },
-    "globalyzer": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.4.tgz",
-      "integrity": "sha512-LeguVWaxgHN0MNbWC6YljNMzHkrCny9fzjmEUdnF1kQ7wATFD1RHFRqA1qxaX2tgxGENlcxjOflopBwj3YZiXA=="
-    },
-    "globrex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
-    },
     "golden-fleece": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
@@ -5227,13 +5217,12 @@
       "dev": true
     },
     "sirv": {
-      "version": "0.2.4",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-0.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-0.3.1.tgz",
-      "integrity": "sha512-0YaLzpD6dPiJZUqDEwDqk9NLGZDm/nNWvpg8Rym+3hdt5pWGRrlggjjt1KtF0+tZgGtyI4F5f5JZ9XTCp53Oqw==",
+      "integrity": "sha512-03p4fuXPfhlNrDjUBw5bGF//4i0Rjwf7hVm8XhuKgeguHGQPr4pV+lgAJZKSP9BaJKn+QG9QvTxLX1wSYshccg==",
       "requires": {
         "@polka/url": "^0.5.0",
-        "mime": "^2.3.1",
+        "mime": "^2.3.1"
-        "tiny-glob": "^0.2.0"
       },
       "dependencies": {
         "mime": {
@@ -5617,15 +5606,6 @@
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
       "optional": true
     },
-    "tiny-glob": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.6.tgz",
-      "integrity": "sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw==",
-      "requires": {
-        "globalyzer": "^0.1.0",
-        "globrex": "^0.1.1"
-      }
-    },
     "tinycolor2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",

site/package.json

@@ -28,7 +28,7 @@
     "prismjs": "^1.15.0",
     "session-file-store": "^1.2.0",
     "shelljs": "^0.8.3",
-    "sirv": "^0.2.2",
+    "sirv": "^0.3.1",
     "yootils": "0.0.14"
   },
   "devDependencies": {

site/src/components/PreloadingIndicator.svelte

@@ -0,0 +1,64 @@
+<script>
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	let p = 0;
+
+	const sleep = ms => new Promise(f => setTimeout(f, ms));
+
+	onMount(() => {
+		let running = true;
+
+		function next() {
+			p += 0.1;
+
+			const remaining = 1 - p;
+			if (remaining > 0.15) setTimeout(next, 500 / remaining);
+		}
+
+		setTimeout(next, 250);
+
+		return () => {
+			running = false;
+		};
+	});
+</script>
+
+<style>
+	.progress-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 4px;
+		z-index: 999;
+	}
+
+	.progress {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background-color: var(--prime);
+		transition: width 0.4s;
+	}
+
+	.fade {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(255,255,255,0.3);
+		pointer-events: none;
+		z-index: 998;
+	}
+</style>
+
+{#if p > 0}
+	<div class="progress-container" transition:fade>
+		<div class="progress" style="width: {p * 100}%"></div>
+	</div>
+{/if}
+
+{#if p >= 0.4}
+	<div class="fade" in:fade={{duration:800}}></div>
+{/if}

site/src/routes/_layout.svelte

@@ -1,11 +1,16 @@
 <script>
-	import { page } from '@sapper/app';
+	import { page, preloading } from '@sapper/app';
 	import InlineSvg from '../components/InlineSvg.svelte';
+	import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
 	import Nav from '../components/TopNav.svelte';
 
 	export let segment;
 </script>
 
+{#if $preloading}
+	<PreloadingIndicator/>
+{/if}
+
 <InlineSvg />
 {#if $page.path !== '/repl/embed'}
 	<Nav {segment}/>

site/src/server.js

@@ -1,9 +1,10 @@
+import 'dotenv/config';
+import sirv from 'sirv';
 import express from 'express';
 import session from 'express-session';
 import passport from 'passport';
 import { Strategy } from 'passport-github';
 import sessionFileStore from 'session-file-store';
-import serve from 'serve-static';
 import devalue from 'devalue';
 import * as sapper from '@sapper/server';
 
@@ -91,7 +92,12 @@ if (process.env.GITHUB_CLIENT_ID) {
 }
 
 app.use(
-	serve('static', { setHeaders: res => res.setHeader('Access-Control-Allow-Origin', '*') }),
+	sirv('static', {
+		setHeaders(res) {
+			res.setHeader('Access-Control-Allow-Origin', '*');
+			res.hasHeader('Cache-Control') || res.setHeader('Cache-Control', 'max-age=600'); // 10min default
+		}
+	}),
 	sapper.middleware({
 		// TODO update Sapper so that we can pass props to the client
 		props: req => {