add thumbnails to examples page

site/package-lock.json

@@ -702,6 +702,16 @@
         "regexpu-core": "^4.1.3"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.2.5.tgz",
+      "integrity": "sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.5.7",
+        "regenerator-runtime": "^0.12.0"
+      }
+    },
     "@babel/preset-env": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.3.1.tgz",
@@ -818,6 +828,312 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@jimp/bmp": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.6.0.tgz",
+      "integrity": "sha512-zZOcVT1zK/1QL5a7qirkzPPgDKB1ianER7pBdpR2J71vx/g8MnrPbL3h/jEVPxjdci2Hph/VWhc/oLBtTbqO8w==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "bmp-js": "^0.1.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/core": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/core/-/core-0.6.0.tgz",
+      "integrity": "sha512-ngAkyCLtX7buc2QyFy0ql/j4R2wGYQVsVhW2G3Y0GVAAklRIFIUYpyNKrqs228xA8f2O6XStbDStFlYkt7uNeg==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "any-base": "^1.1.0",
+        "buffer": "^5.2.0",
+        "core-js": "^2.5.7",
+        "exif-parser": "^0.1.12",
+        "file-type": "^9.0.0",
+        "load-bmfont": "^1.3.1",
+        "mkdirp": "0.5.1",
+        "phin": "^2.9.1",
+        "pixelmatch": "^4.0.2",
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@jimp/custom": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.6.0.tgz",
+      "integrity": "sha512-+YZIWhf03Rfbi+VPbHomKInu3tcntF/aij/JrIJd1QZq13f8m3mRNxakXupiL18KH0C8BPNDk8RiwFX+HaOw3A==",
+      "dev": true,
+      "requires": {
+        "@jimp/core": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/gif": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/gif/-/gif-0.6.0.tgz",
+      "integrity": "sha512-aWQ02P0ymTN1eh0BVsY+84wMdb/QeiVpCNQZl9y50cRnpuMM8TTmF/ZdCEBDiTRFcwXzHsqBXcLwEcYp3X2lTw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "omggif": "^1.0.9"
+      }
+    },
+    "@jimp/jpeg": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.6.0.tgz",
+      "integrity": "sha512-quYb+lM4h57jQvr2q9dEIkc0laTljws4dunIdFhJRfa5UlNL5mHInk8h5MxyALo0mZdT07TAcxiDHw5QXZ28JQ==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "jpeg-js": "^0.3.4"
+      }
+    },
+    "@jimp/plugin-blit": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.6.0.tgz",
+      "integrity": "sha512-LjiCa+8OT2fgmvBpZt0ogurg/eu5kB8ZFWDRwHPcf8i+058sZC20dar/qrjVd5Knssq4ynjb5oAHsGuJq16Rqw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-blur": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.6.0.tgz",
+      "integrity": "sha512-/vjGcEiHda6OLTCYqXPFkfSTbL+RatZoGcp1vewcWqChUccn9QVINTlxB7nEI/3Nb/i7KdhOPNEQh1k6q6QXsw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-color": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.6.0.tgz",
+      "integrity": "sha512-mvDeAwN8ZpDkOaABMJ0w9zUzo9OOtu1qvvPkSirXDTMiXt1nsbfz8BoeoD7nU2MFhQj5MiGjH65UDnsH5ZzYuw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@jimp/plugin-contain": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-contain/-/plugin-contain-0.6.0.tgz",
+      "integrity": "sha512-gPHnoQkDztMbvnTVo01BaMoM/hhDJdeJ7FRToD4p4Qvdor4V0I6NXtjOeUPXfD94miTgh/UTyJDqeG4GZzi4sA==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-cover": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-cover/-/plugin-cover-0.6.0.tgz",
+      "integrity": "sha512-iv9lA2v3qv+x3eaTThtyzFg+hO8/pSnM8NBymC5OlpSJnR54aWi7BVFXLJAF27T4EZyXko432PVul2IdY3BEPw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-crop": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.6.0.tgz",
+      "integrity": "sha512-YftdmFZ2YnZDYyBulkStCt2MZbKKfbjytkE+6i3Djk2b/Rfryg5xjgzVnAumCRQJhVPukexrnc2V7KKbEgx7mQ==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-displace": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-displace/-/plugin-displace-0.6.0.tgz",
+      "integrity": "sha512-kkva5Fy3r7J7QmiqYQ5c9NeUKKkN7+KSfCGsZ6tkRHK4REMIXhQO/OnJN8XG6RReV29O6QykdyeTXDiHUDiROw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-dither": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-dither/-/plugin-dither-0.6.0.tgz",
+      "integrity": "sha512-ILSG7bl3SOqmcIa9C4nBvs0h0E0ObnMbeKWUZiNuz6i0OAlbxryiIfU4j0UVQD5XqT9ksC5mviVNrvOMw4SZLw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-flip": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-flip/-/plugin-flip-0.6.0.tgz",
+      "integrity": "sha512-MXGGwABjERvfqVadEzJuVAmbsEQfjxXD0O/mMBegU1Qh7/JmnKAVplQCnojsMPxUdao/FKZjQqOnB/j4LLJtOQ==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-gaussian": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-gaussian/-/plugin-gaussian-0.6.0.tgz",
+      "integrity": "sha512-RUsBCyj6Ukxgn/TU8v6c6WRbSFqKM0iknLVqDkKIuiOyJB7ougv66fqomh/i/h3ihIkEnf50BuO0c3ovrczfvw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-invert": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-invert/-/plugin-invert-0.6.0.tgz",
+      "integrity": "sha512-zTCqK8el6eqcNKAxw0y57gHBFgxygI5iM8dQDPyqsvVWO71i8XII7ubnJhEvPPN7vhIKlOSnS9XXglezvJoX4Q==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-mask": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-mask/-/plugin-mask-0.6.0.tgz",
+      "integrity": "sha512-zkZVqAA7lxWhkn5EbPjBQ6tPluYIGfLMSX4kD1gksj+MVJJnVAd459AVuEXCvkUvv4wG5AlH8m6ve5NZj9vvxw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-normalize": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-normalize/-/plugin-normalize-0.6.0.tgz",
+      "integrity": "sha512-7bNGT+S0rw9gvmxpkNsA19JSqBZYFrAn9QhEmoN4HIimdKtJaoLJh/GnxrPuOBLuv1IPJntoTOOWvOmfrQ6/ww==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-print": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-print/-/plugin-print-0.6.0.tgz",
+      "integrity": "sha512-kXNHYo7bGQiMZkUqhCvm6OomjJtZnLGs7cgXp9qsCfPcDBLLW+X3oxnoLaePQMlpQt6hX/lzFnNaWKv/KB1jlA==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "load-bmfont": "^1.4.0"
+      }
+    },
+    "@jimp/plugin-resize": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.6.0.tgz",
+      "integrity": "sha512-m0AA/mPkJG++RuftBFDUMRenqgIN/uSh88Kqs33VURYaabApni4ML3QslE1TCJtl2Lnu1eosxYlbzODjHx49eg==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-rotate": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.6.0.tgz",
+      "integrity": "sha512-1QGlIisyxs2HNLuynq/ETc4h7E6At3yR+IYAhG9U4KONG4RqlIy0giyDhnfEZaiqOE+O7f+0Z7zN6GoSHmQjzg==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-scale": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.6.0.tgz",
+      "integrity": "sha512-le/ttYwYioNPRoMlMaoJMCTv+m8d1v0peo/3J8E6Rf9ok7Bw3agkvjL9ILnsmr8jXj1YLrBSPKRs5nJ6ziM/qA==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugins": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugins/-/plugins-0.6.0.tgz",
+      "integrity": "sha512-9+znfBJM1B31kvw+IcQFnAuDntQhwca/SONFnKOSZ8BNiQdiuTNbXHFxOo3tvdv1ngtB+LkkiTgK+QoF358b8g==",
+      "dev": true,
+      "requires": {
+        "@jimp/plugin-blit": "^0.6.0",
+        "@jimp/plugin-blur": "^0.6.0",
+        "@jimp/plugin-color": "^0.6.0",
+        "@jimp/plugin-contain": "^0.6.0",
+        "@jimp/plugin-cover": "^0.6.0",
+        "@jimp/plugin-crop": "^0.6.0",
+        "@jimp/plugin-displace": "^0.6.0",
+        "@jimp/plugin-dither": "^0.6.0",
+        "@jimp/plugin-flip": "^0.6.0",
+        "@jimp/plugin-gaussian": "^0.6.0",
+        "@jimp/plugin-invert": "^0.6.0",
+        "@jimp/plugin-mask": "^0.6.0",
+        "@jimp/plugin-normalize": "^0.6.0",
+        "@jimp/plugin-print": "^0.6.0",
+        "@jimp/plugin-resize": "^0.6.0",
+        "@jimp/plugin-rotate": "^0.6.0",
+        "@jimp/plugin-scale": "^0.6.0",
+        "core-js": "^2.5.7",
+        "timm": "^1.6.1"
+      }
+    },
+    "@jimp/png": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/png/-/png-0.6.0.tgz",
+      "integrity": "sha512-DBtMyQyrJxuKI7/1dVqLek+rCMM8U6BSOTHgo05wU7lhJKTB6fn2tbYfsnHQKzd9ld1M2qKuC+O1GTVdB2yl6w==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "pngjs": "^3.3.3"
+      }
+    },
+    "@jimp/tiff": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/tiff/-/tiff-0.6.0.tgz",
+      "integrity": "sha512-PV95CquEsolFziq0zZrAEJIzZSKwMK89TvkOXTPDi/xesgdXGC2rtG1IZFpC9L4UX5hi/M5GaeJa49xULX6Nqw==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.5.7",
+        "utif": "^2.0.1"
+      }
+    },
+    "@jimp/types": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/types/-/types-0.6.0.tgz",
+      "integrity": "sha512-j4tm82huEWpLrwave/2NYnMTY6us/6K9Js6Vd/CHoM/ki8M71tMXEVzc8tly92wtnEzQ9+FEk0Ue6pYo68m/5A==",
+      "dev": true,
+      "requires": {
+        "@jimp/bmp": "^0.6.0",
+        "@jimp/gif": "^0.6.0",
+        "@jimp/jpeg": "^0.6.0",
+        "@jimp/png": "^0.6.0",
+        "@jimp/tiff": "^0.6.0",
+        "core-js": "^2.5.7",
+        "timm": "^1.6.1"
+      }
+    },
+    "@jimp/utils": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/utils/-/utils-0.6.0.tgz",
+      "integrity": "sha512-z5iYEfqc45vlYweROneNkjv32en6jS7lPL/eMLIvaEcQAHaoza20Dw8fUoJ0Ht9S92kR74xeTunAZq+gK2w67Q==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.5.7"
+      }
+    },
     "@polka/url": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
