From f29cff110b20a67e7964d13013431a3d3b70ff37 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 18:18:12 +0400
Subject: [PATCH 01/13] Convert the `resampling` util to TypeScript

---
 src/utils/{resampling.js => resampling.ts} | 52 +++++++++++-----------
 1 file changed, 27 insertions(+), 25 deletions(-)
 rename src/utils/{resampling.js => resampling.ts} (62%)

diff --git a/src/utils/resampling.js b/src/utils/resampling.ts
similarity index 62%
rename from src/utils/resampling.js
rename to src/utils/resampling.ts
index c0ca4e9f42..2ae052c45a 100644
--- a/src/utils/resampling.js
+++ b/src/utils/resampling.ts
@@ -2,23 +2,22 @@
  * Resizes a given array to consist of more elements than provided. This uses
  * linear interpolation to fill in the gaps.
  *
- * @param data {number[]} the list of data points to interpolate
- * @param threshold {number} the number of expected data points from the array
- * @returns {number[]} the array with the required number of points
+ * @param data the list of data points to interpolate
+ * @param threshold the number of expected data points from the array
+ * @returns the array with the required number of points
  */
-export let upsampleArray = (data, threshold) => {
-  let linearInterpolate = function (before, after, atPoint) {
-    return before + (after - before) * atPoint
-  }
+export const upsampleArray = (data: number[], threshold: number): number[] => {
+  const linearInterpolate = (before: number, after: number, atPoint: number) =>
+    before + (after - before) * atPoint
 
-  let newData = []
-  let springFactor = (data.length - 1) / (threshold - 1)
+  const newData = []
+  const springFactor = (data.length - 1) / (threshold - 1)
   newData[0] = data[0] // for new allocation
   for (let i = 1; i < threshold - 1; i++) {
-    let tmp = i * springFactor
-    let before = Math.floor(tmp).toFixed()
-    let after = Math.ceil(tmp).toFixed()
-    let atPoint = tmp - before
+    const tmp = i * springFactor
+    const before = Math.floor(tmp)
+    const after = Math.ceil(tmp)
+    const atPoint = tmp - before
     newData[i] = linearInterpolate(data[before], data[after], atPoint)
   }
   newData[threshold - 1] = data[data.length - 1] // for new allocation
@@ -26,23 +25,23 @@ export let upsampleArray = (data, threshold) => {
 }
 
 /**
- * Resizes a given array to consist of less elements than provided. This uses
+ * Resizes a given array to consist of fewer elements than provided. This uses
  * the Largest Triangle Three Buckets algorithm by Sveinn Steinarsson.
  *
  * @see {@link https://github.com/sveinn-steinarsson/flot-downsample}
  *
- * @param data {number[]} the list of data points to interpolate
- * @param threshold {number} the number of expected data points from the array
- * @returns {number[]} the array with the required number of points
+ * @param data - the list of data points to interpolate
+ * @param threshold - the number of expected data points from the array
+ * @returns the array with the required number of points
  */
-export const downsampleArray = (data, threshold) => {
-  let dataLength = data.length
+export const downsampleArray = (data: number[], threshold: number) => {
+  const dataLength = data.length
 
-  let sampled = []
+  const sampled = []
   let sampled_index = 0
 
   // Bucket size, except first and last point
-  let every = (dataLength - 2) / (threshold - 2)
+  const every = (dataLength - 2) / (threshold - 2)
 
   let a = 0
   let max_area_point, max_area, area, next_a
@@ -56,7 +55,7 @@ export const downsampleArray = (data, threshold) => {
     let avg_range_end = Math.floor((i + 2) * every) + 1
     avg_range_end = avg_range_end < dataLength ? avg_range_end : dataLength
 
-    let avg_range_length = avg_range_end - avg_range_start
+    const avg_range_length = avg_range_end - avg_range_start
 
     for (; avg_range_start < avg_range_end; avg_range_start++) {
       avg_x += avg_range_start
@@ -67,13 +66,16 @@ export const downsampleArray = (data, threshold) => {
 
     // Get the range for this bucket
     let range_offs = Math.floor(i * every) + 1
-    let range_to = Math.floor((i + 1) * every) + 1
+    const range_to = Math.floor((i + 1) * every) + 1
 
-    let point_a_x = a
-    let point_a_y = data[a]
+    const point_a_x = a
+    const point_a_y = data[a]
 
     max_area = area = -1
 
+    max_area_point = 0
+    next_a = 0
+
     for (; range_offs < range_to; range_offs++) {
       // Calculate triangle area over three buckets
       area =

From be13af55ea5fcb8d285d2982a0db1b4dc7d7c409 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 18:42:41 +0400
Subject: [PATCH 02/13] Convert the `decode-data` util to TypeScript

---
 src/utils/decode-data.js                  | 23 -----------------------
 src/utils/decode-data.ts                  | 22 ++++++++++++++++++++++
 src/utils/decode-media-data.js            |  2 +-
 test/unit/specs/utils/decode-data.spec.js |  4 ++--
 tsconfig.json                             |  1 -
 5 files changed, 25 insertions(+), 27 deletions(-)
 delete mode 100644 src/utils/decode-data.js
 create mode 100644 src/utils/decode-data.ts

diff --git a/src/utils/decode-data.js b/src/utils/decode-data.js
deleted file mode 100644
index 5f36e45354..0000000000
--- a/src/utils/decode-data.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * decodes some edge cases of Unicode characters with an extra \
- * See test cases for some examples
- * @param {string} [data]
- */
-export default function decodeData(data) {
-  if (data) {
-    try {
-      const regexASCII = /\\x([\d\w]{2})/gi
-      const ascii = data.replace(regexASCII, (_, grp) =>
-        String.fromCharCode(parseInt(grp, 16))
-      )
-      const regexUni = /\\u([\d\w]{4})/gi
-      const uni = ascii.replace(regexUni, (_, grp) =>
-        String.fromCharCode(parseInt(grp, 16))
-      )
-      return decodeURI(uni)
-    } catch (e) {
-      return data
-    }
-  }
-  return ''
-}
diff --git a/src/utils/decode-data.ts b/src/utils/decode-data.ts
new file mode 100644
index 0000000000..121c6a8ea1
--- /dev/null
+++ b/src/utils/decode-data.ts
@@ -0,0 +1,22 @@
+/**
+ * Decodes some edge cases where ASCII/Unicode characters with escape sequences
+ * have escaped backslashes, which prevents them from rendering. This function
+ * replaces them with the relevant character.
+ *
+ * @param data - the string to unescape so that it can be rendered
+ */
+export const decodeData = (data = ''): string => {
+  if (!data) return ''
+
+  try {
+    const regexes = [/\\x([\d\w]{2})/gi, /\\u([\d\w]{4})/gi]
+    regexes.forEach((regex) => {
+      data = data.replace(regex, (_, grp) =>
+        String.fromCharCode(parseInt(grp, 16))
+      )
+    })
+    return decodeURI(data)
+  } catch (e) {
+    return data
+  }
+}
diff --git a/src/utils/decode-media-data.js b/src/utils/decode-media-data.js
index 70f7c16255..cfbc0cd7cc 100644
--- a/src/utils/decode-media-data.js
+++ b/src/utils/decode-media-data.js
@@ -1,4 +1,4 @@
-import decodeData from '~/utils/decode-data'
+import { decodeData } from '~/utils/decode-data'
 import { IMAGE } from '~/constants/media'
 
 /**
diff --git a/test/unit/specs/utils/decode-data.spec.js b/test/unit/specs/utils/decode-data.spec.js
index 7a5b4ed737..4de26cc8eb 100644
--- a/test/unit/specs/utils/decode-data.spec.js
+++ b/test/unit/specs/utils/decode-data.spec.js
@@ -1,4 +1,4 @@
-import decodeData from '~/utils/decode-data'
+import { decodeData } from '~/utils/decode-data'
 
 describe('decodeData', () => {
   it('returns empty string for empty string', () => {
@@ -16,7 +16,7 @@ describe('decodeData', () => {
   it('returns decoded ASCII hexacode strings', () => {
     const data = 's\\xe9'
 
-    expect(decodeData(data)).toBe('s\xe9')
+    expect(decodeData(data)).toBe('sé')
   })
 
   it('returns decoded unicode strings', () => {
diff --git a/tsconfig.json b/tsconfig.json
index d4457abc28..48b434f95b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -46,7 +46,6 @@
     "src/data/api-service.js",
     "src/data/usage-data-service.js",
     "src/store/user.js",
-    "src/utils/decode-data.js",
     "src/utils/decode-media-data.js",
     "src/utils/deep-freeze.js",
     "src/utils/key-codes.js",

From bb215be1bf8c9068b61a0b4059bc16be5a8cdd88 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 19:06:58 +0400
Subject: [PATCH 03/13] Convert the `warn` util to TypeScript and update usages

---
 src/components/SketchFabViewer.vue               | 5 +++--
 src/components/VPopover/meta/VPopover.stories.js | 6 ++++--
 src/components/meta/DropdownButton.stories.js    | 6 ++++--
 src/store/index.js                               | 4 +++-
 src/store/provider.js                            | 3 ++-
 src/utils/local.js                               | 5 +++--
 src/utils/warn.js                                | 6 ------
 src/utils/warn.ts                                | 9 +++++++++
 tsconfig.json                                    | 3 +--
 9 files changed, 29 insertions(+), 18 deletions(-)
 delete mode 100644 src/utils/warn.js
 create mode 100644 src/utils/warn.ts

diff --git a/src/components/SketchFabViewer.vue b/src/components/SketchFabViewer.vue
index 38ef9d440e..6de9eac15a 100644
--- a/src/components/SketchFabViewer.vue
+++ b/src/components/SketchFabViewer.vue
@@ -16,6 +16,7 @@
 
 <script>
 import loadScript from '~/utils/load-script'
+import { log } from '~/utils/warn'
 
 const sketchfabUrl =
   'https://static.sketchfab.com/api/sketchfab-viewer-1.10.1.js'
@@ -34,11 +35,11 @@ export default {
         success: (api) => {
           api.addEventListener('viewerready', () => {
             this.loading = false
-            console.log('LOADED!')
+            log('LOADED!')
           })
         },
         error: () => {
-          console.log('Viewer error')
+          log('Viewer error')
         },
       },
       loading: true,
diff --git a/src/components/VPopover/meta/VPopover.stories.js b/src/components/VPopover/meta/VPopover.stories.js
index 79236a0642..5b4eb58ce3 100644
--- a/src/components/VPopover/meta/VPopover.stories.js
+++ b/src/components/VPopover/meta/VPopover.stories.js
@@ -2,6 +2,8 @@ import VPopover from '~/components/VPopover/VPopover.vue'
 import VButton from '~/components/VButton'
 import { placements as popoverPlacements } from '@popperjs/core'
 
+import { log } from '~/utils/warn'
+
 export default {
   component: VPopover,
   title: 'Components/VPopover',
@@ -37,8 +39,8 @@ const SinglePopoverStory = (args, { argTypes }) => ({
   `,
   components: { VPopover, VButton },
   setup() {
-    const onOpen = () => console.log('opened!')
-    const onClose = () => console.log('closed!')
+    const onOpen = () => log('opened!')
+    const onClose = () => log('closed!')
 
     return { onOpen, onClose }
   },
diff --git a/src/components/meta/DropdownButton.stories.js b/src/components/meta/DropdownButton.stories.js
index 3fc437acf4..e2f18cd947 100644
--- a/src/components/meta/DropdownButton.stories.js
+++ b/src/components/meta/DropdownButton.stories.js
@@ -1,5 +1,7 @@
 import DropdownButton from '~/components/DropdownButton'
 
+import { log } from '~/utils/warn'
+
 export default {
   title: 'Components/DropdownButton',
   component: DropdownButton,
@@ -41,13 +43,13 @@ export const Default = (args, { argTypes }) => ({
   },
   computed: {
     activeItem() {
-      console.log(this)
+      log(this)
       return this.items.find((item) => item.active)
     },
   },
   methods: {
     onClick(event) {
-      console.log(event)
+      log(event)
       alert('clicked!')
     },
     setActive(toActivate) {
diff --git a/src/store/index.js b/src/store/index.js
index ad837e167a..85cf2c216f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,14 @@
 import { FETCH_MEDIA_PROVIDERS } from '~/constants/action-types'
 import { PROVIDER } from '~/constants/store-modules'
 
+import { warn } from '~/utils/warn'
+
 export const actions = {
   async nuxtServerInit({ dispatch }) {
     try {
       await dispatch(`${PROVIDER}/${FETCH_MEDIA_PROVIDERS}`)
     } catch (error) {
-      console.warn("Couldn't fetch media providers")
+      warn("Couldn't fetch media providers")
     }
   },
 }
diff --git a/src/store/provider.js b/src/store/provider.js
index 1e6a8c6b8c..7861f8deb9 100644
--- a/src/store/provider.js
+++ b/src/store/provider.js
@@ -14,6 +14,7 @@ import {
 } from '~/constants/mutation-types'
 import { capital } from 'case'
 import { SEARCH } from '~/constants/store-modules'
+import { warn } from '~/utils/warn'
 
 const AudioProviderService = MediaProviderService(AUDIO)
 const ImageProviderService = MediaProviderService(IMAGE)
@@ -70,7 +71,7 @@ export const createActions = (services) => ({
         sortedProviders = sortProviders(data)
       })
       .catch((error) => {
-        console.warn(
+        warn(
           `Error getting ${mediaType} providers: ${error}. Will use saved provider data instead.`
         )
         commit(SET_PROVIDER_FETCH_ERROR, { mediaType, error: true })
diff --git a/src/utils/local.js b/src/utils/local.js
index 30d84bb611..0aefd008e9 100644
--- a/src/utils/local.js
+++ b/src/utils/local.js
@@ -1,4 +1,5 @@
 // Small wrapper for localstorage to protect against SSR and permissions
+import { warn } from '~/utils/warn'
 
 const localStorageExists = () => process.client && window.localStorage !== null
 
@@ -11,7 +12,7 @@ const local = {
       return localStorageExists() ? localStorage.getItem(...args) : null
     } catch (e) {
       // Probably a `SecurityError`
-      console.warn('`localStorage` access denied', e)
+      warn('`localStorage` access denied', e)
       return null
     }
   },
@@ -24,7 +25,7 @@ const local = {
       if (localStorageExists()) localStorage.setItem(...args)
     } catch (e) {
       // Probably a `SecurityError`
-      console.warn('`localStorage` access denied', e)
+      warn('`localStorage` access denied', e)
     }
   },
 }
diff --git a/src/utils/warn.js b/src/utils/warn.js
deleted file mode 100644
index d509fc6f6c..0000000000
--- a/src/utils/warn.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const warn =
-  process.env.NODE_ENV !== 'production'
-    ? console.warn
-    : () => {
-        /* silence warnings in production */
-      }
diff --git a/src/utils/warn.ts b/src/utils/warn.ts
new file mode 100644
index 0000000000..b9a5c99838
--- /dev/null
+++ b/src/utils/warn.ts
@@ -0,0 +1,9 @@
+export const getLogger = (level: 'log' | 'warn' | 'error') =>
+  process.env.NODE_ENV !== 'production'
+    ? console[level]
+    : () => {
+        // do nothing
+      }
+
+export const warn = getLogger('warn')
+export const log = getLogger('log')
diff --git a/tsconfig.json b/tsconfig.json
index 48b434f95b..4a145cc91d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -49,8 +49,7 @@
     "src/utils/decode-media-data.js",
     "src/utils/deep-freeze.js",
     "src/utils/key-codes.js",
-    "src/utils/local.js",
-    "src/utils/warn.js"
+    "src/utils/local.js"
   ],
   "exclude": ["node_modules"]
 }

From 6a3b521ed9140b647aa89784cbb5f17c22308917 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 19:47:41 +0400
Subject: [PATCH 04/13] Lint TypeScript files for TSDoc compliance

---
 .eslintrc.js                   | 16 +++++++++++++++-
 package.json                   |  5 +++--
 pnpm-lock.yaml                 | 33 +++++++++++++++++++++++++++++++++
 src/locales/scripts/types.d.ts | 12 +++++++++---
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8811be90a5..2fe6ad08d2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,7 +18,13 @@ module.exports = {
     'plugin:@intlify/vue-i18n/recommended',
   ],
   // required to lint *.vue files
-  plugins: ['@typescript-eslint', 'vue', 'vuejs-accessibility', 'unicorn'],
+  plugins: [
+    '@typescript-eslint',
+    'eslint-plugin-tsdoc',
+    'vue',
+    'vuejs-accessibility',
+    'unicorn',
+  ],
   // add your custom rules here
   rules: {
     semi: [2, 'never'],
@@ -75,6 +81,14 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': ['warn'],
     '@typescript-eslint/no-var-requires': ['warn'],
   },
+  overrides: [
+    {
+      files: ['*.ts'],
+      rules: {
+        'tsdoc/syntax': 'warn',
+      },
+    },
+  ],
   settings: {
     'vue-i18n': {
       localeDir: './src/locales/*.{json}',
diff --git a/package.json b/package.json
index e314d3d439..c5f1980852 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
     "e2e:ci": "start-server-and-test run-server http://localhost:8443 test:e2e",
     "generate-e2e-tests": "playwright codegen localhost:8443/",
     "types": "tsc --noEmit",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
-    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
+    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
+    "lintfix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
     "format": "prettier --write .",
     "format:test": "prettier --check .",
     "vue-i18n-check": "vue-i18n-extract report --vueFiles './src/**/*.?(js|vue)' --languageFiles './src/locales/*.?(json)'",
@@ -108,6 +108,7 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-tsdoc": "^0.2.14",
     "eslint-plugin-unicorn": "^35.0.0",
     "eslint-plugin-vue": "^7.8.0",
     "eslint-plugin-vuejs-accessibility": "^0.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f43c662af..44ef92e8b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,6 +46,7 @@ specifiers:
   eslint-config-prettier: ^8.1.0
   eslint-loader: ^4.0.2
   eslint-plugin-prettier: ^3.3.1
+  eslint-plugin-tsdoc: ^0.2.14
   eslint-plugin-unicorn: ^35.0.0
   eslint-plugin-vue: ^7.8.0
   eslint-plugin-vuejs-accessibility: ^0.6.1
@@ -157,6 +158,7 @@ devDependencies:
   eslint-config-prettier: 8.3.0_eslint@7.32.0
   eslint-loader: 4.0.2_eslint@7.32.0
   eslint-plugin-prettier: 3.4.1_6e6a25a49a944db0fa38418c3ba4bc86
+  eslint-plugin-tsdoc: 0.2.14
   eslint-plugin-unicorn: 35.0.0_eslint@7.32.0
   eslint-plugin-vue: 7.20.0_eslint@7.32.0
   eslint-plugin-vuejs-accessibility: 0.6.2_eslint@7.32.0
@@ -3095,6 +3097,19 @@ packages:
     resolution: {integrity: sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==}
     dev: true
 
+  /@microsoft/tsdoc-config/0.15.2:
+    resolution: {integrity: sha512-mK19b2wJHSdNf8znXSMYVShAHktVr/ib0Ck2FA3lsVBSEhSI/TfXT7DJQkAYgcztTuwazGcg58ZjYdk0hTCVrA==}
+    dependencies:
+      '@microsoft/tsdoc': 0.13.2
+      ajv: 6.12.6
+      jju: 1.4.0
+      resolve: 1.19.0
+    dev: true
+
+  /@microsoft/tsdoc/0.13.2:
+    resolution: {integrity: sha512-WrHvO8PDL8wd8T2+zBGKrMwVL5IyzR3ryWUsl0PXgEV0QHup4mTLi0QcATefGI6Gx9Anu7vthPyyyLpY0EpiQg==}
+    dev: true
+
   /@mrmlnc/readdir-enhanced/2.2.1:
     resolution: {integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==}
     engines: {node: '>=4'}
@@ -9508,6 +9523,13 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
+  /eslint-plugin-tsdoc/0.2.14:
+    resolution: {integrity: sha512-fJ3fnZRsdIoBZgzkQjv8vAj6NeeOoFkTfgosj6mKsFjX70QV256sA/wq+y/R2+OL4L8E79VVaVWrPeZnKNe8Ng==}
+    dependencies:
+      '@microsoft/tsdoc': 0.13.2
+      '@microsoft/tsdoc-config': 0.15.2
+    dev: true
+
   /eslint-plugin-unicorn/35.0.0_eslint@7.32.0:
     resolution: {integrity: sha512-FHsaO68tDPQILfs/mGF8eSISJp8RswR4FpUuBDnueK2wyEHC6zmsc9WxjYyldXoIsBuVmru6jQyFCbCWPoW/KQ==}
     engines: {node: '>=12'}
@@ -12309,6 +12331,10 @@ packages:
     resolution: {integrity: sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==}
     hasBin: true
 
+  /jju/1.4.0:
+    resolution: {integrity: sha1-o6vicYryQaKykE+EpiWXDzia4yo=}
+    dev: true
+
   /joi/17.5.0:
     resolution: {integrity: sha512-R7hR50COp7StzLnDi4ywOXHrBrgNXuUUfJWIR5lPY5Bm/pOD3jZaTwpluUXVLRWcoWZxkrHBBJ5hLxgnlehbdw==}
     dependencies:
@@ -16066,6 +16092,13 @@ packages:
     resolution: {integrity: sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=}
     deprecated: https://github.com/lydell/resolve-url#deprecated
 
+  /resolve/1.19.0:
+    resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
+    dependencies:
+      is-core-module: 2.8.0
+      path-parse: 1.0.7
+    dev: true
+
   /resolve/1.20.0:
     resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==}
     dependencies:
diff --git a/src/locales/scripts/types.d.ts b/src/locales/scripts/types.d.ts
index 13f2fbc66a..1158529152 100644
--- a/src/locales/scripts/types.d.ts
+++ b/src/locales/scripts/types.d.ts
@@ -1,3 +1,9 @@
-/**
- * @typedef {{ code: string, wpLocale?: string, file?: string, iso?: string, name: string, dir?: string, translated?: number }} i18nLocaleProps
- */
+interface i18nLocaleProps {
+  code: string
+  name: string
+  wpLocale?: string
+  file?: string
+  iso?: string
+  dir?: string
+  translated?: number
+}

From 94f7dc4a404928a15da155586f4d0840832d9b19 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 19:51:09 +0400
Subject: [PATCH 05/13] Convert the `dev` util to TypeScript and update usages

---
 nuxt.config.js                 | 4 ++--
 src/components/VIcon/VIcon.vue | 4 +++-
 src/utils/dev.js               | 1 -
 src/utils/dev.ts               | 3 +++
 src/utils/resampling.ts        | 4 ++--
 src/utils/send-message.js      | 4 ++--
 src/utils/sentry-config.js     | 4 +++-
 src/utils/warn.ts              | 4 +++-
 8 files changed, 18 insertions(+), 10 deletions(-)
 delete mode 100644 src/utils/dev.js
 create mode 100644 src/utils/dev.ts

diff --git a/nuxt.config.js b/nuxt.config.js
index 2d8a524d5f..db63925083 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,7 +1,7 @@
 import pkg from './package.json'
 import locales from './src/locales/scripts/valid-locales.json'
 import { VIEWPORTS } from './src/constants/screens'
-import { dev } from './src/utils/dev'
+import { isNotProd } from './src/utils/dev'
 import { env } from './src/utils/env'
 import { sentry } from './src/utils/sentry-config'
 
@@ -134,7 +134,7 @@ export default {
   ],
   head,
   env,
-  dev,
+  dev: isNotProd,
   buildModules: [
     '@nuxt/typescript-build',
     '@nuxtjs/composition-api/module',
diff --git a/src/components/VIcon/VIcon.vue b/src/components/VIcon/VIcon.vue
index ec3b8d1a59..2b4bbcaa2d 100644
--- a/src/components/VIcon/VIcon.vue
+++ b/src/components/VIcon/VIcon.vue
@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { isTest } from '~/utils/dev'
+
 /**
  * Displays the given icon in a 24px × 24px square.
  */
@@ -33,7 +35,7 @@ export default {
       /**
        * In `jest` our icons get transformed to Vue components
        */
-      type: process.env.NODE_ENV === 'test' ? Object : String,
+      type: isTest ? Object : String,
       required: true,
     },
     /**
diff --git a/src/utils/dev.js b/src/utils/dev.js
deleted file mode 100644
index 11d9b7fc59..0000000000
--- a/src/utils/dev.js
+++ /dev/null
@@ -1 +0,0 @@
-export const dev = process.env.NODE_ENV !== 'production'
diff --git a/src/utils/dev.ts b/src/utils/dev.ts
new file mode 100644
index 0000000000..b2c82eb79d
--- /dev/null
+++ b/src/utils/dev.ts
@@ -0,0 +1,3 @@
+export const isDev: boolean = process.env.NODE_ENV === 'development'
+export const isTest: boolean = process.env.NODE_ENV === 'test'
+export const isNotProd: boolean = process.env.NODE_ENV !== 'production'
diff --git a/src/utils/resampling.ts b/src/utils/resampling.ts
index 2ae052c45a..26d825a467 100644
--- a/src/utils/resampling.ts
+++ b/src/utils/resampling.ts
@@ -2,8 +2,8 @@
  * Resizes a given array to consist of more elements than provided. This uses
  * linear interpolation to fill in the gaps.
  *
- * @param data the list of data points to interpolate
- * @param threshold the number of expected data points from the array
+ * @param data - the list of data points to interpolate
+ * @param threshold - the number of expected data points from the array
  * @returns the array with the required number of points
  */
 export const upsampleArray = (data: number[], threshold: number): number[] => {
diff --git a/src/utils/send-message.js b/src/utils/send-message.js
index 155fd3272e..0b0be304f2 100644
--- a/src/utils/send-message.js
+++ b/src/utils/send-message.js
@@ -1,4 +1,4 @@
-import { dev } from '~/utils/dev'
+import { isNotProd } from '~/utils/dev'
 
 // TODO: set correct targetOrigin of the parent window
 const TARGET_ORIGIN = '*'
@@ -11,7 +11,7 @@ const TARGET_ORIGIN = '*'
  * @param {'resize'|'changeUrl'} message.type - event that triggers the message
  * @param {any} message.value - the value of event
  */
-export const sendWindowMessage = ({ debug = dev, ...message }) => {
+export const sendWindowMessage = ({ debug = isNotProd, ...message }) => {
   if (window.parent !== window) {
     window.parent.postMessage({ debug, ...message }, TARGET_ORIGIN)
   }
diff --git a/src/utils/sentry-config.js b/src/utils/sentry-config.js
index 2512b7d806..e41a32caf9 100644
--- a/src/utils/sentry-config.js
+++ b/src/utils/sentry-config.js
@@ -1,8 +1,10 @@
+import { isDev } from '~/utils/dev'
+
 export const sentry = {
   dsn:
     process.env.SENTRY_DSN ||
     'https://53da8fbcebeb48a6bf614a212629df6b@o787041.ingest.sentry.io/5799642',
-  disabled: process.env.NODE_ENV === 'development',
+  disabled: isDev,
   environment: process.env.NODE_ENV,
   lazy: true,
 }
diff --git a/src/utils/warn.ts b/src/utils/warn.ts
index b9a5c99838..5f03946a20 100644
--- a/src/utils/warn.ts
+++ b/src/utils/warn.ts
@@ -1,5 +1,7 @@
+import { isNotProd } from '~/utils/dev'
+
 export const getLogger = (level: 'log' | 'warn' | 'error') =>
-  process.env.NODE_ENV !== 'production'
+  isNotProd
     ? console[level]
     : () => {
         // do nothing

From 9edcc69a937d6e0359a3aa38c8febec81180ad5b Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 19:53:58 +0400
Subject: [PATCH 06/13] Avoid empty interface

---
 src/store/types.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/store/types.ts b/src/store/types.ts
index a259ea5f08..73333d61c4 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -149,8 +149,9 @@ export interface ActiveMediaState {
   status: 'ejected' | 'playing' | 'paused' // 'ejected' means player is closed
 }
 
-export interface MediaStoreResult<T extends FrontendMediaType>
-  extends MediaResult<Record<MediaDetail['id'], T>> {}
+export type MediaStoreResult<T extends FrontendMediaType> = MediaResult<
+  Record<MediaDetail['id'], T>
+>
 
 export interface MediaState {
   results: {

From 4249d80b040ff557d50f0e96fbdadc2face74c28 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 20:31:01 +0400
Subject: [PATCH 07/13] Use TS for the Nuxt config

---
 Dockerfile                        |  3 +--
 nuxt-template-overrides/README.md |  2 +-
 nuxt.config.js => nuxt.config.ts  | 19 +++++++++++++------
 src/store/usage-data.js           |  2 +-
 src/utils/{env.js => env.ts}      |  9 ++-------
 src/utils/sentry-config.js        | 10 ----------
 src/utils/sentry-config.ts        | 16 ++++++++++++++++
 7 files changed, 34 insertions(+), 27 deletions(-)
 rename nuxt.config.js => nuxt.config.ts (94%)
 rename src/utils/{env.js => env.ts} (62%)
 delete mode 100644 src/utils/sentry-config.js
 create mode 100644 src/utils/sentry-config.ts

diff --git a/Dockerfile b/Dockerfile
index a7293f580b..d21b469aaa 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -76,7 +76,7 @@ COPY pnpm-lock.yaml .
 COPY .npmrc .
 
 # copy the nuxt configuration file
-COPY --from=builder /usr/app/nuxt.config.js .
+COPY --from=builder /usr/app/nuxt.config.ts .
 
 # copy distribution directory with the static content
 COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt
@@ -106,4 +106,3 @@ EXPOSE 8443
 
 # run the application in static mode
 ENTRYPOINT ["pnpm", "run", "start"]
-
diff --git a/nuxt-template-overrides/README.md b/nuxt-template-overrides/README.md
index c6118be9e3..99ed3da0c2 100644
--- a/nuxt-template-overrides/README.md
+++ b/nuxt-template-overrides/README.md
@@ -1,6 +1,6 @@
 # Nuxt vue-app template overrides
 
-Due to a CSS ordering bug that we haven't been able to find any other solutions for, we've had to override the Nuxt templates for the `App.js` and `index.js` files to prevent any Vue components from being imported before the static CSS assets in the `nuxt.config.js`.
+Due to a CSS ordering bug that we haven't been able to find any other solutions for, we've had to override the Nuxt templates for the `App.js` and `index.js` files to prevent any Vue components from being imported before the static CSS assets in the `nuxt.config.ts`.
 
 ## Described changes
 
diff --git a/nuxt.config.js b/nuxt.config.ts
similarity index 94%
rename from nuxt.config.js
rename to nuxt.config.ts
index db63925083..c365bef794 100644
--- a/nuxt.config.js
+++ b/nuxt.config.ts
@@ -1,9 +1,13 @@
+import type { NuxtConfig } from '@nuxt/types'
+
 import pkg from './package.json'
 import locales from './src/locales/scripts/valid-locales.json'
+
 import { VIEWPORTS } from './src/constants/screens'
+
 import { isNotProd } from './src/utils/dev'
+import { sentryConfig } from './src/utils/sentry-config'
 import { env } from './src/utils/env'
-import { sentry } from './src/utils/sentry-config'
 
 /**
  * The default metadata for the site. Can be extended and/or overwritten per page. And even in components!
@@ -51,6 +55,7 @@ const meta = [
 
 if (process.env.NODE_ENV === 'production') {
   meta.push({
+    // @ts-expect-error: 'http-equiv' isn't allowed here by Nuxt
     'http-equiv': 'Content-Security-Policy',
     content: 'upgrade-insecure-requests',
   })
@@ -99,7 +104,7 @@ const head = {
   ],
 }
 
-export default {
+const config: NuxtConfig = {
   // eslint-disable-next-line no-undef
   version: pkg.version, // used to purge cache :)
   cache: {
@@ -116,9 +121,9 @@ export default {
   router: {
     middleware: 'middleware',
   },
-  components: {
-    dirs: [{ path: '~/components', extensions: ['vue'], pathPrefix: false }],
-  },
+  components: [
+    { path: '~/components', extensions: ['vue'], pathPrefix: false },
+  ],
   plugins: [
     { src: '~/plugins/url-change.js' },
     { src: '~/plugins/migration-notice.js' },
@@ -195,7 +200,7 @@ export default {
    * {@link https://github.com/nuxt-community/redirect-module#usage}
    */
   redirect: [{ from: '^/photos/(.*)$', to: '/image/$1', statusCode: 301 }],
-  sentry,
+  sentry: sentryConfig,
   build: {
     templates: [
       {
@@ -245,3 +250,5 @@ export default {
     },
   },
 }
+
+export default config
diff --git a/src/store/usage-data.js b/src/store/usage-data.js
index a1ba17049d..702c4541ba 100644
--- a/src/store/usage-data.js
+++ b/src/store/usage-data.js
@@ -6,7 +6,7 @@ import {
 } from '~/constants/usage-data-analytics-types'
 import stringToBoolean from '~/utils/string-to-boolean'
 import UsageDataService from '~/data/usage-data-service'
-import { sentry as sentryConfig } from '~/utils/sentry-config'
+import { sentryConfig } from '~/utils/sentry-config'
 
 const disabled = !stringToBoolean(process.env.enableInternalAnalytics)
 
diff --git a/src/utils/env.js b/src/utils/env.ts
similarity index 62%
rename from src/utils/env.js
rename to src/utils/env.ts
index 304ac81110..0bd911dbd4 100644
--- a/src/utils/env.js
+++ b/src/utils/env.ts
@@ -1,15 +1,10 @@
-// Use relative import to resolve during nuxt runtime
-import stringToBoolean from './string-to-boolean'
-
 /**
  * Default environment variables are set on this key. Defaults are fallbacks to existing env vars.
  * All boolean values should be designed to be false by default.
  */
-export const env = {
+export const env: Record<string, string> = {
   apiUrl: process.env.API_URL ?? 'https://api.openverse.engineering/v1/',
   filterStorageKey: 'openverse-filter-visibility',
   notificationStorageKey: 'openverse-show-notification',
-  enableInternalAnalytics: stringToBoolean(
-    process.env.ENABLE_INTERNAL_ANALYTICS
-  ),
+  enableInternalAnalytics: process.env.ENABLE_INTERNAL_ANALYTICS ?? 'false',
 }
diff --git a/src/utils/sentry-config.js b/src/utils/sentry-config.js
deleted file mode 100644
index e41a32caf9..0000000000
--- a/src/utils/sentry-config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { isDev } from '~/utils/dev'
-
-export const sentry = {
-  dsn:
-    process.env.SENTRY_DSN ||
-    'https://53da8fbcebeb48a6bf614a212629df6b@o787041.ingest.sentry.io/5799642',
-  disabled: isDev,
-  environment: process.env.NODE_ENV,
-  lazy: true,
-}
diff --git a/src/utils/sentry-config.ts b/src/utils/sentry-config.ts
new file mode 100644
index 0000000000..f6a7c19953
--- /dev/null
+++ b/src/utils/sentry-config.ts
@@ -0,0 +1,16 @@
+import type { ModuleConfiguration } from '@nuxtjs/sentry'
+
+import { isNotProd } from './dev'
+
+/**
+ * Get the Sentry configuration based on the current environment.
+ * @param isDisabled - whether to disable Sentry
+ * @returns the Sentry configuration to use
+ */
+export const sentryConfig: ModuleConfiguration = {
+  dsn:
+    process.env.SENTRY_DSN ||
+    'https://53da8fbcebeb48a6bf614a212629df6b@o787041.ingest.sentry.io/5799642',
+  disabled: isNotProd,
+  lazy: true,
+}

From 0b4555ed203c376c7bc7d7901771f4431a76f2fe Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 20:53:18 +0400
Subject: [PATCH 08/13] Change `string-to-boolean` util to TypeScript

---
 src/store/usage-data.js                       |  4 ++-
 src/utils/string-to-boolean.js                | 24 --------------
 src/utils/string-to-boolean.ts                | 32 +++++++++++++++++++
 .../specs/utils/string-to-boolean.spec.js     | 21 ++++++++++--
 4 files changed, 53 insertions(+), 28 deletions(-)
 delete mode 100644 src/utils/string-to-boolean.js
 create mode 100644 src/utils/string-to-boolean.ts

diff --git a/src/store/usage-data.js b/src/store/usage-data.js
index 702c4541ba..b87eef5488 100644
--- a/src/store/usage-data.js
+++ b/src/store/usage-data.js
@@ -4,8 +4,10 @@ import {
   SEND_DETAIL_PAGE_EVENT,
   SEND_SEARCH_RATING_EVENT,
 } from '~/constants/usage-data-analytics-types'
-import stringToBoolean from '~/utils/string-to-boolean'
+
 import UsageDataService from '~/data/usage-data-service'
+
+import { stringToBoolean } from '~/utils/string-to-boolean'
 import { sentryConfig } from '~/utils/sentry-config'
 
 const disabled = !stringToBoolean(process.env.enableInternalAnalytics)
diff --git a/src/utils/string-to-boolean.js b/src/utils/string-to-boolean.js
deleted file mode 100644
index 156e77aa4d..0000000000
--- a/src/utils/string-to-boolean.js
+++ /dev/null
@@ -1,24 +0,0 @@
-function stringToBoolean(string) {
-  // In case the string is already a boolean, bail and return the boolean.
-  // This isn't *awesome*, but sometimes .env vars are auto-cast to booleans
-  // and this will catch that.
-  if (typeof string === 'boolean') return string
-
-  if (string && typeof string === 'string') {
-    switch (string.toLowerCase().trim()) {
-      case 'true':
-      case 'yes':
-      case '1':
-        return true
-      case 'false':
-      case 'no':
-      case '0':
-      case null:
-        return false
-      default:
-        return Boolean(string)
-    }
-  } else return false
-}
-
-export default stringToBoolean
diff --git a/src/utils/string-to-boolean.ts b/src/utils/string-to-boolean.ts
new file mode 100644
index 0000000000..1fdf268539
--- /dev/null
+++ b/src/utils/string-to-boolean.ts
@@ -0,0 +1,32 @@
+/**
+ * Convert the given value, string or boolean, to a boolean value by casting
+ * - `'true'`, `'yes'` and `'1'` to true
+ * - `'false'`, `'no'` and `'0'` to false
+ *
+ * Any other string will be cast to boolean using the default JavaScript
+ * truthy-falsy logic.
+ *
+ * @param value - the value to cast
+ * @returns the boolean-equivalent value of the given string or boolean
+ */
+export const stringToBoolean = (value: string | boolean): boolean => {
+  // In case the string is already a boolean, return as-is.
+  // If `.env` vars are auto-cast to booleans, this will catch that.
+  if (typeof value === 'boolean') return value
+
+  if (!value) return false
+
+  value = value.toLowerCase().trim()
+  switch (value) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true
+    case 'false':
+    case 'no':
+    case '0':
+      return false
+    default:
+      return Boolean(value)
+  }
+}
diff --git a/test/unit/specs/utils/string-to-boolean.spec.js b/test/unit/specs/utils/string-to-boolean.spec.js
index bee77faad0..9e09367df2 100644
--- a/test/unit/specs/utils/string-to-boolean.spec.js
+++ b/test/unit/specs/utils/string-to-boolean.spec.js
@@ -1,15 +1,30 @@
-import stringToBoolean from '~/utils/string-to-boolean'
+import { stringToBoolean } from '~/utils/string-to-boolean'
 
 describe('stringToBoolean', () => {
-  it('returns true', () => {
+  it('returns true for "true", "yes" and "1"', () => {
     expect(stringToBoolean('true')).toBe(true)
     expect(stringToBoolean('yes')).toBe(true)
     expect(stringToBoolean('1')).toBe(true)
   })
 
-  it('returns false', () => {
+  it('returns false for "false", "no" and "0"', () => {
     expect(stringToBoolean('false')).toBe(false)
     expect(stringToBoolean('no')).toBe(false)
     expect(stringToBoolean('0')).toBe(false)
   })
+
+  it('returns booleans as-is', () => {
+    expect(stringToBoolean(true)).toBe(true)
+    expect(stringToBoolean(false)).toBe(false)
+  })
+
+  it('converts null-ish values to false', () => {
+    expect(stringToBoolean(null)).toBe(false)
+    expect(stringToBoolean(undefined)).toBe(false)
+  })
+
+  it('handles other strings', () => {
+    expect(stringToBoolean('any content')).toBe(true)
+    expect(stringToBoolean('')).toBe(false)
+  })
 })

From 3ad59c2e5b842b4805982edc3058d3f2fbe599bb Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 22:13:56 +0400
Subject: [PATCH 09/13] Rename `warn.ts` to `console.ts`

---
 src/components/SketchFabViewer.vue               | 2 +-
 src/components/VButton.vue                       | 2 +-
 src/components/VItemGroup/VItem.vue              | 2 +-
 src/components/VModal/VMobileModalContent.vue    | 2 +-
 src/components/VModal/VModalContent.vue          | 2 +-
 src/components/VPopover/VPopoverContent.vue      | 2 +-
 src/components/VPopover/meta/VPopover.stories.js | 2 +-
 src/components/VTeleport/VTeleportTarget.vue     | 2 +-
 src/components/meta/DropdownButton.stories.js    | 2 +-
 src/composables/use-focus-on-show.js             | 2 +-
 src/data/api-service.js                          | 2 +-
 src/store/index.js                               | 2 +-
 src/store/provider.js                            | 2 +-
 src/utils/{warn.ts => console.ts}                | 0
 src/utils/local.js                               | 2 +-
 test/unit/specs/components/v-button.spec.js      | 4 ++--
 test/unit/specs/components/v-logo-loader.spec.js | 3 ++-
 test/unit/specs/components/v-popover.spec.js     | 4 ++--
 18 files changed, 20 insertions(+), 19 deletions(-)
 rename src/utils/{warn.ts => console.ts} (100%)

diff --git a/src/components/SketchFabViewer.vue b/src/components/SketchFabViewer.vue
index 6de9eac15a..41dcd80546 100644
--- a/src/components/SketchFabViewer.vue
+++ b/src/components/SketchFabViewer.vue
@@ -16,7 +16,7 @@
 
 <script>
 import loadScript from '~/utils/load-script'
-import { log } from '~/utils/warn'
+import { log } from '~/utils/console'
 
 const sketchfabUrl =
   'https://static.sketchfab.com/api/sketchfab-viewer-1.10.1.js'
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index 47c5c51bd0..584626a3fc 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -31,7 +31,7 @@ import {
   computed,
 } from '@nuxtjs/composition-api'
 import VLink from '~/components/VLink.vue'
-import { warn } from '@/utils/warn'
+import { warn } from '~/utils/console'
 
 /**
  * A button component that behaves just like a regular HTML `button` element
diff --git a/src/components/VItemGroup/VItem.vue b/src/components/VItemGroup/VItem.vue
index 5b4eab33b9..20a5012907 100644
--- a/src/components/VItemGroup/VItem.vue
+++ b/src/components/VItemGroup/VItem.vue
@@ -74,7 +74,7 @@ import {
   VItemGroupFocusContextKey,
 } from './VItemGroup.vue'
 import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export default defineComponent({
   name: 'VItem',
diff --git a/src/components/VModal/VMobileModalContent.vue b/src/components/VModal/VMobileModalContent.vue
index 3ef2a03ba8..7156161340 100644
--- a/src/components/VModal/VMobileModalContent.vue
+++ b/src/components/VModal/VMobileModalContent.vue
@@ -45,7 +45,7 @@
 import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 import { useDialogContent } from '~/composables/use-dialog-content'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 import closeIcon from '~/assets/icons/close.svg'
 
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index f63a2f7aa8..f9946a17f8 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -42,7 +42,7 @@ import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 import VTeleport from '~/components/VTeleport/VTeleport'
 import { useDialogContent } from '~/composables/use-dialog-content'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import closeIcon from '~/assets/icons/close.svg'
diff --git a/src/components/VPopover/VPopoverContent.vue b/src/components/VPopover/VPopoverContent.vue
index 2ac3eee7c0..017030cbe9 100644
--- a/src/components/VPopover/VPopoverContent.vue
+++ b/src/components/VPopover/VPopoverContent.vue
@@ -21,7 +21,7 @@
 <script>
 import { defineComponent, toRefs, ref, provide } from '@nuxtjs/composition-api'
 import { usePopoverContent } from '~/composables/use-popover-content'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 import { propTypes } from './VPopoverContent.types'
 
diff --git a/src/components/VPopover/meta/VPopover.stories.js b/src/components/VPopover/meta/VPopover.stories.js
index 5b4eb58ce3..71f63ac92c 100644
--- a/src/components/VPopover/meta/VPopover.stories.js
+++ b/src/components/VPopover/meta/VPopover.stories.js
@@ -2,7 +2,7 @@ import VPopover from '~/components/VPopover/VPopover.vue'
 import VButton from '~/components/VButton'
 import { placements as popoverPlacements } from '@popperjs/core'
 
-import { log } from '~/utils/warn'
+import { log } from '~/utils/console'
 
 export default {
   component: VPopover,
diff --git a/src/components/VTeleport/VTeleportTarget.vue b/src/components/VTeleport/VTeleportTarget.vue
index 978c52b37b..8e3408b240 100644
--- a/src/components/VTeleport/VTeleportTarget.vue
+++ b/src/components/VTeleport/VTeleportTarget.vue
@@ -1,7 +1,7 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 import { targets } from './meta/targets'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export default defineComponent({
   name: 'VTeleportTarget',
diff --git a/src/components/meta/DropdownButton.stories.js b/src/components/meta/DropdownButton.stories.js
index e2f18cd947..96e8d3205f 100644
--- a/src/components/meta/DropdownButton.stories.js
+++ b/src/components/meta/DropdownButton.stories.js
@@ -1,6 +1,6 @@
 import DropdownButton from '~/components/DropdownButton'
 
-import { log } from '~/utils/warn'
+import { log } from '~/utils/console'
 
 export default {
   title: 'Components/DropdownButton',
diff --git a/src/composables/use-focus-on-show.js b/src/composables/use-focus-on-show.js
index 6eb34945c5..fbc9c25494 100644
--- a/src/composables/use-focus-on-show.js
+++ b/src/composables/use-focus-on-show.js
@@ -3,7 +3,7 @@ import { getFirstTabbableIn } from 'reakit-utils/tabbable'
 import { hasFocusWithin } from 'reakit-utils/hasFocusWithin'
 import { ensureFocus } from 'reakit-utils/ensureFocus'
 
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export const noFocusableElementWarning =
   "It's recommended to have at least one tabbable element inside dialog. The dialog element has been automatically focused. If this is the intended behavior, pass `tabIndex={0}` to the dialog element to disable this warning."
diff --git a/src/data/api-service.js b/src/data/api-service.js
index b9795e52dc..0be6edf7c4 100644
--- a/src/data/api-service.js
+++ b/src/data/api-service.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 import { AUDIO, IMAGE } from '~/constants/media'
 
 const DEFAULT_REQUEST_TIMEOUT = 30000
diff --git a/src/store/index.js b/src/store/index.js
index 85cf2c216f..3c0b633984 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,7 @@
 import { FETCH_MEDIA_PROVIDERS } from '~/constants/action-types'
 import { PROVIDER } from '~/constants/store-modules'
 
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export const actions = {
   async nuxtServerInit({ dispatch }) {
diff --git a/src/store/provider.js b/src/store/provider.js
index 7861f8deb9..71e40f6324 100644
--- a/src/store/provider.js
+++ b/src/store/provider.js
@@ -14,7 +14,7 @@ import {
 } from '~/constants/mutation-types'
 import { capital } from 'case'
 import { SEARCH } from '~/constants/store-modules'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 const AudioProviderService = MediaProviderService(AUDIO)
 const ImageProviderService = MediaProviderService(IMAGE)
diff --git a/src/utils/warn.ts b/src/utils/console.ts
similarity index 100%
rename from src/utils/warn.ts
rename to src/utils/console.ts
diff --git a/src/utils/local.js b/src/utils/local.js
index 0aefd008e9..a7725e31db 100644
--- a/src/utils/local.js
+++ b/src/utils/local.js
@@ -1,5 +1,5 @@
 // Small wrapper for localstorage to protect against SSR and permissions
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 const localStorageExists = () => process.client && window.localStorage !== null
 
diff --git a/test/unit/specs/components/v-button.spec.js b/test/unit/specs/components/v-button.spec.js
index 2d11723e9f..2a8a0561ba 100644
--- a/test/unit/specs/components/v-button.spec.js
+++ b/test/unit/specs/components/v-button.spec.js
@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/vue'
 
 import VButton from '~/components/VButton.vue'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
-jest.mock('~/utils/warn', () => ({ warn: jest.fn() }))
+jest.mock('~/utils/console', () => ({ warn: jest.fn(), log: jest.fn() }))
 
 const nextTick = () => new Promise((r) => setTimeout(r, 0))
 /**
diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index 52d38e8e6b..8cc61a81cc 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -2,8 +2,9 @@ import { render, screen } from '@testing-library/vue'
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 import { useReducedMotion } from '~/composables/use-media-query'
 
-jest.mock('~/utils/warn', () => ({
+jest.mock('~/utils/console', () => ({
   warn: jest.fn(),
+  log: jest.fn(),
 }))
 
 jest.mock('~/composables/use-media-query', () => ({
diff --git a/test/unit/specs/components/v-popover.spec.js b/test/unit/specs/components/v-popover.spec.js
index 63e110e407..2c1fdb5378 100644
--- a/test/unit/specs/components/v-popover.spec.js
+++ b/test/unit/specs/components/v-popover.spec.js
@@ -4,9 +4,9 @@ import userEvent from '@testing-library/user-event'
 import VButton from '~/components/VButton.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
 import { noFocusableElementWarning } from '~/composables/use-focus-on-show'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
-jest.mock('~/utils/warn', () => ({
+jest.mock('~/utils/console', () => ({
   warn: jest.fn(),
 }))
 

From 16cd2c9d63c064e515d50842fe2912a9195c7b07 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 22:56:29 +0400
Subject: [PATCH 10/13] Change first letter of interface to uppercase

---
 src/locales/scripts/get-validated-locales.js | 4 ++--
 src/locales/scripts/types.d.ts               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/locales/scripts/get-validated-locales.js b/src/locales/scripts/get-validated-locales.js
index 3d0292cf21..a5de99f1c3 100644
--- a/src/locales/scripts/get-validated-locales.js
+++ b/src/locales/scripts/get-validated-locales.js
@@ -10,8 +10,8 @@ const { addFetchedTranslationStatus } = require('./get-translations-status')
 /**
  * Returns a list of locale objects with at least one translated string
  * @returns {{
- * translated: import('./types').i18nLocaleProps[],
- * untranslated: import('./types').i18nLocaleProps[]
+ * translated: import('./types').I18nLocaleProps[],
+ * untranslated: import('./types').I18nLocaleProps[]
  * }}
  */
 const getValidatedLocales = async () => {
diff --git a/src/locales/scripts/types.d.ts b/src/locales/scripts/types.d.ts
index 1158529152..4f522a5f85 100644
--- a/src/locales/scripts/types.d.ts
+++ b/src/locales/scripts/types.d.ts
@@ -1,4 +1,4 @@
-interface i18nLocaleProps {
+export interface I18nLocaleProps {
   code: string
   name: string
   wpLocale?: string

From c40b4719dbca179b497f69f9859986f0cbc9d7aa Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 23:01:26 +0400
Subject: [PATCH 11/13] Use positive form of boolean

---
 nuxt.config.ts                    | 4 ++--
 src/components/VIcon/VIcon.vue    | 2 +-
 src/utils/console.ts              | 8 ++++----
 src/utils/{dev.ts => node-env.ts} | 2 +-
 src/utils/send-message.js         | 4 ++--
 src/utils/sentry-config.ts        | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)
 rename src/utils/{dev.ts => node-env.ts} (64%)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index c365bef794..f91a8ebbf5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,7 +5,7 @@ import locales from './src/locales/scripts/valid-locales.json'
 
 import { VIEWPORTS } from './src/constants/screens'
 
-import { isNotProd } from './src/utils/dev'
+import { isProd } from './src/utils/node-env'
 import { sentryConfig } from './src/utils/sentry-config'
 import { env } from './src/utils/env'
 
@@ -139,7 +139,7 @@ const config: NuxtConfig = {
   ],
   head,
   env,
-  dev: isNotProd,
+  dev: !isProd,
   buildModules: [
     '@nuxt/typescript-build',
     '@nuxtjs/composition-api/module',
diff --git a/src/components/VIcon/VIcon.vue b/src/components/VIcon/VIcon.vue
index 2b4bbcaa2d..3984e377ce 100644
--- a/src/components/VIcon/VIcon.vue
+++ b/src/components/VIcon/VIcon.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { isTest } from '~/utils/dev'
+import { isTest } from '~/utils/node-env'
 
 /**
  * Displays the given icon in a 24px × 24px square.
diff --git a/src/utils/console.ts b/src/utils/console.ts
index 5f03946a20..253f51f641 100644
--- a/src/utils/console.ts
+++ b/src/utils/console.ts
@@ -1,11 +1,11 @@
-import { isNotProd } from '~/utils/dev'
+import { isProd } from '~/utils/node-env'
 
 export const getLogger = (level: 'log' | 'warn' | 'error') =>
-  isNotProd
-    ? console[level]
-    : () => {
+  isProd
+    ? () => {
         // do nothing
       }
+    : console[level]
 
 export const warn = getLogger('warn')
 export const log = getLogger('log')
diff --git a/src/utils/dev.ts b/src/utils/node-env.ts
similarity index 64%
rename from src/utils/dev.ts
rename to src/utils/node-env.ts
index b2c82eb79d..3a14c9ae3e 100644
--- a/src/utils/dev.ts
+++ b/src/utils/node-env.ts
@@ -1,3 +1,3 @@
 export const isDev: boolean = process.env.NODE_ENV === 'development'
 export const isTest: boolean = process.env.NODE_ENV === 'test'
-export const isNotProd: boolean = process.env.NODE_ENV !== 'production'
+export const isProd: boolean = process.env.NODE_ENV === 'production'
diff --git a/src/utils/send-message.js b/src/utils/send-message.js
index 0b0be304f2..1354ec1306 100644
--- a/src/utils/send-message.js
+++ b/src/utils/send-message.js
@@ -1,4 +1,4 @@
-import { isNotProd } from '~/utils/dev'
+import { isProd } from '~/utils/node-env'
 
 // TODO: set correct targetOrigin of the parent window
 const TARGET_ORIGIN = '*'
@@ -11,7 +11,7 @@ const TARGET_ORIGIN = '*'
  * @param {'resize'|'changeUrl'} message.type - event that triggers the message
  * @param {any} message.value - the value of event
  */
-export const sendWindowMessage = ({ debug = isNotProd, ...message }) => {
+export const sendWindowMessage = ({ debug = !isProd, ...message }) => {
   if (window.parent !== window) {
     window.parent.postMessage({ debug, ...message }, TARGET_ORIGIN)
   }
diff --git a/src/utils/sentry-config.ts b/src/utils/sentry-config.ts
index f6a7c19953..9909568358 100644
--- a/src/utils/sentry-config.ts
+++ b/src/utils/sentry-config.ts
@@ -1,6 +1,6 @@
 import type { ModuleConfiguration } from '@nuxtjs/sentry'
 
-import { isNotProd } from './dev'
+import { isProd } from './node-env'
 
 /**
  * Get the Sentry configuration based on the current environment.
@@ -11,6 +11,6 @@ export const sentryConfig: ModuleConfiguration = {
   dsn:
     process.env.SENTRY_DSN ||
     'https://53da8fbcebeb48a6bf614a212629df6b@o787041.ingest.sentry.io/5799642',
-  disabled: isNotProd,
+  disabled: !isProd,
   lazy: true,
 }

From 5acea54a99b8a6a98957664a13f134b1a5fdfa65 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 23:02:56 +0400
Subject: [PATCH 12/13] Use `as const` to use the narrowest type for `env`

---
 src/utils/env.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/env.ts b/src/utils/env.ts
index 0bd911dbd4..efce30e53e 100644
--- a/src/utils/env.ts
+++ b/src/utils/env.ts
@@ -2,9 +2,9 @@
  * Default environment variables are set on this key. Defaults are fallbacks to existing env vars.
  * All boolean values should be designed to be false by default.
  */
-export const env: Record<string, string> = {
+export const env = {
   apiUrl: process.env.API_URL ?? 'https://api.openverse.engineering/v1/',
   filterStorageKey: 'openverse-filter-visibility',
   notificationStorageKey: 'openverse-show-notification',
   enableInternalAnalytics: process.env.ENABLE_INTERNAL_ANALYTICS ?? 'false',
-}
+} as const

From 0b0bc48d22f959a66e31cd176b3f358266ff4fdf Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 28 Feb 2022 23:19:37 +0400
Subject: [PATCH 13/13] Include TypeScript files outside `src`

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

diff --git a/tsconfig.json b/tsconfig.json
index 4a145cc91d..0fe0108a58 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,7 +33,7 @@
     "baseUrl": "."
   },
   "include": [
-    "src/**/*.ts",
+    "**/*.ts",
     "src/composables/types.js",
     "src/composables/use-event-listener-outside.js",
     "src/composables/use-active-audio.js",