Use TS for the Nuxt config

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"]
-

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
 

nuxt.config.js → 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

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)
 

src/utils/env.js → 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',
 }

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,
+}