From 01dbef54522df13bf31b732584f40eadc9e9735d Mon Sep 17 00:00:00 2001
From: Damien Robinson <damien.robinson@xcommedia.com.au>
Date: Sun, 6 Sep 2020 16:23:59 +1000
Subject: [PATCH 1/6] fix(about): carousel item src-set to srcset

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index 4027ea98..93e8d783 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -35,7 +35,7 @@
             eager
             :lazy-src="src(`./${item.image}`).placeholder"
             :src="src(`./${item.image}`).src"
-            :src-set="src(`./${item.image}`).srcSet"
+            :srcset="src(`./${item.image}`).srcSet"
             :style="{
               backgroundColor: backgroundColor(`./${item.image}`)[0],
             }"

From 6b02ae748a1f8390da510a1c2428270f5f38ffda Mon Sep 17 00:00:00 2001
From: Damien Robinson <damien.robinson@xcommedia.com.au>
Date: Sun, 6 Sep 2020 22:29:51 +1000
Subject: [PATCH 2/6] ci: bundlesize

resolves #42
---
 .travis.yml             |  1 +
 bundlesize.config.json  |  9 +++++++++
 layouts/default.vue     | 41 +++++++++++++++++++++++++++++++++++++++++
 package.json            |  1 +
 pages/index.vue         |  2 +-
 pages/species/_id.vue   |  3 +--
 pages/species/index.vue |  2 +-
 static/README.md        | 11 -----------
 8 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 bundlesize.config.json
 delete mode 100644 static/README.md

diff --git a/.travis.yml b/.travis.yml
index 5a510a65..1879e09e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,6 +9,7 @@ cache: npm
 script:
   - npm run lint
   # - npm run test
+  - npm run bundlesize
   - npm run generate
   - npx semantic-release
 
diff --git a/bundlesize.config.json b/bundlesize.config.json
new file mode 100644
index 00000000..b2e5b9ba
--- /dev/null
+++ b/bundlesize.config.json
@@ -0,0 +1,9 @@
+{
+  "files": [
+    {
+      "path": "dist/**/*.!(jpg)",
+      "maxSize": "250 kB",
+      "compression": "brotli"
+    }
+  ]
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index ef1cf4f3..9fd77d0f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -113,6 +113,7 @@
 </template>
 
 <script>
+import { shuffle, head } from 'lodash-es'
 import { mdiSprout, mdiInformation, mdiStore, mdiDatabase } from '@mdi/js'
 // import UserMenu from '@/components/UserMenu.vue'
 import LastModified from '@/components/LastModified'
@@ -158,6 +159,46 @@ export default {
   },
   methods: {
     shortHash: (value) => (value ? value.substring(0, 7) : null),
+    src: require.context(
+      `~/assets/img/species?resize&size=640&format=webp`,
+      false,
+      /\.(png|jpe?g|svg).*$/
+    ),
+    async ogImage() {
+      const content = await this.$content('species').fetch()
+      const { body } = content
+      const result = shuffle(
+        body
+          .filter((item) => item.image)
+          .map((item) => ({
+            name: item.species,
+            image: item.image,
+          }))
+      )
+      return head(result)
+    },
+  },
+  async head() {
+    const image = await this.ogImage().image
+    return {
+      meta: [
+        {
+          hid: 'og:image',
+          property: 'og:image',
+          content: this.src(`./${image}`).src,
+        },
+        {
+          hid: 'og:image:width',
+          property: 'og:image:width',
+          content: this.src(`./${image}`).width,
+        },
+        {
+          hid: 'og:image:height',
+          property: 'og:image:height',
+          content: this.src(`./${image}`).height,
+        },
+      ],
+    }
   },
 }
 </script>
diff --git a/package.json b/package.json
index 594a06b2..a130033d 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "nuxt-ts",
     "build": "nuxt-ts build",
     "build:analyze": "npm run build -- --analyze",
