add mapping from string urls to URL objects

Author: dario-piotrowicz

apps/site/next.image.config.mjs

@@ -3,13 +3,21 @@ import {
   OPEN_NEXT_CLOUDFLARE,
 } from './next.constants.mjs';
 
+const remotePatterns = [
+  'https://avatars.githubusercontent.com/**',
+  'https://bestpractices.coreinfrastructure.org/**',
+  'https://raw.githubusercontent.com/nodejs/**',
+  'https://user-images.githubusercontent.com/**',
+  'https://website-assets.oramasearch.com/**',
+];
+
 export const getImagesConfig = () => {
   if (OPEN_NEXT_CLOUDFLARE) {
     // If we're building for the Cloudflare deployment we want to use the custom cloudflare image loader
     //
     // Important: The custom loader ignores `remotePatterns` as those are configured as allowed source origins
     //            (https://developers.cloudflare.com/images/transform-images/sources/)
-    //            in the Cloudflare dashboard itself instead (to the exact same values present in `remotePatterns` below).
+    //            in the Cloudflare dashboard itself instead (to the exact same values present in `remotePatterns` above).
     //
     return {
       loader: 'custom',
@@ -22,12 +30,6 @@ export const getImagesConfig = () => {
     unoptimized: ENABLE_STATIC_EXPORT,
     // We add it to the remote pattern for the static images we use from multiple sources
     // to be marked as safe sources (these come from Markdown files)
-    remotePatterns: [
-      new URL('https://avatars.githubusercontent.com/**'),
-      new URL('https://bestpractices.coreinfrastructure.org/**'),
-      new URL('https://raw.githubusercontent.com/nodejs/**'),
-      new URL('https://user-images.githubusercontent.com/**'),
-      new URL('https://website-assets.oramasearch.com/**'),
-    ],
+    remotePatterns: remotePatterns.map(url => new URL(url)),
   };
 };