@@ -865,6 +1181,12 @@
         "color-convert": "^1.9.0"
       }
     },
+    "any-base": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
+      "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==",
+      "dev": true
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@@ -1016,12 +1338,24 @@
         }
       }
     },
+    "base64-js": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
+      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
+      "dev": true
+    },
     "binary-extensions": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.0.tgz",
       "integrity": "sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==",
       "dev": true
     },
+    "bmp-js": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
+      "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM=",
+      "dev": true
+    },
     "body-parser": {
       "version": "1.18.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
@@ -1088,6 +1422,22 @@
         "node-releases": "^1.1.3"
       }
     },
+    "buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
+      "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4"
+      }
+    },
+    "buffer-equal": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
+      "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -1370,6 +1720,12 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "core-js": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1503,6 +1859,12 @@
       "resolved": "https://registry.npmjs.org/do-not-zip/-/do-not-zip-1.0.0.tgz",
       "integrity": "sha512-Pgd81ET43bhAGaN2Hq1zluSX1FmD7kl7KcV9ER/lawiLsRUB9pRA5y8r6us29Xk6BrINZETO8TjhYwtwafWUww=="
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
+      "dev": true
+    },
     "dotenv": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
@@ -1615,6 +1977,12 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exif-parser": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
+      "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=",
+      "dev": true
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -1840,6 +2208,12 @@
         }
       }
     },