+    "bundlesize": "bundlesize",
     "start": "nuxt-ts start",
     "serve": "nuxt-ts serve",
     "serve:lhci": "npm run start",
diff --git a/pages/index.vue b/pages/index.vue
index 93e8d783..f8630f8b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -91,7 +91,7 @@ export default {
       /\.(png|jpe?g|svg).*$/
     ),
     src: require.context(
-      `~/assets/img/species?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&sizes[]=4686&format=webp`,
+      `~/assets/img/species?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&sizes[]=4686&placeholder&format=webp`,
       false,
       /\.(png|jpe?g|svg).*$/
     ),
diff --git a/pages/species/_id.vue b/pages/species/_id.vue
index ab1623ce..6c4a33a2 100644
--- a/pages/species/_id.vue
+++ b/pages/species/_id.vue
@@ -350,8 +350,7 @@ export default {
         {
           hid: 'og:image',
           property: 'og:image',
-          content: !require(`@/assets/img/species/${this.item.image}?resize&sizes[]=1785&placeholder`)
-            .src,
+          content: this.src(`./${this.item.image}`).src,
         },
         {
           hid: 'og:image:width',
diff --git a/pages/species/index.vue b/pages/species/index.vue
index eb419142..7519e861 100644
--- a/pages/species/index.vue
+++ b/pages/species/index.vue
@@ -219,7 +219,7 @@ export default {
       /\.(png|jpe?g|svg).*$/
     ),
     src: require.context(
-      `~/assets/img/species?resize&sizes[]=320&sizes[]=640&sizes[]=960&placeholder&placeholderSize=10&format=webp`,
+      `~/assets/img/species?resize&sizes[]=320&sizes[]=640&sizes[]=960&placeholder&format=webp`,
       false,
       /\.(png|jpe?g|svg).*$/
     ),
diff --git a/static/README.md b/static/README.md
deleted file mode 100644
index cf004353..00000000
--- a/static/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# STATIC
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your static files.
-Each file inside this directory is mapped to `/`.
-Thus you'd want to delete this README.md before deploying to production.
-
-Example: `/static/robots.txt` is mapped as `/robots.txt`.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

From 51caa95a21319695ce68489300200b75920524e1 Mon Sep 17 00:00:00 2001
From: Damien Robinson <damien.robinson@xcommedia.com.au>
Date: Sun, 6 Sep 2020 22:38:48 +1000
Subject: [PATCH 3/6] ci(bundlesize): run after generate

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 1879e09e..11af54c0 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,8 +9,8 @@ cache: npm
 script:
   - npm run lint
   # - npm run test
-  - npm run bundlesize
   - npm run generate
+  - npm run bundlesize
   - npx semantic-release
 
 deploy:

From ec9e24a54df63d54f38f14563341ce62b84c7458 Mon Sep 17 00:00:00 2001
From: Damien Robinson <damien.robinson@xcommedia.com.au>
Date: Mon, 7 Sep 2020 09:10:42 +1000
Subject: [PATCH 4/6] chore(bundlesize): exclude png and webp files

---
 bundlesize.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index b2e5b9ba..951397c1 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "path": "dist/**/*.!(jpg)",
+      "path": "dist/**/*.!(jpg|png|webp)",
       "maxSize": "250 kB",
       "compression": "brotli"
     }

From d29471c194820d2ecca5dd198e62efa952544b20 Mon Sep 17 00:00:00 2001
From: Damien Robinson <damien.robinson@xcommedia.com.au>
Date: Mon, 7 Sep 2020 10:26:58 +1000
Subject: [PATCH 5/6] fix(meta): add random og:image

---
 layouts/default.vue | 41 -----------------------------------------
 nuxt.config.js      |  1 +
 plugins/og-image.js | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 41 deletions(-)
 create mode 100644 plugins/og-image.js

diff --git a/layouts/default.vue b/layouts/default.vue
index 9fd77d0f..ef1cf4f3 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -113,7 +113,6 @@
 </template>
 
 <script>
-import { shuffle, head } from 'lodash-es'
 import { mdiSprout, mdiInformation, mdiStore, mdiDatabase } from '@mdi/js'
 // import UserMenu from '@/components/UserMenu.vue'
 import LastModified from '@/components/LastModified'
@@ -159,46 +158,6 @@ export default {
   },
   methods: {
     shortHash: (value) => (value ? value.substring(0, 7) : null),
-    src: require.context(
-      `~/assets/img/species?resize&size=640&format=webp`,
-      false,
-      /\.(png|jpe?g|svg).*$/
-    ),
-    async ogImage() {
-      const content = await this.$content('species').fetch()
-      const { body } = content
-      const result = shuffle(
-        body
-          .filter((item) => item.image)
-          .map((item) => ({
-            name: item.species,
-            image: item.image,
-          }))
-      )
-      return head(result)
-    },
-  },
-  async head() {
-    const image = await this.ogImage().image
-    return {
-      meta: [
-        {
-          hid: 'og:image',
-          property: 'og:image',
-          content: this.src(`./${image}`).src,
-        },
-        {
-          hid: 'og:image:width',
-          property: 'og:image:width',
-          content: this.src(`./${image}`).width,
-        },
-        {
-          hid: 'og:image:height',
-          property: 'og:image:height',
-          content: this.src(`./${image}`).height,
-        },
-      ],
-    }
   },
 }
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 5226ddb2..fcb5a60f 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -93,6 +93,7 @@ export default {
    */
   plugins: [
     // { src: 'plugins/theme', mode: 'client' }
+    { src: 'plugins/og-image.js' },
   ],
   /*
    ** Auto import components
diff --git a/plugins/og-image.js b/plugins/og-image.js
new file mode 100644
index 00000000..e4b4c096
--- /dev/null
+++ b/plugins/og-image.js
@@ -0,0 +1,37 @@
+import { shuffle, head } from 'lodash-es'
+
+/**
+ * Set a random image for meta og:image
+ */
+export default async (context) => {
+  const content = await context.$content('species').fetch()
+  const { body } = content
+  const { image } = head(shuffle(body.filter((item) => item.image)))
+
+  const src = require.context(
+    `~/assets/img/species?resize&size=640&format=webp`,
+    false,
+    /\.(png|jpe?g|svg).*$/
+  )
+
+  context.app.head.meta = context.app.head.meta.concat(
+    {
+      hid: 'og:image',
+      property: 'og:image',
+      content: src(`./${image}`).src,
+      once: true,
+    },
+    {
+      hid: 'og:image:width',
+      property: 'og:image:width',
+      content: src(`./${image}`).width,
+      once: true,
+    },
+    {
+      hid: 'og:image:height',
+      property: 'og:image:height',
+      content: src(`./${image}`).height,
+      once: true,
+    }
+  )
+}

From 3927ca858db1b28db5fe5ffbd3890de69f160a86 Mon Sep 17 00:00:00 2001
From: Damien Robinson <damien.robinson@xcommedia.com.au>
Date: Mon, 7 Sep 2020 11:03:11 +1000
Subject: [PATCH 6/6] ci: bundlewatch

---
 .travis.yml             |   2 +-
 bundlesize.config.json  |   9 --
 bundlewatch.config.json |   9 ++
 package-lock.json       | 275 ++++++++++++++++++++++------------------
 package.json            |   4 +-
 plugins/og-image.js     |   2 +-
 6 files changed, 166 insertions(+), 135 deletions(-)
 delete mode 100644 bundlesize.config.json
 create mode 100644 bundlewatch.config.json

diff --git a/.travis.yml b/.travis.yml
index 11af54c0..ca994523 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,7 +10,7 @@ script:
   - npm run lint
   # - npm run test
   - npm run generate
-  - npm run bundlesize
+  - npm run bundlewatch
   - npx semantic-release
 
 deploy:
diff --git a/bundlesize.config.json b/bundlesize.config.json
deleted file mode 100644
index 951397c1..00000000
--- a/bundlesize.config.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "files": [
-    {
-      "path": "dist/**/*.!(jpg|png|webp)",
-      "maxSize": "250 kB",
-      "compression": "brotli"
-    }
-  ]
-}
diff --git a/bundlewatch.config.json b/bundlewatch.config.json
new file mode 100644
index 00000000..5d16d73a
--- /dev/null
+++ b/bundlewatch.config.json
@@ -0,0 +1,9 @@
+{
+  "files": [
+    {
+      "path": "dist/**/*.*.!(jpg|png)",
+      "maxSize": "250 kB",
+      "compression": "gzip"
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
index 923793cc..0a1098ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6179,16 +6179,6 @@
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
     },
-    "brotli-size": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/brotli-size/-/brotli-size-0.1.0.tgz",
-      "integrity": "sha512-5ny7BNvpe2TSmdafF1T9dnFYp3AIrJ8qJt29K0DQJzORlK38LBim/CmlY26JtreV6SWmXza7Oa+9m61SzvxR0Q==",
-      "dev": true,
-      "requires": {
-        "duplexer": "^0.1.1",
-        "iltorb": "^2.4.3"
-      }
-    },
     "browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -6362,24 +6352,34 @@
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
     },
