dont do prerendering inside here anymore, automatically make webp images

default.nix

@@ -1,4 +1,4 @@
-{ pkgs, google-chrome, symlinkJoin, stdenv, elmPackages, libjpeg, optipng, pngquant, ... }:
+{ pkgs, google-chrome, symlinkJoin, stdenv, elmPackages, libjpeg, optipng, pngquant, libwebp, ... }:
 
 let
   pnpm2nix = pkgs.callPackage (builtins.fetchGit {
@@ -65,6 +65,14 @@ let
           ln -s ${libjpeg}/bin/jpegtran $HOME/node_modules/jpegtran-bin/vendor/jpegtran
         '';
       }));
+
+
+      cwebp-bin = (drv: drv.overrideAttrs(oldAttrs: {
+        buildPhase = ''
+          mkdir -p $HOME/node_modules/cwebp-bin/vendor/
+          ln -s ${libwebp}/bin/cwebp $HOME/node_modules/cwebp-bin/vendor/cwebp
+        '';
+      }));
     };
   };
 

package.json

@@ -7,9 +7,9 @@
     "favicons-webpack-plugin": "^1.0.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "imagemin-webp-webpack-plugin": "^3.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "jsdom": "^15.2.1",
-    "prerender-spa-plugin": "^3.4.0",
     "style-loader": "^1.1.3",
     "tempy": "^0.3.0",
     "terser-webpack-plugin": "^2.3.5",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ dependencies:
   favicons-webpack-plugin: 1.0.2_webpack@4.41.6
   html-loader: 0.5.5
   html-webpack-plugin: 3.2.0_webpack@4.41.6
+  imagemin-webp-webpack-plugin: 3.3.1
   imagemin-webpack-plugin: 2.4.2
   jsdom: 15.2.1
   prerender-spa-plugin: 3.4.0
@@ -108,7 +109,7 @@ packages:
       '@jimp/custom': 0.5.4
       '@jimp/utils': 0.5.0
       core-js: 2.6.11
-      jpeg-js: 0.3.6
+      jpeg-js: 0.3.7
     dev: false
     peerDependencies:
       '@jimp/custom': '>=0.3.5'
@@ -1927,7 +1928,7 @@ packages:
       icss-utils: 4.1.1
       loader-utils: 1.2.3
       normalize-path: 3.0.0
-      postcss: 7.0.26
+      postcss: 7.0.27
       postcss-modules-extract-imports: 2.0.0
       postcss-modules-local-by-default: 3.0.2
       postcss-modules-scope: 2.1.1
@@ -2022,6 +2023,18 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha1-mI3zP+qxke95mmE2nddsF635V+o=
+  /cwebp-bin/5.1.0:
+    dependencies:
+      bin-build: 3.0.0
+      bin-wrapper: 4.1.0
+      logalot: 2.1.0
+    dev: false
+    engines:
+      node: '>=6'
+    hasBin: true
+    requiresBuild: true
+    resolution:
+      integrity: sha512-BsPKStaNr98zfxwejWWLIGELbPERULJoD2v5ijvpeutSAGsegX7gmABgnkRK7MUucCPROXXfaPqkLAwI509JzA==
   /cyclist/1.0.1:
     dev: false
     resolution:
@@ -2082,7 +2095,7 @@ packages:
       integrity: sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=
   /decompress-response/4.2.1:
     dependencies:
-      mimic-response: 2.0.0
+      mimic-response: 2.1.0
     dev: false
     engines:
       node: '>=8'
@@ -3868,7 +3881,7 @@ packages:
       integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   /icss-utils/4.1.1:
     dependencies:
-      postcss: 7.0.26
+      postcss: 7.0.27
     dev: false
     engines:
       node: '>= 6'
@@ -3950,6 +3963,23 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-+iGJFaPIMx8TjFW6zN+EkOhlqcemdL7F3N3Y0wODvV2kCUBuUtZK7DRZc1+Zfu4U2W/lTMUyx2G8YMOrZntIWg==
+  /imagemin-webp-webpack-plugin/3.3.1:
+    dependencies:
+      imagemin: 6.1.0
+      imagemin-webp: 5.1.0
+    dev: false
+    resolution:
+      integrity: sha512-9AZE61DfOVOa8Yl4kiezTEBN3O9cmTbpvAueOAoxrU3lvaQWgDgfl7Z8CLHI+tglwbt//e5/RbF2ZQu5TKHDGQ==
+  /imagemin-webp/5.1.0:
+    dependencies:
+      cwebp-bin: 5.1.0
+      exec-buffer: 3.2.0
+      is-cwebp-readable: 2.0.1
+    dev: false
+    engines:
+      node: '>=6'
+    resolution:
+      integrity: sha512-BsPTpobgbDPFBBsI3UflnU/cpIVa15qInEDBcYBw16qI/6XiB4vDF/dGp9l4aM3pfFDDYqR0mANMcKpBD7wbCw==
   /imagemin-webpack-plugin/2.4.2:
     dependencies:
       '@types/imagemin-gifsicle': 5.2.0
@@ -4173,6 +4203,12 @@ packages:
       node: '>= 0.4'
     resolution:
       integrity: sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
+  /is-cwebp-readable/2.0.1:
+    dependencies:
+      file-type: 4.4.0
+    dev: false
+    resolution:
+      integrity: sha1-r7k7DAq9CiUQEBauM66ort+SbSY=
   /is-data-descriptor/0.1.4:
     dependencies:
       kind-of: 3.2.2