+    "file-type": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-9.0.0.tgz",
+      "integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw==",
+      "dev": true
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -1892,6 +2266,15 @@
         "locate-path": "^3.0.0"
       }
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2576,6 +2959,16 @@
         }
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dev": true,
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
     "globals": {
       "version": "11.10.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.10.0.tgz",
@@ -2722,6 +3115,12 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "ieee754": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
+      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
+      "dev": true
+    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -2891,6 +3290,12 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=",
+      "dev": true
+    },
     "is-glob": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
@@ -3016,6 +3421,25 @@
         }
       }
     },
+    "jimp": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/jimp/-/jimp-0.6.0.tgz",
+      "integrity": "sha512-RYpN+AAlTEMf8Bnkhq2eeTNyr70rDK/2UUfUqzBJmwmZwdR6fxRJvgbCGWT1BDVRxaAqo+4CWm8ePBxOIsr4jg==",
+      "dev": true,
+      "requires": {
+        "@babel/polyfill": "^7.0.0",
+        "@jimp/custom": "^0.6.0",
+        "@jimp/plugins": "^0.6.0",
+        "@jimp/types": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "jpeg-js": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.3.4.tgz",
+      "integrity": "sha512-6IzjQxvnlT8UlklNmDXIJMWxijULjqGrzgqc0OG7YadZdvm7KPQ1j0ehmQQHckgEWOfgpptzcnWgESovxudpTA==",
+      "dev": true
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -3078,6 +3502,22 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "load-bmfont": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.0.tgz",
+      "integrity": "sha512-kT63aTAlNhZARowaNYcY29Fn/QYkc52M3l6V1ifRcPewg2lvUZDAj7R6dXjOL9D0sict76op3T5+odumDSF81g==",
+      "dev": true,
+      "requires": {
+        "buffer-equal": "0.0.1",
+        "mime": "^1.3.4",
+        "parse-bmfont-ascii": "^1.0.3",
+        "parse-bmfont-binary": "^1.0.5",
+        "parse-bmfont-xml": "^1.1.4",
+        "phin": "^2.9.1",
+        "xhr": "^2.0.1",
+        "xtend": "^4.0.0"
+      }
+    },
     "load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -3251,6 +3691,15 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -3524,6 +3973,12 @@
         "isobject": "^3.0.1"
       }
     },