-    "bundlesize": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/bundlesize/-/bundlesize-0.18.0.tgz",
-      "integrity": "sha512-GZURr25umfYxZYZUyOlOtJRbYjAn0VfbjbnS0NBcOiF8VcjmhoEhmx8Gw4va8HeQb8j7Ra0ZltY/IeHgSHFXFw==",
+    "bundlewatch": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/bundlewatch/-/bundlewatch-0.2.7.tgz",
+      "integrity": "sha512-tTf6TZHowf2kqHMv9nk7ORDdyU8d4OCF5qjkm8jeZfY9hsOdoyvDq3xtPSw+I8eQJJhkdUvcIMp4Cd3GkUAsrA==",
       "dev": true,
       "requires": {
         "axios": "^0.19.0",
-        "brotli-size": "0.1.0",
-        "bytes": "^3.1.0",
-        "ci-env": "^1.4.0",
-        "commander": "^2.20.0",
-        "cosmiconfig": "^5.2.1",
-        "github-build": "^1.2.0",
-        "glob": "^7.1.4",
-        "gzip-size": "^4.0.0",
-        "prettycli": "^1.4.3"
+        "bytes": "^3.0.0",
+        "chalk": "^4.0.0",
+        "ci-env": "^1.14.0",
+        "commander": "^5.0.0",
+        "glob": "^7.1.2",
+        "gzip-size": "^5.1.1",
+        "jsonpack": "^1.1.5",
+        "lodash.merge": "^4.6.1",
+        "read-pkg-up": "^7.0.1"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
         "axios": {
           "version": "0.19.2",
           "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
@@ -6389,6 +6389,37 @@
             "follow-redirects": "1.5.10"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
         "debug": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -6398,6 +6429,16 @@
             "ms": "2.0.0"
           }
         },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
         "follow-redirects": {
           "version": "1.5.10",
           "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
@@ -6407,21 +6448,87 @@
             "debug": "=3.1.0"
           }
         },
