Migrate to Node 16 (#118)

* Node 16: fix build dependencies

* Node 16: fix Bootstrap dependency problem

* Node 16: fix error in HTML writer

* Node 16: move await to proper place (h/t alliejones)

.nvmrc

@@ -0,0 +1 @@
+16.19.0

README.md

@@ -41,6 +41,8 @@ After cloning this repository to your computer you will need to run `npm install
 
 The command `gulp uat` will build the site as if it is prepared for deployment to the website. This performs extra optimizations to reduce the size of the site.
 
+You can use `npm run build` to trigger the Gulp build process for production.
+
 **Tweet Content**
 
 The file `twitter-backup.json` contains the contents of all tweets used on the site. In order to add new tweets to the website (and be able to have them displayed), you will need to create a `twitter-config.json` file in the site root containing your own personal twitter API credentials.

build/asset.js

@@ -16,7 +16,7 @@ module.exports = exports = class Asset extends File {
 
     this.serializable.push(
       'dimensions',
-      'sizes',
+      'sizes'
     );
   }
 

build/cache.js

@@ -22,12 +22,12 @@ module.exports = exports = class Manifest {
     this.stat = memoizeAsync((f) =>
       fs.stat(resolve(f))
         .catch(() => null)
-        .then((stats) => (stats && Math.floor(stats.mtimeMs / 1000))),
+        .then((stats) => (stats && Math.floor(stats.mtimeMs / 1000)))
     );
     this.revFile = memoizeAsync((f) =>
       readFile(f)
         .then(revHash)
-        .catch(() => null),
+        .catch(() => null)
     );
 
     this.isProd = prod;

build/engines.js

@@ -66,7 +66,7 @@ function markdown (mode, input, data, hbs) {
     input = stripHtml(input
       .replace(/<!--\[[\s\S]*?\]-->/g, '')
       .replace(/æææ[\s\S]*?æææ/gi, '')
-      .replace(/\{!\{([\s\S]*?)\}!\}/mg, ''),
+      .replace(/\{!\{([\s\S]*?)\}!\}/mg, '')
     ).result.trim();
     if (input.length > 1000) input = input.slice(0, 1000) + '…';
 
@@ -276,7 +276,7 @@ class Injectables {
       const frame = handybars.makeContext(hash, env);
       try {
         const contents = self._template(tpath, (s) =>
-          handybars(`<span class="svg-icon" style="{{#if this.size}}width:{{this.size}};height:{{this.size}};{{/if}}{{this.style}}">${s}</span>`),
+          handybars(`<span class="svg-icon" style="{{#if this.size}}width:{{this.size}};height:{{this.size}};{{/if}}{{this.style}}">${s}</span>`)
         )(frame);
 
         return handybars.safe(contents);

build/favicon.js

@@ -19,8 +19,8 @@ module.exports = exports = async function favicon () {
 
   const input = any(await Promise.all(
     MATCHES.map((f) =>
-      fs.exists(resolve(f)).then((y) => y && f),
-    ),
+      fs.exists(resolve(f)).then((y) => y && f)
+    )
   ));
 
   if (!input) return [];

build/files.js

@@ -22,7 +22,7 @@ module.exports = exports = class Files {
     this.assets = assets || [];
 
     this._getTitlecard = memoize(() =>
-      find(assets, { name: 'titlecard', dir: this.base }),
+      find(assets, { name: 'titlecard', dir: this.base })
     );
 
     this._getWebReady = memoize(() => assets && keyBy(assets.map((a) => a.webready), 'name'));

build/lib/markdown-token-filter.js

@@ -7,7 +7,7 @@ module.exports = exports = function (md) {
     (state) => {
       state.tokens = flatten(state.tokens.map(descend).filter(Boolean));
       return false;
-    },
+    }
   );
 };
 

build/lib/util.js

@@ -113,7 +113,7 @@ function is (...args) {
     IS_LOOKUP.get(a)
 		|| (isFunction(a) && a)
 		|| (isRegExp(a) && re(a))
-		|| equals(a),
+		|| equals(a)
   );
   if (args.length === 1) return (tok) => args[0](tok);
   return (tok) => anyBy(args, (check) => check(tok));
@@ -124,7 +124,7 @@ function isAll (...args) {
     IS_LOOKUP.get(a)
 		|| (isFunction(a) && a)
 		|| (isRegExp(a) && re(a))
-		|| equals(a),
+		|| equals(a)
   );
   if (args.length === 1) return (tok) => args[0](tok);
   return (tok) => allBy(args, (check) => check(tok));
@@ -184,7 +184,7 @@ function ucfirst (input) {
 
 function ucsentence (input) {
   return input.replace(/((?:\S[^.?!]*)[.?!]*)/g, (txt) =>
-    txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(),
+    txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
   );
 }
 
@@ -674,7 +674,7 @@ function uniq (collection, predicate = null) {
 function keyBy (collection, predicate) {
   predicate = iteratee(predicate);
   return mapReduce(collection, (value, key, index) =>
-    [ predicate(value, key, index), value ],
+    [ predicate(value, key, index), value ]
   );
 }
 
@@ -706,7 +706,7 @@ function omit (collection, predicate) {
     return mapReduce(collection, (value, key, index) =>
       (predicate(value, key, index)
         ? [ undefined, undefined ]
-        : [ key, value ]),
+        : [ key, value ])
     );
   }
 
@@ -718,7 +718,7 @@ function omit (collection, predicate) {
   return mapReduce(collection, (value, key) =>
     (predicate.includes(key)
       ? [ undefined, undefined ]
-      : [ key, value ]),
+      : [ key, value ])
   );
 }
 
@@ -729,7 +729,7 @@ function pick (collection, predicate) {
     return mapReduce(collection, (value, key, index) =>
       (predicate(value, key, index)
         ? [ key, value ]
-        : [ undefined, undefined ]),
+        : [ undefined, undefined ])
     );
   }
 
@@ -805,9 +805,11 @@ function pathinate (object, delimiter = '.') {
 
 /**
  * Iterates over a collection and generates an object based on tuple returned from the iteratee.
+ *
  * @param  {Object|Array|Map|Set} collection
  * @param  {Function} iteratee Callback invoked for each item, receives `value, key, index`, returns `[key, value]`;
- * @return {Object}
+ * @param cb
+ * @returns {Object}
  */
 function mapReduce (collection, cb) {
   if (!collection) return {};
@@ -887,7 +889,7 @@ function flatten (collection, depth = Infinity) {
         ? flatten(val, depth - 1)
         : [ val ]
     )),
-    [],
+    []
   );
 }
 

build/page-writer.js

@@ -132,7 +132,7 @@ function processPages (engines, pages, posts, prod) {
     }
 
     try {
-      html = shrink(html);
+      html = await shrink(html);
     } catch (e) {
       e.message = `Error while minifying page "${page.input}": ${e.message.slice(0, 50)}`;
       throw e;
@@ -145,7 +145,7 @@ function processPages (engines, pages, posts, prod) {
     await Promise.all([
       fs.writeFile(output, Buffer.from(html)),
       page.json && fs.writeFile(resolve('dist', page.json), Buffer.from(
-        prod ? JSON.stringify(json) : JSON.stringify(json, null, 2),
+        prod ? JSON.stringify(json) : JSON.stringify(json, null, 2)
       )),
     ]);
   });

build/page.js

@@ -30,7 +30,7 @@ module.exports = exports = class Page extends File {
       'dateModified',
       'classes',
       'flags',
-      'siblings',
+      'siblings'
     );
 
     this.engine = this._engine();

build/scripts.js

@@ -13,7 +13,7 @@ module.exports = exports = async function scripts (prod) {
     require.resolve('magnific-popup'),
     require.resolve('popper.js/dist/umd/popper.js'),
     require.resolve('bootstrap/js/dist/util.js'),
-    require.resolve('bootstrap/js/dist/dropdown.js'),
+    require.resolve('bootstrap/js/dist/dropdown.js')
   );
 
   const globalScript = new ClientScript('js/global.js');

js/$tweets.jsx

@@ -153,7 +153,7 @@ class App extends Component {
       <Fragment>
         {caption}
         {map(posts, (post, i) =>
-          <Post post={post} key={i} />,
+          <Post post={post} key={i} />
         )}
         {paginate && <Pagination post={posts[0]} />}
       </Fragment>

js/_i.js

@@ -39,7 +39,7 @@
       window.document.body.offsetHeight,
       window.document.documentElement.clientHeight,
       window.document.documentElement.scrollHeight,
-      window.document.documentElement.offsetHeight,
+      window.document.documentElement.offsetHeight
     );
 
     const viewport_height = Math.max(window.document.documentElement.clientHeight, window.innerHeight || 0);

package.json

@@ -7,7 +7,7 @@
     "build": "gulp prod"
   },
   "engines": {
-    "node": "12 || 14"
+    "node": "16"
   },
   "author": "Jocelyn Badgley <joc@twipped.com> (http://twipped.com/)",
   "siteInfo": {
@@ -27,59 +27,60 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "~7.15.0",
-    "@babel/plugin-proposal-class-properties": "~7.14.5",
-    "@babel/preset-env": "~7.15.0",
+    "@babel/core": "~7.20.7",
+    "@babel/plugin-proposal-class-properties": "~7.18.6",
+    "@babel/preset-env": "~7.20.2",
     "@rollup/plugin-alias": "~3.1.5",
     "@rollup/plugin-commonjs": "~20.0.0",
     "@rollup/plugin-node-resolve": "~13.0.4",
     "@rollup/plugin-replace": "~3.0.0",
-    "autoprefixer": "~10.3.3",
-    "aws-sdk": "~2.978.0",
+    "autoprefixer": "~10.4.13",
+    "aws-sdk": "~2.1286.0",
     "babel-eslint": "~10.1.0",
     "babel-preset-preact": "~2.0.0",
-    "backbone": "~1.4.0",
+    "backbone": "~1.4.1",
     "bluebird": "~3.7.2",
     "bootstrap": "~4.6.0",
     "concurrent-transform": "~1.0.0",
     "crass": "~0.12.3",
-    "date-fns": "~2.23.0",
-    "eslint": "~7.32.0",
-    "eslint-config-twipped": "~4.0.0",
+    "date-fns": "~2.29.3",
+    "eslint": "~8.31.0",
+    "eslint-config-twipped": "~7.2.0",
     "eslint-plugin-node": "~11.1.0",
-    "eslint-plugin-promise": "~5.1.0",
-    "eslint-plugin-react": "~7.24.0",
-    "express": "~4.17.1",
-    "fancy-log": "~1.3.3",
-    "forever": "~4.0.1",
+    "eslint-plugin-promise": "~6.1.1",
+    "eslint-plugin-react": "~7.31.11",
+    "express": "~4.18.2",
+    "fancy-log": "~2.0.0",
+    "forever": "~4.0.3",
     "front-matter": "~4.0.2",
-    "fs-extra": "~10.0.0",
+    "fs-extra": "~11.1.0",
     "get-video-dimensions": "~1.0.0",
-    "glob": "~7.1.7",
-    "gm": "~1.23.1",
+    "glob": "~8.0.3",
+    "gm": "~1.25.0",
     "gulp": "~4.0.2",
     "gulp-awspublish": "~4.1.2",
     "gulp-awspublish-router": "~0.2.0",
     "gulp-clean": "~0.4.0",
+    "gulp-imagemin": "^7.1.0",
     "handybars": "~0.4.0",
-    "html-minifier-terser": "~5.1.1",
-    "image-size": "~1.0.0",
-    "jquery": "~3.6.0",
+    "html-minifier-terser": "~7.1.0",
+    "image-size": "~1.0.2",
+    "jquery": "~3.6.3",
     "lodash": "~4.17.21",
     "magnific-popup": "~1.1.0",
-    "make-fetch-happen": "~9.1.0",
-    "markdown-it": "~12.2.0",
-    "markdown-it-anchor": "~8.3.0",
-    "markdown-it-link-attributes": "~3.0.0",
+    "make-fetch-happen": "~11.0.2",
+    "markdown-it": "~13.0.1",
+    "markdown-it-anchor": "~8.6.6",
+    "markdown-it-link-attributes": "~4.0.1",
     "memoizepromise": "~2.0.0",
-    "minimist": "~1.2.5",
+    "minimist": "~1.2.7",
     "morgan": "~1.10.0",
-    "node-sass": "~5.0.0",
-    "plugin-error": "~1.0.1",
-    "png-to-ico": "~2.1.2",
+    "node-sass": "~8.0.0",
+    "plugin-error": "~2.0.1",
+    "png-to-ico": "~2.1.8",
     "popper.js": "~1.16.0",
-    "postcss": "~8.3.6",
-    "preact": "~10.5.14",
+    "postcss": "~8.4.20",
+    "preact": "~10.11.3",
     "rev-hash": "~3.0.0",
     "rev-path": "~2.0.0",
     "rollup": "~2.56.3",
@@ -90,10 +91,9 @@
     "serve-index": "~1.9.1",
     "string-strip-html": "~8.3.0",
     "svg-dimensions": "~1.0.2",
-    "terser": "~5.7.2",
-    "twemoji": "~13.1.0",
+    "terser": "~5.16.1",
+    "twemoji": "~14.0.2",
     "twitter-lite": "~1.1.0",
-    "uuid": "~8.3.2"
-  },
-  "dependencies": {}
+    "uuid": "~9.0.0"
+  }
 }