+    "omggif": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.9.tgz",
+      "integrity": "sha1-3LcCTazVDFK00wPwSALJHAV8dl8=",
+      "dev": true
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -3598,6 +4053,12 @@
       "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
       "dev": true
     },
+    "pako": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+      "dev": true
+    },
     "param-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
@@ -3607,6 +4068,28 @@
         "no-case": "^2.2.0"
       }
     },
+    "parse-bmfont-ascii": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz",
+      "integrity": "sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU=",
+      "dev": true
+    },
+    "parse-bmfont-binary": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz",
+      "integrity": "sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY=",
+      "dev": true
+    },
+    "parse-bmfont-xml": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz",
+      "integrity": "sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==",
+      "dev": true,
+      "requires": {
+        "xml-parse-from-string": "^1.0.0",
+        "xml2js": "^0.4.5"
+      }
+    },
     "parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@@ -3636,6 +4119,16 @@
         }
       }
     },
+    "parse-headers": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.2.tgz",
+      "integrity": "sha512-/LypJhzFmyBIDYP9aDVgeyEb5sQfbfY5mnDq4hVhlQ69js87wXfmEI5V3xI6vvXasqebp0oCytYFLxsBVfCzSg==",
+      "dev": true,
+      "requires": {
+        "for-each": "^0.3.3",
+        "string.prototype.trim": "^1.1.2"
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -3737,6 +4230,12 @@
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
       "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
     },
+    "phin": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
+      "integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==",
+      "dev": true
+    },
     "pidtree": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.0.tgz",