-        "gzip-size": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
-          "integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
           "dev": true,
           "requires": {
-            "duplexer": "^0.1.1",
-            "pify": "^3.0.0"
+            "p-limit": "^2.2.0"
           }
         },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+        "parse-json": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
+          "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
           "dev": true
+        },
+        "read-pkg": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+          "dev": true,
+          "requires": {
+            "@types/normalize-package-data": "^2.4.0",
+            "normalize-package-data": "^2.5.0",
+            "parse-json": "^5.0.0",
+            "type-fest": "^0.6.0"
+          },
+          "dependencies": {
+            "type-fest": {
+              "version": "0.6.0",
+              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+              "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+              "dev": true
+            }
+          }
+        },
+        "read-pkg-up": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+          "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.1.0",
+            "read-pkg": "^5.2.0",
+            "type-fest": "^0.8.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
         }
       }
     },
@@ -11006,45 +11113,6 @@
         "git-up": "^4.0.0"
       }
     },
-    "github-build": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/github-build/-/github-build-1.2.1.tgz",
-      "integrity": "sha512-VAT4NFU8hm9Ks5yNKuuczD2zMbmouAKHtxtwvmCj34Q2DpZsjgp3LLjtrKlm/YvGSzSNGmj22ccJQQei+f/vIw==",
-      "dev": true,
-      "requires": {
-        "axios": "0.19.0"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.19.0",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
-          "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
-          "dev": true,
-          "requires": {
-            "follow-redirects": "1.5.10",
-            "is-buffer": "^2.0.2"
-          }
-        },
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "dev": true,
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        }
-      }
-    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -11994,19 +12062,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
-    "iltorb": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/iltorb/-/iltorb-2.4.5.tgz",
-      "integrity": "sha512-EMCMl3LnnNSZJS5QrxyZmMTaAC4+TJkM5woD+xbpm9RB+mFYCr7C05GFE3TEGCsVQSVHmjX+3sf5AiwsylNInQ==",
-      "dev": true,
-      "requires": {
-        "detect-libc": "^1.0.3",
-        "nan": "^2.14.0",
-        "npmlog": "^4.1.2",
-        "prebuild-install": "^5.3.3",
-        "which-pm-runs": "^1.0.0"
-      }
-    },
     "image-size": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