@@ -4498,10 +4534,10 @@ packages:
     dev: false
     resolution:
       integrity: sha1-U+RI7J0mPmgyZkZ+lELSxaLvVII=
-  /jpeg-js/0.3.6:
+  /jpeg-js/0.3.7:
     dev: false
     resolution:
-      integrity: sha512-MUj2XlMB8kpe+8DJUGH/3UJm4XpI8XEgZQ+CiHDeyrGoKPdW/8FJv6ku+3UiYm5Fz3CWaL+iXmD8Q4Ap6aC1Jw==
+      integrity: sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==
   /jpegtran-bin/4.0.0:
     dependencies:
       bin-build: 3.0.0
@@ -5073,12 +5109,12 @@ packages:
       node: '>=4'
     resolution:
       integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
-  /mimic-response/2.0.0:
+  /mimic-response/2.1.0:
     dev: false
     engines:
       node: '>=8'
     resolution:
-      integrity: sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==
+      integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
   /min-document/2.19.0:
     dependencies:
       dom-walk: 0.1.1
@@ -6000,7 +6036,7 @@ packages:
       integrity: sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
   /postcss-modules-extract-imports/2.0.0:
     dependencies:
-      postcss: 7.0.26
+      postcss: 7.0.27
     dev: false
     engines:
       node: '>= 6'
@@ -6009,7 +6045,7 @@ packages:
   /postcss-modules-local-by-default/3.0.2:
     dependencies:
       icss-utils: 4.1.1
-      postcss: 7.0.26
+      postcss: 7.0.27
       postcss-selector-parser: 6.0.2
       postcss-value-parser: 4.0.2
     dev: false
@@ -6019,7 +6055,7 @@ packages:
       integrity: sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
   /postcss-modules-scope/2.1.1:
     dependencies:
-      postcss: 7.0.26
+      postcss: 7.0.27
       postcss-selector-parser: 6.0.2
     dev: false
     engines:
@@ -6029,7 +6065,7 @@ packages:
   /postcss-modules-values/3.0.0:
     dependencies:
       icss-utils: 4.1.1
-      postcss: 7.0.26
+      postcss: 7.0.27
     dev: false
     resolution:
       integrity: sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
@@ -6047,7 +6083,7 @@ packages:
     dev: false
     resolution:
       integrity: sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
-  /postcss/7.0.26:
+  /postcss/7.0.27:
     dependencies:
       chalk: 2.4.2
       source-map: 0.6.1
@@ -6056,7 +6092,7 @@ packages:
     engines:
       node: '>=6.0.0'
     resolution:
-      integrity: sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==
+      integrity: sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
   /prebuild-install/5.3.3:
     dependencies:
       detect-libc: 1.0.3
@@ -8499,6 +8535,7 @@ specifiers:
   favicons-webpack-plugin: ^1.0.2
   html-loader: ^0.5.5
   html-webpack-plugin: ^3.2.0
+  imagemin-webp-webpack-plugin: ^3.3.1
   imagemin-webpack-plugin: ^2.4.2
   jsdom: ^15.2.1
   prerender-spa-plugin: ^3.4.0

webpack.config.js

@@ -1,11 +1,10 @@
 const path = require('path')
 const TerserPlugin = require('terser-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const PrerenderSPAPlugin = require('prerender-spa-plugin')
-const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 const CopyPlugin = require('copy-webpack-plugin')
 const { InjectManifest } = require('workbox-webpack-plugin')
 const ImageminPlugin = require('imagemin-webpack-plugin').default
+const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const { JSDOM } = require('jsdom')
 const tempy = require('tempy')
@@ -18,8 +17,6 @@ const magicFile = (text) => {
   return p
 }
 
-// const magicAppend = (orig, text, sep = '\n') => magicFile(fs.readFileSync(orig) + sep + text)
-
 const jsMin = {
   mangle: true,
   compress: {
@@ -50,37 +47,7 @@ const htmlMin = {
   sortClassName: true,
 }
 
-prerenderOpts = (width, height, name) => ({
-  outputDir: path.join(__dirname, 'dist', 'prerender', name),
-  staticDir: path.join(__dirname, 'dist'),
-  routes: ROUTES,
-  minify: htmlMin,
-  renderer: new Renderer({
-    renderAfterTime: 300,
-    viewport: {
-      width: width,
-      height: height,
-      deviceScaleFactor: 1,
-    }
-  }),
-  postProcess(renderedRoute) {
-    const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
-    dom.window.eval(`
-        const wandTarget = document.createElement('script')
-        wandTarget.src = '/wand.js'
-        document.body.appendChild(wandTarget)
-      `)
-    return {
-      ...renderedRoute,
-      html: dom.serialize(),
-    }
-  }
-})
-
 const productionPlugins = [
-  new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
-  new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
-  new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
   new InjectManifest({
     importWorkboxFrom: 'local',
     swSrc: magicFile(`
@@ -96,6 +63,25 @@ const productionPlugins = [
     jpegtran: { progressive: true },
     svgo: null,
   }),
+  new ImageminWebpWebpackPlugin({
+    config: [{
+      test: /\.jpe?g/,
+      options: {
+        force: true,
+        quality: 75
+      }
+    }, {
+      test: /\.png/,
+      options: {
+        force: true,
+        lossless: true
+      }
+    }],
+    overrideExtension: false,
+    detailedLogs: false,
+    silent: true,
+    strict: true,
+  }),
   new FaviconsWebpackPlugin({
     logo: path.join(__dirname, 'data', 'images', 'icon.png'),
     inject: false, // manually in our template for now cos its fuckd