@@ -3749,6 +4248,21 @@
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
       "dev": true
     },
+    "pixelmatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz",
+      "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=",
+      "dev": true,
+      "requires": {
+        "pngjs": "^3.0.0"
+      }
+    },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+      "dev": true
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -3775,6 +4289,12 @@
       "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
       "dev": true
     },
+    "process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
@@ -4303,6 +4823,12 @@
         "string-hash": "^1.1.3"
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -4719,6 +5245,17 @@
         "function-bind": "^1.0.2"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
+      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.0",
+        "function-bind": "^1.0.2"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -4798,6 +5335,12 @@
         }
       }
     },
+    "timm": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/timm/-/timm-1.6.1.tgz",
+      "integrity": "sha512-hqDTYi/bWuDxL2i6T3v6nrvkAQ/1Bc060GSkVEQZp02zTSTB4CHSKsOkliequCftQaNRcjRqUZmpGWs5FfhrNg==",
+      "dev": true
+    },
     "tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
@@ -4813,6 +5356,12 @@
         "globrex": "^0.1.1"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=",
+      "dev": true
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -5044,6 +5593,15 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "utif": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz",
+      "integrity": "sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==",
+      "dev": true,
+      "requires": {
+        "pako": "^1.0.5"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5147,6 +5705,46 @@
         "slide": "^1.1.5"
       }
     },
+    "xhr": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.5.0.tgz",
+      "integrity": "sha512-4nlO/14t3BNUZRXIXfXe+3N6w3s1KoxcJUUURctd64BLRe67E4gRwp4PjywtDY72fXpZ1y6Ch0VZQRY/gMPzzQ==",
+      "dev": true,
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "xml-parse-from-string": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
+      "integrity": "sha1-qQKekp09vN7RafPG4oI42VpdWig=",
+      "dev": true
+    },
+    "xml2js": {
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
+      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
+      "dev": true,
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~9.0.1"
+      }
+    },
+    "xmlbuilder": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+      "dev": true
+    },
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",

site/package.json

@@ -42,6 +42,7 @@
     "chokidar": "^2.1.2",
     "degit": "^2.1.3",
     "eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
+    "jimp": "^0.6.0",
     "now": "^14.0.0",
     "npm-run-all": "^4.1.5",
     "rollup": "^1.2.2",

site/scripts/get-example-thumbnails/index.js

@@ -0,0 +1,64 @@
+const fs = require('fs');
+const puppeteer = require('puppeteer');
+const Jimp = require('jimp');
+const c = require('kleur');
+
+const slugs = [];
+
+fs.readdirSync(`content/examples`).forEach(group_dir => {
+	fs.readdirSync(`content/examples/${group_dir}`).filter(file => file !== 'meta.json').map(example_dir => {
+		const slug = example_dir.replace(/^\d+-/, '');
+		slugs.push(slug);
+	});
+});
+
+async function main() {
+	const browser = await puppeteer.launch({
+		defaultViewport: {
+			width: 1280,
+			height: 960,
+			deviceScaleFactor: 2
+		}
+	});
+
+	const page = await browser.newPage();
+
+	for (const slug of slugs) {
+		try {
+			const output_file = `static/examples/thumbnails/${slug}.png`;
+			if (fs.existsSync(output_file)) {
+				console.log(c.gray(`skipping ${slug}`));
+				continue;
+			}
+
+			console.log(slug);
+			await page.goto(`http://localhost:3000/repl?example=${slug}`);
+
+			await page.waitForSelector('iframe.inited[title=Result]');
+			await page.waitFor(1500);
+			const iframe = await page.$('iframe.inited[title=Result]');
+			const buffer = await iframe.screenshot();
+
+			const image = await Jimp.read(buffer);
+			image.crop(3, 3, image.bitmap.width - 6, image.bitmap.height - 6);
+			image.autocrop();
+
+			if (image.bitmap.width > 300 || image.bitmap.width > 200) {
+				const scale = Math.min(
+					300 / image.bitmap.width,
+					200 / image.bitmap.height
+				);
+
+				image.scale(scale);
+			}
+
+			await image.write(output_file);
+		} catch (err) {
+			console.log(c.bold().red(`failed to screenshot ${slug}`));
+		}
+	}
+
+	await browser.close();
+}
+
+main();

