Reverted to inline styles

lib/App/registerEventListeners.js

@@ -10,6 +10,7 @@ module.exports = function() {
 	// Recompile styles when modified
 	this.on('style modified', function*() {
 		yield this.loadStyles()
+		yield this.loadPages()
 		yield this.saveCache()
 	})
 

lib/App/routePage.js

@@ -19,11 +19,7 @@ const fastCompressionOptions = {
 
 const mobileMetaTag = '<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">'
 const manifestTag = '<link rel="manifest" href="/manifest.json">'
-
-// const styleTag = '<link rel="stylesheet" href="/styles.css">'
-const styleTag = '<link rel="preload" href="/styles.css" as="style" onload="this.rel=\'stylesheet\'">'
 const scriptTag = '<script src="/scripts.js"></script>'
-const styleLoaderPolyfill = '<script>let _r=document.createElement("link").relList;if(!_r||!_r.supports||!_r.supports("preload")){let l=document.createElement("link");l.href="/styles.css";l.rel="stylesheet";document.head.appendChild(l)}</script>'
 
 module.exports = function(page) {
 	// Register page
@@ -67,7 +63,7 @@ module.exports = function(page) {
 	// Headers
 	const headers = Object.assign({
 		'Content-Type': 'text/html;charset=utf-8',
-		'Link': '</styles.css>; rel=preload; as=style,</scripts.js>; rel=preload; as=script',
+		'Link': '</scripts.js>; rel=preload; as=script',
 		'Vary': 'Accept-Encoding',
 		'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
 		// 'Content-Security-Policy-Report-Only': 'default-src https:',
@@ -105,11 +101,13 @@ module.exports = function(page) {
 		}
 	}
 
+	const styleTag = `<style>${this.combinedCSS}</style>`
+
 	const renderLayoutTemplate = params => {
 		// Hacky, but works for now™
 		return this.layout.template(params)
 		.replace('</head><body', `${mobileMetaTag}${manifestTag}${styleTag}</head><body`)
-		.replace('</body></html>', `${styleLoaderPolyfill}${scriptTag}</body></html>`)
+		.replace('</body></html>', `${scriptTag}</body></html>`)
 	}
 
 	// Display template error messages

lib/App/routeScripts.js

@@ -2,7 +2,7 @@ const compress = require('brotli').compress
 const etag = require('etag')
 
 module.exports = function() {
-	let js = '"use strict";' + (this.liveReload ? this.liveReload.script : '') + this.pluginScripts.join(';') + this.js.map(script => script.code).join(';')
+	this.combinedJS = '"use strict";' + (this.liveReload ? this.liveReload.script : '') + this.pluginScripts.join(';') + this.js.map(script => script.code).join(';')
 
 	// Headers
 	this.compressedScriptsHeaders = {
@@ -12,11 +12,11 @@ module.exports = function() {
 
 	// Compress
 	try {
-		this.compressedScripts = Buffer.from(compress(Buffer.from(js)))
+		this.compressedScripts = Buffer.from(compress(Buffer.from(this.combinedJS)))
 		this.compressedScriptsHeaders['Content-Encoding'] = 'br'
 		this.compressedScriptsHeaders['Content-Length'] = this.compressedScripts.length
 	} catch(_) {
-		this.compressedScripts = js
+		this.compressedScripts = this.combinedJS
 		this.compressedScriptsHeaders['Content-Length'] = Buffer.byteLength(this.compressedScripts, 'utf8')
 	}
 
@@ -30,7 +30,20 @@ module.exports = function() {
 			return
 		}
 
-		response.writeHead(200, this.compressedScriptsHeaders)
-		response.end(this.compressedScripts)
+		let acceptEncoding = request.headers['accept-encoding']
+
+		// This is a bit hacky but it works for now™
+		if(acceptEncoding && acceptEncoding.indexOf('br') !== -1) {
+			response.writeHead(200, this.compressedScriptsHeaders)
+			response.end(this.compressedScripts)
+		} else {
+			// For older browsers
+			response.writeHead(200, {
+				'Content-Type': 'application/javascript',
+				'Cache-Control': 'max-age=864000',
+				'Content-Length': Buffer.byteLength(this.combinedJS, 'utf8')
+			})
+			response.end(this.combinedJS)
+		}
 	}
 }

lib/App/routeStyles.js

@@ -2,13 +2,13 @@ const compress = require('brotli').compress
 const etag = require('etag')
 
 module.exports = function() {
-	let css = this.pluginStyles.join(' ') + this.css.map(style => style.code).join(' ')
+	this.combinedCSS = this.pluginStyles.join(' ') + this.css.map(style => style.code).join(' ')
 
 	if(this.layout.css)
-		css += this.layout.css
+		this.combinedCSS += this.layout.css
 
 	if(this.fontsCSS)
-		css = this.fontsCSS + css
+		this.combinedCSS = this.fontsCSS + this.combinedCSS
 
 	// Headers
 	this.compressedStylesHeaders = {
@@ -18,11 +18,11 @@ module.exports = function() {
 
 	// Compress
 	try {
-		this.compressedStyles = Buffer.from(compress(Buffer.from(css)))
+		this.compressedStyles = Buffer.from(compress(Buffer.from(this.combinedCSS)))
 		this.compressedStylesHeaders['Content-Encoding'] = 'br'
 		this.compressedStylesHeaders['Content-Length'] = this.compressedStyles.length
 	} catch(_) {
-		this.compressedStyles = css
+		this.compressedStyles = this.combinedCSS
 		this.compressedStylesHeaders['Content-Length'] = Buffer.byteLength(this.compressedStyles, 'utf8')
 	}
 
@@ -36,7 +36,20 @@ module.exports = function() {
 			return
 		}
 
-		response.writeHead(200, this.compressedStylesHeaders)
-		response.end(this.compressedStyles)
+		let acceptEncoding = request.headers['accept-encoding']
+
+		// This is a bit hacky but it works for now™
+		if(acceptEncoding && acceptEncoding.indexOf('br') !== -1) {
+			response.writeHead(200, this.compressedStylesHeaders)
+			response.end(this.compressedStyles)
+		} else {
+			// For older browsers
+			response.writeHead(200, {
+				'Content-Type': 'text/css',
+				'Cache-Control': 'max-age=864000',
+				'Content-Length': Buffer.byteLength(this.combinedCSS, 'utf8')
+			})
+			response.end(this.combinedCSS)
+		}
 	}
 }