@@ -14695,6 +14750,12 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jsonpack": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/jsonpack/-/jsonpack-1.1.5.tgz",
+      "integrity": "sha1-1CsNz9kaxY7zEQ+W0sWZQEw9wnw=",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -15207,6 +15268,12 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -16164,7 +16231,8 @@
     "nan": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw=="
+      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+      "optional": true
     },
     "nanoid": {
       "version": "3.1.12",
@@ -18626,43 +18694,6 @@
       "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
       "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA=="
     },
-    "prettycli": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/prettycli/-/prettycli-1.4.3.tgz",
-      "integrity": "sha512-KLiwAXXfSWXZqGmZlnKPuGMTFp+0QbcySplL1ft9gfteT/BNsG64Xo8u2Qr9r+qnsIZWBQ66Zs8tg+8s2fmzvw==",
-      "dev": true,
-      "requires": {
-        "chalk": "2.1.0"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
-          "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.1.0",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^4.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
-          "dev": true,
-          "requires": {
-            "has-flag": "^2.0.0"
-          }
-        }
-      }
-    },
     "prismjs": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz",
diff --git a/package.json b/package.json
index a130033d..96f27a01 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev": "nuxt-ts",
     "build": "nuxt-ts build",
     "build:analyze": "npm run build -- --analyze",
-    "bundlesize": "bundlesize",
+    "bundlewatch": "bundlewatch --config bundlewatch.config.json",
     "start": "nuxt-ts start",
     "serve": "nuxt-ts serve",
     "serve:lhci": "npm run start",
@@ -57,7 +57,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.3.0",
-    "bundlesize": "0.18.0",
+    "bundlewatch": "0.2.7",
     "cross-env": "7.0.2",
     "eslint": "7.8.1",
     "eslint-config-prettier": "6.11.0",
diff --git a/plugins/og-image.js b/plugins/og-image.js
index e4b4c096..95c0158b 100644
--- a/plugins/og-image.js
+++ b/plugins/og-image.js
@@ -9,7 +9,7 @@ export default async (context) => {
   const { image } = head(shuffle(body.filter((item) => item.image)))
 
   const src = require.context(
-    `~/assets/img/species?resize&size=640&format=webp`,
+    `~/assets/img/species?resize&size=640&format=jpg`,
     false,
     /\.(png|jpe?g|svg).*$/
   )