site/scripts/get-example-thumbnails/package.json

@@ -1 +0,0 @@
-{}

site/scripts/get-examples-from-tutorials/index.js

@@ -72,5 +72,3 @@ tutorial_sections.forEach((section, i) => {
 		});
 	});
 });
-
-console.log(tutorial_sections);

site/src/components/Repl/Output/Viewer.svelte

@@ -22,6 +22,7 @@
 	let proxy = null;
 
 	let ready = false;
+	let inited = false;
 
 	onMount(() => {
 		proxy = new ReplProxy(iframe, {
@@ -90,6 +91,8 @@
 
 			error = e;
 		}
+
+		inited = true;
 	}
 
 	$: if (ready) apply_bundle($bundle);
@@ -125,7 +128,7 @@
 </style>
 
 <div class="iframe-container">
-	<iframe title="Result" bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
+	<iframe title="Result" class:inited bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
 		<!doctype html>
 		<html>
 			<head>

site/src/routes/examples/index.svelte

@@ -18,46 +18,70 @@
 		margin: 0 auto;
 	}
 
-	.grid {
+	h1 {
-		grid-template-columns: repeat(1, 1fr);
+		margin: 4rem 0 4rem -0.05em;
+		font-size: 5.4rem;
 	}
 
-	@media (min-width: 480px) {
+	h2 {
-		.grid {
+		margin: 0 0 1em 0;
-			grid-template-columns: repeat(2, 1fr);
+		font-size: 18px;
+		border-bottom: 1px solid #eee;
+		text-transform: uppercase;
+		padding: 0 0 0.5em 0;
 	}
+
+	section {
+		margin: 0 0 2em 0;
 	}
 
-	@media (min-width: 720px) {
+	.example {
-		.grid {
+		position: relative;
-			grid-template-columns: repeat(3, 1fr);
+		display: flex;
+		align-items: center;
+		padding: 0 0 0 85px;
+		min-height: 50px;
+		font-weight: 300;
 	}
+
+	.grid {
+		grid-template-columns: repeat(1, 1fr);
+		grid-gap: 0.5em;
 	}
 
-	@media (min-width: 1080px) {
+	@media (min-width: 720px) {
 		.grid {
-			grid-template-columns: repeat(4, 1fr);
+			grid-template-columns: repeat(2, 1fr);
 		}
 	}
 
 	.thumbnail {
-		background: #eee;
+		position: absolute;
+		background: white 50% 50% no-repeat;
+		background-size: contain;
+		width: 75px;
+		height: 50px;
+		left: 0;
+		top: 0;
+		border: 1px solid #ccc;
+		border-radius: 2px;
+		box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 	}
 
-	.thumbnail::before {
+	/* .thumbnail::before {
 		content: "";
 		width: 1px;
 		margin-left: -1px;
 		float: left;
 		height: 0;
-		padding-top: 66.666%;
+		padding-top: 100%;
 	}
 
-	.thumbnail::after { /* to clear float */
+	.thumbnail::after {
 		content: "";
 		display: table;
 		clear: both;
-	}
+	} */
 
 	img {
 		background-color: #eee;
@@ -73,16 +97,12 @@
 
 			<div class="grid">
 				{#each group.examples as example}
-					<a href="repl?example={example.slug}">
+					<a class="example" href="repl?example={example.slug}">
-						<figure>
+						<div class="thumbnail" style="background-image: url(examples/thumbnails/{example.slug}.png)"></div>
-							<div class="thumbnail"></div>
+						<span>{example.title}</span>
-							<!-- <img alt="'{example.title}' screenshot" width="150" height="100" src=""> -->
-							<figcaption>{example.title}</figcaption>
-						</figure>
 					</a>
 				{/each}
 			</div>
-
 		</section>
 	{/each}
 </div>